グローバルナビゲーションには何を入れるか？最適なGナビ項目の考え方

グローバルナビゲーション（Gナビ）とは？

グローバルナビゲーション （global navigation） とは、Webサイトの全ページに共通して存在する、サイト全体の主要メニューを提示する機能です。

サイト内各ページの最上部に配置されるのが一般的で、「Gナビ」と呼ばれることも多くあります。

その他にも「〇〇ナビゲーション」と呼ばれるナビゲーションエリアがあります。おもなものは下図になります。

ユーザーが使いやすいサイトにするためのGナビ項目の決め方とは？

では、Gナビに入れる項目は、どのような考え方で決めると効果的なのでしょうか？4つのポイントに分けて紹介します。

サイトのアバウトネスを端的に表現する

まずは、Gナビのもつ役割を考えます。

Gナビは、サイトを訪れたユーザーを主要コンテンツに導くことをメインの目的としています。加えて、サイトのアバウトネスを端的にユーザーに伝えるという役割ももっています。

サイトのアバウトネス =aboutness とは、そのサイトが何であるか？ どんな情報を提供しているのか？ということを意味します。

まずは、このGナビの目的や役割を意識することで、何を入れるべきで何を入れないかを判断してみるとよいでしょう。

ビックフッターとの掛け合わせで考える

Gナビの表示領域は、次項目でも述べますが物理的に限度があります。そのため、すべてのメニューを入れることは難しいかもしれません。

ビッグフッター （big footer）を採用することで、 Webサイトの全ページに共通して存在するフッターを大きく表示させ、そのなかにサイトマップを盛り込む UI デザインもよく見かけます。

網羅的なナビゲーションはビッグフッター側で担保して、ページ最上部のGナビではメニュー項目をより厳選しましょう。サイトのアバウトネスを際立たせる代表的なメニューに絞ってもいいかもしれません。

UIについては、「UXを高めるためのワイヤーフレームの作り方」でも取り上げています。

https://web-management-academy.net/w/www/article/how-to-make-the-wireframe-for-improve-ux

メニュー項目の数を意識する

メニュー項目の数についても意識しましょう。数が多すぎるとユーザーが全体を把握しにくくなり、メニューの選択やアバウトネスの理解に支障をきたす可能性があるからです。

認知心理学では、ジョージ・A・ミラーによる「マジックナンバー±７」という有名なセオリーがありますが、「インタフェースデザインの心理学」では、4つ以内が理想的ともいわれています。いずれにしても、必要以上に多くせず、できるだけ少なくするよう努めるのがよいでしょう。

人々の心を捉えるにはどうすればよいのか?長年にわたりインタフェースデザインに携わってきた心理学者が「よりよいデザインに役立つポイント」を科学的な研究によって明らかにされた事実とともにウェブやアプリのデザインに応用できる形でわかりやすく解説している「インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針」も参考になります。

メニュー項目の並び順を意識する

どういう順番でメニュー項目を並べるかについても意識しましょう。

メニューの並び順は各メニューの重要度を暗黙的にユーザーに伝えることができます。またメニューの並び順によって、そのサイトのアバウトネスの伝わりかたが変わってくる可能性もあります。

基本的には、重要度の高い （ユーザーに優先的に見てもらいたい） 順で 、左から右にメニュー項目を並べることになります。

これは認知心理学での「初頭効果」をねらったものになりますが、同時に「新近効果」をねらって、コンバージョンに結び付けたい項目 、たとえば「お問い合わせ」をいちばん右に並べる、というのも効果的です。

初頭効果と新近効果の仕組みを念頭に置いた設計

さきほど取り上げた「初頭効果」と「新近効果」を少し紹介しましょう。

人間の記憶は、最初と最後に提示された単語はよく覚えられ、真ん中あたりに提示された単語はあまり覚えられないようになっています。

最初に提示された情報の記憶力がよいことを「初頭効果」、最後に提示された情報の記憶力がよいことを「新近効果」と言います。

この意識をもとにGナビを設計してみると、ユーザーに優先的に見てもらいたい重要なコンテンツへのリンクは最初に読む左端に配置し、コンバージョンに直結するお問い合わせへのリンクは最後に読む右端に配置する構成となります。

まとめ

いかがでしたか？

限られたエリアで、サイトを訪れたユーザーを主要コンテンツに導くためのGナビ、まずはその目的を明確にし、自社の情報の何がそれにあたるかを考えてみてください。

ウェブマネジメント®・アカデミーの運営元であるあやとりのWebサイトでは、どのようなGナビ設定になっているか、よろしければ参考にしてみてくださいね。