ウェブサイトのナビゲーションを改善する方法（具体例と改善すべき理由）

多くの人はウェブサイトのナビゲーションをページやコンテンツを作成した後に、後付けで考えて作るものでしょう。しかし、近年実施された調査では、スタンダードなウェブページナビゲーションの構造の中で、特定のコンテンツを閲覧できる箇所を正しく予想できたユーザーは、たったの50%しかいませんでした。

サイトの訪問者の半分が探しているページを見つけられないとしたら、それはUXに重大な欠陥があると言えます。

直帰率は高くなり、サイトへの滞在時間は短くなり、コンバージョン率は低くなるでしょう。

eコマースストアを運営している場合、ナビゲーションの質が悪いと最終損益や収益にも悪影響を及ぼすでしょう。

今回の記事では、ウェブサイトのナビゲーションの「いろは」をご説明します。ベストプラクティスや様々な種類のナビゲーション、さらに、自分のサイトに最適なナビゲーションを作成するには具体的にどうすべきか、などをお教えします。

それでは早速見ていきましょう！

ウェブサイトナビゲーションとは

ウェブサイトナビゲーションとはインターネット上でページやアプリ、ウェブサイト内を見て回る上で欠かせない「道しるべ」です。ここで使用されているのは、ハイパーテキストもしくはハイパーメディアと呼ばれる技術です。

ハイパーテキスト、ハイパーメディアはハイパーリンクを利用してインターネット上の他のページと接続します。ハイパーリンクはウェブブラウザを特定のURLへと移動させるリンクです。

URLはブラウザがサーバーからのどのファイルにアクセスすれば良いかを指示するもので、データをダウンロードし、ユーザーが見られるようにレンダリングします。

内部リンクは同じドメイン内の様々なページへと移動するのに使用されます。一方、外部リンクは異なるドメインの様々なページ、全く別のウェブサイトやサーバーとの接続のためのものです。

ウェブサイトのナビゲーションでは、ユーザーが探しているページを見つけやすいように、通常、内部リンクが使用されます。優れたナビゲーションは、ユーザーフレンドリーなサイトに必要不可欠な要素です。

ウェブサイトナビゲーションメニューとは

ウェブサイトナビゲーションメニューとはメニューの形で整理されている一連のリンク（通常は内部ページへのリンク）です。当社のウェブサイトを含め、多くのサイトではウェブサイトの一番上に配置されています。

この部分はウェブデザインやWeb開発の分野ではウェブサイトの「ヘッダー」と呼ばれています。メニューによくあるリンクの例としては次のようなものが挙げられます。

• 当サイトについて
• ブログ
• お問い合わせ
• 機能
• プラン/料金

もちろん他のページへのリンクが含まれていることもあります。

ウェブサイトのナビゲーション構造とは

ウェブサイトのナビゲーション構造は、サイト上の各ページがそれぞれどのように整理され、接続されているかを示します。

例えば、特定のページを開かないと閲覧できないページやコンテンツもあるでしょう。デザイナーやウェブ開発者は多くの場合、新しいウェブサイトを構築する際、まずナビゲーション構造から計画を立てます。

この例では、当サイトについて、プラン、お問い合わせ、ブログのページはトップ画面のメニューと相互につながっています。ミッションとチームのページにアクセスするには、まず当サイトについてのページを開かなければなりません。

ウェブサイトのナビゲーションが重要な理由

この記事の冒頭では、スタンダードなメニューであっても50%のユーザーが正しく使えなかったという調査結果をご紹介しました。となると、ナビゲーションがなければ、正しいコンテンツを探すことのできるユーザーは、ほとんどいないでしょう。

ナビゲーションやメニューを適切に作成することにより、コンテンツを見つけられないユーザーの数をぐんと減らせます。そうすれば、直帰率は減少し、平均サイト滞在時間を伸ばし、トラフィックの増加、見込み顧客やクライアントの増加にもつながります。

ウェブナビゲーションの種類

ウェブサイトナビゲーションには主に次の３つの種類があります。

これらを適切に組み合わせることでユーザーはスムーズにサイト内を見て回り、必要なコンテンツを見つけることができるようになります。それぞれ詳しく見ていきましょう。

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

グローバルナビゲーションでは、ウェブサイト上全てのページに同一のメニューやリンクが表示されます。近年多くのメニューがこの方式でデザインされており、Kinstaでもこの方式を採用しています。ページをスクロールしてもメニューはその位置に固定されたまま、という表示もできます。

上記のスクリーンショットのとおり、当社ではシンプルでわかりやすいヘッダーメニューを利用しています。全てのページで同じメニューが表示され、最も重要なページ、コンテンツへと移動できます。

私たちはお客様がホスティングサービスを選ぶときにどのような情報を知りたいか、ということを熟知しています。そのため、将来的なお客様が当社のプランや機能、お問い合わせフォームを見つけやすいような作りにしています。また、既存のお客様のためにはMyKinstaのダッシュボードへログインできるログインページをご用意しています。

フッターのメニューにもグローバルナビゲーションを採用しており、ウェブサイトの重要なセクションや特集コンテンツを紹介しています。

グローバルメニューはすぐに使えるCMSソリューションの大半でスタンダードとなっています。

WordPressテーマでは好みのナビゲーションを様々なエリアに表示できます。もっと選択肢が欲しいという方はメニュープラグインを利用すると良いでしょう。

2. 階層ナビゲーション

階層ナビゲーションでは、各ページのコンテクストに応じてメニューが変わります。

多くのニュースサイトや完全にコンテンツベースのウェブサイトではこの方式が広く採用されています。例えば、多くのニュースサイトではトップページを開くと、ヘッダーメニューに今注目のニュースカテゴリーが表示されます。

グローバルメニューであれば、どのカテゴリーをクリックしても表示されるメニューは変わりません。しかし、階層ナビゲーションの場合、選択したカテゴリーのサブカテゴリーへ移動する新しいリンクメニューが表示されます。

The New York TimesのScienceのページには上位の階層のメニューは全く表示されません。代わりに、科学的調査や関連記事のサブカテゴリーのリンクが表示されます。

これがより規模の小さなサイトの多くで採用されているグローバルナビゲーションとの違いです。

3. ローカルナビゲーション

階層ナビゲーション、グローバルナビゲーションとは異なり、ローカルナビゲーションはコンテンツ自体に含まれるリンクです。通常、同じ階層のレベル、一階層下のレベル、もしくは他の関連ページへのリンクのどれかです。

典型的な例が雑誌のサイトです。特定の記事の中でより深いコンテクストを知ることのできるリンクを設置することがよくあります。過去に触れたことのあるトピックであれば、記事の中で詳細に説明する代わりに該当の記事へのリンクを貼ることができます。

しかし、ローカルナビゲーションは雑誌やニュースのサイトだけで使われるわけではありません。eコマースストアでは同じカテゴリーの商品を紹介するのに、このナビゲーションメニューが活用されます。

内部リンクはSEO全般、特にWordPressのSEOにおいて非常に重要な要素であるため、今ではウェブサイトを運営する人にとっては一般的な手法となっています。

ウェブサイトナビゲーションの例

理論ばかり長々と説明するよりも具体例を見ていきましょう。ニュースサイトとTwenty Twenty WordPressテーマについて触れていきます。

ニュースサイト: The New York Times

一見The New York Timesではグローバルヘッダーメニューのみを使用してカテゴリーを表示しているように見えます。

しかし実はそれだけではありません。ここでは、何百ものカテゴリーにまたがる何百万もの記事が見やすいように、様々な種類のナビゲーションを利用しています。

使用されているナビゲーションの種類

• 階層ナビゲーション
• グローバルナビゲーション
• ローカルナビゲーション

それぞれのページで使用されているヘッダーナビゲーションを見てみましょう。

ホーム画面

ウェブサイトのヘッダーの部分には二つのメニューがあります。一つはロゴの上の展開できるグローバルメニュー、もう一つはヘッダーの下の階層メニューです。ヘッダーメニューとサブヘッダーメニューという構造です。

ヘッダーのハンバーガーメニューを広げると、左側にサイドバーが表示されます。多くの端末向けに広々と余白が設けられたデザインです。

ウェブサイトの他のコンテンツが隠れてしまったり、不鮮明になってしまったりしない設計であることがわかります。

ホーム画面（モバイル版）

同じヘッダー部分をモバイル版で見てみましょう。インターネットユーザーの大半がスマートフォンからニュースサイトへアクセスするため、モバイル端末での使用感はデスクトップよりも重要です。

モバイル版ではニュースカテゴリーのサブヘッダーはホーム画面に表示されません。代わりに展開できるメニューのみが表示されます。

メニューを広げると、フルスクリーンのメニューになり、ホーム画面の全てのコンテンツに被せて表示されます。

デスクトップ版で表示されるメインメニューの全てが含まれていて、リンクはカテゴリー別にきちんと整理されています。

カテゴリーページ

ヘッダーのハンバーガーメニューの下のカテゴリーページにはカテゴリーのさらなるサブセットが表示されます。

より幅広いトピックの中の特定の領域のみに関心がある人が自分の関心のある記事を見つけやすいようになっています。

カテゴリーページ （モバイル版）

モバイル版でもカテゴリーページではデスクトップ版と同様にヘッダーのハンバーガーメニューが表示され、同じ構造となっています。サブカテゴリーのヘッダーメニューはコンテンツを探しやすいよう、隠されることなく全て表示されています。

このようなデザインのもう一つの理由は、モバイル版の利用者が直接トップページへ訪れるのではなく、検索やソーシャルメディアを経由して記事に辿りつくことが多いことも挙げられるかもしれません。

個別の記事

記事のページでは、フローティングヘッダーに現在のセクションは表示されますが、後は展開可能なグローバルメニュー（と検索バー）だけが表示されます。

個別の記事（モバイル版）

モバイル版では、ヘッダーに表示されるのはハンバーガーメニューだけなので非常にクリーンなナビゲーションとなっています。

フッター

The New York Timesのフッターメニューは、ホーム画面でもカテゴリーページでも記事のページでも同一です。

フッター（モバイル版）

モバイル版では、フッターメニューには５つしか項目が表示されておらず、クリックするとそれぞれサブセクションが表示されます。

例えば、Artsをクリックすると、次のサブセクションが表示されます。

このサイトではJavaScriptを利用してスクロールすると動的にコンテンツを読み込むようになっているため、一見フッターが存在しないように思えます。

閲覧者がより多くの記事を読むようにするためには良い仕組みですが、同時にウェブサイト内での移動が少し難しくなっています。

コンテンツレイアウト

オンラインのニュースサイトやブログが利用する主要なナビゲーションツールはメニューだけではない、と考える人もいるでしょう。The New York Timesやその他の同じようなニュースサイトでは、レイアウトそのものがナビゲーションのバックボーンとなっています。

ハイライトされた要素は全てクリックでき、The New York Timesのウェブサイト内の様々なページへ移動できます。

コンテンツレイアウトもまた、ホーム画面やカテゴリーのページに横断して取り入れることのできる重要なナビゲーション要素です。

Twenty Twenty WordPressテーマ

毎年新しいデフォルトのWordPressテーマが誕生します。今回はそんな新テーマのTwenty Twentyを詳しくご紹介しながら、ナビゲーションがどのように変わったかも見て見ましょう。

このWordPressの新しいテーマにおいて、開発者によるメニューや内部リンクへの取り組み方が変わったかどうか検証してみます。

ヘッダーメニュー

他のスタンダードなWordPressテーマと同じく、この新しく公式リリースされたテーマにもヘッダー部分に無駄のないメニューが表示されます。いくつかの表示位置を選択でき、デスクトップ版の水平メニューの場合、次のように表示されます。

一方、デスクトップ版の展開できるメニューの場合、サイトの右側上部のバーに展開可能なメニューのリンクを表示することができます。

メインのコンテンツには濃いグレーがかかっていてメニューのリンクに閲覧者の目がいきやすいようになっています。

フッター

フッターにはページの上部に戻るためのシンプルなボタン以外には内部リンクは表示されません。

優れたウェブナビゲーションの要件

優れたウェブサイトナビゲーションは常にユーザーのことを念頭において作られています。明快で分かりやすい言葉を選び、重要なページへと飛べるようにしておく必要があります。

メインのコンテンツと明確に区別するためにゆったりとした白い余白、カラーの変更、その他様々なデザインのテクニックを駆使します。さらに、全ての端末で利用しやすくなくてはなりません（モバイルでもデスクトップでも）。

また、ユーザー目線のナビゲーションは流れに沿っている必要もあります。ユーザーの動線やユーザーの期待するものを考慮しなければならないのです。オンラインのニュースサイトが「混み合った」デザインから抜け出すことができない理由も、ここにあるかもしれません。

ニュースを読むという文脈でいうと、ユーザーや顧客が期待するのは幅広い種類のカテゴリーやサブカテゴリーを含むメニューになります。

次の章では、優れたナビゲーションを作成するための基本を考えます。

優れたウェブサイトナビゲーション8つの原則

完全な初心者であっても次のヒントを参考にすればウェブサイトに最適なナビゲーションを作成することができます。

1. ページの構造とナビゲーションの計画を立てる

ウェブサイトのコンテンツの作成に取り掛かる前にページの構造とナビゲーションの計画を立てましょう。

ユーザーが満足するナビゲーションを作成する上で計画は必要不可欠です。ウェブサイトの使い勝手を検証するために、サイトマップクリエイターを利用してもいいでしょう。

おすすめのサイトマップツールの一つにGlooMapsがあります。

無料で好きなだけドキュメントを作成することができます。それぞれ個別のURLが付与され、シェアしてフィードバックをもらったり他の人が編集できるようにしたり、自由自在です。作成後、再訪問しない限りURLの有効期限は14日間です。再び開くとさらに14日間有効期限が延長されます。

このようなツールはGlooMapsだけではなく、Octopus、VisualSitemaps、Createlyなど多数存在します。

2. 確立されているスタンダードに従う

既に確立されている方法を一から考え直す必要はありません。ナビゲーションに重要なのは創造性ではなく使い勝手です。

メニューの配置場所や展開できることを示す方法など、重要なデザイン要素については確立されたスタンダードに従いましょう。

３本の水平線で表される「ハンバーガー」メニューの「☰」の記号は展開可能なメニューを表す最も一般的なアイコンです。他にも３つのドットで水平な線を表すアイコンも存在します。

創造性を働かせようとして独自のアイコンを利用すると、訪問者がデザインの目的が分からずメニューの位置を見つけるのに苦労してしまうかもしれません。

3. ユーザーに身近な言葉を使う

ウェブ開発の専門用語、過度にクリエイティブなコピーを使ったりせず、ユーザーにとって身近で、検索しそうな、関心がありそうな言葉を使いましょう。

このアプローチはSEOと使い勝手という二つの側面で有効です。ユーザーがオンラインで検索しそうな内容を反映したページを作成しましょう。

そしてそれらのページにユーザーがGoogleで検索しそうな単語や文章を使ってリンクを貼りましょう。

4. レスポンシブなメニューを使う

今やオンライン上のトラフィックの52%がモバイル端末からのものであることを考慮するとレスポンシブ/モバイルファーストなデザインは必須条件となりました。

画面からはみ出すメニューや雑然としたメニューでなく、展開可能なモバイル用のメニューを利用するようにしましょう。

これが業界のスタンダードとなっているのには理由があります。小さな文字を使った水平のメニューはモバイル端末では正しく読み、クリックし、利用するのが難しいのです。

幸い、優れたWordPressテーマの全てにデフォルトでこのレスポンシブなデザインやメニューが備わっています。一からWordPressサイトを作るという方でない限り、WordPress側で既にこの点は解決しています。

5. フッターメニューを活用する

ページ下部までサイトの内容を見続けスクロールするユーザーは、かなり関心を持っていると言えるでしょう。そのメリットを活かし、ページ下部に有益なコンテンツを掲載するようにしてください。

フッターの場合、重要な「アバブ・ザ・フォールド（スクロールしなくても見える範囲）」をたくさん使ってしまうようなことがないので、より密度を高くした複数カテゴリーの表示や、重要なページ・記事の掲載も可能です。

例えば、今ご覧になっているこのページのフッターにご注目ください。必要不可欠なサービスの機能に関するページ、企業情報、リソースを細かく分解したものなどを表示しています。

フッターはヘッダーには盛り込めなかったコンテンツを紹介するのに活用できます。

6. ナビゲーションを他の要素と区別するために色や余白を活用する

メインのコンテンツやサイドバーとメニューを区別するために色やフォント、余白を活用しましょう。ナビゲーションのはじめと終わりを明確にすることが重要です。

どんなにメニューに表示する言葉を慎重に選んでも、優れたコンテンツにリンクしていたとしても、まずはメニューを認識してもらえないと意味がありません。

7. ドロップダウンメニューの利用は避ける

多くのウェブサイトにおいて（「全て」というわけではありませんが）ドロップダウンメニューはあまり有効ではありません。ユーザーはメニューのリンクを目にすると、クリックできると予想します。クリックできるリンクと明確にデザインの区別がされていない限り、ドロップダウンメニューはユーザーの混乱を生む可能性があります。

また、メインメニューにリンクが多すぎるのはウェブサイトの使い勝手に悪影響を与えることがあります。

ドロップダウンメニューの代わりに階層ナビゲーションやローカルナビゲーションを利用することにより、スムーズなユーザーフローを作ることができます。また、ユーザーは長いリンクの一覧を見ずに済む上、複数のページを見るようになるため、サイト滞在時間が延びることにもつながります。

8. フラットな構造にする

ウェブサイトの全てのページをスムーズに見て回れるようにしたいのであれば、できる限りフラットなナビゲーションの構造を心がけましょう。

少ないメニュー項目から大量のサブページやカテゴリーに展開させるようなことはせず、シンプルにしましょう。

トップ画面ではサイト上の重要なカテゴリーのリンクを貼り、そこからサブカテゴリーまたは個別の記事のページを一階層だけ追加しましょう。

このようなフラットな構造にすることは、SEOに効果的でGoogleのサイトリンクの表示にも繋がることが分かっています。ウェブサイトの構造は煩雑にしないように気をつけましょう！

2024年のウェブサイトナビゲーションメニューのトレンド

近年のウェブデザインのトレンドは3Dのデザイン要素を取り入れたり、クリエイティブなデザインと独自の写真を組み合わせたりと様々ですが、メニューに関していえばこれといって劇的な変化は見られませんでした。

しかし、だからと言って何も変わっていないというわけではありません。ここ数年で登場した主なメニューのトレンドをご紹介します。

カテゴリーが展開し全画面で表示されるモバイルメニュー

Uberやその他の近代的なデザインのサイトを持つ大企業では、使い勝手の良いメニューを利用しています。

これらの企業に共通する悩みは、様々な種類の商品やカテゴリーを提供しているため、一つのメニューにうまく収めるのが難しいということです。

そのため、無限に続くリンクの羅列を表示するのではなく、わかりやすく分類された展開可能なモバイルメニューを利用しています。

フローティングヘッダーメニュー

おそらく過去数年の全世界的なメニューのトレンドはフローティングヘッダーメニューでしょう。

フローティングヘッダーメニューとはページをスクロールしてもウェブブラウザの画面上部に固定されて動かないメニュー（追従型）のことです（kinsta.comでも使用しています）。小さなロゴと、時には検索バーが含まれたヘッダー部分がこれに使用されます。

常にメニューが表示されていると、ページ内を見て回るのが非常に楽なので、文句のつけようのないメニューです。このタイプのメニューは多くのWordPressテーマで利用されていて、今後も採用され続けるでしょう。

PC画面用オーバーレイドロップダウンメニュー

ウェブサイトナビゲーションに関する最も基本的なアドバイスの一つに「ドロップダウンメニューを避ける」ことが挙げられます。これにはそれなりの理由があります。

しかし、ドロップダウンメニューが本質的に良くないというわけではありません。ドロップダウンメニューは画面上に分かりやすく表示するのが少し難しいだけなのです。

そこで、メインのコンテンツを覆うかたちで色付きのオーバーレイを表示することで、ユーザーの注意をメニューへ引きつけることが可能です。さらにマウスを乗せ下層のリンクを表示させるのではなく、クリックで展開できるカテゴリーを実装するという（より好ましい）選択肢もあります。

これらが組み合わさり、2019年のトレンドへと発展しました。実際、多くの革新的なPC版ウェブサイトやテンプレートでオーバーレイドロップダウンメニューが使用されています。

まとめ

この記事ではウェブサイトナビゲーションとは何か、そしてその主なポイントをご紹介しました。

ウェブサイトナビゲーションにおいては派手な色使いやクリエイティブなデザインよりも、いかにシンプルか、明確かが常に重視されるべきです。ナビゲーションやメニューはデスクトップ、モバイル端末どちらにも対応していなければならず、複雑なので、開発者に依頼するのも一つの手でしょう。

訪問者にとっても検索エンジンにとっても、サイト内のコンテンツが見て回りやすくなるよう、ウェブサイトのメニューデザインのベストプラクティスに従うよう心がけましょう。

使い勝手の良さと明確さは、これからも最優先の要素であり続けるでしょう。そのため、ユーザーにとって身近な言葉を利用して分かりやすい構造のメニューを作成すれば、今後もずっと優れたメニューとして活躍してくれるはずです。