diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-08 02:02:31 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-14 21:22:43 +0900 |
| commit | d4f5dbb570d27b6df541d4ac61fe71b8ce440259 (patch) | |
| tree | 9bdc0eb3c0c7fbd048f14d949e82534052907fd5 | |
| parent | 9cd367f0077d13b8e99da74df05ac2571037e5ff (diff) | |
| download | translated-content-d4f5dbb570d27b6df541d4ac61fe71b8ce440259.tar.gz translated-content-d4f5dbb570d27b6df541d4ac61fe71b8ce440259.tar.bz2 translated-content-d4f5dbb570d27b6df541d4ac61fe71b8ce440259.zip | |
Responsive Navigation Patterns を新規翻訳
2021/12/08 時点の英語版に基づく
| -rw-r--r-- | files/ja/web/progressive_web_apps/responsive/responsive_navigation_patterns/index.md | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/files/ja/web/progressive_web_apps/responsive/responsive_navigation_patterns/index.md b/files/ja/web/progressive_web_apps/responsive/responsive_navigation_patterns/index.md new file mode 100644 index 0000000000..545d8326b2 --- /dev/null +++ b/files/ja/web/progressive_web_apps/responsive/responsive_navigation_patterns/index.md @@ -0,0 +1,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 つ**必要になる + + + + + + + + |