Webサイトにおける効果的なナビゲーション設計

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

• グローバルナビゲーション
• グローバルナビゲーションの設計例
• ローカルナビゲーション
• ローカルナビゲーションの配置
• パンくずリスト
• ステップナビゲーション
• 関連コンテンツ
• 特集ページ
• まとめ

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

グローバルナビゲーションとはサイト内のどのページでも表示するリンク(メニュー)です。

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

 

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

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

 

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

料金が知りたくてサイトを訪れた人がいた場合を例とします。その時、グローバルナビゲーションに「料金」や「PRICE」などのメニューがあればすぐにそのサイトで調べることが出来るとわかりますね。以下は美容室か「EARTH」です。グローバルナビゲーションの項目が分かりやすく分けられています。

http://hairmake-earth.com/salon/area/13/

 

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

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

ではこれらのポイントをおさえながら設計について詳しく見ていきましょう。

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

コンテンツの振り分けやどのメニューをどこに配置するかなどを考慮しながら設計を行っていきます。実際の例を参考にし学んでいきましょう。

階層型構造

サイトストラクチャの項目で階層型構造を取り上げました。このような階層の上の階層部分をメニューとしていく方法です。

基本的には重要な情報は左側、お問い合わせや予約などの項目は右側に配置します。これは人間の視線が左上から以下画像のように移動していくためです。

以下は先ほども取り上げた美容室「EARTH」です。左側からニュース・サロン検索…と並べられています。そして右側に予約ボタンが配置されています。このボタンは配色なども目立つよう作られています。

http://hairmake-earth.com/salon/area/13/

カテゴリ別ナビゲーション

カテゴリ別にメニューを作成する方法です。一目で取扱商品を伝えることが出来ますね。

以下は「ベルメゾンネット」の通販サイトです。ファッションやインテリア・雑貨とカテゴリ分けがされています。

http://www.bellemaison.jp/

対象者別ナビゲーション

有料会員向けメニューと会員登録していない人向けメニューを分けたり、複数の目的別メニューという分け方をする方法です。

以下は「みずほ銀行」のサイトです。個人か法人かでメニューが分かれていますね。このように分けることで迷うことなく目的のページへたどり着けるでしょう。

https://www.mizuhobank.co.jp/index.html

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

先ほどのグローバルナビゲーションはサイト内全てのページで表示されるものでした。ローカルナビゲーションは各ページでそれぞれ項目分けしたものです。全てのページで表示されるものではありません。

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

ローカルナビゲーションの配置設計

ローカルナビゲーションは大きく分けると２種類の配置方法になります。

横並びナビゲーションの配置例

グローバルナビゲーションの下部などに配置するパターンです。グローバルナビゲーションのドロップダウンとしてもよいでしょう。以下は「GU」のショップサイトです。サイト上部にはグローバルナビゲーションがありますね。そして以下はニットの一覧ページです。赤枠内がニットのページでのみ表示されるローカルナビゲーションです。

「GU」ではグローバルナビゲーションのドロップダウン内にもローカルナビゲーションを設置しています。

縦並びナビゲーションの配置例

サイドバーという風にメインコンテンツの横に縦並びで配置されているサイトも多々あります。しかしスマホ表示の場合は画面が小さいのでサイドとメインを横並びに配置することはできませんね。ですのでセレクトボックスやドロップダウン、アコーディオンメニューという対応をする形になるでしょう。

http://www.toyota.co.jp/

上記は「トヨタ自動車株式会社」のナビゲーション部分です。こちらはドロップダウンになっています。

パンくずリストとは

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

上記イメージの下の例は、現在地が店舗一覧ページの場合です。現在居るページ名はリンク無しとします。そして、現在地以外のページ名はリンクをつけカラーも変えます。このようにすると、一目でクリックすれば遷移できるのだと分かりますね。

以下は「ちふれ」公式サイトです。赤枠部分がパンくずリストです。テキストリンクはブラウンで下線が付いています。それに対し、現在のページはグレーで下線もありません。

http://www.chifure.co.jp/index.html

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

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

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

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

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

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

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

Webサイト内に特集ページを組む

季節のイベントや人気商品で括り特集ページを組むこともあるかと思います。多くはバナーを設置して、少ないページ遷移で済むように作られています。

https://www.rakuten.co.jp/

上記は「楽天市場」のトップページです。左右に同じバナーを大きく設置してしています。とてもインパクトがありますね。このバナーをクリックすると特集ページに遷移します。既存カテゴリとは別に、特集という新たなカテゴリを設け商品をまとめています。その結果ページ遷移を少なくしユーザーにとっての利便性を高めています。

たとえば、ホワイトデーに贈るプレゼントを探しているユーザーが居るとします。そのユーザーは何を贈るかまだ決めていないとしましょう。その場合、特集ページの有無でページ遷移の回数が大きく変わることが分かると思います。

特集ページがなければ１つずつカテゴリから検索しなくてはいけません。また、気に入るものがなければトップに戻り他のカテゴリに入り…とサイト内をぐるぐる回ることになります。それに対し特集ページがあれば、特集ページ内で商品を探すことが出来ます。ユーザーにとっては手間が省け利便性を感じるのではないでしょうか。このように、ユーザーがサイトを訪れる理由や目的を考え提供していくことも大切です。

まとめ

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

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

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

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