アプリのナビゲーションを設計するにあたって手助けが必要ですか？ これらのパターンは最初に見るべき最適な情報です。以下に挙げるレスポンシブナビゲーションのパターンは、大小の画面上でナビゲーションをどう処理するかについて、いくつかの方法を示したものです。大きめの画面上では上部か左側にナビゲーションを配置することが一般的ですが、小さな画面上では表示領域が狭まることから、それが情報を提示する最適な方法とは限りません。そのため、あらゆる画面サイズに適したコンテンツの表示やナビゲーションの操作性を考慮する必要があります。
注: 各パターンに対応する HTML/CSS は後日追記します。
パターン 1: 上部切り替え式メニュー
このパターンでは、画面幅が狭まると、上部のナビゲーション項目は十分なスペースが確保されるまで再配置されます。その際、一部の項目は上部ナビゲーションからドロップダウンメニューへ移動します。最も小さな画面上では、すべてのナビゲーション項目は切り替え式メニューに収まり、ユーザはその切り替え式メニューをタップして広げる必要があります。
項目に優先順位を付けて、最も重要な項目が上部ナビゲーションに常に表示されるようにすることも可能でしょう。
メリット:
- 小さな画面上では、ヘッダー上にはボタンひとつだけ となり、コンテンツ領域が最大化されます
- ほとんどの画面サイズでは 重要な項目は常に表示され、開発者が項目の優先順位を決定できます
- 表示領域に応じ、収まらない項目が自動的に隠され、ナビゲーション項目の視認性が調整されます
デメリット:
- 一部の項目はドロップダウンもしくは切り替え式メニューに隠されてしまうため、ナビゲーション項目が見つけづらくなる可能性があります
- 最小画面サイズでは、ナビゲーションメニューが ボタンに含まれていることにユーザが気付かない可能性があります
- 隠しナビゲーション項目にアクセスするために もう一手間 必要となります
パターン 2: 拡大可能な下部メニュー
最初のパターンと同様に、画面幅が狭まると、上部のナビゲーション項目は十分なスペースが確保されるまで再配置されます。その際、一部の項目は上部ナビゲーションからドロップダウンメニューへ移動します。項目に優先順位を付けて、最も重要な項目が上部ナビゲーションに常に表示されるようにすることも可能でしょう。
最も小さな画面上では、一部の項目は画面の下部にとどまり、残りの項目は隠されます。ユーザは、メニューをタップして開くことで、残りのナビゲーション項目を選択できます。画面下部にとどめる項目は開発者が選択できます。
メリット:
- 拡大可能なメニューは見つけやすいです
- 重要な項目は常に表示され、開発者が項目の優先順位を決定できます
- 表示領域に応じ、収まらない項目が自動的に隠され、ナビゲーション項目の視認性が調整されます
デメリット:
- 隠しナビゲーション項目にアクセスするために もう一手間 必要となります
- 一部の項目は隠されてしまうため、ナビゲーション項目が見つけづらくなる可能性があります
- 最小画面サイズでは、コンテンツの表示領域が狭まります
Pattern 3: Left hidden menu
主要ナビゲーションは、ナビゲーションメニューが通常ボタンに隠されている最小画面サイズを除いて、常に左側にあります。最も小さな画面上では、ユーザがボタンをタップすると、ナビゲーションメニューが左からスライドしてきてナビゲーション項目が表示されます。
メリット:
- 上部ナビゲーションと比較して、左側のナビゲーションには より多くのナビゲーション項目を表示できる可能性があります
- 最小画面サイズを除いて、ほとんどの項目は常に表示されます
- 小さな画面上では、ヘッダー上にはボタンひとつだけ となり、コンテンツ領域が最大化されます
デメリット:
- 一部の項目はドロップダウンもしくは切り替え式メニューに隠されてしまうため、ナビゲーション項目が見つけづらくなる可能性があります
- 最小画面サイズでは、ナビゲーションメニューが ボタンに含まれていることにユーザが気付かない可能性があります
- 隠しナビゲーション項目にアクセスするために もう一手間 必要となります
