ホームページを訪れた訪問者が、迷わず目的の情報にたどり着けるかどうかは、グローバルナビゲーションの設計次第です。グローバルナビゲーションは、主要なページへの案内役を果たす重要なメニューであり、適切に設置することでSEO効果やコンバージョン率の向上が期待できます。
この記事では、グローバルナビゲーションの役割やデザイン例、作成のポイントを解説します。
グローバルナビゲーションとは
グローバルナビゲーションとは、ホームページのすべてのページに共通して設置されている、主要なページへのリンクをまとめたメニューのことです。グロナビやグローバルメニューと呼ばれることもあり、呼び方に厳密な決まりはありません。
多くの場合、訪問者の目に留まりやすいヘッダー部分に配置され、スマートフォンではハンバーガーメニューとして表示されるのが一般的です。訪問者はグローバルナビゲーションを見ることで、そのホームページにどのようなコンテンツがあるのかを把握でき、目的のページへ迷わず移動できます。
ホームページ制作において、グローバルナビゲーションは訪問者の利便性を左右する基本的な要素のひとつです。
グローバルナビゲーションの役割
グローバルナビゲーションには、訪問者とホームページ運営者の双方にとって重要な役割があります。単なる案内メニューではなく、使いやすさと検索エンジンからの評価、両方に影響を与える要素です。ここでは3つの役割を紹介します。
ホームページの内容が一目で伝わる
グローバルナビゲーションには、主要なページへのリンクが並んでいます。そのため訪問者は、グローバルナビゲーションを見るだけで、そのホームページにどのようなコンテンツが用意されているかを把握できます。
もし訪問者が目的と違うページに来てしまった場合も、グローバルナビゲーションを確認すればすぐに判断がつき、必要な情報を探して他のページへ移動できます。反対に項目があいまいだと、訪問者はホームページの全体像をつかめず、そのまま離脱してしまうこともあります。
グローバルナビゲーションの項目には、そのホームページの核となるコンテンツを厳選して配置することが重要です。
訪問者が目的のページに迷わずたどり着ける
グローバルナビゲーションは訪問者の目につきやすい位置に配置されるため、コンテンツを読み進める前に、自分の興味や関心に合ったリンクを選ぶことができます。たとえば料金や事例、問い合わせといった情報を探している訪問者は、ページ内を隅々まで探さなくても、グローバルナビゲーションのリンクをたどるだけで必要な情報にたどり着けます。
このようにグローバルナビゲーションが適切に整理されていれば、訪問者はストレスなく次のアクションへ進め、サイト全体の利便性向上につながります。
SEO効果が高まる
Googleは、内部リンクが多く集まっているページを重要なコンテンツと判断する傾向にあります。グローバルナビゲーションはすべてのページに設置されるため、リンク先のページは全ページから内部リンクを獲得でき、検索エンジンからの評価向上が期待できます。
また、内部リンクが整理されていると、検索エンジンのクローラーがサイト内を巡回しやすくなり、各ページの情報を正しく認識してもらいやすくなります。グローバルナビゲーションのリンク先が質の高いページであるほど、SEOメリットも大きくなります。
グローバルナビゲーションのデザイン例
ここでは、当社の制作実績からグローバルナビゲーションのデザイン例を紹介します。
ページ上部に設置する例
もっとも一般的な配置が、ページ上部のヘッダーに設置するタイプです。この位置はユーザーの目に入りやすく、操作しやすいため、多くのホームページで採用されています。
制作実績の治療院のホームページでは、ヘッダーに「会社名」「最寄駅からの距離」「電話番号」「グローバルナビゲーション」を配置しました。余白をしっかり確保することで、情報量が多くても窮屈に感じさせず、見やすいデザインを実現しています。
また、ターゲット層が年配の方中心であることから、昔ながらの上部ナビに慣れているユーザーにも違和感なく利用してもらえる構成にしました。
さらに、特に重要なLINE・ネット予約のリンクボタンは、他の項目と色を変えて強調しています。その結果、予約ページへの誘導率が上がり、Googleアナリティクス上でも高い誘導率を確認できました。
ページのサイドに設置する例
コンテンツ量が多いホームページでは、サイドにグローバルナビゲーションを配置する方法も効果的です。
非鉄金属専門商社のホームページでは、ほとんどのページが重要であることから、ヘッダーに全項目を収めるのが難しく、サイドメニューを採用しました。
サイドに配置することで、ページ数が増減しても簡単に調整でき、デザイン全体のバランスを保つことができます。一方、ヘッダーに多くの項目を詰め込みすぎると、見た目が窮屈になったり、情報量が少ないと空白が目立ったりすることがあります。その点、サイド型は柔軟性が高く、常に最適な情報量を維持しやすいレイアウトです。
また、このホームページでは電話問い合わせが不要だったため、余分な情報を省き、シンプルで操作しやすい構成にしています。Googleアナリティクスの分析でも、回遊率・滞在時間ともに良好な結果が得られました。
メガメニューを設置する例
サービス内容が多いホームページでは、メガメニューを活用することで、ユーザーが目的の情報へスムーズにアクセスできるようになります。
インクジェット印刷を行う企業のホームページでは、サービス詳細ページが多く、通常のグローバルナビゲーションでは情報を整理しきれませんでした。
そこで、グローバルナビゲーションのサービスにメガメニューを導入し、関連情報をひと目で確認できる構成にしています。
メニューを開くと、インクジェット印刷とその他の詳細ページへのリンクが表示されています。ユーザーは、ページを移動しなくても目的の情報が見つかるため、迷わずスムーズに次のアクションへ進める設計です。
Googleアナリティクスのデータでも、トップページに次いで各サービスページの訪問数が多く、メガメニューによる導線強化の効果が明確に表れています。
スマホサイトの例
スマートフォンのグローバルナビゲーションではハンバーガーメニューを利用します。
お客さまは、カナダ留学をサポートする会社になるのですが、メインのターゲットが大学生になり、メールや電話よりもLINEでの問い合わせが多くなるそうです。
そのため、追従ボタンの「LINEで相談」は、ハンバーガーメニューを開いたとしても消えないようにしており、訪問者が利用しやすいホームページとしています。
Googleアナリティクスを見ても、スマートフォンユーザーは適切にハンバーガーメニューを利用できており、さらには、LINE相談も確実に数を増やすことに成功しているため、期待通りの成果を得ることができました。
グローバルナビゲーションの作成ポイント
グローバルナビゲーションは、ただ設置すれば良いというものではありません。訪問者にとって使いやすく、成果につながるグローバルナビゲーションにするためには、いくつかのポイントを押さえて設計することが大切です。ここでは、作成時に意識したいポイントを紹介します。
見やすくクリックがしやすいデザインを作成する
グローバルナビゲーションには重要なページへのリンクが並びますが、見づらかったりクリックしにくかったりすると、訪問者はリンクを選ばずにそのままページを離れてしまいます。
せっかく重要なページへ誘導する仕組みを用意しても、実際にクリックされなければ意味がありません。文字サイズや余白を十分に確保し、パソコンだけでなくスマートフォンでも指でタップしやすい大きさに調整することが必要です。背景色と文字色のコントラストを意識し、ひと目で項目が判別できるデザインに仕上げましょう。
グローバルナビゲーションは訪問者が最初に触れる操作部分だからこそ、細部への配慮が求められます。
ユーザーがリンク先を想像できる文言を用意する
グローバルナビゲーションの項目は、クリックする前にリンク先の内容が想像できる文言にする必要があります。何のページに飛ぶのか分からない項目は、訪問者に選ばれることがなく、せっかく設置しても十分な効果を発揮できません。
一方で、リンク先の説明を詳しく書きすぎると文字数が増え、グローバルナビゲーション全体が見づらくなってしまいます。「料金」「事例」「お問い合わせ」のように、短い言葉でも内容が伝わる表現を選ぶことが重要です。
専門用語や社内でしか通じない言葉は避け、初めて訪れた人にも意味が伝わる文言を用意しましょう。
重要なページへと導く
グローバルナビゲーションに並ぶ項目の中でも、特に成果につながるページは他の項目と区別して目立たせることが効果的です。すべての項目を同じ扱いにしてしまうと、訪問者はどこを優先してクリックすればよいか判断できません。
たとえば、お問い合わせや予約ページへのリンクは、色や形を変えてボタン化するなど、他の項目より視認性を高める工夫が有効です。サイト全体のデザインを損なわない範囲で強弱をつけることで、成果につながるページへ自然に訪問者を導けます。
グローバルナビゲーションは、ただ並べるだけでなく優先順位を反映させる場所でもあります。
項目数を絞る
グローバルナビゲーションに項目を詰め込みすぎると、かえって視認性が下がり、訪問者がどれを選べばよいか迷ってしまいます。選択肢が多いほど訪問者に考える負担をかけてしまい、離脱の原因にもなりかねません。
ページ上部に設置する場合は8項目程度、サイドに設置する場合でも12項目程度を目安に、本当に重要なページだけに絞り込むことが大切です。細かい下層ページはグローバルナビゲーションに含めず、メガメニューやサイト内検索など別の導線でカバーする方法も検討しましょう。グローバルナビゲーションはあくまで、主要なページへの入口として機能させることがポイントです。
目的のページに最短で移動ができる
訪問者を3クリック以内に目的のページへ到達させることは、コンバージョン向上のために重要な考え方です。クリックの回数が増えるほど訪問者の負担は大きくなり、途中で離脱してしまう可能性が高まります。
グローバルナビゲーションを設計する際は、すべてのページに3クリック以内でアクセスできる階層構造になっているかを確認しましょう。特に問い合わせや資料請求といった成果に直結するページは、できる限り少ないクリック数でたどり着ける位置に配置することが望ましいです。導線の短さは、そのままホームページの使いやすさに直結します。
ストーリーで順番を決める
グローバルナビゲーションの項目は、思いつきの順番で並べるのではなく、訪問者がコンバージョンに至るまでの流れを意識して決める必要があります。会社紹介からサービス内容、実績、問い合わせへとつながる自然な流れを意識すると、訪問者は違和感なくページを移動できます。
また、人は最初と最後の情報を記憶に残しやすいといわれています。この特性を踏まえ、グローバルナビゲーションの最初と最後には、特に見てもらいたい重要なページを配置すると効果的です。並び順ひとつで、訪問者の行動や成果に差が生まれることもあります。
すべてのページで同じデザインにする
グローバルナビゲーションは、サイト内のすべてのページで統一したデザインを使うことが基本です。ページごとに配置や項目が変わってしまうと、訪問者は別のホームページに移動したような感覚になり、不安を感じて離脱してしまう恐れがあります。
デザインや項目を全ページで共通化することで、訪問者は安心してサイト内を回遊できます。グローバルナビゲーションは、いわばサイト全体の道しるべです。統一感のある設計を徹底することが、使いやすいホームページづくりの土台になります。
グローバルナビゲーションに関するよくある質問
ここでは、グローバルナビゲーションについて訪問者や制作担当者からよく寄せられる質問に回答します。用語の違いや設定方法など、実務で迷いやすいポイントを取り上げます。
グローバルナビゲーションとヘッダーの違いはなんですか？
ヘッダーとは、ホームページの最上部にある領域全体を指す言葉です。ロゴやサイト名、電話番号、検索窓なども含まれる、いわば入れ物のような概念です。一方でグローバルナビゲーションは、そのヘッダー内に設置されることが多い、主要なページへのリンクをまとめたメニュー部分のことを指します。
つまり、ヘッダーは範囲を表す言葉、グローバルナビゲーションはヘッダーの中に含まれる一要素という関係になります。グローバルナビゲーションは必ずしもヘッダーだけに設置されるわけではなく、サイドやフッターに配置されるケースもあるため、両者は同じものではないと理解しておくとよいでしょう。
WordPressでグローバルナビゲーションを設定するにはどうすればよいですか？
多くのWordPressテーマでは、管理画面の「外観」から「メニュー」を選び、新規メニューを作成したうえで、表示させたい固定ページやカテゴリーを追加していく流れで設定します。項目を追加したら、メニューの位置としてヘッダーやグローバルナビゲーションに該当する項目にチェックを入れ、保存すれば反映されます。
ただし、ブロックテーマを採用している場合は「外観」に「メニュー」の項目が表示されないことがあります。その場合は「サイトエディタ」からヘッダー部分を選択し、ナビゲーションブロックを編集する形で設定します。使用しているテーマによって操作画面が異なるため、事前にテーマの仕様を確認しておくと安心です。
まとめ
グローバルナビゲーションは、ホームページのすべてのページに設置される案内メニューであり、訪問者の利便性とSEO評価の両方に関わる重要な要素です。ホームページの内容を伝え、目的のページへ訪問者を導く案内役としての役割に加え、内部リンクを集めることで検索エンジンからの評価向上にも寄与します。
デザインについては、ページ上部やサイドへの設置、メガメニューの活用、スマートフォンでのハンバーガーメニューなど、ホームページの特性やターゲット層に応じた選び方が求められます。
作成する際は、視認性やクリックのしやすさ、項目数の絞り込み、統一されたデザインといったポイントを押さえることで、訪問者にとって使いやすいグローバルナビゲーションに仕上がります。
