グローバルナビゲーションはWebサイトの多くが取り入れている定番のナビゲーションです。ユーザーにも検索エンジンにも役立つ要素ですが、中には下層ページへのリンクをただ並べただけのナビゲーションも散見されます。正しくナビゲーションとしての役割を果たすためにはしっかりと設計する必要があるのです。
そこで今回は、ユーザーを迷わせないグローバルナビゲーションのポイントと参考デザインを厳選してご紹介します。ぜひ設計のヒントにしてみてください。
グローバルナビゲーションとは、Webサイトの全ページに共通して表示されているナビゲーションを指します。
一般的に画面の上部か、PCではサイドに設置されることもあります。
ユーザーが目的の情報に迷わず辿り着けるよう案内する役割があり、正しく設置すればユーザビリティの向上に繋がります。また、SEO面でも利点がある重要な要素です。
グローバルナビゲーションには様々な呼び方があるため、「グローバルナビゲーション」ではピンとこない人でも以下の呼び方であれば聞き馴染みがあるかもしれません。
グローバルナビゲーションは大きく分けて「ユーザー向け」と「検索エンジン向け」の2つの役割を担っています。
Webサイトを訪れたユーザーの心理は様々です。
例えば、欲しい情報が漠然としていたり、なんとなく面白そうという閲覧動機だったり、どんな情報があるのかじっくり探したいユーザーは表示されたトップページをまずは上から順番に目を通していくかもしれません。
一方で、欲しい情報が明確だったり、多忙で時間がなかったり、少しでも早く目的の情報が欲しいユーザーはトップページに目を通すことなくナビゲーションから自分の探している情報だけを見に行くかもしれません。
もしWebサイトにグローバルナビゲーションがなかったら、後者のユーザーは情報の見つけづらさにストレスを感じて離脱してしまうかもしれません。
前者のユーザーもトップページの導線設計ができていないWebサイトだったら、興味のあるページに気づかないまま回遊することなく離脱してしまうかもしれません。
せっかくWebサイトのコンテンツを充実させても、ユーザーを上手く誘導できず離脱されてしまっては意味がありません。そのため、グローバルナビゲーションを設置することでユーザーが目的の情報に辿り着けるよう案内します。
グローバルナビゲーションは全ページに共通して表示されているため、ナビゲーション上の現在地のデザインを工夫することで、ユーザーがどのページを見ていても現在地が判断できるようになります。
よくある例は、現在地のメニュー文字下に線を引く、メニュー文字色を変える、背景色を変えるなどです。現在地をわかりやすくすることで、ユーザーがWebサイトの中で迷わないように案内します。
検索エンジンは、内部リンクが多く集まったページを重要なコンテンツと認識します。グローバルナビゲーションを設置することで内部リンクを主要なページに集め、重要なコンテンツを伝えることができます。
検索エンジンが重要なコンテンツを認識できると、サイトの情報構造を理解しやすくなり評価の向上に繋がります。また、検索エンジンのクローラに対してより効率的にWebサイト内をクローリングさせることに繋がり、SEO上の効果が期待できます。
内部リンクについては以下の記事で詳しくご紹介しています。併せてご覧ください。
真にわかりやすいグローバルナビゲーションを設計するためには、ユーザーの導線を考えながら根本的なサイト構造からしっかりと設計する必要があります。
例えば、サービスの種類が複数ある企業サイトであれば「サービス」というインデックスページの下層に各サービスのページを配置すると、サービスに関するページのまとまりができてわかりやすくなります。
このように、コンテンツのまとまりを考えながら各ページの階層を決めていきます。
ただし、階層が深くならないよう注意が必要です。ユーザーがなるべく少ないクリック数で目的の情報まで辿り着けるように、小中規模サイトであれば2～4層を目安に設計すると良いでしょう。
サイト構造については以下の記事で詳しくご紹介しています。併せてご覧ください。
グローバルナビゲーションの作り方としては、サイト構造を設計した後に、大きなカテゴリでまとまった第2階層から重要なページを選出する方法がシンプルでわかりやすくお勧めです。
コンテンツが充実したWebサイトであれば、ドロップダウンメニューで第3階層以下まで表示する方法もあります。また、グローバルナビゲーションは主要なページだけ表示させ、詳細なナビゲーションはフッターに階層がわかる形で表示する方法もあります。
導線については以下の記事で詳しくご紹介しています。併せてご覧ください。
グローバルナビゲーションの役割はユーザーを目的の情報まで案内することです。どのページにいる時にグローバルナビゲーションを使うかは、ユーザーの状況によって様々です。そのため、どのページでもグローバルナビゲーションが表示されている必要があります。
ただし、お問い合わせフォームや商品購入ページ、会員専用ページなど例外もあります。あえて他ページへの導線を排除することでコンバージョン一歩手前での離脱を防いだり、専用ページ独自のナビゲーションを設置して使いやすくしたり、目的がある場合はグローバルナビゲーションを削除・改変することも有効な手段です。
あれもこれもと多くのメニューを詰め込むと、ユーザーがメニュー内容を認識するまで時間がかかったり、混乱を招いたり、かえってわかりづらくなります。ユーザーを素早く目的地まで案内する役割を果たすためには、メニュー数を絞る必要があります。
最適なメニュー数のヒントになる理論があります。人が1度に記憶できる情報量は「7±2」とする、マーケティングでも活用されている理論です。研究が進み現在では「4±1」が有力とされています。
内容の充実したWebサイトではメニュー数が増えてしまうのは仕方がありません。また、グローバルナビゲーションは中身のメニューを記憶する必要まではありません。
これらを考え合わせると、メニュー数は5～7を目安にすることをお勧めします。
どうしてもメニュー数が多くなってしまう場合は、サイト構造をもう一度見直した方が良いかもしれません。
グローバルナビゲーションの表示位置は、ユーザーが迷ってもすぐに見つけられるよう、ユーザーの視線の流れを意識してわかりやすい場所を検討します。
一般的には上部に配置されているパターンが多いですが、PCではメインビジュアル下やサイドに配置されたパターンもよく目にします。
中には挑戦的なデザインで、奇をてらった配置パターンを目にすることもあります。
例えば、画面の四隅に各メニューを散らした配置などです。ユーザーに先鋭的な印象を与えることはできますが、グローバルナビゲーションと認識されない可能性や使いづらさを感じさせる危険性があります。
定番の配置パターンではユニークさが出せないと考える人もいるかもしれません。ですが、定番の配置はユーザーに使いやすさや安心感を与えることができます。
グローバルナビゲーションなど機能的な役割のある要素で無理に他と差別化しようとしなくても、デザイン面でしっかり個性を出している素敵なWebサイトもたくさんあります。
グローバルナビゲーションの配置を決める際は、「見つけづらくないか？」「使いづらくないか？」「わかりにくくないか？」と、ユーザーの目線に立って検討することを忘れてはいけません。
各メニューの文言も「わかりやすく」がポイントです。
例えば、サービスページへのメニュー文言を「当社のサービスのご紹介」とすると長くてまどろっこしさを感じないでしょうか。シンプルに「サービス」とした方が一目で認識できます。
一方、挨拶ページのメニュー文言を「メッセージ」とすると何のメッセージなのか伝わりません。「社長メッセージ」「新入社員へのメッセージ」のように、誰からのメッセージなのか、誰へのメッセージなのかわかると、どのようなページかイメージが沸きやすくなります。
メニューの文言はシンプルなほど良い、情報が詳細なほど良い、というわけではありません。どのようなページなのか正確にわかりやすく伝わる文言を選定しましょう。
また、よくある落とし穴として英語表記だけのメニューがあります。
英語表記はデザイン性が良いという理由もあり安易に使われがちです。ですが、英語表記には誤った英語を使っていても気づけないリスクや、ユーザーにページの内容が正しく伝わらないリスクがあります。
例えば「About」は「当社について」のメッセージページなのか、「会社紹介」の情報ページなのか、ページを見てみないと判断できません。
どうしても英語表記を使いたい場合は、ユーザーを迷わせないわかりやすい英単語を使う、日本語を併記して使うなど工夫が必要です。
グローバルナビゲーションは動きを工夫することでさらに使いやすくなります。動きの例をいくつかご紹介します。
画面上部か下部にグローバルナビゲーション全体を固定することで、スクロールしても常に画面上に表示されている状態になります。ユーザーがグローバルナビゲーションに気づきやすくなり、またページ上部まで戻らなくても必要なタイミングですぐに使うことができます。
上にも下にも闇雲に要素を固定して表示すると、コンテンツが表示されるエリアが狭まり読みづらくなります。スクロールしても追従する要素を嫌うユーザーもいるため、固定表示は使いどころに注意が必要です。
現在地のメニューに下線を入れる、文字色を変えるなど強調することで、ユーザーがどのページを見ていても現在地が判断できるようになります。
ハンバーガーメニューなど開閉するナビゲーションは、開く際も閉じる際も同じボタンを使う場合が多いですが、中にはどこで閉じたら良いかわからないリテラシーの低いユーザーもいるかもしれません。
ナビゲーションが開いた時はボタンがクローズボタンに変わる動きをつけることで、誰にでも使いやすくなります。
ナビゲーションが開いた時に、全画面を覆わない横スライド式であれば、ナビゲーション外をタップすると上部に戻らなくてもすぐに閉じることができます。
そのため、ナビゲーションが長くなる場合は横スライド式がお勧めです。さらにナビゲーション内の最後尾にもクローズボタンを設置するとよりわかりやすく親切です。
ハンバーガーメニューは、スマートフォンサイトのグローバルナビゲーションで活用されることが多いです。省スペースで充実したナビゲーションを設置できて都合が良いですが、使い方に注意しないと見落とされる可能性もあります。
例えば、三本線アイコンだけのボタンをよく目にします。Webサイトを使い慣れているユーザーであれば三本線を見たら一目で「開く」ことがわかります。しかし、慣れていないユーザーが三本線を見てもおそらくただの三本線。気にも留めないかそもそも気づかないかもしれません。
そのため、ハンバーガーメニューのボタンには、「Menu」や「メニュー」のように文字情報も添えることをお勧めします。
また、スマートフォンサイトでのグローバルナビゲーションの入れ方はハンバーガーメニューだけではありません。タブメニューやスライドメニュー、もっと見る付きメニューなどユーザーが視認しやすい方法もあります。Webサイトのターゲットや目的に合わせて最適なものを選択しましょう。
グローバルナビゲーションの参考になるデザインを集めました。PCとスマートフォンで分けてパターン別にご紹介します。
※現状のデザイン及びリンク先は変更されている場合がございます
参照元：https://www.corporate.lasana.co.jp/
シンプルなグローバルナビゲーションです。周囲にごちゃごちゃとした要素がないためとても潔く見やすいデザインです。現在地は文字色が変わってわかりやすいです。
参照元：https://www.clorets.jp/index.html
スクロールすると上部に固定されるタイプのグローバルナビゲーションです。メニュー名を英語表記していますが、マウスオンすると日本語表記に変わる工夫が光っています。現在地は下線が引かれてわかりやすいです。
写真やキャッチコピーが真っ先に飛び込んでくるインパクトのあるデザインパターン。商品を印象付けたい場合などに有効です。現在地は背景に薄い色が敷かれてわかりやすいです。
サイド配置は固定型が基本ですが、コンテンツに集中するとサイド側が視界から外れるため、ヘッダー配置のグローバルナビゲーションよりも邪魔になりません。
マウスオンでさらに詳細なメニューが表示されるドロップダウンメニュー。参考デザインではコンパクトなタイプのドロップダウンメニューが採用されています。現在地は文字色が変わる＋下線でわかりやすいです。
サイド配置パターンのドロップダウンメニューです。ドロップダウンがある箇所は「＋」で表現されているため一目で判断できます。
メガメニュータイプのドロップダウンメニューです。画像なしでテキストのみだと単調になりがちですが、色を使い分けることで変化をつけ見分けやすくしています。
現在地は文字色が変わってわかりやすいです。
マウスオンではなくクリックで表示されるメガメニューです。画像が入ることで視覚的にメニュー内容が判断でき明快です。
グローバルナビゲーション内で各メニューに優劣を付けてサブメニューとメインメニューの2段に分けている点も参考にできます。現在地は文字が太字になってわかりやすいです。
参照元：https://www.itochu.co.jp/ja/
ボタンをタップすると上からナビゲーションが開き、ナビゲーションが被さっていないコンテンツ部分を操作することができるハンバーガーメニューです。ナビゲーションが縦に長くなると使いにくいため、開閉式のアコーディオンボタンが活用されています。
参考デザインではボタンが開くと「閉じる」に変わり、メニューの最後尾に「閉じる」ボタンも設置され、ユーザビリティが考えられています。
ボタンをタップすると横からナビゲーションが開き、ナビゲーション外をタップすると上部に戻らなくてもすぐに閉じることができるハンバーガーメニューです。
参考デザインではスマートフォンの狭い表示エリアの中で邪魔にならないようボタンをスリムにしながらも、右サイドにブルーのラインを引き存在感が出るようデザインが工夫されています。
参照元：https://www.saisoncard.co.jp/
ボタンをタップするとナビゲーションが画面全体を覆い隠すハンバーガーメニューです。開いたナビゲーションだけに注目させることができるため、メニュー内容が複雑な場合やユーザーにしっかり検討してから遷移して欲しい場合に有効です。
ただし、モーダルウィンドウはユーザーの行動を制限するため、圧迫感や嫌悪感を与える可能性もあり注意が必要です。参考デザインではただのテキストリンクの羅列ではなく、内容ごとに見せ方を変えてレイアウトがわかりやすく工夫されています。
参照元：https://store.healthcare.omron.co.jp/nebulizer-net/
ナビゲーションがすべて表示されているため、ユーザーが一目で内容を把握して選択できます。メニュー数が多いと見づらくなる点とナビゲーション全体の占めるエリアが広くなってしまう点がデメリットです。
ブランディングではなくユーザビリティを優先する場合に有効です。参考デザインではメニュー数が多いですが、イラストを入れたり現在地に下線を引いたり、わかりやすく工夫されています。
横にスライドすることで隠れているメニューもすべて見ることができます。タブメニューでは表示できるメニュー数が限られますが、スライドメニューであればメニュー数が多くても使えます。
参考デザインではデフォルトの画面に表示されているメニューが中途半端に切れるようにしているため、続きがあることが伝わりやすいです。現在地は背景の色を変えてわかりやすくしています。
参照元：https://www.nikoand.jp/channel/special/
スライドメニューともっと見る（ハンバーガーメニュー）を組み合わせています。メニューの一部が表示されているためユーザーに見落とされることなく、さらに詳細なメニューも開くと表示されるという良いとこ取りのパターンです。
参考デザインはビビッドなデザインですが、全体のデザインと合っているためメニューが悪目立ちすることなくバランスが良いです。現在地は矢印アイコンがついてわかりやすいです。
成果の最大化を目指すWebサイト制作
Webサイト制作に関して以下のお悩みを持ったことはありませんか？
「Webサイト経由のお問い合わせ数を増やしたい・・・」
「SEOに強いWebサイト制作会社を探してる・・・」
以前、私がWebサイト制作を外注する時に「成果を最大化するアドバイスがもらえるのか」「SEO要件を満たした会社なのか」こうした会社を見つけることが出来ませんでした。
当社はWebサイト制作はもちろんのこと、「Webマーケティングによる収益の最大化」を目指す会社です。なぜなら、SEOに強くCV数を最大化を図るWebサイト制作を相談することができるからです。また、経験豊富な専任コンサルタントが社内のSEOコンサルタントや制作チームと連携してWebマーケティングの収益最大化を目指すことができます。
当社の強みは以下にあります。
当社にWebサイト制作をお任せ頂いたお客様で様々な成果事例が報告されています。
当社は「SEO×クリエイティブ」のちからで課題を解決できるWebサイト制作の代行会社です。当社の「Webサイト制作サービス」をご確認ください。
ユーザーを迷わせないグローバルナビゲーションのポイントと参考デザインをご紹介しました。
上記のポイントに気を付けることも必要ですが、重要なのは形になったグローバルナビゲーションを「わかりやすいか？」「使いやすいか？」「目的の情報にすばやく辿り着けるか？」
と、ユーザーの目線に立って見直すことです。
グローバルナビゲーションを適切に設計することで、ユーザーを迷わせず、検索エンジンにもアピールできるWebサイトを目指しましょう。
EFOは、ユーザーのCVをしやすくするためのフォーム最適化の取り組みを言います。フォームまで遷移してくれたユーザーを取り逃すことが無いように…
WordPress（ワードプレス）とは、サイトの作成やブログの作成などができるCMS(コンテンツ管理システム)の1つで、無料のソフトウェアで…
Webサイトの構成を考える上で、ユーザーの動きをどのくらい意識していますか。訪問してくれたユーザーをいかに目的のコンテンツに誘導し、成果を上…
日本国内だけでも、ECサイト制作プラットフォームは多くありますが、当然海外まで視野を広げるとさらに選択肢を増やすことができます。また、海外の…
『第一印象は大切である』とよく聞きますが、Webの第一印象は、最初に表示されるエリア『ファーストビュー』が担っています。 サイトやページによ…
カルーセルはメインビジュアルやバナーエリア、関連情報などでよく活用されている表示方法です。 スマートフォンでの画面設計が重視されるようになっ…
あなたのサイトは、集客できていますか？各々の課題に沿ったSEOとユーザーに響くデザインを両立したサイト制作で、意識の高いターゲットをフロントへ呼び込みます。
Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。
Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中！
検索順位で1位まで上げるためのSEOポイント8つ
EEATとは？コンテンツ評価を高める12のSEOポイント
成功確率アップ！BtoBのコンテンツマーケティング施策とは
YMYLとは？該当するジャンルとSEOにおける対策のポイント8つ
SEO内部施策とは？重要な項目16選【セルフチェックリストつき】