グローバルナビの役割と項目の決め方｜スマホでの見せ方も解説

「グローバルナビは、サイトの上に並ぶメニューのデザインのことだから、制作会社に任せておけばよさそう」。サイト制作の打ち合わせでは、グローバルナビがデザイン案の画面と一緒に示されることが多いため、見た目の話と受け取られがちです。ところが、グローバルナビで最初に決めるのは見た目ではなく、全ページに共通で出す項目と、その項目の名前です。項目を決めるには、訪問者がサイトで何を探すかを知っている自社の判断が要ります。

本記事では、グローバルナビの意味と役割から、載せる項目の決め方、スマホでの見せ方、Googleがリンクをたどれる作り方まで、SEO記事の制作とサイトの改修を手がける制作会社の視点で順を追ってお伝えします。

グローバルナビの意味とヘッダーとの違い

グローバルナビ（グローバルナビゲーション）は、サイトの全ページに同じ並びで表示される、主要なページへのリンクを集めたメニューです。略して「グロナビ」「Gナビ」とも呼ばれます。PCではページ上部に項目を横に並べる形、スマホでは三本線のボタン（ハンバーガーメニュー）を押すと開く形が多く使われています。

ヘッダーはページ上部の領域を指し、グローバルナビはヘッダーの中に置くメニューを指します。ヘッダーには、グローバルナビのほかに、ロゴや電話番号、問い合わせのボタンなども置かれます。

サイトには、グローバルナビのほかにも、ページを移動するためのナビゲーションが3つあります。4つの違いは次のとおりです。

パンくずリストの置き方とカテゴリの分け方は、SEOでパンくずリストは効くのか｜設置より先に決めるカテゴリ設計で解説しています。

グローバルナビの2つの役割

グローバルナビの役割は、訪問者をどのページからでも主要なページへ案内することと、Googleに主要なページへのリンクを示すことの2つです。

1つ目の役割は、訪問者の案内です。訪問者は、開いたページを読んだ後、次に見るページをグローバルナビの項目から選びます。全ページの同じ位置に同じ並びで項目があれば、どのページにいても、会社概要や問い合わせのページへ1回のクリックで移れます。Webのアクセシビリティの国際的な基準であるWCAG 2.2にも、複数のページで繰り返し出るナビゲーションは毎回同じ順序で出すことが、レベルAAの達成基準として定められています。

Web Content Accessibility Guidelines (WCAG) 2.2 (日本語訳)

Web Content Accessibility Guidelines (WCAG) 2.2 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、運動制限、発話困難、光感受性発作及びこれらの組合せ、並びに学習障害及び認知限界への一部の適応を含んだ、様々な障害のある人に対して、コンテンツをアクセシブルにすることができる。しかし、これらの障害のある人に対するあらゆる利用者のニーズに対処するものではない。このガイドラインは、あらゆる種類のデバイス (デスクトップ、ラップトップ、キオスク、及びモバイルデバイスを含む) におけるウェブコンテンツのアクセシビリティを扱う。このガイドラインに従うことは、一般にウェブコンテンツが利用者にとってより使いやすいものにもなる。

🌐 waic.jp

外部リンク

※ 出典：WAIC「WCAG 2.2 日本語訳」達成基準 3.2.3 一貫したナビゲーション

2つ目の役割は、Googleへのリンクの提示です。Googleは、主にページの中のリンクをたどって新しいページを見つけます。グローバルナビは全ページに出るため、グローバルナビに載せたページには、サイトの全ページからリンクが張られます。

グローバルナビに載せる項目の決め方

グローバルナビに載せる項目は、デザインより先に、訪問者が探しに来るページから選んで決めます。手順は次の4つです。

項目の数を7個以内に抑える必要はありません。項目数の目安としてよく挙がる「マジカルナンバー7±2」は、人が短い時間に覚えておける情報の数についての研究です。UXの調査会社であるNielsen Norman Groupは、メニューの項目は画面に出たまま選べるので覚えておく必要がなく、7個に絞っても使いやすさは上がらないと説明しています。

※ 出典：Nielsen Norman Group「How Chunking Helps Content Processing」（2016年）、「Short-Term Memory and Web Usability」（2009年）

項目の数を決めるのは、PCの画面で1行に収まるかと、項目どうしの中身が重ならないかの2つです。1行に収まらずに2段になると、訪問者はどの段に目当ての項目があるかを探し直すことになります。反対に項目を減らしすぎると、1つの項目名が指す範囲が広がり、リンク先の中身が分かりにくくなります。

Web担当者

サービスが10種類あるのですが、全部グローバルナビに並べたほうがよいでしょうか。

Writers-hub
編集部

どのサービスも見てほしいという考えはもっともです。ただ、10種類あるなら、グローバルナビには「サービス」の1項目だけを置き、10種類はサービス一覧のページか、項目にマウスを重ねると開くメニューに並べます。10種類をそのまま並べると、PCでは1行に収まらず、会社概要や問い合わせの項目が2段目に回るか、文字を小さくすることになります。

グローバルナビはブログ記事のページにも必要か

ブログ記事のページにも、サービスと問い合わせのページへ進めるグローバルナビが必要です。検索から記事に来た訪問者は、トップページを通らずに、記事のページを最初に開くためです。

とりわけ見落とされがちなのが、自社サイトとは別のデザインで作ったブログやオウンドメディアのグローバルナビです。記事のページのグローバルナビに記事のカテゴリだけが並び、サービスや問い合わせへのリンクが無いことがあります。記事を読んで会社に興味を持った訪問者は、ロゴを押してトップページへ戻るか、フッターを探すしかありません。

訪問者が最初に開いているページは、GA4の「ランディング ページ」レポート（レポート、エンゲージメントの順に開きます）で確かめられます。上位に記事のページが並んでいたら、そのページをスマホで開き、サービスと問い合わせのページへ何回のクリックで進めるかを数えます。

記事のカテゴリの一覧は、記事の下や本文の横のローカルナビに移せます。

グローバルナビのデザインの3つの型

PCのグローバルナビのデザインには3つの型があり、どれを選ぶかは、項目の下にあるページの数で決まります。

ドロップダウンメニューとメガメニューは、マウスを重ねないと下の階層が見えません。タッチ操作のタブレットにはマウスを重ねる操作が無いので、項目を押したら一覧のページへ移れるようにしておくと、下の階層が開かなくても目的のページへ進めます。

グローバルナビのスマホでの見せ方

スマホのグローバルナビは、全項目をハンバーガーメニューにまとめる形のほか、よく使われる項目だけを画面に出し、残りをハンバーガーメニューに入れる形も選べます。全項目をまとめる形には、次の良さと弱みがあります。

Nielsen Norman Groupが2016年に公開した調査では、スマホでナビゲーションが使われた割合は、全項目をまとめる形で57%、よく使われる項目だけを画面に出す形で86%でした。PCでは、まとめる形が27%で、画面に出す形の48%のほぼ半分です。この数字は、179人が6つのサイトで課題に取り組んだ調査の結果です。

※ 出典：Nielsen Norman Group「Hamburger Menus and Hidden Navigation Hurt UX Metrics」（2016年）

よく使われる項目は、ハンバーガーメニューに隠さず画面に出します。Nielsen Norman Groupは、スマホでは上位の項目が4つ以下なら隠さずに見せ、5つ以上なら一部を隠すしかないとしています。画面に出す項目は、スマホからの閲覧が多いページと、問い合わせのように必ず見つけてほしいページから選びます。

PCの画面でもハンバーガーメニューだけにするデザインを見かけますが、同じ調査では、項目を隠したときの影響はPCのほうが大きく出ています。Nielsen Norman Groupは、PCではハンバーガーメニューを使わず、上位の項目をページ上部か左側に並べるよう勧めています。

グローバルナビをGoogleが読める形で作る方法

グローバルナビをGoogleが読める形で作るには、各項目をhref属性の付いたa要素（aタグ）のリンクで書きます。Googleは、通常、href属性を持つa要素のリンクだけをクロールできると説明しています。Googleの説明で、推奨しない書き方として挙がっているのは次の3つです。

• href属性の無いa要素に、クリックで移動する処理だけを付けた項目
• span要素など、a要素以外のタグにhrefを書いた項目
• href属性に「javascript:」で始まる処理を書いた項目

Googleは、この3つの書き方からはリンク先のURLを確実には取り出せないとしています。

JavaScriptで後からリンクを入れる作りでも、a要素とhref属性で書かれていれば、Googleはリンクをたどれます。項目名を画像にしたときは、Googleが画像のalt属性をアンカーテキストとして使うので、altに項目名と同じ文字を書きます。

スマホのハンバーガーメニューは、ボタンを押してから項目を読み込む作りにせず、最初からHTMLの中にa要素で書いておきます。Googleは、読み込みにクリックなどの操作が必要なコンテンツを読み込まないと説明しているためです。

Google の SEO リンクに関するベスト プラクティス | Google 検索セントラル | Documentation | Google for Developers

Google は、ページの関連性を判断し、クロールする新しいページを見つける際にリンクをシグナルとして使用します。リンクをクロール可能にしてアンカー テキストを改善する方法を紹介します。

🌐 developers.google.com

外部リンク

※ 出典：Google 検索セントラル「リンクに関するおすすめの方法」、「モバイルファースト インデックス登録に関するおすすめの方法」

HTMLで書くとき

HTMLでグローバルナビを書くときは、nav要素の中に、項目のリンクを並べたリストを入れます。

<header>
  <a href="/"><img src="/logo.png" alt="会社名"></a>
  <nav>
    <ul>
      <li><a href="/service/">サービス</a></li>
      <li><a href="/works/">導入事例</a></li>
      <li><a href="/company/">会社概要</a></li>
      <li><a href="/recruit/">採用情報</a></li>
      <li><a href="/contact/">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

nav要素は、ナビゲーションの主要なリンクのまとまりに使う要素で、フッターのリンクまで入れる必要はありません。スクリーンリーダーなどの読み上げソフトは、nav要素を手がかりに、ナビゲーションの読み上げを省くかを判断することがあります。

WordPressで設定するとき

WordPressでグローバルナビの項目を変える場所は、使っているテーマの種類で分かれます。

• クラシックテーマ：管理画面の「外観」→「メニュー」で項目を並べ、「メニューの位置」でヘッダーなどの表示位置を選ぶ
• ブロックテーマ：「外観」→「エディター」でヘッダーのナビゲーションブロックを選び、項目を編集する

ブロックテーマのナビゲーションブロックは、メニューが無い状態で置くと、公開中の固定ページを自動で並べるページリストブロックから始まり、新しく公開したページも自動でメニューに加わります。載せる項目を自分で選ぶには、ツールバーの「編集」を押して、ページごとのリンクに切り替えます。

まとめ｜グローバルナビは載せる項目から決める

グローバルナビは、全ページに同じ並びで出る、主要なページへのリンクのメニューです。グローバルナビは、デザインより先に載せる項目を決めます。訪問者が探しに来るページを選び、訪問者の言葉で名前を付けてから、PCの型とスマホでの見せ方を選ぶと、見た目を決めた後に項目が入りきらずに作り直す手間を避けられます。

検索から記事に来る訪問者がいるサイトでは、記事のページのグローバルナビからも、サービスと問い合わせのページへ進めるかを確かめます。

私たち合同会社Writers-hubは、SEO記事の制作と、検索から来た訪問者がサービスや問い合わせのページへ進めるサイトの改修を支援しています。