• グローバルサイト

2017年6月30日

グローバルサイト最適化のポイント(6):ナビゲーションの種類とその役割

ウェブサイトのユーザビリティに関する問題の多くは、言語よりもサイト内の情報の整理が不十分であることが大きいと言われています。

今回は、WEBサイト上の情報を整理するためのツールとして、グローバルサイトでよく使用されるナビゲーションの機能や注意点を見ていきたいと思います。

続きを読む

 

グローバルサイトでよく使用されるナビゲーションの種類と機能例

グローバルナビゲーション

グローバルナビゲーションとは:Webページにおいて重要度の高い項目をメニューにし、Webページのどのページを開いても、同一の場所・位置に表示されるナビゲーション。

メニューの構成は情報種別(重要な情報を項目ごとに分類したもの)、機能種別(実装されている機能を分類したもの)、対象者/状況別(対象となるユーザーを分類したもの)、利用頻度別(ユーザーの利用頻度により分類したもの)、など様々です。階層型ナビゲーションとも呼ばれます。

 

機能:ユーザーがWebサイトやアプリにおいていつでも必要な情報を瞬時に得ることができるよう、たいていサイト内の全頁を横断して、備え付けられている。

グローバルナビゲーション

グローバルナビゲーション例(赤枠部分):富士フィルム

ローカルナビゲーション

ローカルナビゲーションとは:グローバルナビゲーション内メニューに設置される(同じカテゴリの)複数コンテンツを、ユーザーに自由に[選択させる/移動させる]ことを可能にするナビゲーション。

ローカルナビゲーションではメニューの内容が細分化されて表示されており、そのためユーザーは自分の知りたい情報をピンポイントで得ることができます。

 

機能:多くの場合、グローバルナビゲーションとセットで用いられグローバルナビゲーションメニューの内容が細かく分類されたコンテンツ、をユーザーが選択できるようにする。

 

注意点:時と場合に応じて、ローカルナビゲーションをグローバルナビゲーションのように設計するか、通常のローカルナビゲーション(グローバルナビゲーションの下、またはサイドカラムのようにぶら下がる形)にするかをユーザー目線で考え、実際に設計する。

 

 

グローバルナビゲーション(青枠)の下に挿入している(赤枠)パターン:ブリジストン

ローカルナビゲーションの例(赤枠部分):ブリジストン                  グローバルナビゲーション(青枠部分)の下に挿入しているパターン

 

 

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

ブレッドクラムナビゲーションとは:ユーザーが現在閲覧しているページまでどのような経路をたどって行き着いたのかを知ることができるよう、その情報経路を表示する/したナビゲーション。

このナビゲーションによってユーザーは自身の現在位置を知って、閲覧したい場所まで容易に戻ることができます。情報経路は一般的に不等号(>)で表され、不等号内に表示されているコンテンツはリンクとなっているため、ユーザーは必要に応じてページを移動することができます。「パンくずリスト」とも呼ばれます。

 

機能:ユーザーの現在位置把握。迷子防止。

 

注意点:情報経路の選択。情報経路が複数存在する場合、どの経路を表示するかをWebページ作成者がユーザー目線で適切に判断し設計すること(考えうる全ての経路、限定した1つの経路、ユーザーのたどってきた経路、のどれをWebページに表示するかは作成者の判断に任される) 。

 

ブレッドクラムナビゲーションの例:日本郵政

ブレッドクラムナビゲーションの例:日本郵政

 

ページネーション

ページネーションとは:同一カテゴリの多数のコンテンツの集合体、または単一であっても容量の大きいコンテンツにおいてユーザーがそのコンテンツ内で自由に移動できるようWebページにつけられるナビゲーション。例えば検索エンジンで膨大なコンテンツが検索結果として表示された場合、ユーザーは(リンクとなっているページ数を表す数字をクリックすることで)自分の関心・必要に応じたページへと移動することができる。(「前へ」「次へ」アイコンなどのリニアナビゲーションとは異なり、1ページずつ閲覧せずにすむ、というのがユーザーにとって便利なポイント)

また、新聞記事などの容量の大きい媒体において、ページネーションはユーザーに1ページずつ読むことなく必要な部分のみを提供することもできる。

 

機能:サイト内の情報を複数ページに分割し、それらに数字を振り(1ページ、2ページ…)、数直線のように並べ、ユーザーが各ページにジャンプできるようになっている。

 

注意点:ページ数を表す数字や数直線の表示を極力シンプルにすること。

(例えばユーザーが現在閲覧しているページ数に色をつける、等で十分。凝ったデザインは避ける)

 

ページネーションの例:Google(現在閲覧しているページ番号の色を変えている。Google の場合は10ページまでに閲覧ページを絞っている。)

ページネーションの例:Google(現在閲覧しているページ番号の色が変わっており、Google の場合は10ページまでに閲覧ページを絞っている。)

 

まとめ

いかがでしたでしょうか?今回は、ウェブサイトでよく見られるナビゲーションをご紹介しました。

 

これ以外にももちろんナビゲーションの種類は存在します。ただし、ナビゲーションはあくまでユーザーにとって使いやすい・分かりやすいサイトにするためのツールです。

 

不必要に複雑にすることは控え、機能・目的を意識しながら使用してください!

 

 

出典:

Pagenation – Examples And Good Practices.  Sven Lennartz. SMASHING MAGAZINE.

https://www.smashingmagazine.com/2007/11/pagination-gallery-examples-and-good-practices/

 

記事をたたむ

  • 最新記事
  • あなたにおすすめの記事
人気のある記事 について
グローバルサイトや多言語サイトの 運用に役立つ情報を配信しています。 大勢の外国人観光客が日本に 「来て見る」ヒントを創るメディア サイトを目指します。

キテミルの更新情報を、あなたのメールアドレスにお届けします。

Copy Protected by Chetan's WP-Copyprotect.