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