Webサイトのナビゲーションを基礎から学ぶ

このレッスンではWebサイトのナビゲーションの種類や、ナビゲーション設計について学んでいきます。グローバルナビゲーションやローカルナビゲーションなどはどのようなものか、それぞれを設置する際のポイントなど、ナビゲーションの基本を解説します。

吉田先生

グローバルナビゲーションの設計において重要なポイントを押さえていきましょう。

• グローバルナビゲーション
• ローカルナビゲーション
• パンくずリスト
• ステップナビゲーション
• 関連コンテンツ
• まとめ

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

グローバルナビゲーションとはサイト内のどのページでも表示するリンク(メニュー)です。どのページにいっても常に上にあることが特徴です。

グローバルナビゲーションの設計において重要なポイントを押さえていきましょう。

１．ナビゲーションは目立つ位置に配置する。

サイト内で迷った時などもすぐに戻れるよう、また目的のページへ簡単にたどり着けるよう目立つ位置に配置しましょう。一般的には画面上部に配置されていることが多いです。

いろいろページを見ていると迷ってしまったりしますよね。その時にこのグローバルナビゲーションがしっかりしていれば大丈夫。迷うことはありません。

２．一目でサイト内にどのような情報があるか分かるようにする。

グローバルナビゲーションに配置されるリンクは大カテゴリーになります。まずはここを理解しましょう。並べられているのは大カテゴリーであり、それぞれの入り口になります。文字は短くわかりやすいものにしましょう。

３．ナビゲーション内のメニュー数は増やしすぎない。

メニュー項目が沢山ありすぎると見づらく複雑になってしまいます。そうするとユーザは不便さを感じてしまうでしょう。

「いくつくらいが妥当なのだろう？」と思いますよね。

これには7つ以内が良いと言われています。1956年に心理学者であるG.A.ミラー氏が発表した論文があります。そのなかでマジックナンバー７（±2）と呼ばれる、人間が記憶しやすい数が説明されています。それが認知心理学上7つ程度らしいのですね。

これに習ってグローバルナビゲーションの数は5〜7くらい、多くて９つが良いと言われています。

でもどうしても増えてしまう場合はプルダウンメニューで対処しましょう。ベルメゾンネットでは、取扱商品のカテゴリーも多いので、プルダウンを多用してグローバルナビゲーションのメニュー数を減らしています。

4. スマートフォンのグローバルナビゲーション

スマートフォンで見るとグローバルナビゲーションはハンバーガーメニューなどに畳まれます。クリックするとそれが表示されるようになります。

ローカルナビゲーションとは

上ではグローバルナビゲーションは「大カテゴリー」だと説明しました。ローカルナビゲーションは「中カテゴリー」だと思って良いでしょう。

配置する場所は右の場合が多いような気もしますが、左側にあっても構いません。

ローカルナビゲーションの意味

例えば以下の例ではユーザーはグローバルナビゲーションで「講座」を選択しました。
その後ローカルナビゲーションで「無料の講座」を選択しています。

「講座」という大カテゴリーに所属しいる「無料の講座」という中カテゴリーを選択した状態となっています。

このようにグローバルナビゲーションとローカルナビゲーションは親子関係にあることを理解しましょう。

上記は「ベルメゾンネット」のローカルナビゲーションです。子供服・子供用品カテゴリのページでのみ表示されているものです。

パンくずリストとは

パンくずリストとは、ユーザーがサイト内のどの階層のどのページに居るのかを示すものです。今見ているページ以外のテキスト部分は、リンクとしましょう。さっき居たページに戻りたいという場合もすぐに戻ることができますね。また、配置場所は多くのサイトが上部としています。

上記イメージの例は

HOME > 講座 > HTML講座 > Lesson 3

というパンくずリストになっています。これはトップページから辿ってきた場合の道のりがそこに書かれています。なんの童話か忘れましたが、帰り道を忘れないようにパンくずを置いていくというお話しがあります。パンくずリストというのは、そこから取られた名前で、まさに帰り道を忘れないようにするためのものなのですね。

以下はベルメゾンネットの例です。赤枠部分がパンくずリストです。テキストリンクはグレーでマウスオーバーで下線が出るようになっています。長いリストですが、巨大なECサイトもこれがあれば迷子になりませんね。

https://www.bellemaison.jp/

ステップナビゲーションとは

ステップナビゲーションとは、商品購入や会員登録フォームなどで今どのステップであるかを示すものです。

このステップナビゲーションがあることによりユーザーが必要な手順を知ることができます。ゴールと過程を明確に示すことで、ユーザーの離脱を防ぐ目的があります。

関連コンテンツを表示させる

ショッピングサイト等で、この商品を購入した人はこちらも購入していますというような部分があったりしますね。このように、ユーザーの興味があるものと関連性の高いコンテンツを表示することもサイトの種類によってはあった方がよいでしょう。

https://www.amazon.co.jp/

上記は「Amazon」の商品詳細ページの一部分です。商品に関連する他の商品を紹介・提案しています。このようにすることで、ユーザーが自分で他のコンテンツを探す手間を省く事が出来ます。また、こちらからユーザーに他のコンテンツを提案する意味合いもあります。

まとめ

グローバルナビゲーションとはサイト内のどのページでも表示するリンク(メニュー)です。人間の視線は左上からアルファベットの「Z」のように動いていきます。

ユーザーにとって重要である情報は左側に、印象に残したいものは右側に配置しましょう。

ローカルナビゲーションとは各ページでそれぞれ項目分けしたもので、全てのページで表示されるわけではありません。

そして、パンくずリストとは、ユーザーがサイト内のどの階層のどのページに居るのかを示すものです。ステップナビゲーションとは、商品購入や会員登録フォームなどで今どのステップであるかを示すものになります。