画面遷移図のサンプルと書き方 記載する要素・作成手順とツールの選び方を解説

開発が進んでから「この画面から戻ったときはどこへ行くのか」「エラーのときはどう表示するのか」といった確認が続き、そのたびに手が止まる。画面遷移図が整理されていないプロジェクトでは、こうしたやり取りが最後まで繰り返されます。

画面遷移図は、どの画面からどの操作でどこへ進むのかを1枚で見渡せるようにした図です。作るのに特別な知識は要りませんが、載せる要素と粒度のそろえ方を知らないまま描くと、作った本人以外には読めない図ができあがります。

本記事では、画面遷移図の役割と似た成果物との違いから、載せるべき要素、具体的なサンプルの構成、作成手順、わかりやすくするコツ、ツールの選び方までを順番に整理します。

確認したいポイント	結論	詳細
画面遷移図とは何ですか？	画面と移り変わりを可視化した図	どの画面からどの操作でどこへ進むかを、四角と矢印で1枚に表したものです。
ワイヤーフレームとの違いは？	表す階層が異なる	画面遷移図は画面同士のつながり、ワイヤーフレームは1画面の中の要素配置を示します。
図に何を載せればいい？	画面・矢印・操作・分岐・凡例	画面IDを振り、矢印には「どの操作で遷移するか」を書き添えるのが基本になります。
わかりやすくするコツは？	向きと粒度をそろえる	流れを一方向に統一し、画面の粒度を合わせ、凡例を必ず付けることが読みやすさにつながります。

この記事でわかること

• 画面遷移図の役割と、ワイヤーフレームやサイトマップとの違い
• 図に載せるべき5つの要素と、それぞれの書き方
• ログイン、申請承認、購入フローという3つのサンプル構成
• 画面の洗い出しからレビューまで、作成の5ステップ
• 読み手が迷わない図にするコツと、ツールを選ぶ基準

▼ システム開発や業務のドキュメント整備を見直したい方へ 業務の棚卸しからシステム化・AI活用までの進め方、支援内容、導入までの流れをまとめた資料をご用意しています。検討の初期段階でも構いませんので、まずは全体像の把握にご活用ください。 ＞ 資料請求はこちら

画面遷移図とは何を表す図か

まず役割を整理します。画面まわりの成果物は種類が多く、どれに何を描くのかが曖昧なまま進めると内容が重複します。似た成果物との違いから押さえます。

画面と遷移を可視化したもの

画面遷移図とは、Webサイトやアプリにおけるそれぞれの画面と、ユーザーの操作によって画面がどう移り変わるかという流れを可視化した図です。画面を四角で表し、遷移を矢印でつなぐ形が基本になります。

矢印には「どの操作で遷移するのか」を添えます。ログインボタンを押したとき、商品画像をタップしたとき、検索条件を指定して実行したとき。この情報があるかどうかで、図の実用性が大きく変わります。

全体を1枚で見渡せることが最大の価値です。関係者が同じ図を見て、同じ理解を持てる状態をつくるための道具だと考えてください。

ワイヤーフレームとの違い

最も混同されやすいのがワイヤーフレームです。画面遷移図は画面同士のつながりを、ワイヤーフレームは1つの画面の中の要素配置を表します。対象としている階層が違います。

両者は競合しません。画面遷移図で全体の流れを押さえ、個々の画面の中身はワイヤーフレームで詰める。この組み合わせにしておくと、どちらも適切な分量に収まります。

ツールによっては、ワイヤーフレームを配置してそのまま矢印でつなぐ形式も使われます。画面の中身まで見えるため直感的ですが、1枚が大きくなりやすい点は意識しておいてください。

業務システムでは、ワイヤーフレームを作らずに画面遷移図だけで進めることもあります。その場合は、各画面に主要な項目名を注記として添えておくと、後工程で困りません。

サイトマップとの違い

サイトマップは、ページの階層構造を示す図です。どのページがどの下にあるかという親子関係を表します。対して画面遷移図は、実際にどう動くかという流れを表します。

階層上は離れたページ同士が、実際には直接行き来することはよくあります。この動きを表現できるのが画面遷移図です。両方が必要な場面も多いので、役割を分けて用意してください。

何のために作るのか

主な目的は3つです。1つ目が関係者の認識合わせ。発注側、デザイナー、開発者が同じ図を見ることで、言葉のやり取りでは埋まらない差が見えるようになります。

2つ目が抜け漏れの発見です。エラー時の画面、権限がない場合の表示、途中で離脱したときの挙動。図にすると、描かれていない経路が視覚的に浮かび上がります。

3つ目が後工程への引き渡しです。画面設計書、開発、テスト設計。いずれも画面遷移図を土台にできます。基本設計の成果物としての位置づけは、IPAの共通フレームでも整理されています（出典：IPA「共通フレーム2013」）。

画面遷移図に載せる要素

ここからは中身です。必要な要素は5つで、これらが揃っていれば読み手が迷うことはありません。

画面を表す四角

各画面を四角で表し、画面名と画面IDを記載します。「ログイン画面」だけでなく「SC-001 ログイン画面」のようにIDを振っておくと、後工程の設計書やテスト仕様書から参照できます。

ポップアップやモーダル、確認ダイアログも1つの画面として扱うかどうかを決めておいてください。数が多い場合は別の記号にするか、注記として添える方法もあります。

画面名は、システム内での正式名称に統一してください。同じ画面が図では「一覧」、設計書では「検索結果画面」と書かれていると、対応関係を追うのに手間がかかります。

遷移を表す矢印と操作

画面同士は矢印でつなぎ、その矢印に「どの操作で遷移するか」を書き添えます。「ログインボタン押下」「商品カードをタップ」「戻るリンク」といった具合です。

この情報がないと、開発側は「どこかから来られるらしい」ということしか分かりません。矢印にラベルがあるかどうかが、実用的な図とそうでない図の分かれ目になります。

双方向に行き来する場合は、矢印を2本引くか、両矢印にします。ただし戻り方が複数ある場合は、それぞれ分けて描いたほうが正確です。

条件分岐

同じ操作でも、状況によって遷移先が変わることがあります。ログイン成功と失敗、権限の有無、在庫の有無といった分岐です。ひし形の記号を使うか、矢印に条件を添えて表現します。

分岐した先が合流する場合は、その合流点も描いてください。分岐したまま終わっている図は、読み手に「このあとどうなるのか」という疑問を残します。

外部システムや画面外の要素

メールのリンクから遷移する、外部サービスの認証画面を経由する、帳票をダウンロードする。こうした自システムの画面ではない要素も、必要なら図に含めます。

画面と区別できるよう、別の形や破線で表すのが一般的です。どう区別しているかは、次の凡例で明示してください。

外部システムを含める場合は、どこまでが自社の責任範囲かも分かるようにしておきます。境界が曖昧だと、不具合が起きたときの切り分けに時間がかかります。

凡例

見落とされやすいのがこれです。図形や線の種類、色がそれぞれ何を意味するのかを定義した凡例を、図のどこかに必ず記載してください。これがあるだけで、解釈のブレがなくなります。

凡例に加えて、作成日、作成者、対象のバージョンも書いておきます。後から見た人が、いつ時点の情報なのかを判断できるようになります。

▼ 設計ドキュメントの型づくりからご相談いただけます 何をどこまで書くべきか、社内でどう標準化するか。現状をうかがったうえで、無理のない進め方をご提案します。 ＞ 相談予約はこちら

サンプルで見る基本のパターン

実際の構成を、よくある3つの例で確認します。業務システムの画面遷移は、この3パターンの組み合わせであることがほとんどです。

サンプル1：ログインから一覧・詳細へ

最も基本的な形です。ログイン画面から始まり、認証の成否で分岐し、成功ならメニュー画面へ。メニューから一覧画面、一覧から詳細画面へと進む構成になります。

描き漏らしやすいのが、認証失敗時の戻り先、パスワード再設定への導線、そしてセッション切れの扱いです。一覧から詳細へ進んだ後、戻ったときに検索条件が保持されるかどうかも、図の中で明示しておきたい情報です。

矢印のラベルは「ログインボタン押下（成功）」「ログインボタン押下（失敗）」のように、条件まで含めて書きます。

初回ログイン時のパスワード変更や、多要素認証の画面を挟む場合も、この段階で図に含めておいてください。後から差し込むと、全体の配置を組み直すことになります。

サンプル2：申請から承認までの遷移

業務システムで頻出する形です。申請一覧から新規作成画面へ進み、入力して確認画面を経て完了画面へ。承認者側は、承認待ち一覧から詳細画面へ進み、承認または差し戻しを選ぶ構成になります。

このパターンでは、役割によって見える画面が変わる点が重要です。申請者と承認者でレーンを分けて描くか、画面に対象ロールを明記しておくと、権限設計との整合が取りやすくなります。

差し戻された申請がどの画面に戻るのか、再申請の導線はどうなるのか。ここは仕様が固まっていないことが多く、図を描く過程で論点として表に出てきます。

サンプル3：検索から登録までの購入型フロー

検索画面から結果一覧、商品詳細、カート、入力、確認、完了と進む直線的な流れです。ECに限らず、予約や申込みの業務でも同じ構造になります。

このパターンで重要なのが、各段階からの離脱と戻りです。確認画面から入力画面に戻ったとき、入力内容が保持されるのか。カートの中身はログアウトしても残るのか。戻る操作の扱いが仕様の分かれ目になります。

在庫切れ、決済失敗、セッション切れといった異常系の遷移も、この図に含めておいてください。正常系だけの図は、開発中に必ず不足が判明します。

サンプルから読み取るべきこと

3つのサンプルに共通するのは、正常系だけでは図が完成しないという点です。認証失敗、差し戻し、在庫切れ。これらを描くことで、初めて仕様が固まります。

他社のサンプルを参考にする際も、正常系の並びより異常系と戻り方をどう表現しているかに注目してください。そこにこそ、実務で必要な工夫が現れます。

▼ 自社の画面設計をご一緒に整理します 要件の整理から画面設計、開発の進め方まで、実務目線でご相談いただけます。検討の初期段階でも構いません。 ＞ 相談予約はこちら

画面遷移図の作成手順

要素とパターンが分かったら、実際に作ります。いきなりツールで描き始めず、洗い出しから順に進めるほうが早く仕上がります。

STEP1：画面を洗い出す

まず、必要な画面をすべて書き出します。要件定義の成果物や業務フローを見ながら、登場する画面を列挙していきます。付箋やテキストで構いません。

この段階で、エラー画面、権限なしの画面、完了画面といった脇役も忘れずに挙げてください。後から足すと配置をやり直すことになります。

洗い出した画面は、いったん一覧表にしておくと扱いやすくなります。画面名、画面ID、対象ロール、備考の4列があれば十分です。

STEP2：遷移とトリガーを定義する

洗い出した画面同士がどうつながり、どの操作で移動するのかを定義します。「ログインボタンクリックでメニュー画面へ」という形で、遷移とアクションをセットで書き出します。

条件分岐が発生する箇所も、ここで明確にしておきます。この作業が画面遷移図の核となる部分で、ここで全体構造とユーザーの動線の骨格が固まります。

STEP3：ラフを描いて配置を決める

手描きでも構わないので、まず全体を1枚に配置してみます。線が交差しないよう、関連の深い画面を近くに置くのがコツです。

この段階で図が破綻するようなら、画面が多すぎるか、粒度がそろっていない可能性があります。分割するか、まとめるかの判断はここで行ってください。

STEP4：清書して凡例を付ける

ラフを元に、作図ツールで清書します。手描きのままでは共有も更新も難しいため、デジタルデータとして残すことが重要です。

清書の際に、画面IDを振り、凡例を追加します。線の種類や図形の意味を定義しておけば、読み手によって解釈がブレることを防げます。

ツールを使う場合も、いきなり清書から入らないでください。配置を考えながら作図すると、手が止まって進まなくなります。

STEP5：レビューして直す

仕上げは関係者によるレビューです。業務部門には「この流れで業務が回るか」、開発側には「これで実装できるか」を確認してもらいます。

レビューでは、描かれていない経路を探す視点が有効です。「この画面から直接ここへは行けないのか」「この状態のときはどうなるのか」という問いから、仕様の抜けが見つかります。

わかりやすい図にするコツ

同じ内容でも、描き方で読みやすさは大きく変わります。読み手が迷わない図に共通する特徴を挙げます。

流れの向きをそろえる

左から右、または上から下のどちらか一方向に流れを統一するだけで、読みやすさは大きく変わります。途中で向きが変わる図は、読み手が毎回進行方向を探すことになります。

戻る操作の矢印は逆方向になりますが、本流の向きが決まっているからこそ「戻っている」と認識できます。例外的な線ほど、本流の一貫性が効いてきます。

画面の粒度をそろえる

1つの四角が表す単位を統一してください。確認ダイアログと業務メニュー全体が同じ大きさで並んでいると、読み手は重要度を判断できません。

迷ったら「URLが変わるか」「利用者にとって別の画面と認識されるか」を基準にします。判断に一貫性があれば、多少の例外があっても図は読めます。

1枚に収める、収まらなければ分ける

全体を見渡せることが画面遷移図の価値なので、1枚に収めるのが理想です。スクロールしないと全体が見えない図は、本来の目的を果たせません。

収まらない場合は、A3で出力するか、図を分割します。分割する際は、上位に全体の流れを示す図を1枚置き、詳細は別図へという二層構造にすると、読み手が必要な粒度で見られます。

分割した図の間は、参照先を明記してつなぎます。「詳細は図3へ」といった記載がないと、読み手は迷子になります。

色だけに意味を持たせない

色分けは便利ですが、色の意味を知らない人には伝わりません。印刷やモノクロでの共有を考えると、形や線の種類でも区別がつく図を目指すほうが安全です。

色を使う場合は、凡例で意味を明記し、種類を2〜3色に抑えます。装飾を増やすほど、作成にも更新にも時間がかかる点も見落とせません。

文字の大きさも意識してください。印刷して会議で配る想定なら、A3で読める文字サイズに収まるかを確認しておくと、当日に慌てずに済みます。

画面IDで他の成果物とつなぐ

画面IDを振っておくと、画面設計書、テスト仕様書、課題管理表から同じIDで参照できます。「ログイン画面の件ですが」という曖昧なやり取りが減ります。

IDの付け方はプロジェクト開始時に決めてください。途中から変えると、他の成果物との対応関係を取り直すことになります。

▼ 作った資料が使われない、で止まっていませんか 設計ドキュメントの標準化から開発体制の整備まで、定着する形をご一緒に設計します。 ＞ 相談予約はこちら

ツールの選び方

ツールは目的と体制で決まります。関係者全員がアクセスでき、更新できるかどうかが最も重要な基準です。

ExcelやPowerPointで作る

最も手軽なのが、すでに全社に入っているOfficeソフトです。追加の費用も申請も不要で、受け取った側もそのまま開ける点は社内共有において大きな利点になります。

図形の接続や整列の機能は限られるため、画面数が増えると手間がかかります。それでも、最初の1枚を作る段階ではこれで十分です。

注意したいのは、ファイルが各自のPCに散らばりやすい点です。共有フォルダ上の1か所を正本と決めておかないと、どれが最新か分からなくなります。

オンラインの作図ツールを使う

画面数が増え、複数人で更新するようになったら、オンラインの作図ツールが候補になります。リアルタイムでの共同編集、バージョン管理、コメント機能が備わっており、作成と保守の負担が下がります。

導入時に確認したいのは、閲覧する側にもアカウントが必要かどうかです。作る人だけが見られる状態では、共有の目的を果たせません。画像やPDFとして書き出せるかも確認しておいてください。

デザインツールと連携させる

ワイヤーフレームやデザインをすでに作っている場合、それをそのまま配置して矢印でつなぐ形式のツールもあります。画面の中身が見えるため、関係者の理解が早くなります。

デザインを更新すると図にも反映される仕組みであれば、二重管理を避けられます。デザイン工程と設計工程が並行して動くプロジェクトでは、検討する価値があります。

テキストから生成する

簡単な記述から図を描き出せる仕組みもあります。図形を1つずつ配置する必要がなく、テキストを直せば図も直るため、変更が多い段階との相性は良好です。

変更履歴の管理もしやすくなりますが、記法を覚える必要があるため、全員が更新する運用には向きません。作成担当が限られている場合の選択肢です。

作った図を活かすための運用

画面遷移図でよくある結末は、作成直後だけ使われて共有フォルダに眠ることです。使われ続ける状態をどう作るかが実は最も重要です。

画面設計書と対応づける

画面遷移図は全体の流れ、画面設計書は個々の画面の中身。画面IDで両者を対応づけておけば、どちらから見ても情報をたどれます。

どちらか一方だけで済ませようとすると、必ず無理が出ます。図に詳細を書き込みすぎると読めなくなり、設計書だけでは全体像がつかめません。

更新されない状態を防ぐ

仕様変更があっても図が更新されなければ、すぐ実態と合わなくなります。仕様を変更したら図も直す作業を、変更管理の手順そのものに組み込んでおくのが確実です。

実態と合っていない図は、ないよりも危険です。間違った前提で開発やテストが進むリスクがあるためです。定期的に見直す時期も決めておいてください。

開発の途中で仕様が変わった場合、図を直すのは誰の役割かも決めておいてください。担当が決まっていないと、誰も直さないまま放置されます。

テスト設計に展開する

画面遷移図は、結合テストの観点を洗い出す材料としてそのまま使えます。図の矢印1本ごとに「この遷移は正しく動くか」という確認項目が立ちます。

描かれていない経路も検討対象です。「この画面から直接ここへ行けてしまわないか」という観点は、権限まわりの不具合を見つけるうえで有効になります。

書ける人を増やす

作成を1人に任せきりにすると、その人の異動とともに更新が止まります。部署内に最低2人は書ける人を置き、レビューを通じて作り方を共有しておいてください。

記号のセット、流れの向き、粒度の目安、ID体系。この4点を1枚のルールにまとめておけば、担当が変わっても一定の品質が保てます。なお、図形の意味を標準に合わせておきたい場合は、流れ図の記号を定めたJIS規格が参考になります（出典：日本規格協会「JIS X 0121:1986」）。

あわせて、業務全体の整理の仕方は業務効率化アイデア55選の記事でもまとめています。人材面の育て方はAI研修の目的と選び方をまとめた記事も参考になります。

まとめ

画面遷移図は、画面と、操作によってどう移り変わるかを1枚で見渡せるようにした図です。1画面の中身を表すワイヤーフレーム、階層構造を表すサイトマップとは役割が分かれます。

載せる要素は、画面と画面ID、遷移の矢印と操作、条件分岐、外部要素、そして凡例の5つです。特に矢印に操作を書き添えることと、凡例を必ず付けることが、実用性を左右します。

作成は、画面の洗い出し、遷移とトリガーの定義、ラフの配置、清書と凡例、レビューという5ステップで進めます。わかりやすくするコツは、流れの向きをそろえる、粒度をそろえる、1枚に収める、色だけに意味を持たせないの4点です。

そして、正常系だけでは図は完成しません。認証失敗、差し戻し、在庫切れ、セッション切れ。異常系と戻り方まで描いて初めて、仕様が固まり、後工程で使える図になります。

▼ システム開発の進め方を、社内に定着する形で整えませんか 株式会社ネクストスケールでは、業務の棚卸しから要件の整理、設計ドキュメントの標準化、AI活用と社内への定着支援までを一貫してご支援しています。まずはお気軽にご相談ください。 ＞ 相談予約はこちら