Webサイトで情報を探している際に、「この情報はどこにあるのだろう？」「さっき見たあの商品のページはどこだっけ？」なんて経験はありませんか？

誰もが一度は経験したことがあると思います。なぜこのような状況になってしまうのでしょうか。

原因の1つとして、「ユーザーを適切に案内できていない」ことが考えられます。これはユーザーにストレスを与える大きな要因であり、サイトのユーザビリティを著しく低下させます。

いくらユーザーにとって有益なサービスや商品を提供していたとしても、どこにどんな情報があるのかわからないサイトを好んで利用したいとは思いませんよね。

この問題を解決するためには、一般的にグローバルナビゲーションやパンくずリストなどが有効であると言われています。しかし、これらのナビゲーションもユーザーにとって分かりやすいものでなければなりません。

そこで今回は、あなたのサイトに訪れたユーザーがストレスなく目的の情報を見つけられるように、ユーザビリティに関する書籍から抜粋して、ナビゲーション（グローバルナビ、パンくず、サイト内検索窓など）を設置する際に気を付けるべき4つのポイントをご紹介します。

参考文献：ウェブユーザビリティの法則

なぜナビゲーションが必要か

最初にナビゲーションが必要な理由について説明します。

結論から述べると、ユーザーは欲しい情報がサイト内のどこにあるかわからないからです。

ユーザーはサイトに訪れた時点で「何か」を探しています。それは掃除機かもしれませんし、美容に関する情報かもしれません。

ナビゲーションがない場合、膨大な情報の中から探しているものを見つけ出すのは非常に困難です。例えるなら、巨大なホームセンターでマップや案内表示もなしに、小さなネジを探せと言われているようなものです。

また、Webサイトは実店舗と異なり、大きさや方向、位置感覚がありません。このような理由でユーザーは現在地を把握することが難しく、どこに何があるのかを物理的に判断できません。

そのため1度は見つけた情報をもう1度探す際、目印になるものが必要となります。
ナビゲーションはこの役割も担っているのです。

ここまでの説明で、ナビゲーションは「欲しい情報の発見」と「1度見つけた情報の目印」という役割を担っており、ユーザーにとって必要不可欠なものであることはご理解いただけたと思います。

■SEO課題を自動抽出する 上位表示支援SEOツール

ユーザーがスムーズに情報を見つけられるように

ユーザーを迷子にさせないために、ナビゲーションを設置する際に押さえておくべき4つのポイントを紹介します。

• グローバルナビゲーションのデザインは統一する
• サイト内検索窓のデザインはシンプルに
• ページタイトルは正しい位置に
• パンくずリストを設置する

グローバルナビゲーションのデザインは統一する

Webサイトに必ず設置すべきなのが、グローバルナビゲーションです。

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

• 探している情報を見つけ出すのを手伝う
• 現在地を示す
• サイトにどんな内容があるのか示す
• サイトの使い方を示す

という役割を担っています。

グローバルナビゲーションを設置する際、すべてのページでデザインを統一しましょう。同じデザインで設置しておくことで、ユーザーが同じサイト内にいることを確認できます。これはユーザーにとっては非常に重要なことなので、覚えておきましょう。

グローバルナビゲーションの4つの役割うち、最も重要な役割は「探している情報を見つけ出すのを手伝う」ことです。これはほとんどの方が理解していると思います。

もう1つの重要な役割が「現在地を示す」ことです。これは、ユーザーを迷子にさせないための有効な手段です。

簡単に現在地を示すナビゲーションデザインの1例として、「タブ型」を簡単にご紹介します。

タブ型は特に大規模なWebサイトに適していて、主なメリットは以下の3つです。

• 直感的に理解できる
• ほとんど見落とされない
• 空間的にどのタブを開いているかわかる

サイト内検索窓のデザインはシンプルに

情報量の多い大規模なサイトを運営している場合は、検索窓の使用頻度が高くなる傾向があります。そのためユーザーが使いやすいように、以下のデザインを参考にしてシンプルなものを心掛けましょう。

また、検索窓の文言は「項目を探す」「すばやく探す」「キーワード検索」などではなく、シンプルに「検索」や「Search」という文言にしましょう。

ページタイトルは正しい位置に

ページタイトルは道路標識のようなもので、ユーザーが現在地を把握するために大きな役割を果たします。

そのため正しい位置に配置されている必要があります。ページタイトルの正しい位置とは以下の通りです。

また、ページタイトルはクリックしたリンク名と一致させましょう。リンク名とページタイトルが異なる場合、ユーザーが「あれ？違うページに来ちゃったのかな？」と不安になってしまうかもしれません。

パンくずリストを設置する

パンくずリストは現在地と、そこまでの「たどってきたページ」をユーザーに示すことができます。スペースも取らないので、必ず設置しておきましょう。

パンくずリストのデザインは、

• 階層間に「＞」を使用する
• メインコンテンツより小さい文字を使用する
• 最後の項目は現在のページタイトルと一致させる

今回参考した書籍では、「パンくずリストは一番上に置く」としていますが、現在ではページ内の「メインコンテンツの上」が主流であるようです。

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

今回紹介した4つのポイントの中でも特に、グローバルナビゲーションはカスタマイズ性が高く、そのデザインはサイトによって様々です。

例えば一般的な基本のグローバルナビゲーションとドロップダウンメニューであったり、グローバルナビゲーションをページ上部やサイドに配置し、大きなドロップダウンメニューを表示させるなどがあります。

Amazon.co.jp | 通販 – ファッション、家電から食品まで【通常配送無料】
スマホサイトのナビゲーションに関しては、こちらの記事で様々な種類のナビゲーションを「わかりやすさ」「汎用性」「インパクト」の3つの指標をから紹介しているので参考にしてみてください。

50のスマホサイト調査から見るナビゲーションのUIデザイン5パターン | SPhere! スマートフォン情報最前線 | インフォバーン

まとめ

ナビゲーションがなければユーザーは迷子になってしまいます。適切なナビゲーションを設置することを徹底しましょう。

優れたナビゲーションをサイト内に設置することで、あなたのサイトのユーザビリティを高めることにつながります。

今までに説明したことを考慮してナビゲーションを設置したら、以下のことをチェックしてください。

• このサイトは何のサイトなのか
• 今開いているページは何のページなのか
• このサイトはいくつのカテゴリから形成されているのか
• この階層で選択できるオプションは何か
• 現在サイト内のどこに位置しているのか
• どのように検索できるのか

すべてに即座に答えられれば、素晴らしいナビゲーションがデザインされているということになります。

▼この記事を読んだあなたにおすすめ！

[サイトタイプ別40事例]スマホサイトのメニューデザインに困ったときに役立つサイトまとめ

スマホ最適化はモバイルファーストよりユーザーファースト！参考8サイト付、レスポンシブサイト、専用サイト、あなたはどちらを選びますか？

サイトデザインの横幅の基準はこれだ！お役立ち記事まとめ＆事例9選で何ピクセルかもう迷わない