【2023年9月14日更新】読みやすくなるよう、文章を調整しました。

この記事のレベル

初心者	（4.0）
重要度	（4.0）
難しさ	（2.0）

こんにちは、編集長のカワウソです！

「グローバルナビゲーションという言葉は聞いたことがあるけれど、イマイチ何のことか分かっていない……」という方も多いのではないでしょうか。

そこで今回は、グローバルナビゲーションの基礎知識を解説します。

この記事を読めば、グローバルナビゲーション作成のポイントが分かるほか、参考になるデザインを効率的に探せます。

それではどうぞ！

グローバルナビゲーションとは何か？

グローバルナビゲーションとは、ホームページの「全ページ内に共通して設置されたリンク」です。

正式名称は決まっておらず、以下のように呼ばれることもあります。

グローバルナビゲーションの役割

グローバルナビゲーションの役割は「ユーザーを目的のページに案内すること」です。

たとえば、「トップページ」から「サービス概要ページ」にアクセスしたユーザーがいたとします。

サービス内容を見て興味を持ったら、次は料金について知りたくなるはずです。そのときに「料金ページ」へのリンクがなければ、ユーザーが困ってしまいますよね。

もしユーザーが「探すのは面倒……」と感じたら、ホームページから離脱してしまうおそれがあります。

またユーザーは、必ずしもトップページから訪問してくるわけではありません。検索キーワードによっては、下層ページが検索結果に表示されることもあるでしょう。

たとえば「エックスサーバー 料金」と検索すると、「料金ページ」がヒットします。

©Google
Google および Google Web Search™ featuresは Google LLC の商標であり、このホームページはGoogle によって承認されたり、Google と提携したりするものではありません。

そのため、グローバルナビゲーションを設置して、どのページからでも、他のページに容易にアクセスできるようにする必要があるのです。

SEOにも効果的

グローバルナビゲーションの設置は、SEOにおいても重要です。

検索エンジンであるGoogleは「クローラー」というロボットを使って、インターネット上のありとあらゆるページから情報を収集（クロール）し、検索順位を決定する仕組みです。

Googleは、ページのなかに設置されたリンク（内部リンク）を辿って、ホームページ全体の構造を理解しようとします。そうすることで、ページそれぞれの価値や役割を判断できるためです。

せっかく価値のあるページを作っても、Googleに見つけてもらえなければ、正しく評価してもらえないですよね。

グローバルナビゲーションがあれば、クローラーがページを見つけやすくなります。

グローバルナビゲーションには、ユーザーだけではなく、クローラーもサポートする役割があることを理解しておきましょう。

グローバルナビゲーションの作成方法

次に、グローバルナビゲーションの作成方法を3ステップで解説します。

サイトマップを作成する

サイトマップがない場合は、先に作りましょう。

サイトマップがあれば、ホームページ全体の構成を視覚化できるため、グローバルナビゲーションに設置するリンクの優先順位を決めるときにも役立ちますよ。

サイトマップの基礎知識や作成方法は、以下の記事で解説しているので、参考にしてください。

二階層目で優先順位が高いページを選ぶ

サイトマップが完成したら、二階層目のなかから、優先順位が高いページを選びましょう。

二階層目は大カテゴリ、三階層目は小カテゴリの関係性です。二階層目のページへのリンクをグローバルナビゲーションに設置すれば、三階層目の各ページにもアクセスしやすくなります。

たとえば、コーポレートサイトの場合、以下のページをグローバルナビゲーションに設置することが多いです。

しかし、なかには三階層目のページへのリンクを設置したいと考える方もいるでしょう。

三階層目のページへのリンクをグローバルナビゲーションに設置するポイントは、あとの「グローバルナビゲーションを作るときのポイント」で解説します。

設置場所を決める

グローバルナビゲーションは、ホームページの最上部である「ヘッダー」に設置されることが多いです。

しかし、画面の左右や下に固定して表示されることも。※あとで事例を紹介します。

つまり、グローバルナビゲーションの設置場所に決まりはありません。

ホームページのレイアウトを決めるときに、「グローバルナビゲーションをどこに置くのがユーザーにとって分かりやすいか」を検討しましょう。

ホームページのレイアウトについては、以下の記事で詳しく解説しています。

グローバルナビゲーション作成3つのポイント

ここでは、グローバルナビゲーションを作るときに、押さえておくべきポイントを3つ解説します。

ひと目で分かりやすいワードを使う

リンクの文言は、シンプルで分かりやすいワードを使いましょう。ユーザーがひと目で内容を理解できることがポイントです。

長い文字列や難しい単語は、認識するのに時間がかかってしまい、ユーザーにストレスを与えかねません。

そのほか、英語表記のリンクは注意が必要です。
ユーザーによっては、ひと目で内容を理解できず、リンク先がどんなページなのかをイメージできないおそれがあります。

確かに英語表記のリンクは、スタイリッシュな印象を与えることが可能。
おしゃれなホームページを作るときには、検討する方も多いでしょう。

しかし、おしゃれだからといって、必ずしもユーザーにとって価値があるホームページになるとは限りません。
本当に英語表記が必要かを考え、日本語を併記することも検討してください。

最短距離で目的のページにアクセスできるようにする

ユーザーが目的のページに、最短距離でたどり着けるように工夫しましょう。

「ドロップダウンメニュー」を使用すれば、少ないクリック数で、目的のページにアクセスできるようになります。

参考に、弊社の『エックスサーバー』のサービスサイトをご覧ください。

本来なら三階層目の「お支払い方法ページ」にアクセスするのに、二階層目の「料金ページ」を経由しなければなりません。

しかし、ドロップダウンメニューなら、三階層目の「お支払い方法ページ」にダイレクトでアクセス可能です。限られたスペースをうまく活かせます。

すべてのページでデザインを統一する

グローバルナビゲーションのデザインは、すべてのページで統一しましょう。

ページによってデザインが違うと、ユーザーがグローバルナビゲーションを認識できず、混乱してしまいます。そのまま離脱してしまうおそれもあるでしょう。

デザインが統一されていれば、ユーザーがグローバルナビゲーションの存在に気づきやすくなります。

グローバルナビゲーションのデザイン例

ここからは、グローバルナビゲーションのデザイン例を紹介します。

パソコンサイトとスマホサイトに分けてポイントを見ていきましょう。

パソコンサイト

まず、パソコンサイトのグローバルナビゲーション事例を紹介します。

川重商事株式会社

▲出典：川重商事株式会社

川重商事株式会社のホームページは、グローバルナビゲーションにメガメニューが採用されているため、それぞれのページにアクセスしやすのが特徴です。

まず、グローバルナビゲーションの「・」がある項目に、カーソルを当ててみましょう。すると、メガメニューが下に展開されます。

▲出典：川重商事株式会社

メガメニュー内には画像があり、会社概要などの大カテゴリがイメージしやすいですよね。
また、多く設置されたリンクにより、詳細な情報までダイレクトにアクセスできます。

さらに、グローバルナビゲーションが全ページのヘッダーに固定されているため、ユーザーがいつでも、他のページにアクセスすることが可能です。

※ヘッダー固定のメリットやデメリットは、以下の記事で解説しています。

株式会社オーラルケア

▲出典：株式会社オーラルケア

株式会社オーラルケアのホームぺージでは、グローバルナビゲーションがサイドバーに設置されています。

リンクにカーソルを当てると、右にメガメニューが展開される仕組みです。

▲出典：株式会社オーラルケア

各項目の横に「＞」が表示されているため、メガメニューが右に開くイメージがしやすいですよね。

さらに、二階層目のページでは、画面上部に同じカテゴリーに属する他のページへのリンクが設置されています。それにより、ユーザーは関連するページにアクセスしやすいでしょう。

▲出典：株式会社オーラルケア

「縦」と「横」のメニューをうまく組み合わせることで、コンテンツの表示領域も十分に確保されているのがポイントです。

スマホサイト

スマホサイトのグローバルナビゲーションには、「ハンバーガーメニュー」がよく使用されます。

ハンバーガーメニューとは、3本線のアイコンのこと。クリックすると、隠れていたメニューが展開する仕組みです。

ここでは、ハンバーガーメニューを利用したスマホサイトの参考例を紹介します。

株式会社Enjin

▲出典：株式会社Enjin

グローバルナビゲーションにリンクが多く並ぶと、視認性が悪くなりやすいです。

しかし、株式会社Enjinのハンバーガーメニューでは、三階層目のリンクデザインが異なるので、他のリンクとの違いが分かりやすくなっていますよね。

具体的なデザインのポイントは、以下の3つです。

スマホサイトは、パソコンサイトほど表示領域が多くありません。そのため、三階層目のページへのリンクは省略されることも多いです。

どうしても三階層目のページへのリンクを入れたい場合は、株式会社Enjinのようにデザインを工夫してみましょう。

株式会社ZENDESK

▲出典：株式会社ZENDESK

株式会社ZENDESKのサービスサイトでは、ハンバーガーメニューのなかに、アコーディオンメニューが設置されています。

スマホサイトで三階層目のページへのリンクを実施したい場合、アコーディオンメニューは有効な選択肢の一つです。

ユーザーが必要な情報を任意で「表示／非表示」できることは、ユーザービリティ（操作性）の観点でも優れていると言えるでしょう。

株式会社ルート

▲出典：株式会社ルート

株式会社ルートのスマホサイトのグローバルナビゲーションは、画面下に表示されるタイプです。

主要なページへのリンクが並んでおり、各ページへワンタップで辿りつくことができます。

また、右端のハンバーガーメニューからは、そのほかのさまざまなページへアクセス可能です。

スマホの画面内に、グローバルナビゲーション以外にも重要なページへのリンクを設置したいときに、参考にしてみてください。

もっと参考のデザインを探したい方へ

グローバルナビゲーションのデザイン例をもっと探したい方は、「ギャラリーサイト」の活用がおすすめです。

ギャラリーサイトなら、他社のホームページを一覧表示できます。参考になるホームページを効率的に探せるでしょう。

おすすめのギャラリーサイトについては、以下の記事で紹介しています。ぜひ参考にしてみてください。

まとめ

この記事では、グローバルナビゲーションの基礎知識、作成のポイント、デザイン例についてを解説しました。

これからホームページを作成する方や、リニューアルを考えている方は、参考になったのではないでしょうか。

グローバルナビゲーションを作成するときは、ユーザーの視点に立って、見やすく使い勝手のよいデザインを心がけましょう。

それでは、素敵なホームページの完成を祈っております。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

※ 2024年10月時点、W3Techs調べ。

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！