はじめに
本資料は、Web制作における「サイトマップ」と「ワイヤーフレーム」という二つの設計ツールについて、役割・違い・作り方・実務での活用方法をわかりやすく整理したものです。
■ 本資料の目的
– 制作チームや発注側が共通理解を持ち、効率よく進められるようにすることです。サイト全体の構造（サイトマップ）と各ページの見た目や機能配置（ワイヤーフレーム）を分かりやすく説明します。
■ 読者対象
– Web制作の初学者、ディレクター、デザイナー、発注担当者など、設計段階で関わる方を想定しています。
■ 本資料の使い方
– 各章で概念→具体例→実務フローの順に解説します。実際の制作で使えるテンプレートやチェックポイントも掲載します。たとえば飲食店サイトの例で、ページ構成と個別ページのレイアウトを比較しながら理解できます。
この章では全体像を示しました。次章から具体的に「サイトマップとは何か」を解説していきます。
サイトマップとは
概要
サイトマップは、ホームページ全体の設計図のようなものです。Webサイトの各ページやコンテンツを一覧化し、どのページがどこにあるかを図や表で示します。チームやクライアントと共通理解を作るために使います。
主な役割
- 必要なページの洗い出し：どの情報が必要かを明確にします。
- 階層関係の整理：トップページから下層ページまでの構造を示します。
- ユーザー導線の検討：利用者がどの順でページを移動するかを考えます。
- URL設計の基礎：分かりやすいURL構造作りに役立ちます。
- ナビゲーション設計の資料：メニュー配置やリンク構造の検討材料になります。
形式の例
- 図（ツリー状の図）で可視化する方法
- 表や一覧でページ情報を並べる方法
- XMLで検索エンジン向けに出力する方法（技術的な連携時に使用）
作成の流れ（簡単な手順）
- 目的と対象ユーザーを明確にする
- 必要なコンテンツを洗い出す
- ページを階層化して配置する
- URLやナビゲーション案を決める
作成時のポイント
- 過不足なくシンプルにまとめること
- 用語やページ名は一貫性を持たせること
- 利用者の動きを意識して配置すること
関係者
企画担当、デザイナー、開発者、クライアントが関わります。早い段階で共有すると後の手戻りを減らせます。
サイトマップの種類
概要
サイトマップは目的や対象によって形式が変わります。代表的なのは「ビジュアル型」と「テキスト型」、さらに「XMLサイトマップ」と「HTMLサイトマップ」の4つです。用途に合わせて使い分けると設計や運用がスムーズになります。
ビジュアル型（図や線で表す）
図でページの階層や関係を視覚化します。初期の全体設計やチームでの共有に向きます。例：トップ→カテゴリ→記事と線でつなぎ、抜けや重複を見つけやすくします。手書きのホワイトボードや図作成ツールで作れます。
テキスト型（箇条書き）
箇条書きで階層を表現するシンプルな形式です。編集や確認が早く、クライアント確認用にも使いやすいです。例えば「・トップ
・会社概要
・代表挨拶」といった形で階層を示します。
XMLサイトマップ（検索エンジン向け）
検索エンジンにページ情報を伝えるための機械向けファイルです。各URLの更新日や優先度を記述できます。公開後のクロール促進やインデックス管理に役立ちます。
HTMLサイトマップ（利用者向け）
サイト内の目次としてユーザーに見せるページです。訪問者が目的のページを見つけやすくなり、アクセシビリティ向上にもつながります。
使い分けのポイント
設計段階はビジュアル型、簡易確認はテキスト型、公開後はXMLで検索エンジンに伝え、HTMLでユーザー向けに案内する、という流れが一般的です。
サイトマップの使用時期
概要
サイトマップはサイト全体の構造を可視化する図です。いつ使うかを知ると、制作や運用の効率が上がります。ここでは段階ごとに具体的に説明します。
制作前（構想段階）
最初のアイデア出しや要件整理のときに使います。主要なページや導線を洗い出し、抜けや重複を防げます。例えば、会社サイトなら「会社情報」「サービス」「採用」「お問い合わせ」などを並べ、階層や優先度を決めます。
制作中（設計・開発）
ワイヤーフレームやデザイン制作の前に確定したサイトマップを共有します。開発チームはページ構成に沿って実装を進めやすくなり、作業の割り振りや進捗管理が楽になります。
テスト・公開前
リンク切れや遷移の確認に役立ちます。サイトマップをもとにテストケースを作ると、ユーザーが迷う箇所や導線の不備を早く見つけられます。
運用・更新時
新しいコンテンツ追加やページ削除、構成変更の際に用います。XMLサイトマップを検索エンジンに送信すれば、更新を速く反映できます。定期的に見直すことでナビゲーションの整理にもつながります。
使い分けのポイント
視覚的なサイトマップは企画や社内共有に向きます。一方でXMLサイトマップは検索エンジン向けです。目的に合わせて両方を使い分けると効果的です。
ワイヤーフレームとは
定義
ワイヤーフレームは、Webページやアプリ画面の「設計図」です。1ページにどの要素（見出し・本文・画像・ボタンなど）を置くか、位置や優先度を図式化します。デザイン前の段階で使います。
何を表すか
- ページの構造（ヘッダー、メイン、サイド、フッターなど）
- 各要素の順序やサイズ感
- ユーザーの行動の流れ（クリックやスクロールの想定）
なぜ作るか
ワイヤーフレームを作ると、関係者間で認識を合わせやすくなります。画面の目的や情報の優先順位が明確になり、無駄な修正を減らせます。開発やデザインの進行をスムーズにします。
作り方の基本
- 目的を決める（何を達成したいか）
- 必要な要素を書き出す（見出し、導線、CTAなど）
- 簡単な枠組みで配置する（線や四角で十分です）
- フィードバックを得て修正する
注意点
ワイヤーフレームは見た目重視ではありません。色や装飾にこだわりすぎると本来の目的がぼやけます。ユーザーの行動を意識して、要素の優先度を明確にしてください。
簡単な例
トップページのワイヤーフレームなら、ロゴ・ナビ・ヒーローイメージ・訴求文・機能紹介・問い合わせボタンの順で配置するなど、目的に合わせてレイアウトを決めます。
ワイヤーフレームの主要な役割
1. 情報の優先順位を決める
ワイヤーフレームはページ内の情報に優先順位を付けます。例えば、ECサイトなら「商品写真→価格→購入ボタン」を目立たせるといった具合です。ユーザーが何を先に見るべきか明確になります。
2. コンテンツの配置と構成を決定する
テキスト、画像、ボタンの配置を紙や簡単な図で決めます。これにより、ページの流れや導線が整理され、後のデザイン作業がスムーズになります。
3. UI/UX設計を可視化する
ワイヤーフレームは操作の流れやインタラクションの位置を示します。例えば、フォームの入力順やナビゲーションの並びを視覚化し、使いやすさを検討できます。
4. デザイン前工程としての役割
色や装飾を決める前に骨組みを作ることで、手戻りを減らします。早い段階で問題点を発見でき、工数を抑える効果があります。
5. クライアントやチームとの共有資料
ワイヤーフレームは意図を伝える共通言語になります。レビューやフィードバックが集まりやすく、合意形成が早まります。
ワイヤーフレームの使用時期
概要
ワイヤーフレームは制作作業中に使う設計図です。サイトマップで構造を固めた後、ページごとの要素配置や動き、優先順位を決める段階で作成します。視覚デザインよりも実装に近いレベルの設計ツールです。
いつ作るか
- 要件定義とサイトマップがまとまった後に作ります。ページ構成が大きく変わる前にワイヤーを作成すると効率的です。
目的
- 各ページのレイアウトを決め、情報の優先順位を明確にします。
- ユーザーの導線や操作フローを具体化します。
- デザイナーや開発者と実装上の齟齬を減らします。
作業の流れ（実務上の例）
- ページごとの要件を整理してワイヤーフレームを作成します。
- チームでレビューして使い勝手や実装の可否を確認します。
- 必要な修正を反映して承認を得ます。
- ビジュアルデザインやコーディングへ引き継ぎます。
関わるメンバー
- UX担当、情報設計者
- デザイナー、フロントエンド開発者
- クライアントやプロジェクトマネージャー
注意点
- デザイン要素を入れすぎず、機能と配置に集中してください。
- レスポンシブ対応は早めに考慮してください。
- 実装制約（技術や運用）を前提に作ると後工程がスムーズになります。
ワイヤーフレームの具体例
ヘッダー
- ロゴ: 左上に配置し視認性を高めます。クリックでトップへ戻れるようにします。
- グローバルメニュー: 右上に水平配置。主要ページ（サービス、料金、会社情報、お問い合わせ）を並べます。モバイルではハンバーガーメニューに切替えます。
メイン画像
- キャッチコピー: サービスの魅力を短く、大きめのフォントで中央に配置します。
- 写真: キャッチの横か背景に配置し、視覚的な印象を強めます。ファーストビューで伝えたい1点に絞ります。
特徴一覧
- アイコン＋説明文: 3〜4項目を並列に配置し、アイコンで視覚的に分かりやすくします。短い説明文を添えます。
- ユーザーの声: 引用形式で1〜2件を目立つように配置し信頼感を出します。
- CTA（お問い合わせボタン）: 各セクションの末尾とファーストビューにも置き、色で強調します。スクロールでも常に見えるように固定ボタンを検討します。
フッター
- 会社情報: 住所・連絡先・営業時間を記載します。
- SNSリンク: アイコンで並べ、外部リンクの新規タブ指定を明記します。
- コピーライト表記: 最下部に控えめに配置します。
実装のポイント
- レイアウトはグリッドで揃え、余白を十分に取ります。
- モバイル時の要素の優先順位を明確にし、CTAを上部に持ってくることを検討します。
- ワイヤーフレームには簡単な注釈を付けて、デザイナーや開発者の認識齟齬を防ぎます。
サイトマップとワイヤーフレームの比較
ここでは、サイトマップとワイヤーフレームの違いを主要ポイントごとにわかりやすくまとめます。
目的の違い
- サイトマップ：サイト全体の情報設計とページの洗い出しが目的です。例）ホーム／会社情報／製品一覧／お問い合わせなどを整理します。
- ワイヤーフレーム：各ページ内の情報配置とUI設計が目的です。例）トップページのヘッダー、導線、CTAの位置を決めます。
対象範囲
- サイトマップは“サイト全体”を俯瞰します。ページ間の関係や階層を示します。
- ワイヤーフレームは“各ページ”を詳細に設計します。レイアウトや要素の優先度を示します。
情報の粒度とアウトプット
- サイトマップ：ツリー図や一覧表で表現します。抽象度が高めで、変更は比較的少ないです。
- ワイヤーフレーム：スケッチやモックで表現します。具体的な配置や文言案も含み、頻繁に調整します。
使用時期と実務での使い分け
- 多くの制作現場では、まずサイトマップでページ構成を決め、その後ワイヤーフレームで各ページの設計に進みます。したがって順序がある流れになります。しかし両者は並行して検討することも可能です。
具体例での違い
- サイトマップ：『製品一覧』が必要、カテゴリはA・B・Cと決定。
- ワイヤーフレーム：『製品一覧』でフィルターを上部に置き、カード表示で並べ、詳細ボタンを右下に配置。
用途を明確にして使い分けると、制作がスムーズになります。
サイトマップとワイヤーフレームの概念的な違い
概念の要点
サイトマップは「ページ同士のつながり」を整理します。サイト全体の構造図で、どのページがどこに属し、どの経路で移動できるかを示します。ワイヤーフレームは「画面ごとの設計図」です。各ページで何を置くか、どの順で並べるか、優先度や導線を決めます。
範囲と詳細度の違い
サイトマップは広い視点で構成を把握します。ページ名と階層、リンク関係が中心です。一方ワイヤーフレームは細部に踏み込み、ボタンの位置や見出しの流れ、コンテンツ量の目安まで決めます。
使用タイミングの違い
企画初期でまずサイトマップを作り、全体像に合意を取ります。したがって、ワイヤーフレームはその後で各ページの具体設計に進むために作ります。どちらも可視化の手段ですが、目的と粒度が異なります。
実務での感覚的な使い分け
例として、コーポレートサイトではまず情報の分類（サイトマップ）、次にトップや採用ページのレイアウト（ワイヤー）を決めます。チーム間のすり合わせには両方を使い分けると効率的です。
Web制作における実務的な活用フロー
概要
一般的な流れは、サイト全体の構造をサイトマップで決め、各ページの詳細はワイヤーフレームで設計することです。ここでは実務で使いやすいステップに分けて説明します。
ステップ1: 要件整理（キックオフ）
目的、対象ユーザー、主要コンテンツを関係者で確認します。成果物は要件定義書やコンテンツ一覧です。プロジェクトマネージャーが主導します。
ステップ2: サイトマップ作成
ページ構成とナビゲーションを決めます。トップページ〜下層ページの関係を図にして共有します。情報の抜けや重複に気をつけます。
ステップ3: コンテンツ棚卸し
既存コンテンツを分類し、不要なものは削除、追加が必要なものを洗い出します。CMSの担当者も参加します。
ステップ4: ワイヤーフレーム作成
主要ページから順にワイヤーフレームを作ります。見出しや導線、優先度を明示します。デザイナーと開発者で実現性を確認します。
ステップ5: レビューと合意
利害関係者とレビューを行い、修正点を反映します。ここで合意が取れればデザイン・開発へ進めます。
ステップ6: プロトタイプ／実装準備
ワイヤーを元にビジュアルデザインやプロトタイプを作成し、コーディング用の仕様をまとめます。アセットや文言を整理します。
ステップ7: テストと改善
ユーザビリティテストや動作確認を行い、必要に応じてサイトマップやワイヤーを修正します。公開後も分析を続け改善します。
実際の活用事例
以下に、実務でよく使われる2つの事例をわかりやすく解説します。
事例①：コーポレートサイト・事業用ホームページ
- サイトマップで部署ごとに必要ページを洗い出します（会社情報、事業紹介、採用、IRなど）。
- 優先順位と担当者を決めて、ページごとに目的を明確にします。
- 各ページのワイヤーフレームを作成し、見出しや導線、CTA（問い合わせ・資料請求ボタン）を配置します。
- ワイヤーフレームをもとにデザイン発注を行い、素材や文言のすり合わせをします。
- 公開後は更新フローや編集権限を整備し、定期的に内容を見直します。
例：採用情報を強化したい場合、採用ページを独立させ、応募動線を短くするワイヤーで改善します。
事例②：ECサイト
- サイトマップで商品カテゴリと階層を可視化し、検索・フィルタ設計も盛り込みます。
- 購入導線を意識したワイヤーフレームを作り、商品一覧→商品詳細→カート→決済の流れを最短化します。
- モバイル表示を重視し、ワンクリック購入や目立つ購入ボタンを配置します。
- ワイヤー段階でプロモーションやレコメンド枠を決め、デザイン発注後にABテストで改善します。
例：カテゴリ構成を整理して導線を改善した結果、購入率が上がったケースが多くあります。
第13章: まとめと重要なポイント
要点の整理
サイトマップはサイト全体の設計図で、ページの位置関係や導線を示します。ワイヤーフレームは各ページの設計図で、情報の配置や優先度、操作の流れを定めます。両者は目的が異なりますが、連携することで使いやすく運用しやすいサイトを作れます。
実務で押さえるべきポイント
- まずサイトマップで構造を固め、ページの役割を明確にします。例：トップ→サービス→料金→問い合わせ
- 次にワイヤーフレームで各ページの情報設計を行います。例：料金ページは比較表を上部に置く
- 関係者（企画、デザイナー、開発、クライアント）と早めに共有して調整します
- ユーザビリティを意識して、簡潔なラベルと最短の導線を優先します
- 実装後も更新を続け、アクセス状況や運用課題に合わせて改良します
最後に
サイトマップとワイヤーフレームは完成物ではなく、より良いサイトを作るための道具です。両方を丁寧に作り、関係者と共有する習慣を持てば、ユーザーにも運営側にも価値あるサイトになります。
