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 つ**必要になる




## パターン 2: 引き出せる下部のメニュー
1 つ目のパターンと同様に、上部のナビゲーションの項目は、空間が足りなくなるまで、より小さな幅で再配置されます。その時点で、いくつかの項目は上部のナビゲーションからドロップダウンメニューに移動します。項目の優先順位をつけて、最も重要な項目が常に上部のナビゲーションに表示されるようにすることもできます。
最小の画面では、いくつかの項目が画面の下に残り、残りの項目は隠されます。ユーザーはメニューをフリップして開き、残りのナビゲーション項目から選択することができます。下部に残っている項目を選択することもできます。
### 利点:
- **引き出せるメニューは分かりやすい**
- **重要な項目が常に見え**、項目の優先度を決めることもできる
- 適度な間隔で**ナビゲーション項目の見やすさを維持**し、適合しない項目は自動的に隠す
### 欠点:
- 隠れているナビゲーション項目を操作するのに**手間が 1 つ**必要になる
- 一部の項目が隠れるため、**ナビゲーション項目が見つけにくくなることがある**
- 小さな画面サイズでは**コンテンツの空間が少ない**




## パターン 3: 左に隠されたメニュー
メインナビゲーションは常に左に表示されます。ただし、最小の画面サイズでは、既定でナビゲーションメニューがボタンの中に隠れています。最小の画面サイズでは、ユーザーがボタンをタップすると、ナビゲーションメニューがスライドして表示され、ナビゲーションの項目が表示されます。
### 利点:
- 左側のナビゲーションでは、上側のナビゲーションに比べて、**より多くのナビゲーション項目が表示できる可能性がある**
- 小さい画面サイズを除けば、**ほとんどの項目が常に表示される**
- **ヘッダーにはボタンが 1 つ**なので、小さな画面でコンテンツの空間が最大限に確保される
### 欠点:
- 一部の項目がドロップダウンやトグルメニューに隠れるため、**ナビゲーション項目が見つけにくくなることがある**
- 最も小さな画面サイズで、ナビゲーションメニューを開く**ボタンにユーザーが気付かないことがある**
- 隠れているナビゲーション項目を操作するのに**手間が 1 つ**必要になる




|