WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

グローバルナビゲーションとは?ユーザーを迷わせないポイントと参考デザイン14選

2021.12.09 Web制作
グローバルナビゲーションとは?ユーザーを迷わせないポイントと参考デザイン14選
このエントリーをはてなブックマークに追加

グローバルナビゲーションはWebサイトの多くが取り入れている定番のナビゲーションです。ユーザーにも検索エンジンにも役立つ要素ですが、中には下層ページへのリンクをただ並べただけのナビゲーションも散見されます。正しくナビゲーションとしての役割を果たすためにはしっかりと設計する必要があるのです。

そこで今回は、ユーザーを迷わせないグローバルナビゲーションのポイントと参考デザインを厳選してご紹介します。ぜひ設計のヒントにしてみてください。

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

グローバルナビゲーションとは、Webサイトの全ページに共通して表示されているナビゲーションを指します。
一般的に画面の上部か、PCではサイドに設置されることもあります。

ユーザーが目的の情報に迷わず辿り着けるよう案内する役割があり、正しく設置すればユーザビリティの向上に繋がります。また、SEO面でも利点がある重要な要素です。

グローバルナビゲーション

グローバルナビゲーションには様々な呼び方があるため、「グローバルナビゲーション」ではピンとこない人でも以下の呼び方であれば聞き馴染みがあるかもしれません。

  • グローバルナビ
  • グロナビ
  • Gナビ
  • グローバルメニュー
  • ヘッダーメニュー
  • ヘッダーナビゲーション
  • メインメニュー

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

グローバルナビゲーションは大きく分けて「ユーザー向け」と「検索エンジン向け」の2つの役割を担っています。

ユーザー向けの役割

ユーザーを目的の情報へ案内する

Webサイトを訪れたユーザーの心理は様々です。
例えば、欲しい情報が漠然としていたり、なんとなく面白そうという閲覧動機だったり、どんな情報があるのかじっくり探したいユーザーは表示されたトップページをまずは上から順番に目を通していくかもしれません。

一方で、欲しい情報が明確だったり、多忙で時間がなかったり、少しでも早く目的の情報が欲しいユーザーはトップページに目を通すことなくナビゲーションから自分の探している情報だけを見に行くかもしれません。

もしWebサイトにグローバルナビゲーションがなかったら、後者のユーザーは情報の見つけづらさにストレスを感じて離脱してしまうかもしれません。

前者のユーザーもトップページの導線設計ができていないWebサイトだったら、興味のあるページに気づかないまま回遊することなく離脱してしまうかもしれません。

せっかくWebサイトのコンテンツを充実させても、ユーザーを上手く誘導できず離脱されてしまっては意味がありません。そのため、グローバルナビゲーションを設置することでユーザーが目的の情報に辿り着けるよう案内します。

現在地を示す

グローバルナビゲーションは全ページに共通して表示されているため、ナビゲーション上の現在地のデザインを工夫することで、ユーザーがどのページを見ていても現在地が判断できるようになります。

よくある例は、現在地のメニュー文字下に線を引く、メニュー文字色を変える、背景色を変えるなどです。現在地をわかりやすくすることで、ユーザーがWebサイトの中で迷わないように案内します。

検索エンジン向けの役割

検索エンジンは、内部リンクが多く集まったページを重要なコンテンツと認識します。グローバルナビゲーションを設置することで内部リンクを主要なページに集め、重要なコンテンツを伝えることができます。

検索エンジンが重要なコンテンツを認識できると、サイトの情報構造を理解しやすくなり評価の向上に繋がります。また、検索エンジンのクローラに対してより効率的にWebサイト内をクローリングさせることに繋がり、SEO上の効果が期待できます。

内部リンクについては以下の記事で詳しくご紹介しています。併せてご覧ください。

内部リンクとは?SEOで重要な構造設定と最適化について

グローバルナビゲーションのポイント

導線を考え、サイト構造をしっかり設計する

真にわかりやすいグローバルナビゲーションを設計するためには、ユーザーの導線を考えながら根本的なサイト構造からしっかりと設計する必要があります。

例えば、サービスの種類が複数ある企業サイトであれば「サービス」というインデックスページの下層に各サービスのページを配置すると、サービスに関するページのまとまりができてわかりやすくなります。

このように、コンテンツのまとまりを考えながら各ページの階層を決めていきます。
ただし、階層が深くならないよう注意が必要です。ユーザーがなるべく少ないクリック数で目的の情報まで辿り着けるように、小中規模サイトであれば2~4層を目安に設計すると良いでしょう。

サイト構造

サイト構造については以下の記事で詳しくご紹介しています。併せてご覧ください。

SEOを意識したWebサイト設計(ディレクトリ構造)とは?

グローバルナビゲーションの作り方としては、サイト構造を設計した後に、大きなカテゴリでまとまった第2階層から重要なページを選出する方法がシンプルでわかりやすくお勧めです。

コンテンツが充実したWebサイトであれば、ドロップダウンメニューで第3階層以下まで表示する方法もあります。また、グローバルナビゲーションは主要なページだけ表示させ、詳細なナビゲーションはフッターに階層がわかる形で表示する方法もあります。

導線については以下の記事で詳しくご紹介しています。併せてご覧ください。

サイトの導線と動線の違いとは?導線の設計方法と動線の分析方法

原則すべてのページに表示する

グローバルナビゲーションの役割はユーザーを目的の情報まで案内することです。どのページにいる時にグローバルナビゲーションを使うかは、ユーザーの状況によって様々です。そのため、どのページでもグローバルナビゲーションが表示されている必要があります。

ただし、お問い合わせフォームや商品購入ページ、会員専用ページなど例外もあります。あえて他ページへの導線を排除することでコンバージョン一歩手前での離脱を防いだり、専用ページ独自のナビゲーションを設置して使いやすくしたり、目的がある場合はグローバルナビゲーションを削除・改変することも有効な手段です。

メニュー数を絞る

あれもこれもと多くのメニューを詰め込むと、ユーザーがメニュー内容を認識するまで時間がかかったり、混乱を招いたり、かえってわかりづらくなります。ユーザーを素早く目的地まで案内する役割を果たすためには、メニュー数を絞る必要があります。

最適なメニュー数のヒントになる理論があります。人が1度に記憶できる情報量は「7±2」とする、マーケティングでも活用されている理論です。研究が進み現在では「4±1」が有力とされています。

内容の充実したWebサイトではメニュー数が増えてしまうのは仕方がありません。また、グローバルナビゲーションは中身のメニューを記憶する必要まではありません。
これらを考え合わせると、メニュー数は5~7を目安にすることをお勧めします。

どうしてもメニュー数が多くなってしまう場合は、サイト構造をもう一度見直した方が良いかもしれません。

グローバルナビゲーションの表示位置を検討する

グローバルナビゲーションの表示位置は、ユーザーが迷ってもすぐに見つけられるよう、ユーザーの視線の流れを意識してわかりやすい場所を検討します。

一般的には上部に配置されているパターンが多いですが、PCではメインビジュアル下やサイドに配置されたパターンもよく目にします。

グローバルナビゲーションの表示位置

中には挑戦的なデザインで、奇をてらった配置パターンを目にすることもあります。
例えば、画面の四隅に各メニューを散らした配置などです。ユーザーに先鋭的な印象を与えることはできますが、グローバルナビゲーションと認識されない可能性や使いづらさを感じさせる危険性があります。

定番の配置パターンではユニークさが出せないと考える人もいるかもしれません。ですが、定番の配置はユーザーに使いやすさや安心感を与えることができます。

グローバルナビゲーションなど機能的な役割のある要素で無理に他と差別化しようとしなくても、デザイン面でしっかり個性を出している素敵なWebサイトもたくさんあります。

グローバルナビゲーションの配置を決める際は、「見つけづらくないか?」「使いづらくないか?」「わかりにくくないか?」と、ユーザーの目線に立って検討することを忘れてはいけません。

各メニューの文言

各メニューの文言も「わかりやすく」がポイントです。
例えば、サービスページへのメニュー文言を「当社のサービスのご紹介」とすると長くてまどろっこしさを感じないでしょうか。シンプルに「サービス」とした方が一目で認識できます。

一方、挨拶ページのメニュー文言を「メッセージ」とすると何のメッセージなのか伝わりません。「社長メッセージ」「新入社員へのメッセージ」のように、誰からのメッセージなのか、誰へのメッセージなのかわかると、どのようなページかイメージが沸きやすくなります。

メニューの文言はシンプルなほど良い、情報が詳細なほど良い、というわけではありません。どのようなページなのか正確にわかりやすく伝わる文言を選定しましょう。

また、よくある落とし穴として英語表記だけのメニューがあります。
英語表記はデザイン性が良いという理由もあり安易に使われがちです。ですが、英語表記には誤った英語を使っていても気づけないリスクや、ユーザーにページの内容が正しく伝わらないリスクがあります。

例えば「About」は「当社について」のメッセージページなのか、「会社紹介」の情報ページなのか、ページを見てみないと判断できません。

どうしても英語表記を使いたい場合は、ユーザーを迷わせないわかりやすい英単語を使う、日本語を併記して使うなど工夫が必要です。

グローバルナビゲーションの動き・仕様を工夫する

グローバルナビゲーションは動きを工夫することでさらに使いやすくなります。動きの例をいくつかご紹介します。

グローバルナビゲーション全体を固定して常時表示する

画面上部か下部にグローバルナビゲーション全体を固定することで、スクロールしても常に画面上に表示されている状態になります。ユーザーがグローバルナビゲーションに気づきやすくなり、またページ上部まで戻らなくても必要なタイミングですぐに使うことができます。

上にも下にも闇雲に要素を固定して表示すると、コンテンツが表示されるエリアが狭まり読みづらくなります。スクロールしても追従する要素を嫌うユーザーもいるため、固定表示は使いどころに注意が必要です。

現在地のメニューを強調する(カレント表示)

現在地のメニューに下線を入れる、文字色を変えるなど強調することで、ユーザーがどのページを見ていても現在地が判断できるようになります。

開閉式ナビゲーションを開くとボタンがクローズボタンに変わる

ハンバーガーメニューなど開閉するナビゲーションは、開く際も閉じる際も同じボタンを使う場合が多いですが、中にはどこで閉じたら良いかわからないリテラシーの低いユーザーもいるかもしれません。

ナビゲーションが開いた時はボタンがクローズボタンに変わる動きをつけることで、誰にでも使いやすくなります。

開閉式ナビゲーションが長くなる場合は横スライド式+最後尾にクローズボタン

ナビゲーションが開いた時に、全画面を覆わない横スライド式であれば、ナビゲーション外をタップすると上部に戻らなくてもすぐに閉じることができます。

そのため、ナビゲーションが長くなる場合は横スライド式がお勧めです。さらにナビゲーション内の最後尾にもクローズボタンを設置するとよりわかりやすく親切です。

ハンバーガーメニューの使い方に注意する

ハンバーガーメニューは、スマートフォンサイトのグローバルナビゲーションで活用されることが多いです。省スペースで充実したナビゲーションを設置できて都合が良いですが、使い方に注意しないと見落とされる可能性もあります。

例えば、三本線アイコンだけのボタンをよく目にします。Webサイトを使い慣れているユーザーであれば三本線を見たら一目で「開く」ことがわかります。しかし、慣れていないユーザーが三本線を見てもおそらくただの三本線。気にも留めないかそもそも気づかないかもしれません。

そのため、ハンバーガーメニューのボタンには、「Menu」や「メニュー」のように文字情報も添えることをお勧めします。

また、スマートフォンサイトでのグローバルナビゲーションの入れ方はハンバーガーメニューだけではありません。タブメニューやスライドメニュー、もっと見る付きメニューなどユーザーが視認しやすい方法もあります。Webサイトのターゲットや目的に合わせて最適なものを選択しましょう。

パターン別!グローバルナビゲーション参考デザイン14選

グローバルナビゲーションの参考になるデザインを集めました。PCとスマートフォンで分けてパターン別にご紹介します。
※現状のデザイン及びリンク先は変更されている場合がございます

PCのグローバルナビゲーション参考デザイン

ヘッダーに配置パターン

株式会社ヤマサキ

株式会社ヤマサキ

参照元:https://www.corporate.lasana.co.jp/

シンプルなグローバルナビゲーションです。周囲にごちゃごちゃとした要素がないためとても潔く見やすいデザインです。現在地は文字色が変わってわかりやすいです。

そのイキだ。Clorets (クロレッツ)

そのイキだ。Clorets (クロレッツ)

参照元:https://www.clorets.jp/index.html

スクロールすると上部に固定されるタイプのグローバルナビゲーションです。メニュー名を英語表記していますが、マウスオンすると日本語表記に変わる工夫が光っています。現在地は下線が引かれてわかりやすいです。

メインビジュアル下に配置パターン

ポカリスエット公式サイト

ポカリスエット公式サイト

参照元:https://pocarisweat.jp/

写真やキャッチコピーが真っ先に飛び込んでくるインパクトのあるデザインパターン。商品を印象付けたい場合などに有効です。現在地は背景に薄い色が敷かれてわかりやすいです。

サイドに配置パターン

MOV 《モブ》

MOV 《モブ》

参照元:https://m-o-v.jp/

サイド配置は固定型が基本ですが、コンテンツに集中するとサイド側が視界から外れるため、ヘッダー配置のグローバルナビゲーションよりも邪魔になりません。

ドロップダウンメニューがあるパターン

マーケティングオートメーションツール SATORI

マーケティングオートメーションツール SATORI

参照元:https://satori.marketing/

マウスオンでさらに詳細なメニューが表示されるドロップダウンメニュー。参考デザインではコンパクトなタイプのドロップダウンメニューが採用されています。現在地は文字色が変わる+下線でわかりやすいです。

【公式】LINEMO – ラインモ

【公式】LINEMO - ラインモ

参照元:https://www.linemo.jp/

サイド配置パターンのドロップダウンメニューです。ドロップダウンがある箇所は「+」で表現されているため一目で判断できます。

電通ウェブサイト

電通ウェブサイト

参照元:https://www.dentsu.co.jp/

メガメニュータイプのドロップダウンメニューです。画像なしでテキストのみだと単調になりがちですが、色を使い分けることで変化をつけ見分けやすくしています。
現在地は文字色が変わってわかりやすいです。

マツダ オフィシャルウェブサイト

マツダ オフィシャルウェブサイト

参照元:https://www.mazda.co.jp/

マウスオンではなくクリックで表示されるメガメニューです。画像が入ることで視覚的にメニュー内容が判断でき明快です。

グローバルナビゲーション内で各メニューに優劣を付けてサブメニューとメインメニューの2段に分けている点も参考にできます。現在地は文字が太字になってわかりやすいです。

スマートフォンのグローバルナビゲーション参考デザイン

ハンバーガーメニュー

ドロップダウン式
伊藤忠商事株式会社

伊藤忠商事株式会社

参照元:https://www.itochu.co.jp/ja/

ボタンをタップすると上からナビゲーションが開き、ナビゲーションが被さっていないコンテンツ部分を操作することができるハンバーガーメニューです。ナビゲーションが縦に長くなると使いにくいため、開閉式のアコーディオンボタンが活用されています。

参考デザインではボタンが開くと「閉じる」に変わり、メニューの最後尾に「閉じる」ボタンも設置され、ユーザビリティが考えられています。

スライド式(サイド)
カラダにピース。「カルピス」

カラダにピース。「カルピス」

参照元:https://www.calpis.info/

ボタンをタップすると横からナビゲーションが開き、ナビゲーション外をタップすると上部に戻らなくてもすぐに閉じることができるハンバーガーメニューです。

参考デザインではスマートフォンの狭い表示エリアの中で邪魔にならないようボタンをスリムにしながらも、右サイドにブルーのラインを引き存在感が出るようデザインが工夫されています。

モーダルウィンドウ式
クレジットカードは永久不滅ポイントのセゾンカード

クレジットカードは永久不滅ポイントのセゾンカード

参照元:https://www.saisoncard.co.jp/

ボタンをタップするとナビゲーションが画面全体を覆い隠すハンバーガーメニューです。開いたナビゲーションだけに注目させることができるため、メニュー内容が複雑な場合やユーザーにしっかり検討してから遷移して欲しい場合に有効です。

ただし、モーダルウィンドウはユーザーの行動を制限するため、圧迫感や嫌悪感を与える可能性もあり注意が必要です。参考デザインではただのテキストリンクの羅列ではなく、内容ごとに見せ方を変えてレイアウトがわかりやすく工夫されています。

ハンバーガーメニューに代わるグローバルナビゲーション

タブメニュー
オムロン ネブライザーねっと

オムロン ネブライザーねっと

参照元:https://store.healthcare.omron.co.jp/nebulizer-net/

ナビゲーションがすべて表示されているため、ユーザーが一目で内容を把握して選択できます。メニュー数が多いと見づらくなる点とナビゲーション全体の占めるエリアが広くなってしまう点がデメリットです。

ブランディングではなくユーザビリティを優先する場合に有効です。参考デザインではメニュー数が多いですが、イラストを入れたり現在地に下線を引いたり、わかりやすく工夫されています。

スライドメニュー
Business Journal

Business Journal

参照元:https://biz-journal.jp/

横にスライドすることで隠れているメニューもすべて見ることができます。タブメニューでは表示できるメニュー数が限られますが、スライドメニューであればメニュー数が多くても使えます。

参考デザインではデフォルトの画面に表示されているメニューが中途半端に切れるようにしているため、続きがあることが伝わりやすいです。現在地は背景の色を変えてわかりやすくしています。

一部表示+もっと見る
niko and … OFFICIAL BRAND SITE

niko and ... OFFICIAL BRAND SITE

参照元:https://www.nikoand.jp/channel/special/

スライドメニューともっと見る(ハンバーガーメニュー)を組み合わせています。メニューの一部が表示されているためユーザーに見落とされることなく、さらに詳細なメニューも開くと表示されるという良いとこ取りのパターンです。

参考デザインはビビッドなデザインですが、全体のデザインと合っているためメニューが悪目立ちすることなくバランスが良いです。現在地は矢印アイコンがついてわかりやすいです。

おわりに

ユーザーを迷わせないグローバルナビゲーションのポイントと参考デザインをご紹介しました。

上記のポイントに気を付けることも必要ですが、重要なのは形になったグローバルナビゲーションを「わかりやすいか?」「使いやすいか?」「目的の情報にすばやく辿り着けるか?」
と、ユーザーの目線に立って見直すことです。

グローバルナビゲーションを適切に設計することで、ユーザーを迷わせず、検索エンジンにもアピールできるWebサイトを目指しましょう。

 

このエントリーをはてなブックマークに追加
The following two tabs change content below.

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
お役立ち資料ダウンロード

問い合わせCTA

ウルロジ誘導CTA_900

セルマーケ

SNSでフォロー

Contact

Webマーケティングに関わる施策全般をワンストップでご提供します。
お気軽にご相談ください。

Webマーケティング最新情報をお届け
東京営業所
東京都新宿区西新宿1丁目6-1 新宿エルタワー3階
電話番号 03-6374-1393 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2022 DM SOLUTIONS Co.,Ltd. All rights reserved.