aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/progressive_web_apps/responsive/responsive_navigation_patterns/index.md
blob: 545d8326b2766e130704c58b4fabb146e850a8d4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
---
title: レスポンシブなナビゲーションパターン
slug: Web/Progressive_web_apps/Responsive/Responsive_navigation_patterns
tags:
  - ガイド
  - モバイル
  - ナビゲーション
  - レスポンシブデザイン
  - patterns
translation_of: Web/Progressive_web_apps/Responsive/Responsive_navigation_patterns
---
アプリのナビゲーションデザインに困っていませんか?これらのパターンを参考にしてみてください。ここでは、大きな画面と小さな画面でのナビゲーションの扱い方をいくつか紹介します。大きな画面では、上や左のナビゲーションメニューが一般的ですが、小さな画面では、画面の面積が小さくなるため、情報を表示するのに最適な方法ではないことがよくあります。そのため、すべての画面サイズにおいて、コンテンツの表示とナビゲーションのしやすさを考慮する必要があります。

## パターン 1: 先頭のトグルメニュー

このパターンでは、画面幅が狭くなるにつれて、上部のナビゲーションの項目がスペースが足りなくなるまで並び替えられます。この時、いくつかの項目は上部のナビゲーションからドロップダウンメニューに移動します。最も小さい画面では、すべてのナビゲーション項目がトグルメニューに収められ、ユーザーはトグルメニューを展開するためにタップする必要があります。

項目の優先順位をランク付けして、最も重要な項目が常に上部のナビゲーションに表示されるようにすることもできます。

### 利点:

- **ヘッダーにはボタンが 1 つ**なので、小さな画面でもコンテンツの空間が最大限に確保される
- ほとんどの画面サイズで**重要な項目は表示されたまま**で、項目の優先順位を決めることができる
- **ナビゲーション項目の視認性を維持する**適切なスペースを確保し、適合しない項目は自動的に隠すことができる

### 欠点:

- 一部の項目がドロップダウンやトグルメニューに隠れるため、**ナビゲーション項目が見つけにくくなることがある**
- 最も小さな画面サイズで、ナビゲーションメニューを開く**ボタンにユーザーが気付かないことがある**
- 隠れているナビゲーション項目を操作するのに**手間が 1 つ**必要になる

![上部のトグルメニューとコンテンツブロックの 3 × 2 レイアウトによる広い UI レイアウト](design_patterns-pattern1.gif)

![上部のトグルメニューとコンテンツブロックの 2 × 3 レイアウトによる中くらいの幅の UI レイアウト](design_patterns-pattern2.gif)

![上部のトグルメニューとスクロールする帯状のコンテンツブロックで構成された、中くらいの幅で短い UI レイアウト](design_patterns-pattern3.gif)

![上部のトグルメニューと小さなコンテンツブロックを 2 × 3 でレイアウトした狭いモバイルレイアウト](design_patterns-pattern4.gif)

## パターン 2: 引き出せる下部のメニュー

1 つ目のパターンと同様に、上部のナビゲーションの項目は、空間が足りなくなるまで、より小さな幅で再配置されます。その時点で、いくつかの項目は上部のナビゲーションからドロップダウンメニューに移動します。項目の優先順位をつけて、最も重要な項目が常に上部のナビゲーションに表示されるようにすることもできます。

最小の画面では、いくつかの項目が画面の下に残り、残りの項目は隠されます。ユーザーはメニューをフリップして開き、残りのナビゲーション項目から選択することができます。下部に残っている項目を選択することもできます。

### 利点:

- **引き出せるメニューは分かりやすい**
- **重要な項目が常に見え**、項目の優先度を決めることもできる
- 適度な間隔で**ナビゲーション項目の見やすさを維持**し、適合しない項目は自動的に隠す

### 欠点:

- 隠れているナビゲーション項目を操作するのに**手間が 1 つ**必要になる
- 一部の項目が隠れるため、**ナビゲーション項目が見つけにくくなることがある**
- 小さな画面サイズでは**コンテンツの空間が少ない**

![幅広のレイアウトで、上部に水平のメニューバーがあり、レイアウトが狭くなるとコンテンツの下部に移動する](design_patterns-pattern5.gif)

![上部に横長のメニューバーがあり、レイアウトが狭くなるとコンテンツの下部に移動する中くらいのレイアウト](design_patterns-pattern6.gif)

![上部のメニューバーをページの下部に移動し、コンテンツの邪魔にならないようにした、シンプルで短いレイアウトです。](design_patterns-pattern7.gif)

![狭い画面のモバイルレイアウトでは、上部のメニューバーがページの下部に移動し、コンテンツの邪魔にならないようになっている。また、メニューバーを上にドラッグすると、メニューオプションが表示される。](design_patterns-pattern8.gif)

## パターン 3: 左に隠されたメニュー

メインナビゲーションは常に左に表示されます。ただし、最小の画面サイズでは、既定でナビゲーションメニューがボタンの中に隠れています。最小の画面サイズでは、ユーザーがボタンをタップすると、ナビゲーションメニューがスライドして表示され、ナビゲーションの項目が表示されます。

### 利点:

- 左側のナビゲーションでは、上側のナビゲーションに比べて、**より多くのナビゲーション項目が表示できる可能性がある**
- 小さい画面サイズを除けば、**ほとんどの項目が常に表示される**
- **ヘッダーにはボタンが 1 つ**なので、小さな画面でコンテンツの空間が最大限に確保される

### 欠点:

- 一部の項目がドロップダウンやトグルメニューに隠れるため、**ナビゲーション項目が見つけにくくなることがある**
- 最も小さな画面サイズで、ナビゲーションメニューを開く**ボタンにユーザーが気付かないことがある**
- 隠れているナビゲーション項目を操作するのに**手間が 1 つ**必要になる

![左側に縦型のナビゲーションメニューを配置したワイドなUIレイアウト](design_patterns-pattern9.gif)

![左側に垂直方向のナビゲーションを配置し、コンテンツエリアを狭くした中くらいのレイアウト](design_patterns-pattern10.gif)

![左側に縦型のナビゲーションを配置し、コンテンツエリアを狭くした、中くらいの短いレイアウト](design_patterns-pattern11.gif)

![狭いモバイルレイアウトでは、左にメニューが隠れており、特別なボタンを使って画面上に引き出すことでメニューオプションが表示されます。](design_patterns-pattern12.gif)