UIUX

KNOWLEDGE

グローバルナビの設計|項目の決め方と並べ方

  • #UIUX
  • #WEB制作

SHARE

グローバルナビゲーション(全ページ共通のメニュー)は、サイトの中で最も多く表示される要素です。全ページに出るため、ここでの1つの改善は全ページに効きます。

一方で、社内の要望が集まりやすい場所でもあります。「うちの部署のページも入れてほしい」という要望を受け入れ続けると、項目が増え、結果として何も見つからないメニューになります。

この記事では、項目の決め方、並べ方、そして減らし方を解説します。

この記事でわかること

・項目数の上限と、その理由

・何を入れて、何を入れないかの判断基準

・ラベルの決め方(社内用語を使わない)

・並び順の考え方

・スマートフォンでの設計

項目数の考え方

「何項目までが正解か」という絶対的な基準はありませんが、判断の軸はあります。

状態 起きること
項目が少ない(4〜6程度) 一目で全体が把握できる。選びやすい
項目が多い(8以上) 読む対象になり、選ぶ負荷が生じる
項目が非常に多い スキャンされず、結局トップページから探す
階層が深い 目的のページまでの操作が増える

判断基準は「一目で全体を把握できるか」です。メニューが「読むもの」になった時点で、機能が落ちています。

また、PCでは横幅に収まっても、スマートフォンでは縦に並ぶため、項目数の影響が大きくなります

グローバルナビは、サイトの全ページを載せる場所ではありません。

訪問者が最も多く向かう先へ、最短で届けるための導線です。

何を入れて、何を入れないか

入れる 入れない 理由
主要サービス 個別の細かいサービス 下層で分岐させる
料金・費用 会社の沿革 検討時に見られない
実績・事例 個人情報保護方針 フッターで十分
問い合わせ 採用情報(BtoC中心の場合) 対象読者が違う
会社概要 SNSリンク フッターまたはアイコンで
対応エリア(地域ビジネス) ブログの月別一覧 階層が深い

判断の根拠は、実際のアクセスデータです。GA4でページ別のセッション数を確認し、上位のページがメニューにあるかを見てください。

逆に、メニューにあるのにほとんど見られていない項目は、外す候補です。「重要だから入れる」ではなく「実際に向かう人が多いから入れる」という基準にしてください。

採用情報の扱い

採用情報は判断が分かれます。

状況 判断
採用が経営課題になっている 入れる
BtoBで、取引先も採用状況を見る 入れる
BtoCで、顧客と求職者が明確に分かれる フッターでも可
採用専用サイトがある リンクのみ、またはフッター

採用サイトの必要性は中小企業が採用サイトを作るべき理由と制作のポイントで解説しています。

ラベルの決め方

最も多い失敗は、社内でしか通じない言葉を使うことです。

避ける 推奨 理由
ソリューション サービス/できること 意味が広すぎる
プロダクト 商品/製品 日本語で伝わる
ワークス 実績/施工事例 推測が必要
アバウトアス 会社概要 検索されない語
コンタクト お問い合わせ 行動が明確
◯◯サポートプラン(自社商品名) 保守・運用 商品名は知られていない

最後の行が実務で最も起こります。自社のサービス名は社内では当然でも、初めて訪れた人には何のことか分かりません。ラベルは一般名詞、詳細ページでサービス名を出すという構成にしてください。

ラベルを決める確認方法

  • 社外の人に見せて、何のページか説明できるか聞く
  • 検索されている語と合っているか確認する:Search Consoleのクエリ
  • 競合サイトのラベルと比べる:一般的な呼び方を確認する
  • 文字数を揃える:長短がばらつくと視覚的に読みにくい

1番目が最も確実です。社内の人は全員が答えられるため、判断材料になりません

並び順

並び順は、閲覧数の多い順ではなく、検討の順序に合わせます。

  1. 何をしている会社か:サービス/事業内容
  2. いくらか:料金・費用
  3. できるのか:実績・事例
  4. 信用できるか:会社概要
  5. どう頼むか:お問い合わせ

この順序は、初めて訪れた人が知りたいことの順番と一致します。会社概要を最初に置くサイトがありますが、多くの訪問者はまずサービス内容を見ます

問い合わせボタンの扱い

問い合わせは、他の項目と同列に並べるのではなく、色や形で区別して右端に置くのが一般的です。理由は2つあります。

  • 他の項目は「情報を見る」、問い合わせは「行動する」:性質が違う
  • 視線は左から右へ流れる:最後に到達する位置
  • 常に表示されている必要がある:どのページからでも行動できる

視線の流れについてはFの法則・Zの法則とは?視線誘導を意識したレイアウト設計で解説しています。

スマートフォンでの設計

スマートフォンでは、メニューが折りたたまれます。この構造には固有の注意点があります。

問題 対処
アイコンだけで開けることが分からない 「MENU」の文字を併記する
開いた後に項目が多くスクロールが必要 項目を減らす
問い合わせがメニュー内にしかない 画面下部に固定表示する
電話番号がメニュー内にある 画面上部または下部に常時表示
閉じるボタンが分かりにくい 明確に表示する
階層が深く戻れない 階層を浅くする

3番目と4番目が最も影響します。地域ビジネスでは、電話と問い合わせを画面下部に固定表示することで、メニューを開かずに行動できます。

スマートフォン前提の設計についてはモバイルファーストデザインとは?重要視される理由と設計のコツを参照してください。

項目を減らす手順

すでに項目が増えている場合の整理手順です。

  1. GA4で各ページのセッション数を確認する
  2. メニューにあるが見られていない項目を洗い出す
  3. 下層に移すか、フッターに移すかを判断する
  4. 統合できる項目をまとめる:似た内容は1つに
  5. 減らした後、離脱率とCV数を確認する

社内調整では、3番目の「なくす」ではなく「移す」という説明が有効です。ページ自体は残り、フッターやサービス一覧からアクセスできる状態にすれば、要望を出した部署の懸念も解消します。

よくある失敗

失敗1:全ページをメニューに載せようとする

読む対象になり、結局何も見つかりません。

失敗2:自社サービス名をラベルにする

初めて訪れた人には何のことか分かりません。一般名詞を使ってください。

失敗3:会社概要を最初に置く

多くの訪問者は、まずサービス内容を見ます。検討の順序に合わせてください。

失敗4:スマートフォンで問い合わせがメニュー内にしかない

メニューを開く操作が必要になります。画面下部に固定表示してください。

失敗5:社内の要望で項目を追加し続ける

「なくす」のではなく「移す」という整理で調整してください。

よくある質問

Q. 項目数は何個が正解ですか?

絶対的な基準はありません。判断軸は「一目で全体を把握できるか」です。読む対象になっている場合は多すぎます。スマートフォンでは縦に並ぶため、影響がより大きくなります。

Q. ドロップダウンメニューは使うべきですか?

下層ページが多い場合には有効ですが、スマートフォンでは操作が複雑になります。また、階層が深いと目的のページまでの操作が増えます。まず項目自体を減らせないか検討してください。

Q. 英語表記のラベルは使えますか?

ブランドの表現として使われることはありますが、意味が伝わらなければ機能しません。使う場合は日本語を併記してください。特に「SERVICE」「WORKS」などは、日本語表記のほうが確実です。

Q. ロゴはメニューに含めるべきですか?

ロゴは左端に置き、トップページへのリンクにするのが一般的です。多くの訪問者がこの挙動を期待しています。

Q. 検索窓は必要ですか?

ページ数が多く、目的の情報を探す用途があるサイトでは有効です。ページ数が少ないサイトでは、メニューで十分な場合が多くあります。設置する場合は、検索結果が適切に出るかを確認してください。

まとめ

グローバルナビは全ページに表示されるため、ここでの改善は全ページに効きます。同時に、社内の要望が集まりやすく、放置すると項目が増え続ける場所でもあります。

判断基準は「一目で全体を把握できるか」です。メニューが読む対象になった時点で、機能が落ちています。入れる項目は「重要だから」ではなく「実際に向かう人が多いから」という基準で、GA4のデータから判断してください。

ラベルには社内用語や自社サービス名を使わないでください。一般名詞をラベルにし、詳細ページでサービス名を出す構成にします。社外の人に見せて説明できるかが、最も確実な確認方法です。

並び順は閲覧数ではなく、検討の順序——何をしている会社か、いくらか、できるのか、信用できるか、どう頼むか——に合わせてください。

当社ではホームページ制作において、情報設計から導線まで一貫して設計しています。資料では設計の進め方をまとめていますので、自社サイトを見直したい方はぜひダウンロードしてご活用ください。

SHARE