ウェブサイトのナビゲーションデザインに役立つベストプラクティス | アドビ UX 道場 #UXDojo

ウェブサイトのナビゲーションデザインほど、ユーザビリティに影響を与える要素はあるでしょうか？サイトを訪問した人が、ページを見たときに何をすればいいのかわからなければ、彼らはサイトを離脱して、より使いやすい代わりのサイトを探すでしょう。一方、訪問者が自分の欲しいものや必要なものを見つけるための、明確でよく定義されたナビゲーションが提供されていれば、コンバージョンを達成できる可能性は高まります。

ナビゲーションは、サイトの成果に大きく影響します。この記事では、ウェブサイトで一般的に使われるナビゲーションパターンをいくつか確認し、優れたナビゲーションをデザインするための実践的なヒントを紹介します。

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

トップメニュー

ウェブサイトのナビゲーションと言われたら、大半の人はページ上部のメニューを想像することでしょう。このタイプのナビゲーションは、ページを上から下へ、左から右へとスキャンする人々の振る舞いに沿ったものです。トップメニューは、大カテゴリを含むグローバルナビゲーションに最適です。

トップメニューナビゲーションによく使われるデザイン手法には、ドロップダウンメニューとスティッキーナビゲーションの 2 つがあります。前者は、漸進的開示のテクニックを使い、通常は限られた選択肢だけを表示しておいて、要求されると（ユーザーが最上位の選択肢の上にマウスを移動したとき）追加の選択肢を表示します。

後者のテクニックは、トップレベルのナビゲーションを、常に画面の見える範囲に留めるというものです。ユーザーがどれだけスクロールダウンしても、メニューが画面上部に表示され続けます。

サイドバー

通常、サイドバーは、トップナビゲーションをサポートするナビゲーションとして使用されます。主要なコンテンツの左側または右側に配置され、ユーザーがトップレベルのカテゴリを選択したとき、サイドバーにはサブカテゴリが表示されます。サイドバーは、情報量の多いウェブサイトに最適な選択です。サイドバーには、サブカテゴリの他にも、コンテンツの選別や整理のためのオプションを提供することができます。

フッター

フッターナビゲーションは、一般的に、長いページのある大規模なウェブサイトで使われます。多くの場合に、フッターには、サイトのメインページへのリンクが含まれています。このパターンの根本にある考えは、インタラクションコスト、すなわち必要なアクションの数を最小化することです。ページの最後に到達した訪問者は、フッターからワンクリックでウェブサイトの他の箇所に移動できます。また、フッターは、ニュースポータルや e コマースサイトなどの情報量の多いウェブサイトにも適しています。

パンくずリスト

パンくずリストは、ページ上部に表示される階層型ナビゲーションリンクです。パンくずリストは、あるページが他のページとどのような入れ子関係になっているのかを伝えてくれます。パンくずリストは、e コマースサイトや大規模なコンテンツハブで典型的に使われます。

サイトマップとナビゲーションの違い

サイトマップをナビゲーションの一種と考えるのはよくある誤解です。ナビゲーションとサイトマップは、それぞれ異なる役割を持っています。サイトマップは、ウェブサイトがどのようなページから構成されているかを示します。その主要な目的は、コンテンツのカテゴリ分けで、サイト内に存在するページを示すことです。一方、ナビゲーションは、各ページへに到達する方法を説明します。

優れたナビゲーションを実現するためのヒント

ナビゲーションのデザインは、明確な情報アーキテクチャを確立した後に行うことが重要です。IA は、ナビゲーションシステムの確固たる基盤になります。あとは、それをより使いやすくすることだけを考えればよいのです。

これから紹介するヒントは、親しみやすく予測しやすいナビゲーションの実現に重点を置いたものです。そのため、ウェブサイトとモバイルアプリのナビゲーションの両方に適用することができます。

ナビゲーションを隠さない

ウェブサイトのデザインでは、訪問者にとって最も重要なものを目立たせることが重要です。このルールは、コンテンツだけでなく、ナビゲーションの項目にも当てはまります。サイトによっては、スペースを節約するために、ハンバーガーメニューのように、通常はナビゲーションを隠しておいて、必要に応じて表示するパターンを使用することがあります。しかし、訪問者はハンバーガーアイコンをクリックやタップするとは限りません。そのため、ハンバーガーメニューの使用は控えたほうがよいでしょう。ニールセン・ノーマン・グループは、隠されたナビゲーションは、訪問者がタスクを完了する時間を長くすると警告します。

画面のスペースを節約する必要性は、デスクトップよりもモバイル画面の方が重要です。とはいえ、モバイルデバイスであっても、priority+ のようなパターンを使うことができます。このパターンは、ナビゲーションの選択肢に利用可能なスペースをすべて利用します。そのため、スペースがあればあるほどより多くの選択肢を表示できます。

ユーザーが期待する場所にナビゲーションを配置する

サイトの情報アーキテクチャを設計する場面では、ユーザーがコンテンツに何を期待しているかを考慮します。ユーザーの期待に沿うように階層構造を作成して、ページ内のコンテンツを配置します。

このルールは、他のデザイン要素にも当てはまります。ユーザーはナビゲーションを見つけられる場所を予測することができるべきです。ページのヘッダー、サイドバー、フッターのように、ユーザーがナビゲーションを期待する場所に配置しましょう。

ナビゲーションとコンテンツを視覚的に分離する

ナビゲーションは、ウェブページ内の他のコンテンツと同じように見えるべきではありません。独立した要素として目立たせる必要があります。ホワイトスペースを使うと、コンテンツとナビゲーションを視覚的に分離できます。

ナビゲーションの選択肢をボタンのように見せない

ヘッダーナビゲーションにボタンを使用するウェブサイトがあります。これは、レイアウトを視覚的に煩雑にして、ページを重く見せる可能性があります。ボタンは、CTA（ダウンロード、メンバー登録、投票など）のみに使用することが推奨されます。そうすることで、ユーザーがとるべき行動を強調できます。

ラベルのテキストは説明的にする

どんなウェブサイトのナビゲーションも、予測可能なものであるべきです。訪問者は、すべての選択肢を試す前に、それらの意味を予測できる必要があります。ナビゲーションのラベルを説明的にして、意味を即座に伝えられるようにすることは、サイト訪問者にとって有益です。また、説明的なラベルは、検索エンジンがウェブサイトについて理解するのにも役立ちます。

「記事」や「動画」のような一般的なラベルは避けましょう。これらは訪問者にコンテンツの形式を伝えますが、主題を伝えません。訪問者は、何かを解決するためにウェブサイトを訪れており、コンテンツの形式を気にすることはまずありません。つまり、ターゲット層の目的に意味のあるフレーズを使用する方がよいということです。Google キーワードプランナーは、サイトのドメインに応じた説明的なラベルを見つけるのに役立つツールです。

トップレベルの選択肢は 7 つまでにする

ウェブサイトのナビゲーションデザインは、ユーザーがサイトを操作する際に求められる労力（精神的、肉体的）の総和を最小化する必要があります。トップレベルのナビゲーションに含まれるリンク数を制限することは、2 つの理由から良いと考えられます。

• ユーザーが UI をより理解しやすくなる。『The Magical Number Seven, Plus or Minus Two』という研究で、George A. Miller は、短期記憶には 7 つ（プラスマイナス 2）の項目しか保持できないと述べています。ナビゲーションの選択肢が多くなるほど、訪問者は情報を記憶し処理するのが困難になります。
• 検索エンジンがウェブサイトを分析しやすくなる。ナビゲーションの項目が少ないことは、検索エンジンにとって良いことです。ナビゲーションが簡潔であると、すべての選択肢がより「重み」を与えられます。

では、何十ページもあるサイトの場合はどうすればよいのでしょうか？その場合は、ページに優先順位をつけて、カテゴリごとにグループ分けする必要があります。そして、どのグループにも 5 から 7 個の項目があるようにします。価値のない（ほとんどクリックされない）選択肢や、ビジネス価値の低いオプションは、忘れずに削除しましょう。

順番に注意を払う

項目の数は重要ですが、その順番も重要です。ウェブサイトのナビゲーションデザインでは、優先順位の高いものから最も低いものへと順に並べたくなるかもしれません。これは正しいアプローチですが、系列位置効果を考慮することも必要です。この効果が意味するのは、最初と最後の項目が最も効果的だということです。脳が中間の項目よりもはるかに容易に思い出すことができるからです。そのため、ナビゲーションの最初と最後に配置する項目は、より目立ちます。

製品を紹介するウェブサイトのナビゲーションをデザインするなら、ウェブサイトナビゲーションの先頭に製品の詳細ページへのリンクを配置し、「お問い合わせ」または「購入」を最後に表示するのがよいでしょう。

ナビゲーションに検索を追加する

検索は、ショートカットとして機能します。検索に頼る訪問者は、カテゴリを辿ることなく、探しているものを見つけられます。それでも、検索はメニューの代わりにはなりません。検索を使用する訪問者は、自分が何を探しているのかを明確に知っています。つまり、検索は探索というよりは、特定のコンテンツをより速く見つけるために使うものです。

ドロップダウンメニューを避ける

ドロップダウンメニューは、モバイルアプリでもウェブサイトでも、良いナビゲーションデザインとは言えません。ドロップダウンが問題なのは、選択肢を隠してしまい、操作コストを増加させる点です（特に 2 段階以上の選択がある場合）。また、このパターンは検索エンジンにも優しくありません。ドロップダウンメニューは、検索エンジンにとってクロールするのが困難です。

ホームページだけに最適化しない

ホームページが訪問者の見る最初のページであるという考えは、よくある間違いです。多くの訪問者は、検索エンジンの検索結果、SNS の投稿、他のウェブサイトのリンクからウェブサイトを訪れるため、ホームページがエントリーポイントになるとは限りません。すなわち、ウェブサイトのナビゲーションは、ウェブサイトのすべてのページで直感的に操作できるようにする必要があります。

それを実現するには、ターゲット層を特定し、彼らの期待に応える構造になるようにナビゲーションを設計することが必要です。また、サイト分析ツールを使って、ウェブサイト上で人気上位の場所を特定し、それらのページのナビゲーションが訪問者に明確であることを確認することもできます。

モバイルでナビゲーションデザインをテストする

数十億人の人々が、モバイルデバイスからインターネットにアクセスしています。もし、ウェブサイトのナビゲーションがモバイルで正しく表示されないとしたら、それは大問題です。ウェブサイトのナビゲーションが 100% モバイルフレンドリーであることを確認しましょう。

• ナビゲーションのラベルは、モバイル画面でも読みやすいようにする。16px のフォントサイズは、ほとんどの場合、適切なデフォルト値です。
• ナビゲーションの項目は、簡単にタップできる大きさにする。物理的な大きさが約 9mm のタッチ領域は、ほとんどのグループのユーザーに有効です。

ナビゲーションの使われ方を分析する

ウェブサイトのナビゲーションデザインは、ウェブサイトにデザインを導入すれば終わりというものではありません。訪問者がメニューを使って思い通りに移動できているかを確認することも必須です。従って、訪問者がウェブサイト上でどのように回遊しているかを調べることに時間を割かなければなりません。分析ツールを頼りにしてツリーテストなどを行うと、訪問者の行動を追跡できます。

おわりに

すべてのサイトにとって、サイト内をナビゲーションするユーザーを支援することは、優先事項であるべきです。また、ウェブサイトのナビゲーションデザインは、人間と検索エンジンの両方に同じように機能する必要があります。この記事のヒントを参考に、ヒトにもロボットにも優しいナビゲーションをデザインしてみてください。ナビゲーションは、訪問者を導く、見えない手のような存在であるべきです。

この記事は Website & App Navigation Design Best Practices（著者: Nick Babich）の抄訳です