グローバルナビゲーションのデザイン｜迷わせないメニュー項目と見た目の決め方

人気のサイトを参考にメニューを並べてみたけれど、これで合っているのか自信がない…
クライアントに「なぜこの順番なの？」と聞かれたら、うまく答えられそうにない…

参考サイトの見た目を真似しただけだと、メニューの並びに理由がなく、自信が持てませんよね。

グローバルナビゲーションは、サイトのゴールまで読者を誘導するためのマップのようなものです。項目も順番も、その目的から「逆算」すれば決められます。

この記事では、メニューの項目・順番・言葉・見た目を、何を基準に決めるかをご紹介します。良い例と悪い例を並べて、自分の案件に当てはめられるようにしました。

グローバルナビゲーション（グロナビ）とは？役割は「迷わせないこと」

グローバルナビゲーションとは
サイトのどのページにも共通して、ヘッダーなどに置く主要メニューです。「グロナビ」と略して呼ばれます。

サイトの中には、グロナビ以外にもいくつかのナビゲーションがあります。置く場所と役割で分けると、次のとおりです。

比べるポイント	置く場所	役割	載せる項目の例
グローバルナビ	全ページのヘッダー	サイトの主要な行き先を示す	サービス、料金、お問い合わせ
ローカルナビ	特定のページやカテゴリの中	そのカテゴリ内の行き先を示す	サービスの種類ごとのページ
フッターナビ	全ページの一番下	探している人だけが使う行き先を示す	プライバシーポリシー、採用情報
パンくずリスト	ページ上部（見出しの近く）	今いる場所までの道筋を示す	ホーム ＞ サービス ＞ 外壁塗装

グロナビが読者に伝えることは、次の2つです。

1. 今どこにいるか
2. 次にどこへ行けるか

この2つが伝わらないと、読者は「戻る」ボタンを押して別のサイトへ移ってしまいます。

グロナビは、見た目の部品（UI）であり、迷わず目的に着けるかという体験（UX）にも関わります。UIとUXの違いは、以下の記事で詳しく説明しています。

メニュー項目の決め方｜数より「サイトの目的」から逆算する

「項目は何個がいいですか？」と聞かれることがありますが、数を先に決めないのが、おすすめです。理由として、必要な項目の数は、サイトの目的と読者によって変わるからです。

決める手順は、次の3つです。

1. サイトの目的を1つ決める（問い合わせ、来店、採用への応募など）
2. 目的のページにたどり着くまでに、読者が知りたいことを書き出す
3. 書き出したものを「多くの人が見るページ」と「探す人だけが見るページ」に分け、前者だけをグロナビに置く

探す人だけが見る情報は、フッターナビに回します。消すわけではないので、クライアントに「あのページが載っていない」と言われても、置き場所を説明できます。

良い例・悪い例（架空のリフォーム会社のサイト）

目的を「見積もりの問い合わせ」にした、小さなリフォーム会社のサイトで比べてみます。

見積もりを考えている人が知りたいのは、

• 「何を頼めるか」
• 「どんな仕上がりか」
• 「いくらかかるか」

です。沿革やスタッフ紹介は、気になった人が会社概要から読めれば十分です。

いま参考にしているサイトがあれば、メニューの項目ごとに「問い合わせる前に知りたいことか」を確かめてみてください。手本の並びに理由があるかどうかが見えてきます。

LPではグロナビを置かないか、最小限にする

LP（ランディングページ）は、商品の申し込みのための1ページです。コーポレートサイトと同じ感覚でメニューを並べると、申し込みの前に別のページへ出て行かれてしまいます。

公式サイトは会社を信頼してもらうためのもの、LPは売上を上げるためのものです。役割が違うので、LPではグロナビを置かない判断もあります。

置く場合も、「特長」「料金」「よくある質問」「申し込み」のように、ページ内の見出しへ飛ぶリンク（＝ページ内リンク）を数個にとどめます。

メニュー項目は、ページの配置を決めるワイヤーフレームの段階で一緒に決めておくと、後から迷いません。作り方は、以下の記事で詳しく説明しています。

並べる順番の決め方｜読者が知りたい順、ゴールは右端

順番は、読者の頭の中で疑問が出てくる順に並べます。横並びのメニューなら、次の流れが基本です。

• 左側：最初に知りたいこと（何をしている会社か）
• 中ほど：比べるための材料（実績・料金・会社の情報）
• 右端：ゴール（お問い合わせ・予約・申し込み）

さきほどのリフォーム会社で、並べ方を比べると次のようになります。

比べるポイント	悪い例	良い例
並び	会社概要・ごあいさつ・サービス・施工事例・お問い合わせ	サービス・施工事例・料金・会社概要・お問い合わせ
最初に目に入るもの	会社の歴史や代表のあいさつ	頼める工事の内容
お問い合わせの見せ方	他の項目と同じ文字リンク	右端にボタンの形で置く

会社概要は、サービスに興味を持った後に読まれるページです。先頭に置くと、読者が知りたいことにたどり着くまでの距離が伸びます。

右端のお問い合わせは、ボタンの形にして他の項目と見分けられるようにします。ゴールがどこにあるかが、メニューを見ただけで分かるからです。

左上のロゴからメニュー、右上のボタンへと目が動く流れは、以下の記事で詳しく説明しています。

メニューの言葉の決め方｜造語・英語だけ・あいまいな言葉を避ける

メニューの言葉は、次の3つを基準に選びます。

• 読者が普段使う言葉か（社内の呼び名や造語になっていないか）
• 押した先の中身が予想できるか
• 大事な語が先頭に来ているか

よく見かける言葉で、直し方の例を並べます。

迷わせる言葉	伝わる言葉	直す理由
Concept	私たちの考え	英語だけだと、何が書いてあるページか想像しにくい
Solution	サービス内容	読者が探すときに使う言葉に合わせる
Works	制作実績（施工事例）	業種に合った言葉のほうが、中身を思い浮かべやすい
その他	中身ごとに分けて名前を付ける	押してみないと分からない項目は、押されにくい

英語のラベルを使うなら、日本語を小さく添えて中身が分かるようにします。「Works／制作実績」のように併記すれば、見た目の雰囲気と伝わりやすさを両方残せます。

迷ったら、クライアントの家族や友人など、Webに詳しくない人にメニューだけを見せてみてください。

• 「料金はどこを押せば分かる？」
• 「工事の写真はどこにありそう？」

と聞いて、すぐに指させるかどうかで判断できます。

見た目の決め方｜押せる・今どこか分かる・スマホで隠しすぎない

見た目は、次の4つのチェックポイントで判断します。

1. 押せると分かる：文字が小さすぎない、項目どうしの間隔が狭すぎない、背景と文字の色の差がはっきりしている
2. 今どこにいるか分かる：開いているページの項目に、色や下線で印を付ける
3. 下層メニューを深くしない：ドロップダウンは1段にとどめ、増えたら項目の分け方から見直す
4. パソコンでは隠さない：画面に余裕があるときは、メニューを横に並べて見せる

現在地の印は、付け忘れやすいところです。模写するときも、手本のサイトで別のページを開いて、メニューの見た目がどう変わるかを確かめてみてください。

パソコンでハンバーガーメニューに隠さない理由

ハンバーガーメニューは、三本線のアイコンを押すとメニューが開く形です。すっきり見えますが、隠すと使われにくくなります。

海外のUX調査会社 Nielsen Norman Group による調査（179人・6サイト）によると、パソコンでメニューを使った割合は、隠したナビが27%、表示したナビが48%でした。

また同じ調査では、スマホでは主要なリンクが4つ以下なら表示し、5つ以上なら一部を隠すのもやむを得ないと説明されています。

スマホでは、次のどちらかで考えます。

• 項目が少ない：画面の上に並べて見せる
• 項目が多い：ハンバーガーメニューにまとめ、お問い合わせのボタンだけは外に出しておく

ボタンだけ外に出すのは、ゴールまで隠すと、問い合わせたい人がメニューを開く手間が1回増えるからです。

項目どうしの余白や揃え、現在地の強調は、デザインの基本で判断できます。考え方はデザインの4原則とは？近接・整列・反復・対比をWebの例で解説にまとめています。

まとめ

1、グロナビはサイトの目的まで読者を連れていく道。項目は目的から逆算して絞り、残りはフッターへ
2、順番は読者が知りたい順でゴールは右端、言葉は読者が普段使う言葉で選ぶ
3、見た目は「押せる・現在地が分かる・パソコンでは隠さない」で判断する

参考にした情報源

• Nielsen Norman Group「Hamburger Menus and Hidden Navigation Hurt UX Metrics」（2016年6月26日）https://www.nngroup.com/articles/hamburger-menus/（2026年10月28日確認）