サイトマップと構成

「メニューのページ、あと何枚あるんだっけ？」。ページの数があいまいなまま進めて、途中で見積もりが崩れた。そんな失敗は、サイトマップで防げます。

サイトマップは、ページの家系図

サイトマップは、サイトにあるページを、親子関係で並べた図です。木の枝のように、トップページから下へ広がります。

• トップ
  • メニュー
    • 食パン
    • 菓子パン
  • お店の紹介
    • アクセス
  • お知らせ
  • お問い合わせ

この図があれば、ページ数が数えられます。ページ数がわかれば、デザインとコーディングの量が見積もれます。

作るときの 4 つのコツ

1. お客さんの目的から逆算する。 「予約を増やす」なら、どのページからでも予約へ行ける形にする。
2. 階層は 3 つまで。 深すぎると、訪れた人が迷います。
3. 名前は、訪れた人の言葉で。 「事業内容」より「パンの紹介」。
4. 同じ形のページは、型にまとめる。 パンの詳細ページ 30 枚は、デザイン 1 種類＋データ 30 件と数える。

この図は、パンの詳細ページ 30 枚を、どう数えるかを比べたものです。

1 ページずつ数える

型で数える

デザイン 30 枚分

デザイン 1 種類

作業が 30 倍に見える

入力するデータ 30 件を足す

ワイヤーフレームで骨組みを見せる

ワイヤーフレームは、色や写真を抜いた、ページの骨組み図です。「ここに見出し、ここに写真、ここにボタン」と配置だけを決めます。

最初に骨組みで合意しておくと、デザインができたあとの「やっぱり配置を変えて」を減らせます。

この図は、ページの一覧から、見た目と作りへ進む順番を表します。強調した「ワイヤーフレーム」で、色の前に配置を合意します。

サイトマップページの一覧→ワイヤーフレーム配置の合意→デザイン色と写真→コーディング

ページの数は見積もりに直結する

ページの種類	数え方
トップ	1 つずつ個別に
下層ページ（型が同じ）	型の数 + 中身の入力量
更新が必要なページ	CMS（更新の仕組み）の要否を検討

たとえば、こんな画面です。ページの作業を、親と子に分けて並べられます。

• 「トップページ改修」の下に、「ヒーロー画像の差し替え」「お知らせ欄のレイアウト」が子として並んでいます。
• 親の件名の横に、子の完了数（0/2）が出ています。

「あとでページを足してほしい」は、見積もりが変わる合図です。サイトマップを合意の資料にしておくと、増えた分を説明できます。

サイトマップで、お客さんとの会話が変わる

文章だけの要件だと、お客さんは完成形を思い描きにくいものです。サイトマップを見せると、「ここに、お客様の声のページもほしい」といった意見が、制作に入る前に出てきます。早く出た意見は、安く反映できるので、見せるのは早いほどよいのです。

まとめ

• サイトマップは、ページの親子関係を木で表した図。
• 目的から逆算し、階層は浅く、名前は訪れた人の言葉で。
• ワイヤーフレームで、色の前に配置を合意する。
• ページ数は、デザインと見積もりの基準になる。

akamine でやるなら

サイトマップのページごとに親課題と子課題をつくると、作成状況をページ単位で追えます。親課題には、子課題の完了数と進捗が出ます。子課題 の記事で操作を説明しています。

関連する記事

• 要件定義と合意
• デザインの確認とお願いごと
• Web制作のプロジェクトひな型