情報設計

分類が正しくても、名前が伝わらなければ探せません。いちばん見落とされるのは名付けです。

図を大きく見る

図の中身を文字で読む

• 階層型　1つの項目は1箇所にある　ファセット　複数の軸で同時に絞る
• ホーム　種別　賃貸　売買
• 間取り　1K　1LDK　2DK
• 賃貸　売買　相談
• 駅徒歩　10分以内　15分以内
• 探す道筋が一意に決まる。項目数が中程度で、分類が安定しているとき。　条件に合う物件: 210件
• 項目数が多く、探し方が人によって違うとき。各選択肢に件数を出す。
• 作る前と作った後で、検証の手法が違う
• カードソーティング（作る前）　ツリーテスト（作った後）　初回クリックテスト（画面あり）
• 利用者に分類してもらう。どういう軸で分けるか　見た目なしで、構造だけで到達できるか　最初にどこを押すか。誤った選択の分布に原因が出る

ひと目で#

情報設計

情報をどう分け、どう名付け、どう関係づけるか

階層型

1つの項目は1か所にある。探す道筋が1本に決まる

ファセット

複数の軸で同時に絞る。項目の数が多いとき

カードソーティング

分類を作る前に、利用者に分けてもらう

ツリーテスト

作った構造に、見た目なしでたどり着けるか試す

初回クリックテスト

画面の上で、最初にどこを押すかを記録する

名付けがもっとも見落とされます。 分類が正しくても、名前が伝わらなければ探せません。

使い分け#

間違えやすいところ#

• ✕組織図をそのまま構造にする利用者は組織の区分を知らない
• ✕社内用語で名付ける探せない
• ✕階層を深くしすぎる3階層を超えると到達率が下がる
• ✕1つの項目を複数の分類に重ねて置く階層型では道筋が1本でなくなる
• ✕タグを際限なく増やす表記のゆれで、絞り込みが効かなくなる
• ✕検証しない作り手の分類が利用者と一致する保証はない
• ✕課題文にラベルの語をそのまま使う探す語が答えになってしまう
• ✕検索があるから構造は適当でよい全員が検索を使うわけではない

図を大きく見る

図の中身を文字で読む

• 探している人の頭の中「いくらかかるのか知りたい」
• 左右で分類も並び順も同じ。変えたのは名前だけ。
• ✕ 社内の呼び名のまま　○ 利用者の言葉に直す
• メニュー　施術？ 品書き？　料金　探している語と一致
• Q&A　何のQ&Aか読めない　はじめての方へ　初回の不安に答える箱
• セラピスト紹介　耳慣れない職名　担当の紹介　誰が担当するか伝わる
• インフォメーション　何でも入る箱　お知らせ　更新の置き場所と読める
• カードソーティングは分け方を試す手法で、名前を試すのはツリーテスト。名付けの検証を飛ばすと、この差は公開後まで見えない。

3つのサイトマップを区別する#

図を大きく見る

図の中身を文字で読む

• 同じ1本の木を、三方に見せ分ける
• 構造は1つ。出す形と、見せる相手が違う。
• 構造図　制作者と依頼主　公開ページ　利用者　XML　検索エンジン
• トップ　施術の流れ　<url>
• 料金　<loc>/fee/</loc>
• <lastmod>2026-08-24</lastmod>
• サロン紹介　</url>
• 合意のための下書き。　アクセス
• 公開はしない。　全体の一覧。見られる頻度は高くない。　クロールの補助。人は読まない。
• 3つが食い違ったときに直すのは、出力の側ではなく元の木。ナビとパンくずも同じ木から出す。

3つが食い違ったときに直すのは、出力の側ではなく元の木です。ナビもパンくずも、同じ1本から出します。

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

例として、整体サロンの案件で、下の記入シートを店主と一緒に埋めました。ページの洗い出しは10分で済みます。つまずいたのは2のグループ分けで、店主の案は「メニュー／お店について／ブログ」でした。自分の仕事の区分で束ねてあり、初めての客が来る前に確かめたいこと（施術の流れ・料金・不安への答え）が3つの箱に散らばっていました。利用者の目的で束ね直し、名付けの点検で「Q&A」を「はじめての方へ」に改めたところまでが、この日の成果です。決めた木の全体と各欄の書き方は通し実例：小さなサロンの情報設計へ。

確認する#

• ナビの名前が利用者の探す言葉になっていて、社内の呼び名が残っていない
• 深さ2までに収まり、1ページの置き場所は1つに決まっている
• ナビとパンくずとサイトマップが、同じ木を指している

使えるパターン#

• パンくず
• 固定ヘッダー

このページで扱う語#

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品はフォームを作る、迷わせないにまとめてある。逆引きには全188件。

サイトマップを書く#

本文の考え方を、そのまま書き込める形にしました。順番が肝心です。ページを全部書き出してから束ね、名前を付け、最後に階層へ落とします。

# サイトマップ記入シート（常盤野市の整体サロンのサイト制作）

## 1. ページの洗い出し
トップ
施術の流れ（受付から会計まで）
料金
よくある質問
担当の紹介
部屋と設備の写真
アクセス（道順・駐車場）
ご予約の方法
お知らせ
プライバシーポリシー

## 2. グループ分け
来る前に確かめたい: 施術の流れ／料金／よくある質問
人と場所を知りたい: 担当の紹介／部屋と設備の写真
行き方と申し込み: アクセス／ご予約の方法
ナビに載せない: お知らせ（トップに新着で出す）／プライバシーポリシー（フッター）

## 3. ナビに載せる項目
施術の流れ／料金／はじめての方へ／サロン紹介／アクセス／ご予約

## 4. 階層
トップ
├ 施術の流れ
├ 料金
├ はじめての方へ（よくある質問）
├ サロン紹介
│ ├ 担当の紹介
│ └ 部屋と設備の写真
├ アクセス
└ ご予約

## 5. 名付けの点検
「メニュー」→「料金」。金額を探す人の言葉に合わせた
「Q&A」→「はじめての方へ」。初回の不安に答える箱だと分かる名前に
「セラピスト紹介」→「担当の紹介」。かたかなの職名より、誰が担当するかが伝わる

切り替えとコピーは JavaScript で動きます。無効の場合も、見本入りの記入欄と下の Markdown はそのまま読めます。

出典#

• Nielsen Norman Group「Card Sorting: Uncover Users' Mental Models」
• Louis Rosenfeld ほか『Information Architecture』

関連#

• 通し実例：小さなサロンの情報設計10ページのサイト1件を、洗い出しから木が決まるまで通しで見る
• ナビゲーション構造を画面に出す
• 検証ツリーテストと初回クリックテスト
• UXライティング名付けの言葉
• 構造で伝える見出しとランドマーク