ナビゲーションの種類や特徴について理解するのが目的です。
ナビゲーション
ナビゲーションとは、他のページへ案内するリンクがある場所のことです。
他のページへ案内しているリンク箇所なのか、直感的に判断することができなければ、ユーザビリティが低い（良くない）と言われても仕方ありません。
「見にくい・使いにくい・分かりにくい」とならないように、ナビゲーションについて理解する必要があります。
リンク箇所は、「見る」「読む」「触れる」の三段階で認知されます。
直感的にわかるリンク箇所でなければいけない理由は、これでわかるでしょう。
見て分からなければ、読まないといけません。読んで分からなければ、触れないといけません。
このプロセスの途中で、使いにくいが決定してしまいます。
リンク箇所以外の表現と異なるデザイン、またリンク箇所と理解できる場所を知ることで、使いやすいナビゲーションをデザインすることができます。
ナビゲーションの種類
ナビゲーションとメニュー。この２つの用語は、よく曖昧に使われることが多く、学習する際に混乱する原因になります。
この講座では、ナビゲーションを「案内する場所」、メニューを「案内方法や機能」というように定義し、説明していきます。
「ナビゲーションメニュー」という場合は、総称と思ってもらうと良いでしょう。
特に深い意味で呼ぶわけではないので、注意しながら使い分けてみてください。
グローバルナビゲーション
ターゲットユーザーに用意した目的を達成するためのメニューを配置する場所のことです。
Webサイトの主要なページへ案内する、メインメニューのリンクが表示されます。
サブナビゲーション
主要なページよりも優先度が低いページや、他の目的のユーザーを案内するためのメニューを配置する場所のことです。
サブメニューや、ローカルメニューと呼ばれるリンクが表示さます。
ヘッダー・フッターナビゲーション
グローバルナビゲーションに属さない主要なページや、その他のページなど、サイト内の１つの情報へのアクセス手段として案内したいメニューを配置する場所のことです。
ページのヘッダー部分にはヘッダーメニューと呼ばれるリンクが、フッター部分にはフッターメニューと呼ばれるリンクが表示されます。
ページをスクロールしたときに、グローバルナビゲーションが表示されなくなるので、フッターナビゲーションにグローバルメニューを表示することもあります。
ダイレクトナビゲーション
注目を集めたいコンテンツを案内するためのメニューを配置する場所のことです。
トップページで良く使うナビゲーションで、ヘッダー下部に画像を画面全体に表示して案内したり、コンテンツごとに案内することが多いリンクで、注目を集めるために画像や動画などを使った表現が多くなります。
メニューボタン
メニューボタンは、「ボタン」の形状でページを案内する方法のことです。
CTAボタン
Call To Actionの略で、「行動を呼びかける」ボタンになります。
ユーザーの目的とサイトの目的が一致するような内容は、他と違う色・形・大きさ・場所で注目させ、ボタン化して行動を促します。
トップページへ戻るロゴボタン
ヘッダーやフッターなどに表示したロゴマークに、トップページへリンクを設定したロゴ画像ボタンのことです。
グローバルメニューに「TOP」や「HOME」といった表現のリンクが不要になる程、、多くの利用者が認知していることから、必須になっているボタンです。
バナーボタン
注目してほしいコンテンツやお勧めサイトなどを案内するための、写真やイラストを使った表現の画像ボタンです。
広告などでも良く使われる表現ですが、サイト内の他のページでも使われます。
ソーシャルボタン
SNSのアイコンをボタン化したもので、ページのデザインに合わせた色・形にすることが多くなりました。
最近では、ツートーンのミニマルアイコンが良く使われています。
先頭に戻るボタン
ページの先頭に戻るリンクボタンで、ページをスクロールするときに追従するタイプや、各コンテンツの終わりにテキストリンクで表示するタイプがあります。
ドロワーメニューボタン
別名「ハンバーガーメニューボタン」とも呼ばれることがある、スマートフォンのサイトで使われる3本線のメニューボタンのほか、2本線や縦や横に並ぶ3つのドット（・）などの形があります。
PCサイトやアプリなどでもよく使われる「ドロワーメニュー」を表示するためのボタンです。