ウェブサイトの情報を構造化する5つのパターン

ウェブサイトと一口に言っても、個人ブログから企業サイト、あるいは大規模なコミュニティーまで、多様なウェブサイトが存在します。公開するコンテンツの内容、目的、ページ数、参加するユーザー数などの条件は、個々のウェブサイト毎に異なります。ウェブサイトを制作するためには、このような多様な形態から、最も目的にあったパターンを選ぶ、情報設計が不可欠です。

polyhierarchy

この『ウェブサイトの情報設計』について、基本を勉強してみたいと思い、主に以下の書籍を参照しながら、何回かにわけてまとめてみたいと思います。なを、記述内容や図については、書籍を読解しつつ、自分で書き起こしているので、正確な引用ではありません。内容に興味がわいたら、ぜひ原書を読まれることを、おすすめします。

まず初回は『情報構造のパターン』について。『デザイニング・ウェブナビゲーション --最適なユーザーエクスペリエンスの設計(p.200)』では、以下の5つのパターンに分類されている。

直線型(Linear)

そのサイトの目的が明確で、ゴールがはっきりしている場合に有効。例えばキャンペーンの告知と申し込み用のサイトなど。ユーザーはいくつかのステップを経由して、最終的な目的を達成する。ECサイトなどは、階層型と直線型の組み合わせで、商品の発見は階層型だが、その後の購入までのステップは直線型になる。

structure-linear

ハブとスポーク型(A hub and spoke)

直線型の派生系ともいえる。中心(ハブ)から、ユーザーの目的を選択して、ゴールに向かってステップを進んでいく。ひとつの目的が達成されたら、サイトの利用を終了するか、出発点であるハブに戻る。複数の直線型が、一つのハブから始まる型。

structure-hub-spoke

ウェブ型

開始ページや最終ページが明確に定められていない。各ページは、リンクや相互参照でつながっていて、中心のない構造。インターネット(WWW)全体を見ると、このような構造。

structure-web

ウェブ型の各ページは『ハブとスポーク型』のハブとして機能する可能性を秘めている。例えば、ソーシャルネットワーク・サービスのユーザー同士のリンク。閲覧者はその間を自由に移動しつつ、各ユーザーのプロフィールページを起点に、日記などの情報を見たり、メッセージを送るなどのアクションを開始できる。ページ同士のリンクをナビゲーションとして整理することで、ウェブ型の情報を、構造化することが可能、ということでしょうか。

structure-web-hub

階層型(hierarchy)

通常のウェブサイトでよく見られるパターン。サイトのトップページ(ホームページ)を起点に、情報を親子関係で整理する。階層構造内で、下の階層のコンテンツは、親コンテンツの意味や内容を受け継ぎ、それを次の階層につなげる。

Information Architecture for the World Wide Web 3e』の5.4.1. The Hierarchy: A Top-Down Approachでは、階層型をさらに二種類に分類しています。

横の幅が狭く、階層が深いもの Narrow-Deep

structure-narrow-deep

横の幅が広く、階層が浅いもの Broad-Shallow

structure-broad-shallow

階層の横の幅と深さ、この二つの間のバランスがとれた構造が望ましいとされる。ただし、ユーザーにとっては、クリックして進んだ先を確認するより、カテゴリーのリストをざっと見て選ぶ方が、瞬間的に判断できるので、深い階層より、浅くて幅広いもののほうがナビゲーションしやすい。トップページは階層構造への入り口になるため、ユーザーが「ぱっと見て、どこに行けばいいのか」わかるように、選択肢を並べておくのが有効。

structure-hierarchy

階層型の情報構造では、適切なラベル付け、グループ分けがされていることが非常に需要。理想的にはトップページのナビゲーションを見ることで、ウェブサイト全体に、どのようなコンテンツがあるのかを理解できること。また、ウェブ制作においては、後からコンテンツが随時追加されていく場合も多いので、それを見越してバランスを設計したり、必要に応じて定期的に見直す必要があるだろう。

ポリヒエラルキー

ひとつのページやコンテンツが、複数の親に所属するケースは、ポリヒエラルキー(複合型階層)と呼ばれる。例えば、複数のコンテンツの『連絡先』をクリックすると、ひとつの連絡用フォームのページに遷移する場合など。パン屑ナビゲーションなどで、表示がおかしくならないように気をつけて設計をする必要がある。

polyhierarchy

ファセット型(Facets)

ファセット型は階層型の代わりに利用することができる。馴染みのない名前だが、ECサイトなどでは頻繁に用いられる。例えば、一眼レフカメラのレンズをECサイト上で探す場合。目的の機種を探すために、様々な絞り込み条件を組み合わせることになる。

  1. メーカーを一覧から選ぶ
  2. 対応するカメラの機種から選ぶ
  3. レンズの焦点距離を選ぶ
  4. レンズの明るさを選ぶ
  5. 価格帯を指定する

structure-facets

これらの条件は、どこから指定してもよいし、また一部を組み合わせるだけでもよい。予算が決まっている人は、まず価格帯を選び、望遠・広角などの焦点距離を指定して、そのなかで最も安いレンズを選ぶ。一方で、より専門的な目的でレンズを探している人は、レンズの焦点距離、明るさから選び、最終的に予算を決定するかもしれない。このように、「ユーザーはさまざまな角度から情報にアクセスしようとする(P.203)」という特性にあわせつつ、情報検索に大きな柔軟性を持たせることができる。

また、ファセットを構成するカテゴリは、相互に排他的なので、新たにカテゴリを追加したり、既存のカテゴリの内容を変更しても、それが他のカテゴリに影響をあたえることがない。これは親子関係が定義されている階層型と大きな違いで、高い拡張性をもたらす。

発生型

Wikipedia のように、事前に計画するのではなく、コンテンツの投稿者によって自律的に構造がつくられるもの。投稿者が一定のルールや規則に基づきながらも、自由にコンテンツの方向性をきめることができる。発生型の多くはウェブ型の階層をもつことになる。Wikipediaのように、wikiというツールの操作性がナビゲーションや情報の構造を規定するケースもある。