Webデザインの基礎を学ぼう！①Webデザインの基本要素　vol.5　ナビゲーションとは

　皆さん、こんにちは！　Webデザイン学習中のともかです。
　今回もご覧いただきありがとうございます。

　この記事からご覧いただいた方に簡単にお伝えすると、以下の書式を参考にほぼ初心者の社会人がWebデザインを学習していく、という内容になります。

　学び始めた背景などはこちらからご覧ください。

　前回はレイアウトの種類について学習しました。

　今回はナビゲーションについて学習します！

ナビゲーションとは？

　HPにはたくさんの情報があり、乱雑に並んでいるとユーザーの欲しい情報がどこにあるのかわからず、迷ってしまう可能性があります。
　これを解決するのがナビゲーションです。ナビゲーションには様々な種類があり、目的に応じて選択していきます。
　それではナビゲーションの種類を見てみましょう！

階層型ナビゲーション（グローバルナビゲーション）

　Webサイト全体を階層構造にしたときに、最上部の階層のことを表します。

　このワイヤーフレームの中だと、上位部のリップ・ファンデ・アイ・チーク・眉の部分が該当するのでしょう。例えばリップのページに飛んでも、グローバルナビゲーションは存在します。（反復の法則）

　グローバルナビゲーションがあるからこそ、ユーザーは感覚的にHPを操作できるのです！

ローカルナビゲーション

　ローカルナビゲーションはグローバルナビゲーションと同カテゴリー内の移動を可能にするナビゲーションです。

　このワイヤーフレーム内ですと、口紅・リップグロス・リップライナーがローカルナビゲーションでしょう！
　化粧初心者の方がリップに種類があることを知らなくても、このローカルナビゲーションがあることでリップにもこんなに種類があることを理解し、好奇心・購買意欲がそそられることでしょう。

　また、ローカルナビゲーションはグローバルナビゲーションの変化によって、移動したり項目が減ったり増えたりする可能性があります。変動しても問題ないように設計にしましょう！

ブレッドクラムナビゲーション（パンくずリスト）

　文字だとよくわからないのでSUUMOさんよりお借りしました。

　直感的に階層構造を理解できて、すぐに前の階層に戻れるようになっています。
　ちなみに、パンくずリストのパンくずは童話の「ヘンゼルとグレーテル」の劇中で、ヘンゼルが森の中で道に迷わないようにパンくずをちぎって落としながら歩いたエピソードから来ているようです。（いちばんよくわかるWebデザインの基本きちんと入門　より）

関連ナビゲーション

　このブログなどもそうですが、関連内容へのリンクを見かけることがあると思います。それが関連ナビゲーションです。

　上記ワイヤーフレームだと、下部の【上記商品を購入している人は、こちらも検討しています。】が関連ナビゲーションに当てはまります。今回は購買意欲をそそる為に設置してましたが、他にもHPに滞在させる時間を長引かせたり、離脱を防ぐ効果があるようです。

コンテキストナビゲーション

　コンテンツ内に設置されたリンクのことを指します。例えば先ほどのパンくずリストの画像をクリックするとSUUMOのページに飛ぶようになっていますが、まさしくそれがコンテキストナビゲーションです。Wikipediaはまさしくコンテキストナビゲーションが活きているサイトです。

ページネーション

　これが具体例を出す方が早いですのでSUUMOさんからお借りします。

　画像の右側の数字がページネーションになります。

まとめ

　本日はナビゲーションの種類について学習しました。どのナビゲーションもユーザーの理解を助ける存在です。時と場合に応じてこれからも使用して行きたいです。

　本日はここまでになります。ご覧いただきありがとうございます。
　次回はさらにサイトをユーザーにとって使いやすいものにするための知識を学習していきます！

いいねやコメント、フォローお待ちしております！

【今日一日、怒らず、恐れず、悲しまず、正直、親切、愉快に！
終始一貫、勇気勇気で押し切るのだ。】

参考文献：伊藤　庄平様方著『いちばんよくわかる Webデザインの基本きちんと入門』
引用：【SUUMO】岡山駅の賃貸(賃貸マンション・アパート)住宅のお部屋探し物件情報（岡山県）
Wikipedia