ナビゲーションデザインパターン: WebとモバイルのためのメニューレイアウトTop 9選

ナビゲーションはメニューではない。それは「何がどこにあるか」についての約束だ。うまく機能すれば、ユーザーは何も考えずにプロダクトを移動できる。失敗すれば、去っていく。

ユーザーはナビゲーションを読まない。スキャンして、信頼して、失敗したときにだけ気づく。

これが本当のデザイン問題だ。ナビゲーションは祝うべき機能ではなく、見えなくすべきインフラだ。情報アーキテクチャやユーザーのコンテキストに合わないパターンを選ぶと、連鎖反応が起きる。セクションが見つからない、自分の位置がわからない、プロダクトの構造を理解できない。

9つのパターンでほぼすべてのケースをカバーできる。以下では各パターンを直接解説する。何が得意で、どこで壊れ、いつ使うべきかを。

---

ナビゲーションの本当の役割

ナビゲーションはユーザーへの一つの問いに答える: ここからどこへ行けるか? 明確に答えれば動く。探させれば去る。

ナビゲーションの構造的役割は、情報アーキテクチャをユーザーが信頼できるシステムとして表現することだ。それは一貫性、安定性、そしてプロダクトの実態を正直に映すことを意味する。ページ間でナビゲーションが変わる、URLと異なるラベルを表示する、一次経路を二次経路の下に埋め込む、これらはドロップダウンアニメーションがどれほど磨かれていてもデザインの失敗だ。Amazon が数億の商品にわたってすべてのページで同じプライマリーナビゲーションを維持しているのは、まさにこのためだ。

実践的な意味は、ナビゲーションパターンを二つのインプットに基づいて選ぶということだ: IA の深さと広さ、そして人々がプロダクトを使うコンテキスト。それ以外のすべて、ビジュアルスタイル、アニメーション、色は、その二つの決定に従う。

---

トップナビゲーションバー

水平トップバーが Web のデフォルトであることには理由がある。デスクトップスケールでは、ヘッダーに5〜7の主要セクションを収め、常に表示し、人々の読み方（左から右、上から下）を反映する。

Neon (neon.tech) はこれのクリーンなバージョンを実行している。左にワードマーク、中央にプライマリーナビリンク、右にサインインと CTA ボタン。隠れたものもなく、ネストもなく、認知的オーバーヘッドもない。最良の状態では、トップバーはサイト構造のすべてを一行で伝え、インタラクションを必要としない。

失敗パターンは詰め込みだ。9つのリンク、2つのドロップダウン、ユーティリティメニュー、検索アイコンを持つトップバーはナビゲーションパターンではなく、パニック発作だ。このパターンには約6〜7アイテムのハード上限があり、それを超えたら再構成が必要になる。

トップバーは計画されたモバイルフォールバックも必要とする。小画面では水平レイアウトは行き場がない。デザイン時に小ビューポートのエクスペリエンスを決めなければ、後付けでハンバーガーメニューを追加することになり、新たな問題を引き起こす。

---

ハンバーガーメニュー

ハンバーガーメニュー（3本の積み重ねたライン、タップでドロワーまたはオーバーレイを開く）は、ナビゲーションを一つ余分なインタラクションの背後に隠す。画面のスペースを節約する。同時に、プロダクトのすべてのセクションの発見性を低下させる。

この点の研究に曖昧さはない。NNGroup は、モバイルでのタブナビゲーションがハンバーガーメニューを発見性とタスク完了率で一貫して上回ることを発見した。ナビゲーションを隠すと、人々はそれを使わなくなる。ハンバーガーの後ろにあるアイテムは優先度が低いと認識される。視覚的にそうなっているからだ。

それでもハンバーガーが間違いというわけではない。トレードオフなのだ。深く、アクセス頻度が低いセクションを持つサイトには、このトレードオフは許容できる。毎日開くアプリには、通常は失敗だ。

Instagram はプライマリーナビゲーションをハンバーガーの後ろに置こうとしたが方針を撤回し、代わりにコアセクションをボトムタブバーに移動した。教訓は明確だ: ハンバーガーは二次経路、設定、頻度の低いデスティネーションに使え。誰かがプロダクトを開いた理由を定義するアクションには絶対に使うな。

---

パーシステントサイドバー

パーシステントサイドバーは、画面左側にフルナビゲーションカラムを固定し、ユーザーがコンテンツをスクロールしている間も表示され続ける。ダッシュボード、デザインツール、深いドキュメントにおいて支配的なパターンだ。空間的な永続性こそが機能だからだ。

Tailwind CSS のドキュメントはこれを完璧に使っている。左サイドバーはドキュメントのすべてのセクションをグループ化してスクロール可能な形で保持し、コンテンツが残りの幅を占める。ユーザーは常に自分の位置、行ける場所、情報空間全体の構成を把握している。その空間的認識こそが、人々が常にセクション間を行き来する深いリファレンスマテリアルの核心だ。

Slack、Notion、Figma はすべて同じ理由でアプリスケールでパーシステントサイドバーを使用している。サイドバーはマップだ。それを削除すると、ユーザーはナビゲーションアクションのたびにメンタルモデルを再構築しなければならなくなる。払わせるべきでないコストだ。

コストは水平方向の画面スペースだ。13インチのラップトップでは、パーシステントサイドバーはコンテンツエリアの250〜300ピクセルを使用する。モバイルでは全くスペースがない。

レスポンシブサイドバーは小画面ではドロワーまたはハンバーガーに収縮し、避けようとしていた同じ発見性の問題を再導入する。最初からナビゲーションの一貫性を保つトークンに紐付けるか、後でパッチを当てることになる。

---

ボトムタブバー

ボトムタブバーは3〜5のアイコンをモバイル画面の下部、親指が届く範囲に直接固定する。ネイティブモバイルアプリの標準であり、2026年現在、毎日スマートフォンで開くあらゆる Web プロダクトのデフォルトだ。

Instagram、Spotify、YouTube はすべてプライマリーモバイルナビゲーションにこのパターンを使用している。偶然の一致ではない。ボトムバーが存在するのは、スマートフォン画面の上部が片手の親指で届く最も難しいエリアであり、ナビゲーションは常にタップされるからだ。プライマリーデスティネーションを下部に移動することで、数千の日々のセッションにわたって積み重なる形で物理的な努力を減らす。

5アイテムがハード上限だ。5を超えると、アイコンが縮小しラベルが切れる。プロダクトに5つ以上のプライマリーセクションがある場合、それはナビゲーション問題に偽装した情報アーキテクチャ問題だ。パターンを選ぶ前に再構成せよ。

2026年、ボトムタブバーはモバイルで少なくとも毎日開くあらゆるプロダクトのデフォルトだ。コンシューマーモバイルプロダクトまたはモバイルファーストの progressive web app を設計していてボトムバーを使っていないなら、使わない具体的な理由が必要だ。「デスクトップファーストで設計した」は理由にならない。

---

メガメニュー

メガメニューは単一のトップナビゲーションアイテムを、リンク、カテゴリ、そしてときにはプレビュータイルを持つ幅広のマルチカラムパネルに展開する。使いにくくなることなく単純なドロップダウンに収まらない大規模カタログと複雑な階層を持つサイトのために構築されている。

Amazon はその「All」メニューの下でこの極端なバージョンを実行している。サブカテゴリを持つ数十のカテゴリが、カラムとグループに整理され、一つのパネルで全て見える。このパターンはカタログのプレッシャー下で機能する。階層を複数クリックして下ることなく深さを表面化するからだ。すべてが一つのビューでスキャン可能だ。

問題は、メガメニューが設計上デスクトップ限定のパターンであることだ。マルチカラムのドロップダウンパネルはモバイルに適用できない。これを使用するサイトは小画面のための完全に別のナビゲーション戦略が必要になり、デザインとメンテナンスのサーフェスエリアが倍になる。

メガメニューは浅いサイトでも失敗する。12ページではメガメニューは正当化されない。このパターンは、将来の成長への楽観主義ではなく、実際のコンテンツの深さを通じて獲得する必要がある複雑さを示唆する。

---

ブレッドクラム

ブレッドクラムはホームページから現在のページへのパスを表示する: Home > CSS > Grid。プライマリーナビゲーションではない。オリエンテーションナビゲーションであり、精確な機能を果たす。

MDN はすべてのリファレンスページでブレッドクラムを使用している。Google 検索から CSS grid ドキュメントにランディングすると、ブレッドクラムトレイルは即座に、このページが CSS の中にあり、CSS は References の中にあることを伝える。そのコンテキストは3レベルの階層を、解析にインタラクションを必要としない一行に圧縮する。

ブレッドクラムは平坦なサイトでは役に立たない。プロダクト全体が2レベルの深さなら、ブレッドクラムはオリエンテーション価値を提供せずに視覚的な混乱を加える。ドキュメントサイト、Home > Men > Jackets > Waterproof のような e-commerce 階層、ユーザーが定期的に検索から深い位置にランディングするサイトでその存在価値を発揮する。

他のパターンと組み合わせて使用するものであり、置き換えるものではない。ブレッドクラムはコンテンツの上に配置され、トップバーまたはサイドバーを補完する。Web と UI デザインのさらなる詳細解説においても同じロジックが適用される: 二次ナビゲーション要素はプライマリーパターンをサポートすべきであり、競合すべきではない。

---

コマンドパレット

コマンドパレットはキーボードトリガーのオーバーレイであり、通常 Cmd+K または Ctrl+K で呼び出され、テキスト入力を受け付けてランク付けされたアクション、ナビゲーションターゲット、検索結果を返す。Linear、Raycast、Slack、Figma はすべてこれをファーストクラスのナビゲーションサーフェスとして提供している。

2026年、コマンドパレットはパワーユーザーのテクニックから本格的なプロダクティビティソフトウェアのプライマリーナビゲーションメカニズムに卒業した。Linear の Cmd+K で2秒以内に任意のイシュー、プロジェクト、またはワークスペースアクションに到達できる。Raycast はほぼ完全にこのパターンを中心に構築されている。これらのプロダクトは、タイプされた意図をメニュー階層よりも直接的なパスとして扱う。キーボード習慣のある人々にとって、実際にそうだからだ。

失敗パターンは不可視性だ。ショートカットの存在を知らないユーザーは、探索を通じて発見することは決してない。コマンドパレットは、初回ユーザーやキーボードファーストの習慣を持たない人々には見えるナビゲーションの代替にはなれない。すべてのナビゲーションを Cmd+K の後ろに隠すプロダクトは、すべての新規ユーザーを立ち往生させる。

正しい使用法は補完であり、置き換えではない。サイドバーやトップバーと並行してコマンドパレットを実行せよ。キーボードネイティブユーザーにはメニューを完全にスキップさせよ。

それ以外の人には視覚的にナビゲートさせよ。両方のパスが存在する必要がある。

---

スティッキーヘッダーとシュリンキングヘッダー

スティッキーヘッダーは、ユーザーがスクロールしている間もビューポートの上部に固定されたままだ。シュリンキングヘッダーも同じことをするが、ユーザーがスクロールの閾値を超えた後に高さを縮小し、ナビゲーションへのアクセスを犠牲にせずに垂直スペースを取り戻す。

両パターンとも、上部へのスクロールバックを必要とせずに長いページでナビゲーションをアクセス可能に保つ。コンテンツが重いページでは、これは本物のユーザビリティ改善だ。GitHub はリポジトリページでスティッキーヘッダーを使用し、イシュー、コード、ディスカッションをスクロールしている間もプライマリーナビゲーション、検索、リポジトリコンテキストが常に表示される。

コストは垂直方向の画面スペースだ。60〜70ピクセルのスティッキーヘッダーは、すべてのスクロール位置でその高さを確保する。768ピクセル高のタブレットでは、ビューポートの約10パーセントがナビゲーションに永続的に占有される。シュリンキングヘッダーはスクロール後に約40ピクセルに縮小することでその一部を取り戻すが、壊れているのではなく意図的に感じさせるには慎重な実装が必要だ。

ユーザーがすぐに下部に到達する短いページではスティッキーヘッダーを避けよ。このパターンは、上部に戻るために大幅なスクロールが必要な長いコンテンツ密度の高いページでその価値を発揮する。

---

ファットフッター

ファットフッターは、二次ナビゲーション、リンクカテゴリ、法的ページ、連絡先情報を保持する幅広のマルチカラムフッターだ。プライマリーナビゲーションではない。必要なものを見つけずにメインコンテンツをスクロールしたユーザーへの二度目のチャンスだ。

Tailwind CSS、Stripe、そしてほとんどの SaaS マーケティングサイトは、プロダクトリンク、ドキュメント、会社ページ、法的情報、ソーシャルリンクをカバーする4〜6カラムのファットフッターを使用している。メインコンテンツのエクスペリエンス中はビューポートの高さにコストをかけず、特定のものを探して下部に到達したユーザーに役立つマップを提供する。

ファットフッターはライブナビゲーションよりも SEO において重要だ。ファットフッターのすべてのリンクはクローラブルパスだ。検索エンジンがサイト上の二次および三次ページを発見する主要な方法の一つだ。純粋なユーザビリティの観点から、ほとんどのユーザーはフッターまでスクロールしないが、する人たちは意図的に探している。

ログイン済みプロダクトエクスペリエンスの内部ではファットフッターを省略せよ。Notion はエディターの内部にマーケティングフッターを表示しない。このパターンは、匿名ユーザーと新規ユーザーが自由にブラウズするマーケティングサイトとドキュメントハブに属する。

---

正しいパターンの選び方

正しいナビゲーションパターンは二つのインプットから導かれる: 情報アーキテクチャの深さと、人々がプロダクトを使用するコンテキストだ。それ以外はすべてその二つの要因の結果だ。

パターンを組み合わせることは普通であり、期待されている。ほとんどの本格的なプロダクトは2〜3を使用している。Tailwind CSS ドキュメントはサイトレベルのナビゲーションにトップバー、ドキュメントナビゲーションにパーシステントサイドバー、ページレベルのオリエンテーションにブレッドクラムを使用している。その3つのパターンは重なることなく、ナビゲーション階層の3つの明確なレベルを同時に処理する。

Brainy は、デザイナーが実際にリリースされる作業についてより鋭い判断をより速く下せるよう支援する。クリエイターのために何を構築しているか見てみよう。

---

ユーザビリティを静かに殺すナビゲーションの失敗

プライマリーアクションをハンバーガーメニューに隠す。 ユーザーが毎日機能を必要とするなら、余分なタップの後ろに置いてはならない。ハンバーガー自体のクリックスルー率を測定せよ。30パーセント未満なら、内部のパスはほとんどのユーザーに見えていない。

サーフェス間での一貫性のないラベリング。 ダッシュボードの「Insights」、オンボーディングメールの「Reports」、ヘルプドキュメントの「Analytics」、すべて同じ目的地を指している。ナビゲーションは語彙だ。すべての同義語はユーザーのメンタルモデルにおける疑問符だ。

現在の位置のアクティブ状態がない。 ユーザーは自分の位置を知る必要がある。現在のナビアイテムのアクティブ状態は利用可能な最も基本的なオリエンテーションシグナルだ。それを省くとユーザーは URL を読まなければならなくなる。それはプロダクトに設計した失敗モードだ。

ページまたはセクションごとに変わるナビゲーション。 サイドバーがユーザーがいるセクションに基づいて再配置されるなら、彼らが構築した空間的記憶を壊している。ナビゲーションは固定されたマップであるべきだ。マップが位置に基づいて変わるプロダクトはユーザーの自信を構築しない、破壊する。

過剰なネスト。 3レベル深いドロップダウンはほぼ常に、UI で誤って表面化した情報アーキテクチャ問題だ。まず構造を平坦化せよ。ネストされたメニューはスキャンが遅く、タッチで使用することは不可能であり、ホバーで開いたままにするには正確なマウス操作が必要だ。

スキャンのために構築されたレイアウトパターンにおいても同じ原則が適用される: 構造とオリエンテーションは装飾より先に来る。オリエンテーションに失敗するナビゲーションは、最良でも装飾、最悪では摩擦だ。

---

FAQ

Web で最も一般的に使用されているナビゲーションパターンは何か?

水平トップナビゲーションバーがデスクトップサイトで最も一般的なパターンだ。モバイルアプリと日常使用プロダクトでは、ボトムタブバーが標準となった。ほとんどの実際のプロダクトは両方を使用している。一貫した情報アーキテクチャの上で、デスクトップでトップバー、モバイルでボトムバーを。

ハンバーガーメニューはいつ使うべきか?

ハンバーガーメニューはモバイルでの二次または頻度の低いナビゲーションに使え、プライマリーセクションには使わない。ユーザーがプロダクトのコアなことをするためにハンバーガーを開かなければならないなら、アーキテクチャには再構成が必要だ。より良いアイコンではなく。

ナビゲーションバーにはいくつのアイテムがあるべきか?

水平トップバーの許容上限は5〜7アイテム、モバイルのボトムタブバーでは5だ。それを超えるとパターンが失敗し始め、アイテムが密集し、ラベルが切れ、スキャンのコストが得られるものを上回る。

一つのサイトで複数のナビゲーションパターンを使用できるか?

できるだけでなく、すべきだ。ほとんどの実際のプロダクトは、ナビゲーション階層の異なるレベルを処理する2〜3のパターンを使用している。ドキュメントサイトは一般的に、サイトナビゲーションのトップバー、セクションナビゲーションのパーシステントサイドバー、ページ位置のブレッドクラムを組み合わせる。

各パターンは重なることなく明確なレイヤーを処理する。失敗は、協力するのではなく競合する複数のパターンを使用することだ。

ナビゲーションは SEO にどう影響するか?

トップバー、サイドバー、ファットフッターのリンクはページオーソリティを渡し、検索エンジンがページを発見してインデックスする手助けをする。ブレッドクラムはパス情報を検索結果に直接表示できる構造化データを追加する。ナビゲーションは SEO アーキテクチャの一部であり、後からパッチを当てるのではなく、初日からそのように扱うべきだ。

---

人々に探させるのをやめろ

ナビゲーションは機能するときは見えず、機能しないときは腹立たしい。目標は美しいメニューではない。目標は、摩擦の一瞬もなく到着し、方向を定め、移動し、戻るユーザーだ。

9つのパターンでほぼすべてをカバーできる: マーケティングサイトと広範なリファレンスのためのトップバー、深いツールとドキュメントのためのパーシステントサイドバー、日常使用モバイルのためのボトムタブバー、カタログの深さのためのメガメニュー、階層的オリエンテーションのためのブレッドクラム、スピードファーストのプロダクティビティツールのためのコマンドパレット、長文コンテンツのためのスティッキーヘッダー、二次経路のフォールバックとしてのハンバーガー、マーケティングサイトの二度目のチャンスマップとしてのファットフッター。

IA の深さと使用コンテキストに基づいて選べ。プロダクトに複数レベルのナビゲーション階層がある場合は2〜3のパターンを重ねよ。静かに積み重なる失敗を避けよ: 隠れたプライマリーアクション、一貫性のないラベル、欠けたアクティブ状態、変わるナビ構造、過剰なネスト。

Brainy Papers でより多くの Web と UI デザインの詳細解説を探求するか、Brainy クリエイターコミュニティとともに構築するに参加して、基礎を正しく理解することを重視する200万人以上のデザイナーと一緒に技術を磨こう。