このレッスンではWebサイトのナビゲーションの種類や、ナビゲーション設計について学んでいきます。
グローバルナビゲーションやローカルナビゲーションなどはどのようなものか、それぞれを設置する際のポイントなど、ナビゲーションの基本を解説します。
ナビゲーションの設計において重要なポイントを押さえていきましょう。
グローバルナビゲーションとは
グローバルナビゲーションとはサイト内のどのページでも表示するリンク(メニュー)です。
グローバルナビゲーションの設計において重要なポイントを押さえていきましょう。
1.ナビゲーションは目立つ位置に配置する
サイト内で迷った時などもすぐに戻れるよう、また目的のページへ簡単にたどり着けるよう目立つ位置に配置しましょう。前回のレッスンでヘッダーの主要構成要素として紹介したように、一般的には画面上部（ヘッダー）に配置されていることが多いです。
2.一目でサイト内にどのような情報があるか分かるようにする
料金が知りたくてサイトを訪れた人がいた場合を例とします。
その時、グローバルナビゲーションに「料金」や「PRICE」などのメニューがあればすぐにそのサイトで調べることが出来るとわかりますね。
以下は美容室「EARTH」のWebサイトです。
グローバルナビゲーションの項目が分かりやすく分けられています。
3.メニュー数を増やしすぎない
ナビゲーションにメニュー項目が沢山ありすぎると、複雑化し見にくくなってしまいます。そうするとユーザは不便さを感じてしまうでしょう。
ではこれらのポイントをおさえながら設計について詳しく見ていきましょう。
グローバルナビゲーションの設計例
コンテンツの振り分けやどのメニューをどこに配置するかなどを考慮しながら設計を行っていきます。実際の例を参考にし学んでいきましょう。
階層型構造
サイトストラクチャの項目で階層型構造を取り上げました。このような階層の上の階層部分をメニューとしていく方法です。
基本的には重要な情報は左側、お問い合わせや予約などの項目は右側に配置します。これは人間の視線が左上から右下に向かって移動していくためです。
以下は先ほども取り上げた美容室「EARTH」です。
左側からニュース・サロン検索…と並べられています。そして右側に予約ボタンが配置されています。このボタンは配色なども目立つよう作られています。
カテゴリ別ナビゲーション
カテゴリ別にメニューを作成する方法です。 一目で取扱商品を伝えることが出来ますね。
カテゴリーが何階層にも分かれている場合は、ドロップダウンメニューを使って第３階層以下にもリンクを作ることもあります。
ドロップダウンメニューとは
グローバルナビゲーションのーつにマウスオーバーもしくはクリックすることで、下層の選択肢が表示されるものをド口ップダウンメニューと呼びます。
上の図のようなものが一般的です。
グローバルナビゲーションでド口ップダウンメニュー（特にクリックで開くタイプのもの）がある場合は、下向き矢印アイコンを付けるなどして、更に下の階層を選べるということをユーザーに伝えましょう。
ノートPCなどスクリーンの縦幅が狭い環境についても考慮が必要です。
ドロップダウン表示させる要素数を増やしすぎず、縦幅をコンパクトにした方が使いやすくなります。
上図は「ベルメゾンネット」の通販サイトです。
ファッションやインテリア・雑貨とカテゴリ分けがされており、マウスオーバーでドロップダウンメニューが展開する仕組みになっています。
対象者別ナビゲーション
有料会員向けメニューと会員登録していない人向けメニューを分けたり、複数の目的別メニューという分け方をする方法です。
以下は「みずほ銀行」のサイトです。個人か法人かでメニューが分かれていますね。
このように分けることで迷うことなく目的のページへたどり着けるでしょう。
ローカルナビゲーションとは
先ほどのグローバルナビゲーションはサイト内全てのページで表示されるものでした。ローカルナビゲーションは各ページでそれぞれ項目分けしたものです。全てのページで表示されるものではありません。
上記②は「ベルメゾンネット」のローカルナビゲーションです。
子供服・子供用品カテゴリのページでのみ表示されているものです。
ローカルナビゲーションの設計例
ローカルナビゲーションは大きく２種類のタイプに分けられます。
横並びナビゲーションの配置例
グローバルナビゲーションの下部などに配置するパターンです。 グローバルナビゲーションのドロップダウンとしてもよいでしょう。
以下は「GU」のショップサイトです。サイト上部にはグローバルナビゲーションがありますね。
そして赤枠内が「ニット」カテゴリのページで表示されるローカルナビゲーションです。
縦並びナビゲーションの配置例
サイドバーという風にメインコンテンツの横に縦並びで配置されているサイトも多々あります。しかしスマホ表示の場合は画面が小さいのでサイドとメインを横並びに配置することはできませんね。ですのでセレクトボックスやドロップダウン、アコーディオンメニューという対応をする形になるでしょう。
上記は「トヨタ自動車株式会社」のナビゲーション部分です。こちらはドロップダウンになっています。
パンくずリストとは
パンくずリストとは、ユーザーがサイト内のどの階層のどのページに居るのかを示すものです。
ブレッドクラムナビゲーションとも呼びます。
今見ているページ以外のテキスト部分は、リンクとしましょう。
すると、さっき居たページに戻りたいという場合もすぐに戻ることができますね。また、配置場所は多くのサイトが上部としています。
上記イメージの下の例は、現在地が店舗一覧ページの場合です。現在居るページ名部分はリンク無しとします。そして、現在地以外のページ名はリンクをつけカラーも変えます。このようにすると、一目でクリックすれば遷移できるのだと分かります。
以下は「クラシル」公式サイトです。
赤枠部分がパンくずリストです。現在地が分かりやすいように太字で表示され、トップやコラム一覧など上階層はテキストリンクになっています。
ステップナビゲーションとは
ステップナビゲーションとは、商品購入や会員登録フォームなどで今どのステップであるかを示すものです。
このステップナビゲーションがあることによりユーザーが必要な手順を知ることができます。
ゴールと過程を明確に示すことで、ユーザーの離脱を防ぐ目的があります。
ナビゲーションの役割を果たすコンテンツ
広義のナビゲーションには、上記のような上下階層を示す・ジャンプするタイプするためのリンク以外に、他ページへとユーザーを誘導するコンテンツも含まれます。
関連コンテンツを表示させる
ショッピングサイト等で、この商品を購入した人はこちらも購入していますというような部分があったりしますね。このように、ユーザーの興味があるものと関連性の高いコンテンツを表示することもサイトの種類によってはあった方がよいでしょう。
![](https://popshub.s3.amazonaws.com/uploads/ckeditor/pictures/4181/content_image-1599119223972.png"")
上記は「Amazon」の商品詳細ページの一部分です。商品に関連する他の商品を紹介・提案しています。このようにすることで、ユーザーが自分で他のコンテンツを探す手間を省く事が出来ます。また、こちらからユーザーに他のコンテンツを提案する意味合いもあります。
Webサイト内に特集ページを組む
季節のイベントや人気商品で括り特集ページを組むこともあるかと思います。
多くはバナーを設置して、少ないページ遷移で済むように作られています。
上記は「楽天市場」のトップページです。大きなバナー設置されていて、とてもインパクトがありますね。このバナーをクリックすると特集ページに遷移します。既存カテゴリとは別に、特集という新たなカテゴリを設け商品をまとめています。その結果ページ遷移を少なくしユーザーにとっての利便性を高めています。
たとえば、敬老の日に贈るプレゼントを探しているユーザーが居るとします。そのユーザーは何を贈るかまだ決めていないとしましょう。その場合、特集ページの有無でページ遷移の回数が大きく変わることが分かると思います。
特集ページがなければ１つずつカテゴリから検索しなくてはいけません。
気に入るものがなければトップに戻り、他のカテゴリに入り…とサイト内をぐるぐる回ることになります。
それに対し特集ページがあれば、特集ページ内で商品を探すことが出来ます。ユーザーにとっては手間が省け利便性を感じるのではないでしょうか。このように、ユーザーがサイトを訪れる理由や目的を考え提供していくことも大切です。
◆実習：グローバルナビゲーションの配置
では、ここからはワイヤーフレームを作成していきます。
この時点ではロゴや配色設定は不要です。配置を中心に決めていきます。
今回は全ページ共通で使用するグローバルナビゲーションを作ります。
作成するヘアサロンサイトは小規模サイトですので、ドロップダウン等は使いません。
左側にロゴ+店名、右側にメニュー項目を載せたシンプルな構成にします。
長方形ツールでロゴが入る場所を示します。
文字ツールでAboutと入力し、オブジェクトの複製を行います。
それぞれメニュー項目名に打ち替え、ガイド内に収まるよう位置を調整します。
これでグローバルナビゲーションの配置は完了です。
全ページ共通で使用するので、他のアートボードにもコピーして配置しておきます。
まとめ
グローバルナビゲーションとはサイト内のどのページでも表示するリンク(メニュー)です。人間の視線は左上からアルファベットの「Z」のように動いていきます。
ユーザーにとって重要である情報は左側に、印象に残したいものは右側に配置しましょう。
ローカルナビゲーションとは各ページでそれぞれ項目分けしたもので、全てのページで表示されるわけではありません。
そして、パンくずリストとは、ユーザーがサイト内のどの階層のどのページに居るのかを示すものです。ステップナビゲーションとは、商品購入や会員登録フォームなどで今どのステップであるかを示すものになります。