はじめに
本書の目的
この文書は、Webサイト制作でよく出てくる「サイトマップ」と「画面遷移図」の違いをわかりやすく整理するために作成しました。役割や定義、作り方、現場での使い分けまで体系的に解説します。設計や制作の判断に迷ったときの指針になります。
誰に向けた内容か
・サイト設計や制作に関わるディレクター、デザイナー、エンジニア
・初めてサイト設計を行う担当者や学習中の方
専門用語はできるだけ抑え、図や具体例で補足しますので、初心者の方でも理解しやすい構成にしています。
本書の流れと読み方
全5章で構成します。第2章で両者の一番大きな違いを提示し、第3章と第4章でそれぞれを詳しく解説します。第5章で比較して使い分けの実務的な指針を示します。まずは全体像をつかんでから、必要な章を重点的に読むと効率的です。
なぜ違いを知るべきか
同じように見える資料でも、目的が違えば伝わり方や作業効率が変わります。例えば、ページ構成を把握したいときはサイトマップが有効で、ユーザー操作の流れを確認したいときは画面遷移図が役立ちます。適切な図を選べば、チームの共有と意思決定が速くなります。
サイトマップと画面遷移図の「一番大きな違い」
概要
サイトマップはWebサイト全体の「構造図」です。ページの一覧と階層を静的に示し、どのページが存在するか、どこに配置されるかを俯瞰できます。一方、画面遷移図は画面同士の「動き」を示す図で、ユーザーがどのように画面間を行き来するかを表現します。
サイトマップ（静的な地図）
サイトマップはページの名前と親子関係を中心に書きます。例えば「トップ > サービス > 料金」などの階層が分かります。コンテンツ設計やSEO、情報の抜け・重複チェックに役立ちます。
画面遷移図（動的なフロー）
画面遷移図は「ログイン後にダッシュボードへ移動」「商品詳細からカートへ」「カートから決済へ」などの動きを矢印で示します。ユーザーの操作や条件分岐（例：ログイン済みかどうか）を明確にできます。
違いが分かる具体例
企業サイトならサイトマップでページ構成を決め、問い合わせや採用などの場所を整理します。ECサイトなら画面遷移図で購入までの動線やエラー時の戻り方を詳細に描きます。
実務での使い分け
大局を伝えたいときはサイトマップを、ユーザーの操作やフローを詰めたいときは画面遷移図を使います。両方を使うと設計が早く正確になります。
サイトマップとは何か
定義
サイトマップは、Webサイト全体のページ構成を階層で一覧にした図です。トップページを根にして、カテゴリや下層ページをツリー状に並べます。設計段階で使うものと、ユーザー向けに公開するHTML版の二種類があります。
主な分類
- 設計用サイトマップ（運用者・制作チーム向け）: ページの抜けや重複を整理し、情報設計の基礎を作ります。例: ECサイトの「トップ→カテゴリ→商品詳細」。
- HTMLサイトマップ（ユーザー向け）: 利用者が目的のページを見つけやすくする一覧ページです。検索エンジン向けに用意することもあります。
作成の目的
- サイト全体の構成を見える化する
- ページの漏れや重複を防ぐ
- 情報設計やナビゲーション方針の基礎をつくる
- クライアントやチームとの認識合わせ
主な要素と表現の範囲
- ページ名（わかりやすく短く）
- ページ階層（レベル）
- 親子関係（どのページの下にあるか）
サイトマップでは通常、リンクの向きやユーザー操作の流れは表現しません。これらは画面遷移図で扱います。
簡単な作り方（手順）
- 既存ページや必要ページを洗い出す
- 関連ごとにグループ化して階層化する
- 重複や抜けをチェックする
- クライアントやチームとすり合わせる
注意点
- 階層が深すぎると使いにくくなるため、必要最低限に留めます。
- ページ名はユーザー目線で決め、内部用語を避けます。
画面遷移図とは何か
定義
画面遷移図は、Webサイトやアプリの「各画面」と「そこへ遷移するきっかけ」を線や矢印で示した図です。例えば「ログイン画面」から「ダッシュボード」へ、ログインボタンをクリックすると移動する、という流れを視覚化します。サイトマップがページの構成を示すのに対し、画面遷移図はユーザーの動き（導線）を表します。
作成するメリット
- 画面の抜けや重複を見つけやすくなります。例えば、到達できない画面があれば矢印がないことで気づけます。
- ユーザーが実際にたどる動線を検討でき、ユーザー体験（UX）を改善できます。
- 開発やテストで必要な画面や遷移条件を明確にでき、要件定義書として使えます。
図のパターン（代表例）
- 画面名だけのシンプル図：全体像を素早く把握できます。
- 画面名＋主要機能：どの画面で何ができるかが分かります。
- デザインを埋め込んだ詳細図：ボタンやフォーム位置まで示し、UI設計と結びつけられます。
作り方（簡単な手順）
- 主要なユーザーストーリーを洗い出す（例：会員登録→メール認証→プロフィール設定）。
- 画面を並べ、遷移の矢印を引く。条件（ボタン名や成功／失敗）を添えると親切です。
- 分岐や戻り、エラー時の遷移も忘れずに追加します。
実務での使い方
設計会議で共有して認識を合わせたり、開発者やQAに渡して実装・検証の指針にします。画面遷移図はチーム内の共通言語になり、作業効率を高めます。
サイトマップと画面遷移図の違いを比較
要点の再確認
サイトマップはサイト全体のページ構成を整理します。画面遷移図はユーザーが実際に行う操作の流れや画面間のつながりを示します。目的と視点が最も大きな違いです。
目的の違い（具体例つき）
- サイトマップ：ページの「何があるか」を一覧化します。例）トップ、会社概要、サービス一覧、問い合わせ。
- 画面遷移図：ユーザーが「どう進むか」を可視化します。例）サービス一覧→プラン選択→カート→決済。ログインやエラーパスも示します。
視点と詳細度の違い
サイトマップは上から下への俯瞰図で、構造や階層を重視します。一方で画面遷移図は各画面の状態や条件分岐、モーダル表示など細かな動きを描きます。
使うタイミングと担当者
- サイトマップ：企画初期や情報設計の段階で作ります。プロダクトオーナーや情報設計担当が中心です。
- 画面遷移図：UI設計やプロトタイピング、開発直前に詳しく作ります。UXデザイナーやエンジニアが主に使います。
実務での使い分け例
- 小規模なコーポレートサイト：サイトマップ中心で十分な場合が多いです。
- ECサイトやWebアプリ：両方を用意します。サイトマップで構成を決め、画面遷移図で購入やログインなど複雑な流れを詰めます。
注意点
両方を別々に更新すると齟齬が生まれます。同じプロジェクトでは同期して管理しましょう。ユーザーテストで実際の操作を確認し、画面遷移図を優先して修正することをおすすめします。
