画面遷移図とは？書き方の基本と手戻りを減らす使い方

画面遷移図とは

画面遷移図とは、システムやアプリに含まれる画面を箱で描き、どの操作でどの画面へ移るのかを矢印でつないだ図です。基本設計の資料の一つとして作られます。

平易に言えば、「アプリの中の地図」です。ログイン画面からトップへ、トップから一覧へ、一覧から詳細へ、といった移動の道筋を俯瞰できるため、画面の抜けや、行き止まりになっている画面を見つけやすくなります。

Webサイトでいうサイトマップに近いものですが、画面遷移図は「どのボタンを押したら」「どの条件のときに」移るのかという操作と条件まで書く点が異なります。英語ではScreen Transition DiagramやScreen Flowと呼ばれます。

画面遷移図に描く要素

画面遷移図は凡例を決めてから描くと、関係者の誰が見ても同じ読み方ができます。よく使われる要素は次のとおりです。

すべての遷移を1枚に詰め込むと読めなくなるため、規模が大きい場合は「会員向け」「管理者向け」のように利用者ごと、あるいは「注文」「アカウント設定」のように業務ごとに分けて描きます。

実務での使い方・具体例

ある整体院チェーンがWeb予約の仕組みを外注するとします。発注前に担当者が画面遷移図をラフに描いてみると、次のような論点が浮かび上がります。

1. 予約したい人は、まず店舗を選ぶのか、日時を選ぶのか、施術メニューを選ぶのか
2. 会員登録をしていない人は、予約の途中で登録させるのか、ゲストとして予約できるのか
3. 予約完了後に表示する画面と、送るメールはどれか
4. 予約の変更やキャンセルは、どの画面から行けるのか
5. 満席の枠を選んだ場合は、どの画面に戻すのか

こうした論点は、文章の要件一覧だけではなかなか気づけません。矢印を描こうとした瞬間に「この先がない」「戻る手段がない」と分かるのが画面遷移図の強みです。

描くツールは、紙とペン、ホワイトボード、プレゼンテーションソフト、作図ツールのどれでも構いません。発注前の段階では正確さよりも、主要な流れが描けていることが大切です。開発会社に見積もりを依頼する際にこの図を添えると、画面数と流れの複雑さが伝わり、各社の見積もりの前提がそろいやすくなります。

画面遷移図ができたら、次の観点でチェックすると抜けを減らせます。

• すべての画面に入り口と出口があるか
• エラーやキャンセルのときの戻り先が描かれているか
• ログイン切れなど、どの画面からでも起こる遷移の扱いを決めたか
• 権限によって表示されない画面が明記されているか
• 外部の決済画面やメールのリンクから戻ってくる場所が決まっているか

開発が始まってからも、画面遷移図はテストの計画に役立ちます。矢印1本1本を「通るべき道」と見なし、すべての矢印を一度は通るようにテストケースを作ると、確認漏れのない受入テストを組み立てられます。発注側が受入テストを準備する際の下敷きとしても使える資料です。

よくある誤解と注意点

正常系の流れだけを描いてしまう。 「予約できた」という一本道だけでは不十分です。入力ミス、決済失敗、満席、通信エラーといった異常系の遷移こそ、後から「どうするか決まっていない」と問題になりやすい部分です。

画面遷移図と画面設計書が別々に更新される。 画面IDを共通にし、画面を追加・削除したら両方を直す運用にしないと、どちらが正しいのか分からなくなります。

一度作れば終わりと考える。 実際に試作した画面を触ると、遷移を短くしたい箇所が見つかるものです。試作を見ながら図を更新し、最終的な形を合意するのが現実的な進め方です。

モーダルやタブを画面として数えない。 画面全体が切り替わらないポップアップやタブ切り替えも、利用者の操作としては別の場面です。省略すると見積もりや設計で漏れやすいため、扱いを決めて図に含めましょう。

関連用語

• 画面設計書：画面ごとの項目や動作を定義する、画面遷移図と対の資料
• 基本設計（外部設計）：画面遷移図を作成する設計工程
• SPA（シングルページアプリケーション）：画面の切り替え方に影響するWebアプリの構成
• 仕様書：設計内容をまとめた資料の総称

具体的な描き方は「画面遷移図の作り方」で詳しく解説しています。

Otsumuに相談できること

Otsumuでは、構想段階のラフな画面遷移図や手書きのメモからでも、目的に必要な画面と流れを整理し、開発の範囲を一緒に固めていきます。予約のように流れが重要なシステムは予約システム開発のページでも紹介しています。

「何画面くらいになるのか見当がつかない」という段階でも、30分の無料相談でご相談いただけます。

執筆：Otsumu株式会社 ／ 編集日 2026.10.01