情報設計（IA）

ねらい

ものが10個なら、適当に置いても見つかる。でも10000個になったら、置き方を間違えただけで「あるのに、見つからない」が起きる。

Webサイトも同じだ。ページが増えるほど、デザインの良し悪しは「色」や「形」ではなく、情報をどう並べ、どう分類したかで決まる。この「並べ方・分け方の設計」を、情報設計（Information Architecture、略してIA）と呼ぶ。

このクエストのねらいは一つ。「探し物が見つかる」とは、実は「今どこにいて、何が探せるか分かる」ことだ——これを理由ごと身につけること。きれいに飾る前に、まず迷子を出さない。その土台を作る話だ。

何への反作用だったか ― 「情報が多すぎる」という新しい困りごと

新しい考え方は、いつも新しい困りごとへの答えとして生まれる。IAも例外ではない。

20世紀の後半、世界に情報があふれ始めた。本、新聞、テレビ、そして地図やデータ。量が増えすぎて、人は「知りたいことが、目の前にあるのに見つけられない」という状態に陥った。この苦しさに名前をつけた人がいる。アメリカのリチャード・S・ワーマンだ。彼はこれを情報不安（情報が多すぎて、かえって何も分からなくなる状態）と呼んだ。

ワーマンの発想がすごいのは、ここからだ。彼は元々建築家だった。建物を設計するように、情報にも設計が要ると考えた。バラバラの情報をただ積み上げるのではなく、人が迷わず歩ける「構造」を先に建てる。これを彼は情報建築（英語で Information Architecture。Architecture は「建築」という意味）と名づけ、自らを**情報建築家（インフォメーション・アーキテクト）**と称した（1976年）。冒頭でIAの正体として出した英語の Architecture は、まさにこの「建築」と同じ語だ。建築家ワーマンが情報を建てた——だから Architecture（建築）なのである。

そして時代がWebに移ると、この困りごとは爆発した。ページが何千、何万と増えるWebサイトは、まさに「情報があふれて迷子になる場所」そのものだったからだ。1998年、ローゼンフェルドとモービルの二人が、IAをWeb向けにまとめた本を出す。表紙にシロクマが描かれていたことからシロクマ本と呼ばれ、Web制作者のバイブルになった。IAは「建築の比喩」から「Webの実務」へと降りてきた。1976年に芽吹いた言葉が、約20年かけてWebの時代に咲いたわけだ。

整理の5つの軸 ― LATCH（ラッチ）

では、情報はどう並べればいいのか。「並べ方なんて無限にある」と思うかもしれない。だがワーマンは、人間が情報を整理する方法は、たった5通りしかないと言い切った。彼は当初これを**「5つの帽子掛け（Five Hat Racks）」と呼んだ。のちにその5つの頭文字をとってLATCH（ラッチ）**と呼ばれるようになる。

• Location（位置）… 場所で並べる。例：地図、座席表、体の部位ごとの説明。
• Alphabet（五十音・アルファベット）… 名前順で並べる。例：辞書、電話帳、社員名簿。
• Time（時間）… 時の流れで並べる。例：年表、履歴、ニュースの新着順。
• Category（カテゴリ）… 仲間ごとに分ける。例：メニューの「前菜・主菜・デザート」、服の「トップス・ボトムス」。
• Hierarchy（階層）… 量や程度の大小で序列をつける。例：価格の安い順、人気ランキング、評価の高い順。

ここで時間（T）と階層（H）は、どちらも「順に並べる」ので混ざりやすい。違いはこうだ。時間Tは「いつか」で並べる。階層Hは「どれが上か（大小・量・順位）」で並べる。同じ並べ替えでも、手がかりにしているものが違う。

同じ100冊の本でも、「著者名順（A）」「出版年順（T）」「ジャンル別（C）」「売れた順（H）」と、軸を変えれば見え方がまるで変わる。正解は一つではない。「利用者が何を手がかりに探すか」で、選ぶ軸が決まる。これがLATCHの肝だ。

カテゴリは「作り手の頭」で決めない ― カードソート

5つの軸のうち、Webで一番悩むのが**カテゴリ（C）**だ。「このページは、どのグループに入れる？」という分類の問題。ここで一番やりがちな失敗がある。作り手の頭の中の分類を、そのまま利用者に押しつけることだ。

たとえば会社のサイトで、社内の部署名そのままに「営業部のページ」「総務部のページ」と分けたとする。作り手には自然でも、訪れた人は「自分の知りたいことが、どの部署の担当か」なんて知らない。分類が作り手目線だと、利用者は迷子になる。

ではどうするか。利用者の頭の中の分類を、直接のぞきに行く。その道具がカードソートだ。やり方は単純。ページの名前を1枚ずつカードに書き、何人かの利用者に「仲間だと思うものでグループを作って」と頼む。すると、作り手では思いつかなかった「利用者にとって自然なまとまり」が浮かび上がる。分類を勘ではなく、観察で決めるための方法だ。

「3クリック以内」より「現在地が分かる」 ― ナビとパンくず

IAでよく言われる古い迷信がある。「目的地まで3クリック以内にすれば使いやすい」というものだ。一見もっともらしい。だが、これは半分間違いだ。

考えてみてほしい。階段を10段のぼるのは平気でも、目隠しで3段のぼるのは怖い。クリックの「回数」が問題なのではない。今どこにいて、次にどこへ行けば何があるか、分かっているか——これが問題なのだ。実際、ポーターという人が44人・約620回の操作を調べたところ、「3クリックを超えたから人が離れる（＝離脱する）」という証拠は、ほとんど見つからなかった。

だから、IAが本当に保証すべきはこうだ。いつでも「現在地」と「行ける先」が見える状態を作る。それを担うのがナビゲーション（サイトの案内表示。どこに何があるかのメニュー）と、パンくず（今いるページが全体のどこかを示す、入口からの道しるべ）だ。パンくずは、童話『ヘンゼルとグレーテル』で森に落としたパンくずが由来。たどれば必ず入口へ戻れる、という安心を作る。

これは「文字の階層」「近接」「視線誘導」の情報版だ

最後に、このクエストを他とつなげておく。IAは、まったく新しい話ではない。前に学んだ原則が、サイト全体の規模に拡大しただけだ。

タイポグラフィ編で「見出し・小見出し・本文」と文字に序列（階層）をつけたのを覚えているか。あれは一枚のページの中の話。IAの階層（H）は、それをサイト全体に広げたものだ。トップページが一番大きな見出し、その下にカテゴリ、さらに下に個別ページ——同じ「大小で序列を作る」考えが、規模だけ大きくなっている。

レイアウト編の近接（関係あるものは近く、無いものは遠くに置く）も同じだ。一枚の中で要素をまとめた近接が、IAでは「関係あるページを同じカテゴリにまとめる」=**カテゴリ（C）**になる。

そして準備編で学んだ視線誘導（見る人の目を、見てほしい順に導くこと）も拡大する。一枚の中では「目を通す一本の道」を作る話だった。サイト全体でその“道”を担うのがナビとパンくずだ。いつも同じ場所にある案内が、サイト全体を貫く一本の道筋になり、利用者の目を「現在地→行ける先」へと導く。

つまりIAとは、ページの中で効く原則を、サイトという大きな器でやり直すこと。新しく覚え直すのではなく、スケールを変えて適用するだけだ。

（補足：ここで言う階層Hは「大小・量で序列をつける」並べ方のこと。一方、トップ→カテゴリ→個別ページという入れ子の構造は、厳密にはカテゴリCの親子関係に近い。「順位づけのH」と「入れ子のC」は別物だと覚えておくと、後で混乱しない。）

見分け方 ― このサイトはIAが効いているか

最後に、サイトの「並べ方」が良いか悪いかを見抜く目を持とう。次が揃っていれば、IAがきちんと効いている。

• どのページにいても、**今どこにいるか（現在地）**がひと目で分かる
• **行ける先（ナビ）**が、いつも同じ場所に見えている
• **入口へ戻る道（パンくずやロゴ）**が、必ず用意されている
• カテゴリの名前が、利用者の言葉で書かれている（社内用語・専門用語でない）
• 並べ方の軸（LATCHのどれか）が一貫していて、途中でブレない

逆に「ページは多いのに、なぜか欲しいものに辿りつけない」サイトは、たいてい分類が作り手目線か、現在地が見えないかのどちらかだ。飾りを足す前に、まずこの土台を直す。それがIAの仕事だ。

これらは別々のルールではなく、すべて**「利用者を迷子にしない」という一つの目的**から出ている。掟を丸暗記するのではなく、この目的を覚えれば、掟は自然に思い出せる。

譜例

棚（design-gallery）で、ナビ・パンくず・カテゴリ分けの実例を見て、本文の特徴がどう現れているか確かめよう。

• 棚：ナビ・パンくず・分類の実例を見る

見るときは、図7の5つ（現在地・行ける先・戻る道・利用者の言葉・軸の一貫）がいくつ当てはまるかを数えてみるとよい。

練習・チェック

1. 身近なWebサイトを1つ選び、「見分け方」の5つのうち、いくつ当てはまるか数えてみよう。3つ以上なら、IAがよく効いている。
2. お気に入りのお店（飲食店でも本屋でも）のメニューや棚を、LATCHの5軸のうちどれで並んでいるか当ててみよう。別の軸に変えたら、もっと探しやすくなる場面はあるか？
3. 友達のサイトが「ページはあるのに辿りつけない」とき、原因を2つに絞ってみよう。——分類が作り手目線になっていないか？　現在地（パンくず・ナビ）が見えていないか？