今日の問い
サイトの構造を、そのままメニューにしていませんか。
30秒でつかむ
サイトマップは情報の関係を表す計画資料、ナビゲーションは利用者が実際に使う移動手段です。同じものではありません。
前回の分類をサイトマップに移し、ページの親子関係と役割を確認します。そのうえで、主要タスクに必要な入口だけをナビゲーションへ出します。
30秒図解 · LESSON 15
分岐図
構造と移動手段を分けて考える
サイトマップは関係、ナビゲーションは移動の表現です。
全体構造
- 主要カテゴリ
- 現在地
- 大域ナビ
- 文脈ナビ
CLUE · 見抜く手掛かり
どこにいて次へどう進むか分かるか
TRAP · ありがちな罠
メニュー項目を増やして解決する
原則
サイトマップには、ページやコンテンツをノードとして置きます。線は親子関係を表し、各ノードには前回決めた id を添えます。これで棚卸しとの対応が切れません。
ただし、箱と線を描いただけでは設計判断が読めません。各ノードにページの目的、主な利用者、主要タスクとの関係を一行で書きます。親ページが単なる入れ物なのか、それ自体に内容があるのかも区別します。
ナビゲーションへ出す項目は、サイトマップの上位階層すべてではありません。利用頻度、重要度、今いる場所から必要になる次の行動で選びます。低頻度の管理情報まで常に見せると、主要な入口が埋もれます。
構造は網羅し、ナビゲーションは選ぶ。この役割分担が大切です。主要ナビゲーション、ページ内リンク、検索、関連リンクは、同じ情報構造への異なる入口として設計します。
情報アーキテクチャとサイトマップを区別し、サイトマップを構造の可視化と計画に使う考え方を支える。
良い例と惜しい例
構造と移動手段
AIへの指示例
目的: 仮分類済みのコンテンツから、予約変更を迷わず始められるサイト構造を作る
制約: content-inventory.csvにないコンテンツを追加しない。最大階層は3。管理者向け項目は主要ナビゲーションへ出さない
参照: content-inventory.csvのid、label、parent_id、user_task、status
受入条件: sitemap.mdに全keepとupdate項目をid付きで配置し、各ノードの目的を一行で記す。主要ナビゲーション候補を別欄に示す
確認問題
セルフチェック
1. サイトマップの上位に『運営情報』がありますが、一般利用者の主要タスクには使いません。どう扱うのが適切ですか。
最終制作へ反映する
目的注釈付きサイトマップ
分類済みの一覧からサイトマップを作り、各ノードへid、目的、主要タスクとの関係を記す。主要ナビゲーション候補は別に列挙する。
Acceptance criteria
- content-inventory.csvのkeepとupdate項目が、同じidで一度以上参照されている
- サイト全体の構造と、利用者へ常時見せるナビゲーションが区別されている
今日のまとめ
- サイトマップは情報の関係を可視化する計画資料
- ナビゲーションは利用者に見せる入口を選ぶ設計
- 次は、サイトマップ上で主要タスクの一連の操作をつなぐ