グローバルナビゲーションとは？ホームページのメニュー構成と確かめ方

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

グローバルナビゲーションとは、ホームページのすべてのページの上部（ヘッダー）に共通して置く、主要なページへのメニューのことです。略して「グロナビ」とも呼ばれます。会社のホームページなら、「サービス」「料金」「事例」「会社概要」「お問い合わせ」のような項目が並ぶのが一般的です。

建物にたとえると、どの階のどの部屋にいても目に入る館内案内板にあたります。トップページだけでなく、記事、お知らせ、問い合わせのページまで、どのページにいても同じ場所に同じメニューがあることで、見ている人は迷わずに次のページへ進めます。

この項目は、ガーディアンの無料のホームページ診断では、新・七つの大罪の「大罪-10 グロナビ常設」にあたり、77's Check!! の「No.34 グロナビ常設」と同じ項目です。ほかの診断項目の解説は、ホームページ診断の項目解説の一覧から読めます。

グローバルナビで確かめる4つの観点

グローバルナビは「メニューがあるか」だけで決まるものではありません。次の4つの観点がそろって、はじめて迷わせないメニューになります。

2つ目の「同じ順序で並ぶ」は、W3C のアクセシビリティの指針 WCAG 2.2 の達成基準 3.2.3「一貫したナビゲーション」にもあたります。複数のページで繰り返すメニューは、繰り返されるたびに同じ順序で出すことが求められており、その理由として、利用者が目的の項目の場所を予測しやすくなることが挙げられています。

グローバルナビがないと、何が起きるか

グローバルナビがないと、検索から個別のページに来た人は、そのページを読み終えたあとに次の行き先が分からず、ホームページを離れてしまうことがあります。検索結果から開かれるのは、トップページとは限りません。記事、サービスの紹介、よくある質問など、検索した言葉に合うページから直接入ってくるため、その人はトップページの案内を見ていないのです。

とくに影響が大きいのは、問い合わせの手前です。サービスの説明を読んで興味を持った人が、料金や会社概要、問い合わせのページを探しても見つからなければ、検討はそこで止まります。お店で言えば、売り場の案内も受付もない建物に入ったのと同じで、ホームページの場合、迷った人は誰にも聞かずに黙って帰ります。

検索エンジンにとっても、メニューは各ページへの道筋です。Google は、検索エンジンがたどれるリンクは基本的に href 属性を持つ a 要素だと説明しています。メニューが共通に置かれ、たどれるリンクで作られていると、主要なページが見つけてもらいやすくなります。

この項目は、社内の人ほど気づきにくいのが特徴です。社内の人はトップページから入り、どこに何があるかを知っているので、メニューがなくても困りません。初めての人と同じように、トップ以外のページから入ってみることが、確かめるときの出発点になります。

自社のホームページで確かめる方法

グローバルナビは、トップ以外のページをパソコンとスマホで開き、上部のメニューを見ることで確かめられます。特別な道具は要りません。

1. トップ以外のページを、パソコンで順に開く
   お知らせの記事、ブログ、サービスの詳しいページ、よくある質問、問い合わせのページ、問い合わせを送ったあとの完了ページなどを開き、上部に同じメニューがあるかを見ます。検索で自社名とサービス名を入れ、結果から開くと、初めての人と同じ入り方になります。
2. メニューの項目と並び順を、ページどうしで見比べる
   開いたページのメニューを見比べ、項目の名前と並び順が同じかを確かめます。ページによって項目が抜けていたり、順番が入れ替わっていたりしないかを見てください。
3. 今いる場所が分かるかを見る
   サービスのページを開いたときに、メニューの「サービス」の項目に色や下線が付くなど、今どこにいるかがメニューで分かるかを確かめます。
4. スマホでメニューを開き、問い合わせまで進む
   スマホで同じページを開き、メニューを開くボタンが見つけやすいか、押しやすいかを見ます。メニューを開いて、問い合わせのページまで迷わずに進めるかを、実際に指で操作して確かめます。
5. メニューの項目が、普通のリンクになっているかを見る
   パソコンでメニューの項目を右クリックし、「リンクを新しいタブで開く」が表示されるかを見ます。表示されない場合は、メニューが検索エンジンにたどりにくい作りになっている可能性があるので、制作会社に確かめてもらいます。

まとめて確かめたい場合は、無料診断で20項目を一度に確かめられます。グローバルナビのほかに、リンクの見分けやすさやスマホ対応など、ホームページの基本となる項目をあわせて確かめられます。

ホームページがわかりにくくなる、よくある原因

グローバルナビが整っていない原因は、大きく分けて4つあります。多くは、ページを足すたびに作り方が少しずつ違っていったことによるもので、誰かの判断の誤りというより、メニューを見直す機会がなかったことから起きます。

ブログや問い合わせのページだけ、別の作りになっている

会社紹介のページはホームページ制作の仕組みで作り、ブログやお知らせは別のブログの仕組みで、問い合わせのフォームはさらに別の道具で作っている、という場合、ページによってヘッダーが違ったり、メニューがなかったりします。検索から入られやすいのはブログや記事のページなので、そこにメニューがないと影響が大きくなります。

項目が増えすぎた、社内の言葉になっている

ページを足すたびにメニューにも項目を足していくと、項目が多くなり、どれを選べばよいか分かりにくくなります。「ソリューション」「事業紹介」「プロダクト」のように似た名前が並んでいたり、部署名や社内でしか使わない呼び名が入っていたりすると、初めての人は中身を想像できません。

スマホでメニューが見つけにくい、問い合わせが奥にある

スマホでは、メニューを画面の端のボタンにまとめる作りが一般的です。そのボタンが小さい、背景にまぎれて見えにくい、開いても問い合わせが一番下に隠れている、といった作りだと、スマホで見る人は問い合わせまでたどり着きにくくなります。W3C の資料でも、タッチ画面の利用者には大きめの押す場所が必要だとされています。

メニューが画像や動きだけで作られている

メニューの文字を画像で作っている、マウスを乗せたときだけ現れる、押すと動く仕組みだけでページを切り替えている、といった作りでは、拡大や読み上げで見る人が使いにくく、検索エンジンもリンクをたどりにくくなります。Google は、onclick だけで移動する a 要素や、「javascript:」で始まるリンクを勧めていません。

グローバルナビの整え方（対策は3つ）

グローバルナビは、メニューの構成を決め、全ページに共通の部品として置き、ページを足すたびに確かめる手順を持つことで整えられます。ホームページを作り直さなくても、ヘッダーの部品を直すだけで全ページに反映できる場合もあります。対策は、自社でできること、制作会社に頼むこと、仕組みで保つことの3つです。

対策1：メニューの構成を、表にまとめて決める

最初にすることは、メニューに載せる項目と並び順を決めることです。見ている人が知りたい順に、「何をしている会社か（サービス）」「いくらか（料金）」「頼んで大丈夫か（事例・会社概要）」「どう頼むか（お問い合わせ）」を並べると、迷いにくい構成になります。

表の形は「項目の名前／リンク先のページ／その項目で知りたいこと／スマホでの表示」がおすすめです。項目の名前は、社内の呼び名ではなく、お客様が使う言葉にします。当社では、パソコンで横に並べる項目は5〜7個ほどを目安にし、それより細かいページはサービスのページの中や、フッターから案内する形が当社のおすすめです。お問い合わせは、メニューの項目とは別に、目立つボタンとしてヘッダーに置くと見つけやすくなります。

目安として、構成の表づくりは、担当者と責任者で1〜2時間ほどです。自社で行えば費用はかかりません。

対策2：共通のヘッダーとして、全ページに入れてもらう

メニューを全ページに入れるのは、制作会社に頼みます。対策1の表と、確かめ方の手順1で見つけたメニューのないページの一覧を渡せば、どこを直したいかが一度で伝わります。

頼むことは主に4つあります。1つ目は、メニューをページごとに作るのではなく、全ページ共通の部品（ヘッダー）として作り、ブログや問い合わせのページにも同じものを入れてもらうことです。2つ目に、見ているページの項目に色や線を付け、今いる場所が分かるようにしてもらいます。3つ目は、スマホで見つけやすく押しやすいメニューのボタンと、問い合わせへのボタンを置くことです。4つ目に、メニューの項目を画像ではなく文字の普通のリンク（href 属性を持つ a 要素）で作ってもらいます。

費用と手間は、ホームページの作りによって変わります。ヘッダーが共通の部品になっていれば、部品を直すだけで全ページに反映できることが少なくありません。ブログや問い合わせのページが別の仕組みで作られている場合は、そちらにも同じメニューを入れる作業が要ります。まず今の作りを確かめてもらい、作業の範囲と費用を相談するのが確実です。

対策3：ページを足すたびに、メニューを見直す

一度整えても、新しいサービスやページを足すたびに、メニューの項目が増えたり、メニューのないページができたりします。わかりにくさを防ぐポイントは3つです。

1つ目は、新しいページを公開する前に、そのページにメニューがあり、今いる場所が分かるかを確かめることを、社内の手順に入れることです。2つ目に、メニューに項目を足すときは、対策1の表に足してから決め、似た名前の項目がないかを見ます。3つ目は、半年に1回など決まった時期に、確かめ方の手順1〜4を通しで行うことです。

制作会社に頼むときの伝え方

制作会社に頼むときは、対策1のメニュー構成の表と、メニューのないページの一覧を添えて、「どのページで、メニューがどうなっているか」を伝えると、確認が一度で済みます。メニューの違いは、ページを足すたびに作り方が変わっていったことで起きやすいだけなので、頼めば直せる部分です。誰が悪いかではなく、これからページを足すときの決まりを一緒に決めることを優先しましょう。

そのまま使える依頼文の例です。

あわせて、次の点を確かめてもらうと、作業の範囲と費用の見通しが立ちます。

• ヘッダーが全ページ共通の部品になっているか、別の作りのページはどこか
• 見ているページの項目に、色や線を付けられるか
• スマホのメニューのボタンと、問い合わせへのボタンの大きさと場所
• メニューの項目が、文字の普通のリンク（href 属性を持つ a 要素）で作られているか
• 直した後に、トップ以外のページとスマホで確かめた結果

グローバルナビとあわせて確かめたい項目

グローバルナビは、見ている人を問い合わせまで迷わず案内するための項目（サイト顧客誘導力）の1つです。案内のしやすさに関わる、次の項目もあわせて確かめておくと、改善の効果を確かめやすくなります。

• ファーストビュー：開いて最初に見える画面に、何のページかが分かる見出しが入っているか。
• スマホ対応：スマホで開いたときに、メニューやボタンが押しやすい大きさになっているか。
• リンク視認性：本文の中のリンクが、普通の文字と見分けられるか。
• パンくずリスト：今いるページがホームページのどこにあるかを、ページの上部で示しているか。
• 問い合わせ導線の常設：どのページからでも、問い合わせのページへ進めるか。

診断の項目ごとの解説は、ホームページ診断の項目解説の一覧から読めます。

よくある質問

まとめ

• グローバルナビゲーションとは、すべてのページの上部に共通して置く、主要なページへのメニューのことです。
• 検索から来る人はトップ以外のページから入るため、どのページにも同じメニューがあることが大切です。
• W3C の WCAG でも、繰り返すメニューは同じ順序で出すことが達成基準の1つになっています。
• トップ以外のページをパソコンとスマホで開き、項目・並び順・現在地・問い合わせまでの道を確かめます。
• 構成は自社で表にまとめて決め、共通のヘッダーは制作会社に入れてもらい、ページを足すたびに見直します。

グローバルナビは、トップページから入る社内の人ほど気づきにくい項目です。中小企業のホームページを制作し、公開後の運用と改善まで支える株式会社ガーディアンでは、メニューの作りを含むホームページの基本の項目を確かめる無料のホームページ診断を用意しています。