Webサイトの「ナビゲーション」の種類と役割
2018/10/4
今回はWebサイトの「ナビゲーション」について記載させて頂きます。
ユーザーの皆さんにお聞きしたいのですが、Webサイトの「ナビゲーション」って何か？ご存知ですか。
「ナビ」という言葉はあふれていますのでなんとなく、意図していることはわかるのですが
Webサイトの「ナビゲーション」となると・・・・・はて？
という方が多いのではないかと思います。
今回は、Webサイトの「ナビゲーション」を幾つか紹介させて頂くと同時に、皆さんがよく目にしているモバイルWebサイトの「ナビゲーション」も紹介させていただき、今後の制作の参考になって頂ければと思います。
（１）Webサイトの「ナビゲーション」の種類
- 階層型ナビゲーション（グローバルナビゲーション）
- ブレッドクラムナビゲーション（パンくずナビゲーション）
- ダイナミックナビゲーション
- 関連ナビゲーション
- ページネーション
下記詳細になります。
1.階層型ナビゲーション（グローバルナビゲーション）
一般的には、グローバルナビゲーションとも言われています。
サイトをツリー構造で表した際に最上位階層をメニュー化したものです。
どのページを開いても決まった場所、決まった並びで表示されているWebサイトの「ナビゲーション」が
階層型ナビゲーション（グローバルナビゲーション）です。
2.ブレッドクラムナビゲーション（パンくずナビゲーション）
現在表示しているWEBページの位置情報を示してくれます。
「パンくずナビゲーション」とも言われています。
使い慣れているわかり易いナビゲーションで、階層が深いコンテンツの場合大変便利です。
3.ダイナミックナビゲーション
ダイナミックナビゲーションとは、主にサイト内の検索を活用したナビゲーションのことをいいます。
サイト内ブログの記事を探す際など表示させたいページを決めている時、とても役に立ちます。
4.関連ナビゲーション
Webページのコンテンツに関連した内容で構成、表示されるナビゲーション。
ECサイトなどでよくみる関連商品紹介で掲載されたり、ブログページでみるおすすめ記事などのこともを含みます。
5.ページネーション
ページネーションとは、主にECサイトなどで商品を紹介する際の表示方法になります
情報量が多く1ページでは収まらない時（商品の画像が複数枚ある場合など）は複数のページを設けます。
その時に使われるナビゲーションです。
Webサイトの「ナビゲーション」について5つご紹介しました。
普段何気なく押しているボタンやテキストリンクですが、みなさんが目的とするページに早く辿り着けるように色々と工夫しているのです、
それが、Webサイトの「ナビゲーション」なのです。
（２）モバイルサイトの「ナビゲーション」の種類
- ハンバーガー型
- ドロワー型（スライド型）
- アコーディオン型
- ドロップダウン型
- アイコンメニュー型
モバイルサイトの「ナビゲーション」にも複数種類があります。
何故なら、観る側（ユーザ・エクスペリエンス）にとって「ナビゲーション」の良し悪しは大きな問題になりえます。
さらに、スマホ画面の大きさに関連し、モバイルサイトのナビゲーションも進化しております。
ナビゲーションを工夫してデザインすることで、個々のアプリの問題（ユーザ・エクスペリエンス）を解決することをデザイナーには求められます。
下記詳細になります。
1.ハンバーガー型
【メリット】
ハンバーガー型は、 スマホサイト上で普及率やユーザの認知度が高い、最もポピュラーなグローバルメニュー形式です。
また、レスポンシブWebデザインでWebサイトを制作する際に幅広く周知されている形式です。
【デメリット】
メニュー表示がないため、”三本線のアイコン”をタップしなければサイトメニューが分からない点があります。
“三本線のアイコン”そのものがメニューであることが分かりにくく、最近ではその点を考慮して、ハンバーガーメニューのアイコンの下に「メニュー（Menu）」と書かれているサイトも存在します。
2.ドロワー型（スライド型）
【メリット】
ドロワー型（スライド型）のグローバルメニューの良い点は、グローバルメニューがサイドから引き出せるという操作性になります。
動的な動きをもたらすjQueryのコードや プラグインも多く配布されており、実装しやすいという点が多く利用されている理由です。
【デメリット】
ドロワー型は拡張性が高い点がプラス要素ですが、逆にデメリットでもあります。
ページを追加してしまい、階層が深くなりすぎユーザーにストレスを与える原因となる場合があります。
3.アコーディオン型
【メリット】
メニュー部分が開閉式で、タップするとアコーディオンのようにメニューがスライドして開閉する動作が特徴。
こちらもドロワー型同様に実装し易いため人気があります。
【デメリット】
アコーディオン型のデメリットは、タップをしないとメニューが表示されない点になります。
ユーザーにストレスを与える要因となる可能性がありますのでサイト構築の際は注意すべきです。
4.ドロップダウン型
【メリット】
メニュー階層が多層になる場合ですと、見た目もスッキリし、操作性も便利なメニュー形式です。
不動産サイトなどで多用されている人気のあるメニュー形式です。
【デメリット】
ドロップダウン型のデメリットは、階層が深くなりがちになる、ということです。
操作性に影響しユーザー離脱の一因になります。
5.アイコンメニュー型
【メリット】
グローバルメニューのアイコンがボタンで表示されているため、簡単にユーザーが選択できる点がメリットです。
ユーザに理解しやすいインターフェイスで、迷う事なく目的ページに遷移することが可能。
【デメリット】
メニューが常に現れた状態となっており、画面の面積を多く確保する必要があり、洗練されたデザインには成り難いインターフェイス。
定番のインターフェイスですが、やや古い印象を与えてしまいます。
最後に参考までに、「グローバルナビゲーション」という言葉を使用しましたが、この言葉御存知ですか？
仕事でウェブ制作会社とやりとりをしたことのある方でしたら聞いたことはあると思います。
「グローバルナビゲーション」は「グローバルナビ」、「グロナビ」などとも呼ばれています。
グロナビとは、各ページに共通して設置されているサイト内の案内メニューのことです。
グロナビはどのページでも共通の形をしていて、サイトの主要なコンテンツへのリンクをまとめていますので、サイトを見るユーザーに“ホームページの全体像”が把握しやすいメリットがあります。
グロナビの設計はユーザーにとって使いやすいサイトをつくるためにとても重要なポイントです。
サイト制作の一番最初の仕事でして、いくらよいコンテンツを作ってもグロナビが適切でないとユーザーに見てもらえないかもしれません。
