機能とデザインの両面から見た、Webサイトのナビゲーション

Webサイトにおけるナビゲーションといえば、グローバルナビゲーションとローカルナビゲーションですよね。代表的な2つのナビゲーションに、パンくずリストを加えた3つのナビゲーションを機能とデザインの両面からご紹介します。

ナビゲーションの定義

まず、Webサイトにおけるナビゲーションとは、何なのか解説していきます。ナビゲーション【navigation】…Webサイトを利用するユーザーが迷うことなく目的の情報・ページへたどり着けるようにサポートする機能を持ったリンク要素、となっています。ナビゲーションを適切に設置することで、ユーザーだけではなく検索エンジンのクローラーにも、効率的にサイト内を巡回してもらえるので、SEOにも効果を発揮します。

グローバルナビゲーションの機能

大抵のWebサイトに設置されているグローバルナビゲーション。サイト内の各ページ内にも必ず設置されています。トップページと下層ページで少し異なるデザインになる場合も稀にありますが、並び順や設置場所などは基本的に各ページを訪れてもサイト内で変わることはないです。
グローバルナビの項目には、サイトマップで第一階層となっているページから特に主要であるページが選ばれて設定されることが多いです。サイトによっては項目をユーザーの年代や状況別に分類したり、ユーザーの利用頻度が高いページが設定されたり、柔軟な項目の選択が行われます。

項目の数は、大体5〜7つ程度が望ましいと言えるでしょう。人間は最大７つ程度までの要素なら、戸惑うことなく認識・識別し、操作できるという心理学の法則「マジックナンバー 7プラスマイナス2」に基づいています。項目が難しい単語やユーザーが聞きなれない単語が並ぶ場合は5つ、誰でも聞いたことがある単語であれば7つ程度まで増やすなど、項目に設定する単語の難易度に合わせて数を決めるというのも、項目の数を決める１つの基準として、覚えておくと良いでしょう。

グローバルナビゲーションのデザイン

グローバルナビゲーションの8割で採用されているのがメニューバー形式です。項目一つ一つをボタン化し、一本の棒状にまとめたものです。採用率の高さからもわかるように、初めてサイトに訪れたユーザーでも一目見て「ナビゲーションだ！」と分かるため、ユーザーに最も優しい形式のグローバルナビゲーションと言えるでしょう。

設置場所は、ヘッダー内やヘッダー直下など、ファーストビューに入るところが相応しいです。後ほど説明するローカルナビゲーションがサイドに設置されることは多いですが、グローバルナビゲーションをサイドに固定で設置しているイカしたサイトも近年増えてきています。

▼最もよく見る形のグローバルナビゲーション

▼近年、よく見かけるサイドに固定したグローバルナビゲーション

他にも、スマホサイトでは定番となっているハンバーガーメニューをPCサイトにも取り入れているサイトも増えてきています。私個人としては、トップ画面の見栄えがすっきりするので、とても好きです。

▼ハンバーガーメニューをグローバルナビゲーションに採用

ページ数が多いサイトでは、ナビゲーションの項目をクリックまたはマウスオーバーすることで、サブメニューが開くナビゲーションも多くなっています。サブメニューには、ナビゲーションの項目となっているページ(ページはなくても良い)の下層ページを一覧で表示します。上記の方法を「メガドロップダウン」と言います。

ローカルナビゲーションの機能

ローカルナビゲーションとは、同階層に含まれるページを一覧で表示しているナビゲーションのことです。ローカルナビゲーションを設置することで、ユーザーはある親ページに対して、複数ある子ページを、1クリックで切り替えて閲覧することができます。(親ページと子ページだけでなく、子ページと孫ページにもおなじことが言えます。)

多階層化したサイトでは、ユーザーを迷子にさせない役割を果たします。先ほど説明した「メガドロップダウン」で表示されたサブメニューもローカルナビゲーションの一例といえるでしょう。

ローカルナビゲーションのデザイン

ローカルナビゲーションは、下層ページの左端または右端に縦型のメニューバー形式で設置されることが多いです。一昔前までは、トップページにもローカルナビゲーションが設置されている全ページ2カラムレイアウトのサイトも少なくありませんでしたが、最近はトップページにまでローカルナビゲーションを設置しているサイトは、あまり見かけなくなりました。(ECは除く)

ローカルナビゲーションのデザインで重要なのが、階層構造が一目で分かるように、階層別に文字サイズやデザインを変えることです。

ブレッドクラムナビゲーションの機能

ブレッドクラム=ぱんくず。いわゆる「パンくずリスト」と呼ばれているものです。パンくずリストとは、ユーザーが今見ているページのサイト内での位置を、トップページからの階層順にテキストリンクで設置したものです。

ユーザーが、今自分はサイト内のどのページにいるのかを把握することで、サイト内で迷子になることを防ぐ役割があります。へッダー直下にあるビゲーションの下(メインコンテンツのすぐ上)もしくは、フッター上に控えめに設置されることが多いです。

ブレッドクラムナビゲーションのデザイン

一般的には、テキストベースで「HOME > 会社概要」のように、ページ間に「>」「/」のような記号を入れます。細部まで凝ったサイトでは、「HOME」の部分が家のアイコンになっていたりします。Appleのサイトでは、「HOME」が企業ロゴのりんごマークになっていますね。

最近よく見る、いいなと思うパンくずは、テキストの背景が矢印型になっているパンくずです。テキストベースのものより、視認性もよくユーザビリティに優れているため、これからばんばん使っていきたいです。

まとめ

サイトによって、相応しいナビゲーションの設置場所・デザインは変わってきます。Webデザインを行う際、自分自身が実際にサイトのユーザーになった気持ちで、ナビゲーションを設置すれば、自ずとユーザーにとって目的の情報に辿り着きやすいサイトが出来上がると思います。

マーケティングでお悩みでしたら、
Bigmacにお任せください。