グローバルナビゲーションとは？作成のポイントとデザイン例

この記事を読むための時間：5分

Webサイトに設置されていることが多いグローバルナビゲーションについて知っていますか？

Webサイトで目的のページになかなかたどり着けない…。そんな時にユーザーを助けてくれるのがグローバルナビゲーションです。

今回は「グローバルナビゲーションって何？」「どんな風に役立つの？」という方向けに解説していきます。

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

グローバルナビゲーションとは、Webサイトの全てのページに原則共通で設置される主要ページへのリンクのことです。

「グローバルメニュー」や「ヘッダーナビゲーション」「メインメニュー」などとも呼ばれ、Webサイトのページ上部やサイドバーなどに設置されています。

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

グローバルナビゲーションはどのような場面で役立っているのでしょうか？ここからは、グローバルナビゲーションの役割を紹介します。

ユーザーを目的地へ導く

グローバルナビゲーションの最も重要な役割は、ユーザーを目的地へ案内することです。ユーザーがどのページから流入しても、グローバルナビゲーションがあれば目的のページに近いメニューを選択することで最短距離でたどり着けます。

グローバルナビゲーションが設置されていないと、ユーザーはヒントがほとんどない状態で膨大な情報の中から目的地を探さなければなりません。

サイトの構成・全体像を把握させる

ユーザーにWebサイト全体の構成を把握やすくすることも、グローバルナビゲーションの役割のひとつです。

多くのサイトのグローバルナビゲーションは、サイト内の主要ページへのリンクが設置されています。そのため、このサイトにはどんなページがありどんな情報を得られるのかがわかります。

現在地を把握させる

ユーザーに今どのページを閲覧中なのかを伝え、ユーザーが迷子になるのを防ぐ役割もあります。ユーザーは検索エンジンなどから末端ページにたどり着く可能性もありますが、その場合でも今どのカテゴリ・階層にいるのかわかれば目的ページへ早くたどり着けます。

重要なコンテンツであることを示す（SEO）

グローバルナビゲーションは全てのページに共通して設置されるため、グローバルナビゲーションのリンク先は内部リンクが多数集まるページとなります。

内部リンクが多いページを重要なコンテンツと認識する検索エンジンに重要なコンテンツであることを伝えられるので、SEO（検索エンジン最適化）効果が期待できます。グローバルナビゲーションを設置することがページの検索順位アップに繋がるのです。

ナビゲーションは検索エンジンにとっても重要な要素

サイトのナビゲーションは、ユーザーが迅速に目的のコンテンツにたどり着けるようにするために重要です。また、検索エンジンにとっても、ウェブマスターがどのコンテンツを重要と考えているのかを理解するのに役立ちます。Googleの検索結果はページ単位で提供されますが、サイト全体という大きな視点から、そのページがどのような役割を果たしているのかについても、Googleは理解したいと考えています。

引用元：http://static.googleusercontent.com/

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

グローバルナビゲーションを作成する際は、以下の4つのポイントを押さえるようにしましょう。

1. 全てのページでデザインを統一する
2. メニューの数を増やしすぎない
3. 階層がわかるようにデザインする
4. 道案内機能と組み合わせる

それでは、順番に紹介します。

1. 全てのページでデザインを統一する

グローバルナビゲーションは地図のようなものです。ページごとにデザインや配置項目が違うとユーザーが混乱してしまいます。ユーザーが迷いにくいサイトにするため、グローバルナビゲーションと項目は全てのページで原則統一しましょう。

2. メニューの項目を増やしすぎない

グローバルナビゲーションの項目の数を考える時、「マジカルナンバー（マジックナンバー）」という考え方がよく登場します。

これは、人が短期記憶できる情報のかたまり（チャンク）の数のことで、1956年にアメリカの心理学者ジョージ・ミラーが「7±2」であると発表しました。2001年には同じくアメリカの心理学者のネルソン・カウアンが「4±1」である可能性を指摘しています。

つまり、人が短期記憶できるチャンクは5つ前後。メニューをたくさん配置しすぎるとユーザーがどんな項目があるのか把握できず、サイト内で迷う可能性が高まるのです。マジカルナンバーを意識して、メニューの項目は主要ページに絞りましょう。

3. 階層がわかるようにデザインする

階層構造がわかりやすいようにすることは、グローバルナビゲーションのデザインにおいて非常に重要です。閲覧中の階層がわかると自分の現在地を把握しやすくなり、目的地にたどり着くのが簡単になります。階層の違うページを並べないようにしましょう。

4. 他のナビゲーション機能と組み合わせる

グローバルナビゲーションのみでユーザーを目的ページまで誘導しようと凝った設計にすると、反対にわかりにくくなります。パンくずリストやローカルサブナビゲーションなどの他のナビゲーション機能と効果的に組み合わせ、使いやすいサイトにしましょう。

【PCで見る】グローバルナビゲーションのデザイン例

グローバルナビゲーションがどんなものが理解できましたか？

ここからは、PCのブラウザで見るグローバルナビゲーションのデザインをいくつか見てみましょう。階層の少ないサイトも登場しますが、デザインの参考にはなるはずです。

SALONIA

こちらは美容家電ブランド「SALONIA」の公式サイトです。上部にミニマルなグローバルナビゲーションが固定されており、マウスオーバーで下層ページメニューが表示されます。スクロールするとグローバルナビゲーションの背景が半透明になり商品画像ができるだけたくさん見えるようにデザインされています。

CORONE CORNE

こちらは美味しくて身体にやさしいコロネのお店、「CORONE CORNE」の1枚縦型の階層のない公式サイトです。左上の白い文字がグローバルメニューで、マウスオーバーで文字がひらがなに変わります。

BEAMS JAPAN

人気セレクトショップ「BEAMS JAPAN」のスペシャルサイトは右上の3本線のハンバーガーメニューがグローバルナビゲーションになっています。クリックするとフルスクリーンにメニューが表示される設計です。

最近はこのようにPCサイトでもハンバーガーメニューを採用するサイトが増えています。

キングジム

株式会社キングジムが展開する、テプラとBluetooth接続しておしゃれなラベルを作れるアプリ「Hallo」のWebサイトでは、左側中央にユニークなグローバルナビゲーションを設置しています。スクロールすると文字は消えて6本線のラインだけ残るデザインで、マウスオーバーしたラインのメニューだけ文字が現れます。

【スマホで使用される】グローバルナビデザインと事例

グローバルナビゲーションはPC画面では問題ありませんが、画面が小さいスマートフォンではタップしにくいため工夫が必要です。

そこで、スマホでよく採用されているナビゲーションデザインを紹介します。

ハンバーガーメニュー

3本線「≡」（もしくは2本線）アイコンをタップするとメニューが出現する「ハンバーガーメニュー」はスマホでよく見られ、PCサイトでも見られるナビゲーションです。アイコンの見た目がハンバーガーに似ていることからこの名で呼ばれています。

しかし、押してみないとどんなメニューが表示されるかわからない、片手で押しにくい位置にある、などのデメリットがあります。

ボトムナビゲーション

「ボトムナビゲーション」は、画面下部にナビゲーションが固定されているUIデザインで、ネイティブアプリでよく見られ、LINEアプリやYouTubeなどに採用されています。

視覚的にわかりやすいアイコンとラベルで構成されており、メニューの数は4〜5個。片手で操作しやすいのも魅力のひとつです。

フリックスクロールナビゲーション

スマホ画面上部のメニューが横にスクロールできる「フリックスクロールナビゲーション」もよく見るデザインです。ニュースアプリなどのカテゴリが多い時に便利ですが、スクロールしないとメニュー項目が把握できないというデメリットがあります。

まとめ

今回は、グローバルナビゲーションについて解説しました。

ナビゲーションとしてユーザーの手助けをするだけでなく、SEOにも効果があり、またWebサイト全体のイメージも左右する重要なパーツです。紹介した4つのポイントを押さえて、最適なグローバルナビゲーションを作成しましょう。