Nielsen Norman Groupの調査によると、ナビゲーションをメニューアイコンの中に隠すと、常に表示されているメニューに比べてタスクの完了時間が大幅に長くなり、ナビゲーションが使われる頻度も下がることがわかっています。Webサイトのメニューをどう構成するかという、たった1つのデザイン上の選択が、訪問者が必要な情報にたどり着けるか、それともサイトから離れてしまうかを直接左右するのです。
Webサイトのメニューは、訪問者がコンテンツを移動し、サービスを見つけ、最終的に顧客になるまでの流れを決めるナビゲーションの仕組みです。適切な種類を選ぶうえで重要な要素は3つあります。コンテンツの量、利用者の閲覧環境（モバイルかデスクトップか）、そして現在のツールで現実的に作れるものです。ここでは10種類のナビゲーションについて、それぞれが効果を発揮する場面と、どんなサイトに合うのかを紹介します。
1. 横型ナビゲーションバー：シンプルな構成のサイトに最適
横型ナビゲーションバーは、主要ページが5〜7ページのサイトにとって基本となる選択肢です。主要なリンクをページ上部に横一列で並べるため、訪問者はサイトで提供されているものをすぐに把握できます。サービス業、コンサルティング会社、シンプルなポートフォリオサイトは、訪問者がクリックやスクロールをせずにすべての選択肢を見渡せるため、この方法の恩恵を最も受けやすいでしょう。
BasecampとDropboxはどちらも、すっきりとした横型ナビゲーションバーを使って少数のコアページへ訪問者を案内しています。サイト構成がシンプルな場合に、このパターンが使いやすさを保つ好例です。
主要なセクションが7つ以下のサイトなら、横型バーで複雑さを増やすことなく十分に対応できます。項目が7つを超えるとバーが窮屈に感じられるようになり、特にモバイル端末ではそれが顕著になるため、代わりにドロップダウンメニューやメガメニューを検討するとよいでしょう。
2. スティッキー／固定ナビゲーション：コンテンツの多いサイトで常にアクセス可能
スティッキーナビゲーションは、訪問者がスクロールしてもメニューを表示し続けるため、別のページへ移動するためにページ上部までスクロールして戻る必要がなくなります。これが特に重要になるのは、ユーザーが長いページを読みながら、他のセクションへ常にアクセスしたいと考えるコンテンツの多いサイトです。
たとえば、Accentureのような大企業のサイトでは、長いサービス紹介ページでも常に表示されるスティッキーヘッダーがよく使われており、ユーザーはセクション間を安定して移動できます。
スティッキーメニューは通常、スクロールに合わせて変化します（縮小したり、レイアウトが変わったりすることが多いです）。一方、固定メニューは同じ位置に固定されたままです。重要なのは画面スペースへの配慮で、特にモバイルでは注意が必要です。
Smart Interface Design Patternsでは、小さな画面でスティッキーメニューがコンテンツを隠しすぎていないかをテストすること、そして必要なときにナビゲーションを表示し、ユーザーがコンテンツに集中しているときは隠すパターンを検討することを推奨しています。
3. ハンバーガーメニュー：ミニマルなレイアウト向けのモバイルファーストなナビゲーション
ハンバーガーメニューは、3本の横線を重ねたアイコンで、タップするとナビゲーションパネル全体が展開されます。メニューを1つのアイコンにまとめることで画面スペースを節約できます。モバイル端末では標準的な手法であり、見た目のミニマルさを重視するデスクトップサイトでも増えています。
たとえば、サブページの多い製品サイトでは、モバイルでハンバーガーメニューを使うことが多く、レイアウトをすっきり保ちながら、より深い階層のセクションへのアクセスも確保しています。
Nielsen Norman Groupの調査は、明確なトレードオフを示しています。ハンバーガーメニューは、常に表示されるナビゲーションに比べて見つけてもらいにくくなるのです。同社が提案する解決策は、ナビゲーションを完全に隠すよりも効果の高いハイブリッド方式です。モバイルでは重要な項目を3〜5つだけ表示し、二次的なリンクはハンバーガーアイコンの中にまとめます。
4. メガメニュー：商品数の多いサイト向けの大型ドロップダウンパネル
メガメニューは、複数列からなる大きなドロップダウンパネルを表示し、深いカテゴリー構造をひと目で見渡せるようにします。Baymardの調査によると、米国の主要ECサイトの88%がホバーで開くメガメニューを採用しています。ユーザーが1回の操作で上位カテゴリーから特定のサブカテゴリーへ移動する必要がある大規模なECサイトでは、メガメニューが主流のパターンとなっています。
AmazonやNikeなどの大手小売企業は、メガメニューを使って数千点の商品を閲覧しやすいカテゴリー階層に整理しており、買い物客は複数の分類ルートを同時に確認できます。
メガメニューは、シンプルなWebサイトのメニューに比べて構築の難易度が高くなります。Baymardの調査では、60%のサイトが推奨される300〜500msのホバー遅延を設定しておらず、ちらつきによる不快な問題が生じていることがわかっています。
モバイル対応も課題の1つです。多くのサイトビルダーでは高度なメガメニューのレイアウトに制約があるため、主要カテゴリーが20未満であれば、シンプルなドロップダウンや横型ナビゲーションのほうが適している可能性が高いでしょう。
5. サイドバーナビゲーション：アプリのような体験を実現する縦型メニュー
サイドバーナビゲーションは、サイトの左端に沿って縦に配置され、ヘッダーの横方向のスペースを使わずに複数のセクションへ常にアクセスできるようにします。このパターンは、ユーザーが特定の作業画面で長時間作業するSaaSプラットフォームやWebアプリで主流となっています。
Atlassianは自社のデザインシステムでサイドバーナビゲーションのパターンを詳しく文書化しており、Jira、Confluence、Trelloで採用しています。
5〜10ページ程度のポートフォリオサイトやサービス業のサイトであれば、よりシンプルな横型ナビゲーションバーで必要な構成を十分に実現できます。ドキュメントサイトやダッシュボード、主要項目が20以上あるWebサイトでは、ユーザーが期待する構成をサイドバーナビゲーションで提供できます。
6. ドロップダウンメニュー：中規模サイト向けの展開式サブカテゴリー
ドロップダウンメニューは、メインのナビゲーション項目の下にもう1つの階層を加え、ユーザーがホバーやクリックをするとサブカテゴリーを表示します。明確なグループに整理された8〜20個のメインナビゲーション項目を持つサイトに適しており、シンプルな横型ナビゲーションと本格的なメガメニューの中間に位置づけられます。
たとえば、コンテンツの多い組織では、メガメニューのような重く複数列の構成を使わずに、ドロップダウンで関連ページ（「研究」「プログラム」「概要」など）をまとめることがよくあります。International Women's Media Foundationも同様のアプローチを採用しており、ページ階層がそれほど深くない非営利団体に適した、ミニマルでモダンなドロップダウンを使っています。
7. フッターナビゲーション：補助リンクとコンバージョンの機会
フッターナビゲーションは、すべてのページの下部に配置される補助的なナビゲーションで、法務関連のリンクやサイトマップへのリンク、メインメニューに含めない補足ページなどをまとめる場所です。また、多くのサイト運営者が見落としているコンバージョンの機会でもあります。
大規模なサイトの多くは、フッターを「サイトインデックス」として活用し、人気のページやリソースへのリンクを掲載しています。一方、サービス業ではフッターで明確なCTA（通話の予約や見積もりの依頼など）を繰り返し表示することがよくあります。
優れたフッターは行き止まりを減らします。訪問者がページの最後までたどり着いたときに、リソースを見る、サービスを比較する、問い合わせるといった次の行動をはっきり示せるのです。
8. パンくずリスト：深い階層構造で現在地を示すナビゲーション
パンくずリストは、ユーザーがサイト構造の中のどこにいるかを正確に示すクリック可能な経路を表示し、上位カテゴリーへ簡単に戻れるようにします。3階層以上あるサイトには欠かせない要素です。
Smashing Magazineは、Microsoftのドキュメントを優れた例として取り上げています。同社のパンくずリストはホバーするとスクロール可能なサブナビゲーションのリストが開き、ユーザーは前のページに戻らなくても同じ階層のページにアクセスできます。ECプラットフォームでも、買い物客が商品カテゴリー内での経路をたどれるよう、階層ベースのパンくずリストがよく使われています。
パンくずリストは、メインのナビゲーションを置き換えるものではなく、補完するものです。サイトが2階層しかない場合、パンくずリストは価値を生まず、画面をごちゃつかせるだけです。ECストア、ドキュメントサイト、カテゴリーが入れ子になったブログでは、ユーザーの不満を減らし、検索エンジンがサイト構造を理解する助けにもなります。
9. フルスクリーンナビゲーション：クリエイティブなブランド向けの没入型メニュー
フルスクリーンナビゲーションは、起動するとビューポート全体をメニューに変え、大きなタイポグラフィや画像、アニメーションを使ってブランドに沿った体験を生み出します。従来の効率性よりも、視覚的なインパクトを優先する手法です。
このパターンは、メニューが単なる機能ではなくストーリーテリングの一部となる、クリエイティブ系のポートフォリオやスタジオ、キャンペーンサイトで最もよく見られます。
フルスクリーンメニューは、クリエイティブ系のポートフォリオ、写真関連のビジネス、ナビゲーション体験そのものがブランドアイデンティティを伝えるブランドに向いています。押さえるべきバランスはシンプルです。メニューの没入感が高いほど、基本的な使いやすさ（わかりやすいラベル、明確な閉じる操作、キーボードでのアクセシビリティ）をしっかり守る必要があります。
10. 分割ナビゲーション：異なるユーザー導線を分ける2つのメニューバー
分割ナビゲーションは、2つの異なるメニュー領域を使って種類の違うナビゲーションを分けるもので、一般的には一方に主要なコンテンツカテゴリー、もう一方にユーティリティ機能（アカウント、カート、検索）を配置します。複数の利用者層に向けたサイトや、コンテンツの閲覧とアカウント管理を両立させたいサイトに適しています。
Shopifyは分割ナビゲーションを採用し、左側に製品とリソースへのリンク、右側にログインや料金といったユーティリティ操作を配置しています。UX Toolsでは、主要ナビゲーションとユーティリティナビゲーションを分けることを、ECやSaaSプラットフォームにおける標準的なアプローチとして紹介しています。
分割ナビゲーションはレイアウトが複雑になるため、複数ブランドを扱うポートフォリオ、異なる利用者をそれぞれのセクションへ誘導する多様な関係者向けのプラットフォーム、そしてコンテンツのナビゲーションとアカウント管理などのユーティリティ機能を分ける複雑なプラットフォームに限って使うのが最適です。
自分のサイトに合ったWebサイトのメニューの選び方
まずはページ数から考えましょう。主要セクションが7つ以下なら、横型ナビゲーションバーを使います。明確なグループ分けができる8〜20ページなら、ドロップダウンメニューを使います。20ページ以上ある場合、3階層以上の深い階層構造がある場合、またはECサイトの場合は、メガメニューが必要になります。モバイルでは、基本的にハンバーガーメニューを使い、スペースに余裕があれば主要カテゴリーを3〜5つ表示するように計画しましょう。
次に、モバイルからのアクセス状況を確認しましょう。Statistaのデータによると、近年は世界のWebトラフィックの大半をモバイル端末が占めています。デスクトップでどの種類のメニューを選ぶにしても、モバイルではそれに合わせてよく考えられた体験が必要です。
最後に、現実的に作れるものを検討しましょう。スティッキーナビゲーションや横型メニューは、ほぼすべてのビルダーで標準的に作れます。メガメニューやフルスクリーンナビゲーションは、カスタムコードが必要になることが多いでしょう。Lovableのテンプレートライブラリには、出発点として使えるナビゲーション構成が含まれています。また、チャットモードでは、実現したいメニューの動きを具体的に説明し、イメージどおりになるまで会話を通じて改善を重ねられます。ビジュアル編集ではナビゲーション要素を直接クリックしてリアルタイムに調整でき、GitHub連携によってすべてのコードを自分のものとして所有できます。
サイトに合ったメニューの選び方
適切なWebサイトメニューは、訪問者が必要な情報を最小限の手間で見つけられるようにするという、具体的な課題を解決します。調査に基づくガイドラインによると、5〜7ページ程度のコンサルティングサイトには、すっきりとした横並びのナビゲーションバーが最も効果的です。ナビゲーションが常に見えていることで、タスク完了率が大きく向上するためです。オンラインストアなら、メガメニューを検討しましょう。米国の主要ECサイトの88%が、膨大な商品カタログを整理するためにホバー型のメガメニューを採用しています。クリエイティブ系のポートフォリオなら、ブランドのストーリーを伝える役割も兼ねたフルスクリーンのメニューが向いているかもしれません。
従来のツールでもこうしたメニューパターンはどれも作れますが、すぐにデメリットが見えてきます。開発者や制作会社に依頼すると、ブレークポイントごとにメガメニューを正しく動作させ、ちらつかないホバー遅延や操作しやすいモバイルのタップ領域を実現するまでに、数日から数週間（そして数千ドル）の見積もりを提示されることもあります。テンプレートを使えば時間は短縮できますが、思うように変更できないナビゲーションに縛られてしまうことも少なくありません。固定ヘッダーがコンテンツに重なる、ドロップダウンの余白がずれている、モバイルメニューが実際のページ階層に対応できない、といった問題です。
こうした落とし穴にはまらずにオリジナルのナビゲーションを作りたいなら、Lovableがおすすめです。Lovableは開発者にも非開発者にも使えるAIアプリビルダーで、普段の言葉で指示しながら改善を重ね、UIを視覚的に調整できます。たとえば、次のようなナビゲーションを実際に公開できます：
- 3〜5個のリンクを常に表示し、それ以外をハンバーガーメニューのドロワーにまとめたハイブリッド型のモバイルヘッダー。
- 20以上のカテゴリーを、わかりやすい見出し付きの列に分類した商品カタログ型のメガメニュー。
- ポートフォリオの雰囲気に合わせて、大きな文字とメディアを使ったクリエイティブなフルスクリーンメニュー。
手早く始めるなら、まずWebサイトのテンプレートをチェックしてみましょう。そのうえでチャットモードで思いどおりのメニューの動作を説明し、ビジュアル編集で余白やラベル、ブレークポイントを納得がいくまで調整します。
