こんにちは、編集長のカワウソです！
「グローバルナビゲーションという言葉は聞いたことがあるけれど、イマイチ何のことか分かっていない……」という方も多いのではないでしょうか。
そこで今回は、グローバルナビゲーションの基礎知識を解説します。
カワウソ
- グローバルナビゲーションについて知りたい人
- グローバルナビゲーション作成のポイントを知りたい人
- グローバルナビゲーションの参考デザインを探したい人
この記事を読めば、グローバルナビゲーション作成のポイントが分かるほか、参考になるデザインを効率的に探せます。
それではどうぞ！
目次
グローバルナビゲーションとは何か？
グローバルナビゲーションとは、ホームページの「全ページ内に共通して設置されたリンク」です。
正式名称は決まっておらず、以下のように呼ばれることもあります。
- グロナビ
- グローバルナビ
- グローバルメニュー
- メインメニュー
グローバルナビゲーションの役割
グローバルナビゲーションの役割は「ユーザーを目的のページに案内すること」です。
たとえば、「トップページ」から「サービス概要ページ」にアクセスしたユーザーがいたとします。
サービス内容を見て興味を持ったら、次は料金について知りたくなるはずです。そのときに「料金ページ」へのリンクがなければ、ユーザーが困ってしまいますよね。
もしユーザーが「探すのは面倒……」と感じたら、ホームページから離脱してしまう可能性があります。
またユーザーは、必ずしもトップページから訪問してくるわけではありません。検索キーワードによっては、下層ページが検索結果に表示されることもあります。
たとえば「エックスサーバー 料金」と検索すると、「料金ページ」がヒットします。
©Google
Google および Google Web Search™ featuresは Google LLC の商標であり、このホームページはGoogle によって承認されたり、Google と提携したりするものではありません。
そのため、グローバルナビゲーションを設置して、どのページからでも、他のページに容易にアクセスできるようにする必要があるのです。
SEOにも効果的
グローバルナビゲーションの設置は、SEOにおいても重要です。
「Search Engine Optimization」の略称で「検索エンジン最適化」と訳されます。分かりやすくいうと、特定のキーワードで検索されたときに、より上位に表示されるように施策すること。検索エンジンの検索結果で、自社のホームぺージが上位に表示されると、露出が増えるため、ユーザーに見つけてもらいやすくなります。
検索エンジンであるGoogleは「クローラー」というロボットを使って、インターネット上のありとあらゆるページから情報を収集して、検索順位を決定しています。※その収集作業を「クロール」と言います。
Googleは、ページのなかに設置されたリンク（内部リンク）を辿って、ホームページ全体の構造を理解しようとします。そうすることで、ページそれぞれの価値や役割を判断できるためです。
せっかく価値のあるページを作っても、Googleに見つけてもらわなければ、正しく評価してもらえないですよね。
グローバルナビゲーションがあれば、クローラーがページを見つけやすくなります。
グローバルナビゲーションには、ユーザーだけではなく、クローラーもサポートする役割があることを理解しておきましょう。
グローバルナビゲーションの作成方法
次に、グローバルナビゲーションの作成方法を3ステップで解説します。
サイトマップを作成する
サイトマップがない場合は、先に作りましょう。
ホームページ全体の構成を視覚化できるため、グローバルナビゲーションに設置するリンクの優先順位を決めやすくなります。
サイトマップの基礎知識や作成方法は、以下の記事で解説しています。
ホームぺージ構成図の作り方を解説！サイトマップ・ワイヤーフレームなど
二階層目で優先順位が高いページを選ぶ
サイトマップが完成したら、二階層目のなかから、優先順位が高いページを選びましょう。
二階層目は大カテゴリ、三階層目は小カテゴリの関係性です。二階層目のページへのリンクをグローバルナビゲーションに設置すれば、三階層目の各ページにもアクセスしやすくなります。
たとえば、コーポレートサイトの場合、以下のページをグローバルナビゲーションに設置することが多いです。
- 企業情報
- 事業内容（サービス）
- ニュース
- お問い合わせ
しかし、なかには三階層目のページへのリンクを設置したいと考える方もいるでしょう。
三階層目のページへのリンクをグローバルナビゲーションに設置するポイントは、あとの「グローバルナビゲーションを作るときのポイント」で解説します。
設置場所を決める
グローバルナビゲーションは、ホームページの最上部である「ヘッダー」に設置されることが多いです。
しかし、画面の左右や下に固定して表示されることもあります。※あとで事例を紹介します。
つまり、グローバルナビゲーションの設置場所に決まりはありません。
ホームページのレイアウトを決めるときに、「グローバルナビゲーションをどこに置くのがユーザーにとって分かりやすいか」を検討しましょう。
ホームページのレイアウトについては、以下の記事で詳しく解説しています。
ホームページレイアウトの基本！目的別の選び方をわかりやすく解説
グローバルナビゲーション作成3つのポイント
ここでは、グローバルナビゲーションを作るときに、押さえておくべきポイントを3つ解説します。
ひと目で分かりやすいワードを使う
リンクの文言は、シンプルで分かりやすいワードを使いましょう。ユーザーがひと目で内容を理解できることがポイントです。
長い文字列や難しい単語は、認識するのに時間がかかってしまい、ユーザーにストレスを与えかねません。
そのほか、英語表記のリンクは注意が必要です。
英語表記のリンクは、スタイリッシュな印象を与えます。おしゃれなホームページを作るときには、検討したいですよね。
しかし、おしゃれだからといって、必ずしもユーザーにとって価値があるホームページになるとは限りません。
本当に英語表記が必要かを考え、日本語を併記することも検討してください。
おしゃれなホームページの落とし穴！メリットとデメリットを解説
最短距離で目的のページにアクセスできるようにする
ユーザーが目的のページに、最短距離でたどり着けるように工夫しましょう。
「ドロップダウンメニュー」を使用すれば、少ないクリック数で、目的のページにアクセスできるようになります。
「クリック」または「マウスを乗せたとき」に、ドロップダウンで出現する（下に落としたように出てくる）メニューの一種。
参考に、弊社の『エックスサーバー』のサービスサイトをご覧ください。
本来なら三階層目の「お支払い方法ページ」にアクセスするのに、二階層目の「料金ページ」を経由しなければなりません。
しかしドロップダウンメニューなら、三階層目の「お支払い方法ページ」にダイレクトでアクセス可能。限られたスペースをうまく活かせます。
すべてのページでデザインを統一する
グローバルナビゲーションのデザインは、すべてのページで統一しましょう。
ページによってデザインが違うと、ユーザーが混乱してしまいます。そのまま離脱してしまうおそれもあるでしょう。
デザインが統一されていれば、ユーザーがグローバルナビゲーションの存在に気づきやすくなります。
グローバルナビゲーションのデザイン例
ここからは、グローバルナビゲーションのデザイン例を紹介します。
パソコンサイトとスマホサイトに分けてポイントを見ていきましょう。
パソコンサイト
まず、パソコンサイトのグローバルナビゲーション事例を紹介します。
東レ株式会社
▲出典：東レ株式会社
東レ株式会社のホームページは、ページ数が豊富。
しかし、グローバルナビゲーションにメガメニューが採用されているため、目的のページを探しやすいです。
ナビゲーションの一種で、広い画面領域を持つドロップダウンメニューのこと。別名、「メガドロップダウン」「メガナビゲーションメニュー」とも呼ばれます。
メガメニュー搭載の企業ホームページ事例12選！メリットやコツも解説
まず、グローバルナビゲーションのリンクをクリックしてみます。すると、メガメニューが縦に展開。ここから二階層目のページである「企業情報」にアクセスできます。
▲出典：東レ株式会社
次に「矢印」のついたリンクをクリックしてみます。
▲出典：東レ株式会社
すると、三階層目のページへのリンクが横に表示されます。
ポイントは、メガメニューのデザインとして、「縦」と「横」をうまく利用していること。リンクが多くても、画面に収まるように工夫しているのです。
さらにヘッダーを固定することで、ユーザーがいつでもグローバルナビゲーションを通じて、他のページにアクセスできるようにしています。
※ヘッダー固定のメリットやデメリットは、以下の記事で解説しています。
【2023年最新版】参考にしたいヘッダーデザイン集
三菱商事株式会社
▲出典：三菱商事株式会社
三菱商事株式会社は、グローバルナビゲーションをサイドカラムに設置。リンクにマウスを乗せると、メガメニューが展開します。
▲出典：三菱商事株式会社
オンマウスだけでリンクが表示されるため、三階層目のページまで、ワンクリックで到達可能です。
また、サイドカラムは固定表示されているため、ユーザーはいつでもグローバルナビゲーションから、他のページにアクセスできます。
スマホサイト
スマホサイトのグローバルナビゲーションには、「ハンバーガーメニュー」がよく使用されます。
ハンバーガーメニューとは、3本線のアイコンのこと。クリックすると、隠れていたメニューが展開する仕組みです。
ここでは、ハンバーガーメニューを利用したスマホサイトの参考例を紹介します。
株式会社Enjin
▲出典：株式会社Enjin
グローバルナビゲーションにリンクが多く並ぶと、視認性が悪くなりやすいですよね。
株式会社Enjinのハンバーガーメニューは、リンクのデザインを工夫することで、その問題を解決しています。
三階層目のページへのリンクについて、以下3つの工夫を施しています。
- 冒頭に「ー」を挿入
- 小さいフォントサイズ
- 二階層目より目立たないテキストカラー
スマホサイトは、パソコンサイトほど表示領域が多くありません。そのため、三階層目のページへのリンクは省略されることも多いです。
どうしても三階層目のページへのリンクを入れたい場合は、株式会社Enjinのようにデザインを工夫するとよいでしょう。
株式会社ZENDESK
▲出典：株式会社ZENDESK
株式会社ZENDESKのサービスサイトでは、ハンバーガーメニューのなかに、アコーディオンメニューが設置されています。
クリックすると、アコーディオンのように展開するリンクのこと。クリックするまで、特定の要素を隠しておけるため、邪魔になりにくいのが特徴。パソコンサイトに比べて、表示領域が狭いスマホサイトで実装されるケースが多い。
アコーディオンメニューの企業事例10選！メリット・デメリットなど
スマホサイトで三階層目のページへのリンクを実施したい場合、アコーディオンメニューは有効な選択肢の一つです。
ユーザーが必要な情報を任意で「表示／非表示」できることは、ユーザービリティ（操作性）の観点でも優れていると言えるでしょう。
なお、ハンバーガーメニューの事例については、以下の記事でも紹介しているので、ぜひ併せてチェックしてみてください。
ハンバーガーメニューの事例8選！最適化するコツも解説
もっと参考のデザインを探したい方へ
グローバルナビゲーションのデザイン例をもっと探したい方は、「ギャラリーサイト」の活用がおすすめです。
ギャラリーサイトなら、他社のホームページを一覧表示できます。参考になるホームページを効率的に探せるでしょう。
おすすめのギャラリーサイトについては、以下の記事で紹介しています。ぜひ参考にしてみてください。
【2023年最新版】ホームページデザインの参考になるギャラリーサイト12選
まとめ
この記事では、グローバルナビゲーションの基礎知識、作成のポイント、デザイン例についてを解説しました。
これからホームページを作成する方や、リニューアルを考えている方は、参考になったのではないでしょうか。
- グローバルナビゲーションとは、「全ページに共通して設置されたリンク」
- グローバルナビゲーションの役割は、「ユーザーを目的のページに案内すること」
- グローバルナビゲーション作成するときは、「3つのポイント」を意識する
- グローバルナビゲーションのデザインを探す場合は、「ギャラリーサイト」がおすすめ
グローバルナビゲーションを作成するときは、ユーザーの視点に立って、見やすく使い勝手のよいデザインを心がけましょう。
それでは、素敵なホームページの完成を祈っております。
以上、最後まで読んでいただき、ありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1※のレンタルサーバーであり、17万社の導入実績があります。
6月9日12時まで利用料金最大30%OFFキャンペーン開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2023年5月時点、hostadvice.com調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【初心者向け】会社ホームページの作り方を基礎から解説
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
