見積もり
グローバルメニューとは？本当に参考になるデザイン事例と作り方のポイント【2026年最新版】
Webサイトの制作やリニューアルを進めるなかで、次のような悩みはないでしょうか。
- グローバルメニューのデザインや配置が決まらない…
- 良いコンテンツを作っても、なぜかユーザーの離脱率が高い…
- グローバルメニューがSEOにどう影響するのか知りたい…
Webサイトの全ページに表示される「グローバルメニュー」は、ユーザーを目的のページへ導く重要なパーツです。グローバルメニューの設計がしっかりしていないと、せっかくの良いコンテンツも見てもらえず、機会損失につながることも少なくありません。
本記事では、グローバルメニューの基本から、役割・SEOへの影響・設計ポイント・デザイン事例・WordPressでの設定方法まで、網羅的に解説します。
この記事を読むことで、自社サイトに合ったグローバルメニューの設計方法がわかり、ユーザーにも検索エンジンにも評価されるサイト改善のヒントが得られます。
Webサイト制作事例をまとめました
WEBサイト制作・リニューアル事例集
この資料では以下の内容を紹介しています。
「WEBサイト新規制作事例集」
「WEBサイトリニューアル事例集」
無料でダウンロードする
＼ホームページ制作料金をシミュレーションできます！／
【簡単60秒】とりあえず制作費用を見積もってみたい方はこちら
グローバルメニューとは？（グローバルナビゲーションとの違い）
グローバルメニューとは、Webサイトのすべてのページに共通して設置される、主要コンテンツへの案内リンクメニューのことです。サイトを訪れたユーザーが迷わないように導く、サイト全体の「地図」のような役割を担います。
一般的にPCサイトでは画面の上部、スマホサイトではハンバーガーメニュー（三本線のアイコン）の中に格納されていることが多く、ユーザーがサイト内を回遊するための土台です。
また、グローバルメニューの正式名称は統一されておらず、制作者や文脈によってさまざまな呼び方をされます。
- グローバルナビゲーション
- グローバルナビ
- ヘッダーメニュー
- メインメニュー
「ヘッダー」はサイト上部の領域全体を指す言葉で、その中にロゴやグローバルメニュー、お問い合わせボタンなどが含まれる関係性です。本記事では、主に「グローバルメニュー」という言葉で統一して解説します。
参考記事：ヘッダーの参考事例やデザインのポイントはこちら
グローバルメニューを含む「ヘッダー」全体の設計ポイントや事例はこちらをご覧ください。
現役デザイナーが解説！ヘッダーデザインの参考事例を総まとめ
グローバルメニューの役割と設置するメリット
グローバルメニューは、単なるデザインの一部やリンク集ではありません。サイトを訪れたユーザーの満足度を左右し、回遊率の向上や離脱率の低下に直結する、ユーザー体験（UX）の要となるパーツです。
適切に設計されたグローバルメニューは、ユーザーをスムーズに目的の情報へ導き、ビジネスの成果にも大きく貢献します。以下では、具体的な役割を3つのポイントに分けて解説します。
欲しい情報に迷わずたどり着ける
グローバルメニューの主な役割は、ユーザーが探している情報へ迷わず到達できるように支援することです。
ユーザーは「サービス内容を知りたい」「会社概要を確認したい」「問い合わせをしたい」など、何らかの目的をもってサイトを訪れます。もしグローバルメニューが存在しない場合、ユーザーは膨大なページの中から目的の情報を自力で探す必要があり、途中で離脱してしまうケースも少なくありません。
しかし、グローバルメニューが適切に設置されていれば、初めて訪れたユーザーでも「次にどこを見ればよいか」を直感的に判断が可能です。クリックの迷いが減ることで、ストレスなくサイトを閲覧できるようになります。
サイト全体の構造がひと目でわかる
グローバルメニューは、サイトの全体像をユーザーにひと目で伝えることも1つの役割です。
初めて訪れた店舗でフロアガイドを確認するように、ユーザーはグローバルメニューを見ることで「このサイトにはサービス紹介や導入事例、採用情報があるのか」と瞬時に把握できます。
グローバルメニューで主要なコンテンツを整理しておくことで、「自分の求める情報がここにありそうだ」という期待感が生まれ、企業への信頼感にもつながります。
どのページにいるかを明確にできる
Webサイトは現実の店舗と違い、物理的な位置感覚がないため、ユーザーは複数のページを移動するうちに「今、自分はサイトのどの階層にいるのだろう？」と迷子になってしまうことが少なくありません。
このとき役立つのがグローバルメニューで、閲覧中のページのメニューの色を変えたり、下線を引いたりする「カレント表示」によって、サイト内での現在地をユーザーに知らせることが可能です。
現在地が明確になると、ユーザーは「あとでまたこのページに戻ろう」と考えたり、関連ページへ自発的に移動したりしやすくなります。現在地がわかることで行動の選択肢が広がり、サイト内での迷子を防ぐ心理的な安心感にもつながります。こうした「現在地の明示」もグローバルメニューが担う重要な機能の1つです。
グローバルメニューがSEOに与える影響
適切に設計されたグローバルメニューは、ユーザーの利便性向上だけでなく、SEO（検索エンジン最適化）にも寄与します。その影響は「直接的な効果」と「間接的な効果」の2つに分けられます。
グローバルメニューが検索エンジンに与える直接的な効果として、サイト構造を正しく伝えやすくなる点が挙げられます。
-
クローラビリティの向上
グローバルメニューが全ページに設置されていると、検索エンジンのクローラーがサイト内の主要ページを効率的に発見・巡回できるようになります。結果として、サイト全体の構造が正しくインデックスされやすくなります。
-
重要なページへの内部リンク
グローバルメニューに含めたページには、全ページからリンクが張られる形になります。「このページは重要だ」というシグナルを検索エンジンに伝えられるため、コンバージョンに直結する「サービス紹介」や「料金プラン」などをメニューに設置することはSEO上の効果も期待できます。
間接的な効果としては、ユーザー体験（UX）の向上を通じた検索評価への貢献が挙げられます。
-
回遊率の向上・直帰率の低下
使いやすいグローバルメニューがあると、ユーザーは次々とさまざまなページを閲覧しやすくなります。また、目的のページに迷わずたどり着けるため、最初のページだけ見て離脱することも減ります。
-
滞在時間の増加
サイト内をスムーズに移動できると、結果的にユーザーがサイトに滞在する時間が長くなります。
このようにグローバルメニューは、テクニカルな面とユーザー満足度の両面からSEOに貢献する重要な要素です。
貴社のホームページ制作の費用がいくらかかるか
60秒で診断してみませんか？
全国5,000社の見積もりから算出した、
Web幹事オリジナルの料金シミュレーターを無料でご利用いただけます。
「社内稟議の前に予算を決めたいけれど相場がわからない」
「事前に取った見積額の妥当性に不安がある」
という方は、ぜひお試しください。
まずは最初の質問です
ホームページ制作は初めてですか？
はい
いいえ
グローバルメニューのデザイン参考事例集【PC・スマホ別】
ここからは、グローバルメニューの具体的なデザイン事例を「PC」と「スマホ」に分けてご紹介します。
自社サイトの種類やターゲットユーザー、ブランドイメージに合わせた参考としてご活用ください。
PC：画面上部固定・サイド固定のデザイン事例
PCサイトのグローバルメニューは、大きく「画面上部固定」と「画面サイド固定」の2つのタイプに分けられます。
画面上部固定は、多くのWebサイトで採用されているスタンダードな配置です。ユーザーが慣れ親しんだ配置のため、初めて訪れた場合でも迷いなく操作できる点がメリットです。
画面上部固定の事例
サイボウズ
白を基調としたシンプルなデザインで、メニューにカーソルを合わせると、関連コンテンツの写真付きで詳細が表示される「メガメニュー」形式を採用。コンテンツの内容が視覚的にわかりやすく、ユーザーが目的の情報を探しやすい工夫がされています。
このサイトを見る
ワーナーブラザーズ
ワーナーブラザーズのようなサイトを制作できる会社を紹介してもらう
閲覧中のページには色のついた下線が引かれるため、ユーザーがサイト内での現在地を直感的に把握しやすくなっています。
このサイトを見る
プロレド・パートナーズ
プロレド・パートナーズのようなサイトを制作できる会社を紹介してもらう
サイト全体で配色に統一感があり、洗練された企業イメージを伝えています。ミニマルでおしゃれなメニューを作りたい場合の参考になります。
このサイトを見る
サイド固定の事例
画面サイド固定は、画面の左右どちらかにメニューを固定するタイプです。メインコンテンツの領域を広く使えるため、ビジュアルのインパクトを重視するブランドサイトやポートフォリオサイトに向いています。
au
グローバルメニュー内に言語を切り替えるメニュー（English）が設置されており、海外からの訪問者にも配慮されています。グローバルに展開する企業や、外国人ユーザーが多いサイトの良い参考例です。
このサイトを見る
スマホ：プルダウン・スライド・モーダルのデザイン事例
スマホは画面が狭いため、メニューを常時表示するスペースがありません。一般的には「ハンバーガーアイコン」にメニューを格納し、タップ時に展開するUIが主流です。展開方法には主に、プルダウン、スライド、モーダルの3タイプがあります。
プルダウンの事例
プルダウン（ドロップダウン）型は、ハンバーガーアイコンをタップすると、その直下にメニューリストが縦に展開される、シンプルなタイプです。メニュー項目が比較的少ない場合におすすめです。
コナミスポーツクラブ
コナミスポーツクラブのようなサイトを制作できる会社を紹介してもらう
階層構造が分かりやすく整理されており、多くの情報をもちながらもユーザーが迷わないよう工夫されています。
スライドの事例
スライド型は画面の左右からメニューがスライドして現れるタイプです。スマホアプリでも広く採用されており、ユーザーにとってなじみのある操作感が特徴です。項目数が多いサイトに向いています。
面白法人カヤック
面白法人カヤックのようなサイトを制作できる会社を紹介してもらう
企業文化である「面白さ」を表現しつつ、必要な情報へアクセスしやすい実用性も兼ね備えています。
モーダルの事例
モーダルウィンドウ型はタップすると画面全体を覆うようにメニューが表示されるタイプです。レイアウトの自由度が高く、ブランドの世界観を演出しながらメニューを見せたいサイトと相性が良いです。
デンソー
一度コンテンツが見えなくなりますが、その分ユーザーはメニューを選ぶことに集中できます。メニュー項目をじっくり見てほしい場合に有効な手法です。
※無料でダウンロードできるWebサイト制作事例集をご用意しています。こちらもあわせてご活用ください。
Webサイト制作前にチェック必須！
Webサイト制作前の課題と効果がわかる事例をまとめました。
無料でダウンロードする
成果を出すグローバルメニューの設計ポイント4つ
ここまでさまざまなデザイン事例を見てきましたが、ただ見た目を真似するだけでは十分な効果は得られません。グローバルメニューは「とりあえず設置する」のではなく、サイトの目的やユーザーの行動を深く理解し、「ビジネスの成果につなげる」という視点での設計が重要です。
以下では、成果を出すために押さえておくとよい4つの設計ポイントを解説します。
ページごとに変えず統一する
グローバルメニューを設置する際の基本となるのは、すべてのページでデザインとメニュー項目を一貫させることです。
もしページごとにメニューの内容や表示位置が変わってしまうと、ユーザーは「さっき見た項目がどこにいったかわからない」「違うサイトに来てしまったのではないか」と混乱してしまうでしょう。Webサイトの共通パーツであるグローバルメニューのデザインを統一しておくことで、ユーザーはサイト内を安心して回遊できるようになります。
万が一ユーザーがサイト内で迷子になっても、常に同じ場所にあるグローバルメニューがナビゲーションの基点となり、再度目的のページを選び直せます。
項目数は7つ前後を目安にする
「多くのページを見てほしい」という思いから、多くのメニューを並べてしまうケースが見られますが、どこをクリックすべきか判断しづらくなり、逆効果になりかねません。
心理学には「選択のパラドックス」という言葉があり、人間は選択肢が多すぎると逆に選ぶのが難しくなり、行動（クリック）を止めてしまう傾向があります。また、認知心理学において人が短期的に記憶・処理できる情報の数は「7±2（マジカルナンバー）」と言われています。
そのため、グローバルメニューに並べる項目は、主要な5〜9個（理想は7個前後）に絞り込むとよいでしょう。絞り込む際のポイントは以下のとおりです。
- 重要な項目に絞り込む勇気をもつ
- 優先順位の低いページは「フッターメニュー」や「サブメニュー」へ回す
情報を整理して、ユーザーが内容を容易に把握し、迷わずクリックできる環境を整えましょう。必ずしも、すべての情報を載せることが親切ではなく、「重要な情報を迷わせずに見せること」が、ユーザーにとって使いやすいサイト設計といえます。
目的ページまでの導線を短くする
Webサイトの構造が複雑になる場合でも、ユーザーが迷わず目的のページまでたどり着ける設計が求められます。
そのためには、グローバルメニュー内での「親子関係（階層構造）」を視覚的にわかりやすく表現することが重要です。具体的には、第1階層（親メニュー）と第2階層（子メニュー）で、以下のような工夫を凝らしましょう。
- 文字サイズに強弱をつける
- 子メニューに「字下げ」や「インデント」を用いる
- 色やデザインを変えて視覚的に区別する
情報の優先順位を明確にすることで、視認性の向上につながります。ユーザーは「今、どのグループの情報を見ているのか」を瞬時に把握でき、膨大な情報量でも求めるコンテンツに迷わずたどり着けるようになります。
視線の流れに合わせて配置する
ユーザーを迷わせないために、人間の自然な視線の動き（Fの法則やZの法則）を考慮しましょう。
PC画面を開いた際、ユーザーの視線はまず「左上」にいき、そこから「左から右」へと流れていくのが一般的です。この法則に基づき、重要度の高い項目や優先的に確認してほしい項目は左側に配置するのが定石とされています。
例えば、以下のような順番で並べるのがおすすめです。
- 左側： 「はじめての方へ」「サービスの特徴」など、サイトの導入となるコンテンツ
- 中央： 「製品一覧」「事例紹介」「会社概要」などの主要コンテンツ
- 右側： 「お問い合わせ」「資料請求」といった、コンバージョン導線
視線が最後に到達する一番右側に、「お問い合わせ」などのボタンを配置することで、ユーザーはサイトを閲覧した後に自然な流れで次のアクションへと促されます。視線の流れに沿った配置を心がけることで、ユーザーにストレスを与えることなく、スムーズに目的の導線へと導くことができます。
WordPressやCMSでのグローバルメニュー設定・カスタマイズ方法
WordPressなどのCMSを使えば、専門的なプログラミング知識がなくても、管理画面から直感的にグローバルメニューを作成・編集できます。基本的な設定手順は以下のとおりです。
-
管理画面の「外観」から「メニュー」を開く
メニューの名前（例：メインメニュー）を入力し、「メニューを作成」をクリック
-
項目を追加する
左側の「固定ページ」や「カテゴリー」の中から、メニューに入れたい項目にチェックを入れて「メニューに追加」をクリック
-
並び順や階層を整える
追加された項目をドラッグ＆ドロップすることで、簡単に並び順を変更可能
-
表示場所を指定して保存する
作成したメニューを表示させる場所にチェックを入れ、「メニューを保存」をクリックすれば完了
自社でより洗練されたグローバルメニューを構築したい場合、高機能なWordPressテーマや法人向けCMSを導入すれば、コードを書かずに管理画面だけで以下のようなカスタマイズに対応できるものが多くあります。
-
スマホ対応（レスポンシブ）が容易
PCで見ているメニューを、スマホでは自動的に「ハンバーガーメニュー」に変換してくれる機能が標準搭載
-
メガメニューなどの設置が可能
マウスを合わせた時に画像付きで大きく広がる「メガメニュー」や、アイコンの追加なども、コードを書かずに設定画面だけで完結できるものが多い
-
直感的なカスタマイズ
フォントサイズ、色、透過度、スクロール時の追従（固定）設定なども、プレビューを見ながら簡単に調整可能
「自社に適したメニュー構成がわからない」「設定が複雑で対応が難しい」と感じる場合は、プロの制作会社への相談も選択肢の1つです。
まとめ
今回の記事では、グローバルメニューの役割や参考事例について紹介してきました。
冒頭でも述べたように、グローバルメニューがしっかりしていなければ、いくら良いコンテンツを作っても見てもらえない可能性が高いです。
グローバルメニューをデザインする際は、以下のように自分自身が実際にホームページを閲覧しているユーザーになった気持ちでデザインするのが重要です。
- 自分の欲しい目的の情報へ辿り着けるか
- ホームページの全体像を把握できるか
- ホームページ内での現在地を把握できるか
これらに気を付ければ、自ずとユーザーにとって親切でわかりやすいサイトが出来上がります。
ユーザーにとって分かりやすいグローバルメニューのデザインを心がけましょう！
参考記事：見やすいホームページを作るための、たった11個のポイント
見やすいホームページをデザインするためのポイントを丁寧に解説しています。
誰でも実践できる！見やすいホームページを作るための11個のポイント
ホームページ制作会社をお探しの方へ
現在、ホームページ制作を検討中で制作会社をお探しの方はWeb幹事に相談ください。
専門のコンサルタントが無料であなたに合った制作会社を紹介します。
ホームページ制作の目的設定から最適な制作会社のご紹介までしっかりサポートさせていただきます！ ご相談はもちろん無料。制作会社のご紹介も無料でおこなっております。
「ホームページ制作にどれくらいの費用が必要か知りたい」といった相談もOKです！
参考記事：フッターのデザインのポイントはこちらをご覧ください！
現役デザイナーが解説！フッターデザインの参考事例と注意点
Q. グローバルメニューの事例にはどのようなものがある？
グローバルメニューの事例として「PCで表示されるグローバルメニュー」「画面サイドに固定されるグローバルメニュー」等が挙げられます。その他の事例は記事をご参照ください。
