アプリのナビゲーションを設計するにあたって手助けが必要ですか? これらのパターンは最初に見るべき最適な情報です。以下に挙げるレスポンシブナビゲーションのパターンは、大小の画面上でナビゲーションをどう処理するかについて、いくつかの方法を示したものです。大きめの画面上では上部か左側にナビゲーションを配置することが一般的ですが、小さな画面上では表示領域が狭まることから、それが情報を提示する最適な方法とは限りません。そのため、あらゆる画面サイズに適したコンテンツの表示やナビゲーションの操作性を考慮する必要があります。

注: 各パターンに対応する HTML/CSS は後日追記します。

パターン 1: 上部切り替え式メニュー

このパターンでは、画面幅が狭まると、上部のナビゲーション項目は十分なスペースが確保されるまで再配置されます。その際、一部の項目は上部ナビゲーションからドロップダウンメニューへ移動します。最も小さな画面上では、すべてのナビゲーション項目は切り替え式メニューに収まり、ユーザはその切り替え式メニューをタップして広げる必要があります。

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

メリット:

  • 小さな画面上では、ヘッダー上にはボタンひとつだけ となり、コンテンツ領域が最大化されます
  • ほとんどの画面サイズでは 重要な項目は常に表示され、開発者が項目の優先順位を決定できます
  • 表示領域に応じ、収まらない項目が自動的に隠され、ナビゲーション項目の視認性が調整されます

デメリット:

  • 一部の項目はドロップダウンもしくは切り替え式メニューに隠されてしまうため、ナビゲーション項目が見つけづらくなる可能性があります
  • 最小画面サイズでは、ナビゲーションメニューが ボタンに含まれていることにユーザが気付かない可能性があります
  • 隠しナビゲーション項目にアクセスするために もう一手間 必要となります

上部切り替えメニューと 2 行 3 列のコンテンツブロックレイアウトを備えた、幅の広い UI レイアウト

上部切り替えメニューと 3 行 2 列のコンテンツブロックレイアウトを備えた、中間幅の UI レイアウト

上部切り替えメニューとスクロール領域内にコンテンツブロックを備えた、中間幅かつ高さが短い UI レイアウト

上部切り替えメニューとより小さなコンテンツブロックを備えた、幅の狭いモバイル向けレイアウト

パターン 2: 拡大可能な下部メニュー

最初のパターンと同様に、画面幅が狭まると、上部のナビゲーション項目は十分なスペースが確保されるまで再配置されます。その際、一部の項目は上部ナビゲーションからドロップダウンメニューへ移動します。項目に優先順位を付けて、最も重要な項目が上部ナビゲーションに常に表示されるようにすることも可能でしょう。

最も小さな画面上では、一部の項目は画面の下部にとどまり、残りの項目は隠されます。ユーザは、メニューをタップして開くことで、残りのナビゲーション項目を選択できます。画面下部にとどめる項目は開発者が選択できます。

メリット:

  • 拡大可能なメニューは見つけやすいです
  • 重要な項目は常に表示され、開発者が項目の優先順位を決定できます
  • 表示領域に応じ、収まらない項目が自動的に隠され、ナビゲーション項目の視認性が調整されます

デメリット:

  • 隠しナビゲーション項目にアクセスするために もう一手間 必要となります
  • 一部の項目は隠されてしまうため、ナビゲーション項目が見つけづらくなる可能性があります
  • 最小画面サイズでは、コンテンツの表示領域が狭まります

レイアウトが狭くなった場合はコンテンツの下部へ移動する、上部水平メニューバーを備えた幅の広いレイアウト

レイアウトが狭くなった場合はコンテンツの下部へ移動する、上部水平メニューバーを備えた中間幅のレイアウト

上部メニューバーがページの下部に移動し、さほどコンテンツの邪魔にならないよう配慮された、中間幅かつ高さが短いレイアウト

上部メニューバーがページの下部に移動し、さほどコンテンツの邪魔にならないよう配慮された、幅の狭いモバイル向けレイアウト。上向きにドラッグすることで追加のメニュー項目が表示されます

Pattern 3: Left hidden menu

主要ナビゲーションは、ナビゲーションメニューが通常ボタンに隠されている最小画面サイズを除いて、常に左側にあります。最も小さな画面上では、ユーザがボタンをタップすると、ナビゲーションメニューが左からスライドしてきてナビゲーション項目が表示されます。

メリット:

  • 上部ナビゲーションと比較して、左側のナビゲーションには より多くのナビゲーション項目を表示できる可能性があります
  • 最小画面サイズを除いて、ほとんどの項目は常に表示されます
  • 小さな画面上では、ヘッダー上にはボタンひとつだけ となり、コンテンツ領域が最大化されます

デメリット:

  • 一部の項目はドロップダウンもしくは切り替え式メニューに隠されてしまうため、ナビゲーション項目が見つけづらくなる可能性があります
  • 最小画面サイズでは、ナビゲーションメニューが ボタンに含まれていることにユーザが気付かない可能性があります
  • 隠しナビゲーション項目にアクセスするために もう一手間 必要となります

左側に垂直ナビゲーションメニューを備えた、幅の広い UI レイアウト

左側に垂直ナビゲーションメニューを備え、コンテンツエリアを狭めた、中間幅のレイアウト

左側に垂直ナビゲーションメニューを備え、コンテンツエリアを狭めた、中間幅かつ高さが短い UI レイアウト

左側に隠しメニューを備えた、幅の狭いモバイル向けレイアウト。特別なボタンを使って画面中央へドラッグすることでメニュー項目が表示されます

ドキュメントのタグと貢献者

 このページの貢献者: kohei.yoshino
 最終更新者: kohei.yoshino,