通し実例：小さなサロンの情報設計

10ページのサイト1件を、ページの洗い出しから木が決まるまで通しで見せます。

架空の案件です。常盤野市の整体サロン、担当ひとりの完全予約制で、ページは10枚しかありません。それでも順番を守らないと、決めたはずの構造が公開直前に崩れます。考え方は情報設計にあり、このページはそこにある記入シートを1件ぶん埋めきった記録です。同じ欄を自分の案件で埋めるなら、親ページの道具を使ってください。

1. ページを全部書き出す#

シートの1です。分類はまだ考えず、思いつく順に並べます。

ここで分類を始めると、思いついたページが分類の枠に引きずられて減ります。書き出しきってから束ねる順にする理由はそれだけです。

2. 利用者の目的で束ねる#

シートの2です。店主が最初に出した案は3つでした。

自分の仕事の区分で束ねてあります。困るのは、初めての人が来る前に確かめたいこと（流れ・料金・不安への答え）が3つの箱に散らばる点です。目的で束ね直します。

4つ目の束が要ります。全ページをナビに載せる必要はなく、載せない判断もここで一緒に済ませます。

3. ナビに載せる項目を決める#

シートの3です。束の名前がそのままナビになるとは限りません。「来る前に確かめたい」は説明であって、ナビの語ではないからです。

• 施術の流れ
• 料金
• はじめての方へ
• サロン紹介
• アクセス
• ご予約

6項目。5±2の範囲に収まっています。「よくある質問」は「はじめての方へ」という箱に入れ、「担当の紹介」と「部屋と設備の写真」は「サロン紹介」にまとめました。ここで束が2つ減り、ナビが6項目で済んでいます。

4. 深さを決める#

シートの4です。上の6項目をトップの直下に置き、まとめた2枚だけがその下に入ります。

図を大きく見る

図の中身を文字で読む

• 決まった木。ナビは6項目、深さは2まで
• 6項目は5±2の範囲。7を超えたら束ねるか、ナビから外す。
• トップ
• 施術の流れ　料金　はじめての方へ　サロン紹介　アクセス　ご予約
• 担当の紹介　この2枚だけが深さ2。
• 部屋と設備の写真　残りは全部トップの直下。
• ナビに載せない2ページ　お知らせ → トップの新着として出す　プライバシーポリシー → フッター
• 1ページの置き場所は1つ。同じページを2か所に置くと、パンくずが決まらない。

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

深さは2まで。10枚のサイトで3階層を作ると、1ページあたりの中身が薄くなります。迷ったら深くせず、1枚にまとめられないかを先に考えます。

5. 名付けを点検する#

シートの5です。ここが最後で、いちばん効きます。

「アクセス」はそのまま残しました。日常で使う語で、ほかの言い方（行き方・地図・所在地）より探す人が多いからです。言い換えること自体が目的ではありません。

6. 作った木を試す#

構造と名前が妥当かは、見た目を作る前に試せます。ツリーテストでは、文字だけの木を見せて課題を1つずつ渡します。

2つ目で票が割れました。2つの箱の境界が利用者から見えていません。木は変えず、持ち物の記載を「はじめての方へ」に集め、「施術の流れ」の本文からそこへ1本リンクを張りました。名前を変えるより、中身の置き場所を1つに寄せるほうが早く済む場面です。

7. 決めたことを画面へ渡す#

木が決まったら、画面に出る3か所を同じ木から作ります。ヘッダーのナビ、パンくず、公開のサイトマップです。どれか1つを手で書き足すと、そこから食い違いが始まります。

• 固定ヘッダーナビ6項目をそのまま置く器
• パンくず深さ2のページで現在位置を示す

関連#

• 情報設計考え方と記入シート
• ナビゲーション木を画面の部品にする
• UXライティング名付けと同じ判断で文言を書く
• 検証ツリーテストと課題テストの計画