KOBITブログ

なんとなくナビゲーションを作っていない?情報アーキテクチャを見直そう

この記事は約 7分 で読めます。

Business meeting

ナビゲーションはWebサイトの使いやすさを大きく左右します。しかし、メニューの文言が分かりにくかったり、階層構造が深すぎたり、使いにくいナビゲーションを持つWebサイトも散見されます。ユーザーが必要とする情報を見つけやすくするよう、Webサイトの情報を整理し、その構造を見出す手法を「情報アーキテクチャ」と呼ばれます。自社のWebサイトの情報アーキテクチャを見直して、より使いやすいWebサイトを目指してみませんか?

Webサイトの使いやすさを左右する情報アーキテクチャ

Webサイトは何らかの情報を訪問者に提供するという目的を有しています。コーポレートサイトであれば企業の情報を掲載し、Eコマースサイトでは顧客が購入の意思決定できるように必要な商品情報を提供するという具合です。ユーザーが必要とする情報を閲覧できなければ、Webサイトはその目的を果たしていないと言えるでしょう。

情報が分かりやすく、探しやすいようにする作業は、非常に重要であるにも関わらず、その重要度が必ずしも理解されていないケースもあります。例えば、メニューに50個も項目が並んでいては、必要なページが見つけ出せません。トップページから詳細情報にたどり着くまでの階層が深すぎて、何度もクリックしなければならない状況は、ユーザーにとってストレスが溜まります。Webサイトに掲載する情報の整理は一筋縄ではいきません。

情報の体系化は「情報アーキテクチャ」と呼ばれ、長年、ユーザービリティなどの側面から研究が進んできました。知識やデータを整理し、情報が分かりやすく伝えられ、利用者が情報を探しやすくするための技術とも言えます。例えば、ヤフーのWebサイトではカテゴリが細かく分かれ、ユーザーは自分が必要とする情報にすぐに辿りつけます。Amazonではカテゴリから商品を見つけることもできますし、検索機能に任せる方法もあるでしょう。

ユーザー側から見ると、必要な情報が得られないWebサイトではイライラが募ります。ナビゲーションが使いにくかったり、メニューの文言が分かりにくかったりすると、すぐに離脱してしまいます。また、サイト運営者にとっては、適切に整理されていない情報は管理に手間がかかり、エラーが増えてしまう可能性もあります。

Webサイトの構造を整理するための、よくあるパターン

Webサイトの情報アーキテクチャを整理する手段として、いくつかのパターンが提案されてきました。さらに、モバイル端末の利用が増えるにつれて、新たなパターンも追加されつつあります。Webサイトの特性と整理パターンが合致していなければ、ユーザーは使いにくさを感じたり、余計な情報を目にして気が散ってしまったりする悪影響が考えられます。

階層型

ツリー型とも呼ばれ、親子関係によってWebページを整理します。多くのコーポレートサイトが階層型を採用してきました。メインページの下に、商品・企業情報・採用情報などの子階層が並び、さらに、その下に階層が繰り返されていきます。

ファセット型

Eコマースなどでよく見られる構成であり、一つのページが複数のカテゴリに属します。「ナイキの黒い靴」という商品を探す際に、ナイキというブランドがら辿る方法と、黒という色から辿る方法が提供される仕組みです。

ハイパーリンク型

階層構造を持たずに各々のページが相互にリンクし合った構造。Wikipediaのような特定のメインページを持たないサイトが該当します。インターネットそのものがこのハイパーリンク型の構造を備えています。

直線型

お問い合わせフォームやウィザード形式の情報は直線型の構造をとります。入力→確認→完了という、原則的には、一方向の流れです。

ハブ&スポーク型

車輪のように中心の軸から、放射状に広がる各要素をつなげる構成はハブ&スポーク型の構造と呼ばれます。Webサイトにおいては、メインページをハブとし、必ずハブを経由して各機能へアクセスする構成が考えられます。Facebookのようなマイページを持つサイトが代表例です。

タブビュー型

モバイル端末で一般的になった構成です。複数の機能が並列に並び、1クリックでそれぞれの機能を行き来できるのがメリットと言えるでしょう。例えば、Instagramではマイページ、検索、撮影などがタブメニューによって並びます。

ナビゲーションを改善する5つのポイント

Webページの構造が明らかになった後は、その構成に従ってユーザーがサイト内を回遊できるよう、ナビゲーションを設計します。ナビゲーションを設計する上で、以下の5つの検討するべき事項が指摘されました。

  • 位置
  • 簡潔さ
  • 文言
  • アイコン

ナビゲーションの位置は上部または左側にあるのが一般的です。期待に添わない位置に配置したり、ページによってナビゲーションの位置を変えたりしてはいけません。また、ナビゲーションの項目が多くなり過ぎないよう、適切にカテゴリ分けをする必要があります。人間が一度に処理できる項目の数は7±2(5個~9個)が限度と言われているので、この数を目安にすると良いでしょう。

文言もナビゲーションの使い勝手に大きく影響します。ユーザーに馴染みのある言葉を使い、複数の意味にとれるような曖昧な表現を使わないようにしましょう。そして、ナビゲーションの色使いを工夫すると、使いやすいWebサイトが開発できます。今ユーザーがいる場所はどこか、メニューの階層構造はどうなっているかを色で表現できるからです。最後に、アイコンの正しい利用は、使い勝手を向上させると同時に、Webサイトを楽しく感情的に訴えるものにできます。Webサイト全体のデザインに合致したアイコンは意味が明確で、どこに何があったかをユーザーが記憶できるようになります。

その他にも一般的に利用されるナビゲーションはユーザーにとっても馴染みがあるため、使い勝手を向上させます。階層構造を持つサイトであれば、パンくずナビゲーションによって、現在地が分かりやすくなります。大量なリストを取り扱う場合、ページによって分割し、前後のページ、最初・最後のページへのリンクをつけます。Webサイト全体で一貫性を保つよう、ナビゲーションを設定すると、ユーザーはイライラを感じることなく、Webサイトを使い続けてくれるでしょう。

まとめ

Webサイトの設計においては、自社が使用する情報の特性が何であるか分析するプロセスが欠かせません。情報アーキテクチャを意識して、一貫性のあるデザインを行えば、使いやすいWebサイトを構築できるようになるでしょう。

参考文献


さあ、KOBITをスタートしよう。