ウェブサイトと一口に言っても、個人ブログから企業サイト、あるいは大規模なコミュニティーまで、多様なウェブサイトが存在します。公開するコンテンツの内容、目的、ページ数、参加するユーザー数などの条件は、個々のウェブサイト毎に異なります。ウェブサイトを制作するためには、このような多様な形態から、最も目的にあったパターンを選ぶ、情報設計が不可欠です。
この『ウェブサイトの情報設計』について、基本を勉強してみたいと思い、主に以下の書籍を参照しながら、何回かにわけてまとめてみたいと思います。なを、記述内容や図については、書籍を読解しつつ、自分で書き起こしているので、正確な引用ではありません。内容に興味がわいたら、ぜひ原書を読まれることを、おすすめします。
- デザイニング・ウェブナビゲーション --最適なユーザーエクスペリエンスの設計
- Information Architecture for the World Wide Web 3e
- ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
まず初回は『情報構造のパターン』について。『デザイニング・ウェブナビゲーション --最適なユーザーエクスペリエンスの設計（p.200）』では、以下の５つのパターンに分類されている。
直線型（Linear）
そのサイトの目的が明確で、ゴールがはっきりしている場合に有効。例えばキャンペーンの告知と申し込み用のサイトなど。ユーザーはいくつかのステップを経由して、最終的な目的を達成する。ECサイトなどは、階層型と直線型の組み合わせで、商品の発見は階層型だが、その後の購入までのステップは直線型になる。
ハブとスポーク型（A hub and spoke）
直線型の派生系ともいえる。中心（ハブ）から、ユーザーの目的を選択して、ゴールに向かってステップを進んでいく。ひとつの目的が達成されたら、サイトの利用を終了するか、出発点であるハブに戻る。複数の直線型が、一つのハブから始まる型。
ウェブ型
開始ページや最終ページが明確に定められていない。各ページは、リンクや相互参照でつながっていて、中心のない構造。インターネット（WWW）全体を見ると、このような構造。
ウェブ型の各ページは『ハブとスポーク型』のハブとして機能する可能性を秘めている。例えば、ソーシャルネットワーク・サービスのユーザー同士のリンク。閲覧者はその間を自由に移動しつつ、各ユーザーのプロフィールページを起点に、日記などの情報を見たり、メッセージを送るなどのアクションを開始できる。ページ同士のリンクをナビゲーションとして整理することで、ウェブ型の情報を、構造化することが可能、ということでしょうか。
階層型（hierarchy）
通常のウェブサイトでよく見られるパターン。サイトのトップページ（ホームページ）を起点に、情報を親子関係で整理する。階層構造内で、下の階層のコンテンツは、親コンテンツの意味や内容を受け継ぎ、それを次の階層につなげる。
『Information Architecture for the World Wide Web 3e』の5.4.1. The Hierarchy: A Top-Down Approachでは、階層型をさらに二種類に分類しています。
横の幅が狭く、階層が深いもの Narrow-Deep
横の幅が広く、階層が浅いもの Broad-Shallow
階層の横の幅と深さ、この二つの間のバランスがとれた構造が望ましいとされる。ただし、ユーザーにとっては、クリックして進んだ先を確認するより、カテゴリーのリストをざっと見て選ぶ方が、瞬間的に判断できるので、深い階層より、浅くて幅広いもののほうがナビゲーションしやすい。トップページは階層構造への入り口になるため、ユーザーが「ぱっと見て、どこに行けばいいのか」わかるように、選択肢を並べておくのが有効。
階層型の情報構造では、適切なラベル付け、グループ分けがされていることが非常に需要。理想的にはトップページのナビゲーションを見ることで、ウェブサイト全体に、どのようなコンテンツがあるのかを理解できること。また、ウェブ制作においては、後からコンテンツが随時追加されていく場合も多いので、それを見越してバランスを設計したり、必要に応じて定期的に見直す必要があるだろう。
ポリヒエラルキー
ひとつのページやコンテンツが、複数の親に所属するケースは、ポリヒエラルキー（複合型階層）と呼ばれる。例えば、複数のコンテンツの『連絡先』をクリックすると、ひとつの連絡用フォームのページに遷移する場合など。パン屑ナビゲーションなどで、表示がおかしくならないように気をつけて設計をする必要がある。
ファセット型（Facets）
ファセット型は階層型の代わりに利用することができる。馴染みのない名前だが、ECサイトなどでは頻繁に用いられる。例えば、一眼レフカメラのレンズをECサイト上で探す場合。目的の機種を探すために、様々な絞り込み条件を組み合わせることになる。
- メーカーを一覧から選ぶ
- 対応するカメラの機種から選ぶ
- レンズの焦点距離を選ぶ
- レンズの明るさを選ぶ
- 価格帯を指定する
これらの条件は、どこから指定してもよいし、また一部を組み合わせるだけでもよい。予算が決まっている人は、まず価格帯を選び、望遠・広角などの焦点距離を指定して、そのなかで最も安いレンズを選ぶ。一方で、より専門的な目的でレンズを探している人は、レンズの焦点距離、明るさから選び、最終的に予算を決定するかもしれない。このように、「ユーザーはさまざまな角度から情報にアクセスしようとする（P.203）」という特性にあわせつつ、情報検索に大きな柔軟性を持たせることができる。
また、ファセットを構成するカテゴリは、相互に排他的なので、新たにカテゴリを追加したり、既存のカテゴリの内容を変更しても、それが他のカテゴリに影響をあたえることがない。これは親子関係が定義されている階層型と大きな違いで、高い拡張性をもたらす。
発生型
Wikipedia のように、事前に計画するのではなく、コンテンツの投稿者によって自律的に構造がつくられるもの。投稿者が一定のルールや規則に基づきながらも、自由にコンテンツの方向性をきめることができる。発生型の多くはウェブ型の階層をもつことになる。Wikipediaのように、wikiというツールの操作性がナビゲーションや情報の構造を規定するケースもある。
ブックマーク & Twitter & はてなスター
コメント