「全体構造」の設計と情報の「組織化」で効果的なサイト設計をしよう。

Webサイトの設計では現状の分析を元にサイトの目的や目標を明確にした上で、効果的な構造設計をしていきます。ここでは、情報の正しい「組織化」と「階層化」の手法を理解し、効果的なサイト設計ができるようになるための基本を抑えていきましょう。

全体構造の設計とは？

効果的なサイト設計には情報アーキテクチャに則り、目的に合わせユーザーにとって情報をわかりやすく整理し全体構造を設計する必要があります。まずは基本的な考え方として「情報アーキテクチャ」の概念をしっかりと念頭におきましょう。Webサイトの構造設計では情報アーキテクチャの概念のもと、掲載するコンテンツ（情報）の「グループ化」と「組織化」を行い、目的に合わせてそれらの情報をさらに組織化していきます。

情報アーキテクチャの基本については下記記事を参考にしてみて下さい。

情報のグループ化と組織化

情報のグループ化とはある一定のルールに基づいて複数の情報をわかりやすくまとめていくことです。乱立された情報をルールに合わせてカテゴライズして再構築することで、ユーザーにとってサイト内での検索性と閲覧生が向上し扱いやすいサイトとなります。さらに組織化とは、一定のルールに合わせてグループ化した情報を目的や用途に合わせてサイト全体として体系化していくことを指します。

例えば、電化製品には様々な種類がありますが、「冷蔵庫」「エアコン」「テレビ」など単にグループ化された情報なだけではそこに意味合いや価値が生まれません。ですがグループ化された情報を「人気順」「用途別」「価格」など目的に基づいて組織化・体系化されることでユーザーにとってその情報に価値が生まれます。

情報の組織化

情報デザインや情報アーキテクチャの先駆者であるリチャード・ソール・ワーマンは、情報を整理し組織化する際の方法を「LATCH法」として

①位置（Location）
②アルファベット／アイウエオ（Alphabet）
③時間（Time）
④分野（Category）
⑤階層（Hierarchy）

の5つに定義しています。

ここではリチャード・ソール・ワーマンの「LATCH法」について具体的に説明していきます。

位置（Location）で組織化する
「距離」や「場所」など、地理的（物理的）無条件に基づいて情報を整理する方法です。

・地図
・案内図
・相関図
・Webサイトの閲覧用サイトマップ

などが挙げられます。

アルファベット（Alphabet）で組織化する
アルファベット順やアイウエオ順など、「言語体系」によって情報を分類・整理する方法です。

・辞書
・電話帳
・製品リスト
・名簿リスト

などが挙げられます。

時間（Time）で組織化する
「時間軸」によって情報を分類・整理する方法です。

・テレビの番組表
・カレンダーや年表
・更新履歴
・タイムテーブル

などが挙げられます。

分野（Category）で組織化する
「ジャンル・カテゴリー」によって情報を分類・整理する方法です。

・図書館の蔵書
・Webサイトのカテゴリー
・デパートの売り場
・本やCDショップの売り場

などが挙げられます。

階層（Hierarchy）で組織化する
「サイズ」「価格」「重要度」など情報の「程度や重み」によって情報を分類・整理する方法です。

・商品の人気順リスト
・価格順リスト
・折れ線グラフや円グラフ
・検索エンジンの表示順位
・ブログや動画の人気記事順

などが挙げられます。

実際にサイトを制作する際などではこれらいくつかの方法を複合的に組み合わせていくことになります。しかし、情報を「組織化」しただけではただ単に情報を整理し並べただけにすぎないのでまだ「分かりにくさ」が残ります。組織化した情報ここから更に「構造化」しサイト構築に組み込んでいきます。

組織化が「情報をわかりやすく分類しまとめるだけの」作業だとすれば、「構造化」とはWebサイトまたはユーザーの目的に合わせて、組織化された情報を見つけやすくし、利用してもらうためにサイト内に効果的に配置していく作業と言えます。

情報を整理すると何がいいのか？

なぜ情報を整理する必要があるのでしょうか。例えば情報の数が少なく限られているのであれば、ユーザーも欲しい情報を探すことが容易く、特に整理する必要はないでしょう。しかし、情報量が増えて多くなってくるとユーザーが欲しい情報にたどり着くための労力（クリック数や文字を読む量）が増え、上手く探せなかったり、離脱に繋がります。そのためユーザーの情報検索の労力を下げるためにも、情報を分類し並べ、余分な情報を出来るだけ減らし整理してあげることが大切になります。

構造化の基本モデル

さて、情報整理にはいくつかの方法・種類があることがわかりましたが、整理された情報をユーザーにとって価値のあるモノにしていくために、更に情報を構造化しサイトに組み込んでいきましょう。

構造化にはいくつか主要なモデルがあり、大きく

①「階層型（ツリー型）」
②「直線型」
③「Webリンク型」
④「フォークソノミー型」

に分けられます。

階層型（ツリー型）で構造化する

階層型（ツリー型）は構造が枝分かれしていくように情報を階層化していく方法です。中でも一般的なディレクトリー構造で、例えば「日本 ＞ 大阪 ＞ 梅田 ＞カフェ」であったり「音楽 ＞ ジャズ ＞ ピアノジャズ」などと言った構造化の仕方で、中でも特にメジャーなものになります。

メリット
情報を「大 > 中 > 小」と言った形で細分化して整理するため、ユーザーがサイト内での現在地を把握しやすく、情報の意味合いを理解しやすいことが挙げられます。

デメリット
階層化に決まったルールが見出しにくいため、どのように階層分けしていくかが担当者に依存しやすいこと。また、情報量が多かったり似たような項目の情報がある場合、情報が多量の階層にまたがってしまい、目標とする情報までのクリック数が多くなってしまうことなどが挙げられます。

直線型で構造化する

直線型とは情報やページの遷移などユーザーの導線を設計する手法です。例えば「次へ」「戻る」であったり、「カート ＞ 決済内容の入力 ＞ 確認 ＞ 決済完了」といった操作でユーザーに任意の情報やページに誘導できるような構成であったり、サイト内での支払い手続きなど前後プロセスを踏まなければ次に進めないようにしたりなどがあります。特にECサイトなどで使われますが、直線型構造のみで構成されるサイトは少ないでしょう。

メリット
特にECサイトであれば必要な情報操作をユーザーに漏れなく行わせることでトラブルを防ぐことができます。

デメリット
特にありませんが、直線型構造のみで構成されるサイトは少ないか、むしろ不便なため他の構造化手法と組み合わせ使用しましょう。

Webリンク型で構造化する

階層構造や直線構造にとらわれず、リンク遷移で情報にアクセスさせる形で構造化する手法です。

メリット
ユーザーに自由にページ徘徊させることができます。

デメリット
自由な反面ルールがないため、無秩序となりやすい。更に階層型や直線型と違いページ同士で統一された導線設計がされていないため、一度訪れたページに再度訪問したい場合にユーザーが迷う可能性が高くなります。

フォークソノミー型で構造化する

フォークソノミーとは「民衆」を意味する英語「フォークス」と「分類法」を意味する英語の「タキソノミー」を合わせた造語で、ブックマークやタグクラウドなどのように、「情報のタグ付けやコンテンツの分類をユーザーに依存させる」手法になります。従来のサイトのようにあくまでサイト管理者が構造を決めるのではなく、ユーザーの共同作業によって構造化が変わってくるのが大きな特徴です。

メリット
ユーザーの目的や情報の変化に合わせて構造化が変化するため、多くの情報を共有する方法としては最も適した構造になります。

デメリット
ダグ付の状況やタグの数に合わせて見た目や情報の大小並び順をを都度工夫し整理していく必要がある。

Webサイトの設計は様々な情報整理、構造化手法を組み合わせて行います。一般的には「階層型」を用いてグローバルナビゲーションや大カテゴリー項目、小カテゴリー項目で分け、その中で更にコンテンツを整理しつつ、コンテンツや仕様に合わせて直線型プリセスを採用するなどします。更にその中でWebリンク型やフォークソノミー型をコンテンツに合わせて採用しサイト全体の構造化を進めていきます。

情報整理・構造化の本来の目的は、あくまで「ユーザーが必要とする情報を見つけやすくする事」です。ただしそれはWebサイトの目的やユーザーの目的によって正解が違うため、必ずしも縛られすぎる必要はありませんし絶対に正しいサイト構造がある存在するわけでもありません。サイトの目的、ユーザーの目的は何なのかをしっかりと決めた上で、最も効果的だと思う構造を考えていくプロセスが重要です。