画面遷移図の書き方やツールを徹底解説【2026年6月最新】

画面遷移図とは、Webサイトやシステムの画面間の相互関係を視覚的に表現し、ユーザーの操作フローを理解しやすくする設計図です。

画面遷移図とは

画面遷移図は、プロジェクト全体の画面構成を「見える化」する最も効果的な手段です。関係者間の認識を早期に揃えることで、手戻りを大幅に減らせます。

画面遷移図とは、Webサイトやシステムの開発において、複数の画面間の相互関係を理解するための図です。画面遷移図を作成することで、各画面がどのような遷移で結ばれているかを可視化することができ、開発者や関係者間での意思疎通をスムーズにすることができます。

また、画面遷移図を作成することで、システムの全体像を把握し、開発の効率化や不具合の発見に役立つことがあります。

近年では、生成AIを活用したシステム開発でも、画面遷移図の重要性が高まっています。AIツールとユーザーインターフェースの連携を設計する際に、画面遷移図が必要不可欠となるからです。また、無料ホームページ作成ツールを選定する前の段階で画面遷移図を整理しておくと、ツール選びの判断基準も明確になります。

ユーザーフローとは、ユーザーが目的を達成するために操作する一連の画面経路のことです。画面遷移図はこのユーザーフローを俯瞰的に示したものと言えます。

状態遷移図との違いは？

状態遷移図とは、あるオブジェクトやシステムが取りうる状態と、それらの状態間の遷移を表した図です。つまり状態の移り変わりを図面化したものと考えればよいでしょう。

一方、画面遷移図は、Webサイトやシステムの画面間の遷移を表した図です。つまり、状態遷移図はオブジェクトやシステム自体の振る舞いや状態を表し、画面遷移図はユーザーインターフェースの構成を表します。

ただし、状態遷移図と画面遷移図の両方において、状態や画面間の遷移について視覚的に理解しやすくすることが共通して求められます。

具体的に区別すると、「ログインボタンを押したらトップページへ移動する」という動作を表現するのが画面遷移図であり、「ユーザーの状態が未認証→認証済みへと変化する」という内部状態を表現するのが状態遷移図です。開発プロジェクトでは両方の図を作成し、UI設計と内部ロジックを別々に管理する方法が一般的です。

画面遷移図 vs 状態遷移図：目的と使い分け

観点	画面遷移図	状態遷移図
目的	UIの画面構成・操作フロー把握	システム内部の状態変化の把握
主な読者	デザイナー・ディレクター・クライアント	バックエンドエンジニア・設計者
表現対象	ページ・モーダル・画面要素	オブジェクトの状態・イベント
使うフェーズ	要件定義・UI設計段階	詳細設計・実装前
優先度	高（全プロジェクト推奨）	中（複雑なロジック時に追加）

画面遷移図の種類と書き方

画面遷移図には手書き・Excelなどの汎用ツール・専用Webサービスと大きく3つのアプローチがあり、それぞれ適したシーンが異なります。目的と作業環境に応じた選択が仕上がりの質を左右します。

手書きでの作成方法

画面遷移図には、手書きによるものと専用のソフトウェアを用いて作成するものがあります。手書きによる画面遷移図は、鉛筆やペンを用いて紙に直接描く方法で、素早く簡単に作成することができます。

手書きによる画面遷移図のメリットは、直感的であることやアイデアを素早く形にすることができることです。また、手軽であるため、複数人での共同作業に適している点も挙げられます。

一方、デジタルによる画面遷移図は、精度や修正のしやすさが向上し、可読性も高くなります。どちらの方法を用いるかは目的や作業環境、作成者の好みなどによって異なります。

手書きが特に力を発揮するのは、アイデア出しの初期段階やクライアントとのブレインストーミングの場です。ホワイトボードや付箋を使った方法は、その場で「この画面からこっちへも飛べる」「この遷移は削除しよう」という議論をリアルタイムに反映できます。ただし、チームが離れた場所にいる場合や後から見返すことを考えると、デジタル化するタイミングを早めに設けることが重要です。

Excelを活用した作成

Excelを用いて画面遷移図を作成することもできます。Excelを使うと、線の引き方や図形の配置などが自由自在に行えるため、比較的複雑な画面遷移図も作成できます。

また、Excelに慣れ親しんでいる人にとっては、操作が容易であり、利便性が高いというメリットがあります。ただし、Excelを使う場合は、線や図形の描画に時間がかかり、見づらくなってしまう可能性があるため、十分な注意が必要です。

また、Excelはあくまでも表計算ソフトウェアであり、画面遷移図専用の機能がないため、専用ソフトウェアよりも限界があるという点も考慮する必要があります。

Excelで作成する際のコツとして、セルを正方形に設定して方眼紙状にしておくと、図形の大きさや配置が揃えやすくなります。また、画面ノードには一貫した色・サイズのボックスを使い、矢印は「図形の接続」機能を使うことで、ノードを動かしても矢印が追従するようになります。ファイルをチームで共有する際は、編集者が誤って形を崩さないようシートを保護することも有効な対策です。

PowerPointでの図作成

PowerPointは、スライドを作成するためのソフトウェアであり、そのスライドに線や図形を配置することで画面遷移図を作成することができます。

PowerPointを使うと、線や図形のデザインに自由度が高く、スライド上での動きを再現することも難しくありません。このPowerPointというツールは、Microsoft Officeの一部であり、多くの人が使い慣れているため、初心者の人にとっても使い方も比較的簡単ではないでしょうか。

ただし、PowerPointはスライドを作成することが主目的のため、大量の画面遷移図を作成する場合は、専用のソフトウェアよりも作業効率が低下する可能性がある点に注意が必要です。

PowerPointでは「ハイパーリンク機能」を使うことで、スライド間をクリックで遷移できるインタラクティブなプロトタイプを簡単に作ることができます。クライアントへのプレゼンや社内レビューで「実際に動いている感」を見せたい場合に特に有効です。ただし、ファイルサイズが大きくなりやすく、複数人での同時編集はExcelやクラウドツールに比べて不便な点があります。

専用Webサービス・ツール

Webサービスにおいても、画面遷移図はシステム開発の初期段階で重要な役割を担います。画面遷移図を作成することで、Webサービスの全体像を理解し、各画面の機能や操作の流れが確認しやすくなります。

さらに画面遷移図を開発チームのメンバー間で共有することで、開発の進捗状況や各機能の開発状況を共有するといった使い方も可能です。なおWebサービスの場合は、画面遷移図を作成するための専用のツールが多数存在するため、使い勝手や機能性に応じて選択することができます。

共有しやすさなのか、編集しやすさ・軽さなどか用途や目的によって選ぶことをおすすめします。

特にローコード開発ツールを活用した開発プロジェクトでは、専用ツールによる画面遷移図の事前作成が開発効率を大きく高めます。ノーコード・ローコード環境はコンポーネントが豊富な分、画面数が膨大になりやすいため、あらかじめ遷移を整理しておくことで不要な画面の作り込みを防げます。

画面遷移図作成時の重要ポイント

作成に着手する前に、以下の5つのポイントを押さえておくことで、後から見返してもわかりやすい質の高い画面遷移図が完成します。

列で構造をわかりやすく表現する

画面遷移図を作成する際に、列で構造を表現することは、画面遷移図の見やすさや理解しやすさに大きく関わってきます。列を使って構造を表現することで、画面遷移図において画面間の関係性を分かりやすくすることができます。

例えば、一つのページに複数の機能がある場合には、それぞれの機能を別の列に分けることで、どの機能がどの画面に関連するのかを一目で確認することができます。また、列を使って構造を表現することで、画面遷移図全体の見た目も整えることができます。

ただし、列を多用すると、画面遷移図が縦長になってしまう場合があるため、適宜改善する必要があります。適切な余白や見出しを設けることで、見やすさを向上させるように工夫してみましょう。

列の構成方法としては、「画面の階層（トップ・カテゴリ・詳細）」を横軸、「機能ブロック（会員ゾーン・非会員ゾーン）」を縦軸に配置するパターンが多く採用されています。この方法を使うと、どの画面がどの階層に属し、どのユーザーが到達できるかを直感的に把握できるようになります。

1枚ずつ見やすくまとめる

画面遷移図を作成する際に、1枚ずつ見やすくまとめることは非常に重要です。そのためには、以下の3つのポイントがあります。

• 1枚につき情報を限定する：複数の画面や機能の関係性を表現するものですが、1枚につき情報を限定することで、見やすさを向上させることができます。1枚につき、関連する画面や機能のみを掲載し、余白を適切に設けることで、情報の密集感を解消し、見やすさを向上させることができます。
• 見出しやラベルを明確にする：画面遷移図には、多くの要素が含まれるため、見出しやラベルを明確にすることが重要です。見出しは、そのページやセクションの内容を表現するものであり、ラベルは、各要素の名称や役割を表現するものです。見出しやラベルを明確にすることで、情報の整理がしやすくなります。
• 色や線の使い方に注意する：色や線の使い方によって、情報の可視化や重要度の表現ができます。しかし、色や線を使いすぎると、情報が混沌としやすくなってしまいます。そのため、必要最低限の色や線を使用し、情報の表現に必要なものに絞ることが大切です。

利用者の権限で遷移図を分ける

画面遷移図を作成する際には、利用者の権限によって遷移図を分けることが重要です。例えば、管理者と一般ユーザーでは操作できる画面が異なるため、それぞれの権限に応じた画面遷移図を作成することが必要です。

また、利用者の権限に応じて、表示される情報や操作できる機能に制限を設けることも重要です。これにより、ユーザーは自分の権限内で操作できる範囲が明確になり、システムを利用する上での混乱や不正な操作を防止することができます。

適切な利用者の権限に応じた画面遷移図を作成することで、より使いやすく、安全なシステムを提供することができます。

権限別に遷移図を分ける際の実践的なコツとして、図の背景色や枠線の色を権限ごとに変える方法があります。例えば、管理者向けの画面はグレー、一般ユーザー向けはブルー、ゲストユーザー向けはライトグリーンのように色分けすることで、全体の権限マップが一目で把握できるようになります。凡例を必ず付けることで、後から参加したメンバーでも迷わず読み取れます。

矢印で無理につながない

画面遷移図を作成する際には、矢印で無理につながないことが重要です。繋げすぎてしまうと以下のようなことが起きやすくなります。

• 意図しない遷移が生じる可能性がある
• 見た目が複雑になりやすい
• 遷移の流れが把握しづらくなる

適切な場所で矢印を使うことで、遷移の流れを明確にし、ユーザーがアプリケーション内での移動に迷わないようにすることができます。また、矢印を多用すると画面遷移図が見た目的に複雑になり、遷移が混乱してしまう場合があります。

そのため、矢印を適切に使い、それ以外の場所では線で繋ぐなどの方法で表現することで、見やすくわかりやすい画面遷移図を作成することができます。

矢印の方向性についても注意が必要です。一方向にしか遷移しない場合は一方向の矢印を、双方向に遷移できる場合は両端に矢印が付いた双方向矢印を使います。「戻るボタン」による遷移は別の色で示すか、矢印のスタイルを変えることで、意図的な遷移と自動遷移・エラー時の遷移を視覚的に区別することができます。

画面名や条件はわかりやすい名前に

画面遷移図を作成する際には、画面名や条件をわかりやすい名前にすることが重要です。適切な名前を付けることで、ユーザーがどの画面にいるのか、何をするためにその画面にいるのかを瞬時に理解できます。

また、条件についてもわかりやすい名前をつけることで、遷移に必要な条件が明確になり、誤った遷移をしてしまうことを防ぐことができます。

一般的に、簡潔で分かりやすい名前をつけることが良いとされており、適切な名前を付けるためには、ユーザーの立場に立って考えることが大切です。

命名規則の例として、「ログイン画面」「商品一覧ページ」「注文完了モーダル」のように、画面の種類（画面/ページ/モーダル/ダイアログ）を名称の末尾に付けるルールを設けると、要素の性質を一目で識別できます。開発用の画面IDと表示名を対応させた「画面台帳」を別途作成し、遷移図と連携させる方法も、大規模プロジェクトでは有効です。

画面遷移図作成におすすめのツール

ツール選びの基本方針は「チームで共同編集するか」「専用機能が必要か」「コストを抑えたいか」の3軸で考えると絞り込みやすくなります。

Overflow（オーバーフロー）

「Overflow」はMac用の画面遷移図作成ツールで現在のところはWindowsでは使えないので注意しましょう。なおAdobe XDやFigma、Sketchなどのデザイン系アプリと連携することもできるので、よりビジュアル性に優れた画面遷移図を描くことができます。

Overflowの特徴をまとめると以下の5点になります。

• シンプルで使いやすいインターフェース：シンプルで直感的なインターフェースを備えています。そのため、初めてのユーザーでも簡単に使い始めることができます。
• プロトタイプの作成が容易：プロトタイプの作成を容易にするために、ワイヤーフレームと画面遷移図の作成を同時に行えるようになっています。
• コラボレーションがしやすい：複数のユーザーが同時にプロトタイプを編集できるため、チームでのコラボレーションがしやすいです。
• 他のツールとの連携が可能：SketchやFigma、Adobe XDといったデザインツールと連携することができます。
• プレビュー機能が充実：プロトタイプを実際のデバイスでプレビューすることができるため、実際のユーザーの動きをシミュレーションすることができます。

ただし、無料で使用できるのは1ヶ月だけでその後は有料なので、無料期間の間で使い勝手などを見極めましょう。

draw.io（ドロー）

「draw.io（ドロー）」はオープンソースのベクター図形エディタであり、無料で利用できるウェブアプリケーションとして提供されています。その特徴は以下の4点です。

• 豊富な図形：UML、フローチャート、ER図など、多くの図形を提供しており、画面遷移図をはじめ、様々な種類の図形を作成することができます。
• テンプレートの利用：予め用意されたテンプレートを利用することで、作成する図形のデザインやレイアウトの手間を省くことができます。
• リアルタイム共同編集：複数の人が同じ図形を編集できる機能を持っているため、チーム開発などの場面での共同作業がしやすくなります。
• オフラインでも利用可能：ローカルにダウンロードすることで、オフラインでも利用可能です。

リアルタイム共同編集やオフラインでの利用が可能であるため、画面遷移図の作成に適したツールの一つと言えます。

draw.ioはGoogleドライブやGitHub、Confluenceといった外部サービスにファイルを直接保存できるため、既存のドキュメント管理フローに組み込みやすい点も魅力です。データはXMLベースで保存されるため、バージョン管理ツールで差分管理することも可能です。

Prott（プロット）

Prottは、WebサービスやモバイルアプリのUI/UX設計に特化したツールであり、以下の5つの特徴があります。

• シームレスなワイヤーフレーム作成：シンプルで直感的なインターフェイスを備え、簡単にワイヤーフレームを作成できます。
• コラボレーション機能：プロジェクトメンバーとの共同作業が可能で、アプリのプレビューを共有しながら、フィードバックをやりとりすることができます。
• プロトタイピング機能：作成したワイヤーフレームをもとに、プロトタイプを簡単に作成できます。
• モバイルフレンドリー：スマートフォンやタブレットでの利用に最適化されたインターフェイスであり、手軽に利用できます。
• 多彩なUIコンポーネント：用意された多数のUIコンポーネントがあり、さまざまなデザインスタイルに対応できます。

プロトタイプの作成やUI/UX設計を手軽に行えるツールとして、Prottは高い評価を得ています。

Figma（フィグマ）

Figmaは、UI/UXデザインのためのオンラインツールで、Webブラウザ上で動作するクラウドベースのアプリケーションです。複数人で同時に編集ができるため、チームでのデザイン作業に向いています。

また、スマートフォンやタブレットでも使用できるため、デザイン作業を場所や時間にとらわれずに行えます。他のデザインツールと比べ、シンプルで使いやすいインターフェースや、様々なプラグインやテンプレートを利用することができることも特徴です。

さらに、画面遷移図の作成やプロトタイプの作成も可能で、UI/UXデザイン全般をサポートするツールとして人気があります。

FigmaはAutoLayout機能を使うことで、画面ノードのサイズが変わっても他の要素が自動的に調整されるため、画面数が多いプロジェクトでも整ったレイアウトを保ちやすい利点があります。また、コンポーネント機能を活用することで、同じ画面要素（ヘッダー・フッターなど）を一元管理でき、変更があっても全体へ一括反映できます。

Lucidchart（ルシッドチャート）

Lucidchartは、オンラインで使えるプロフェッショナルな図表作成ツールです。以下は、その5つの特徴です。

• 多彩な図形とテンプレート：図形のライブラリが豊富で、各種テンプレートも用意されているので、様々な種類の図を作成できます。
• リアルタイム共同作業：チームで作業する場合に便利なリアルタイム共同作業が可能で、同時に複数の人が同じ図を編集できます。
• 外部アプリケーションとの連携：GoogleドライブやSlackなど外部アプリケーションとの連携ができ、さらに利便性を高めることができます。
• フローチャートの自動作成：テキストを入力するだけで、自動的にフローチャートを作成する機能もあります。
• カスタムスタイル：スタイルを自由にカスタマイズでき、ブランディングに合わせた見栄えの良い図表を作成できます。

Cacoo

Cacooは、クラウドベースのデザインツールであり、画面遷移図やフローチャートなどの図を作成するために使われます。Cacooの特徴をまとめると以下の5点です。

• リアルタイムでの共同作業が可能：複数のユーザーが同時にワークスペースにアクセスして、リアルタイムでの編集・コメントができます。
• 豊富なテンプレート：用途に応じた多彩なテンプレートを用意しており、初めての方でも簡単に作成ができます。
• 多言語対応：日本語をはじめ、英語、中国語、韓国語、ドイツ語、フランス語、スペイン語、ポルトガル語など、多言語に対応しています。
• 便利な共有機能：作成した図は、URLで簡単に共有することができます。また、各種ファイル形式（PDF、SVG、PNG、JPEG）での出力も可能です。
• 無料トライアルあり：機能制限があるものの、無料トライアルを利用することができます。

draw.ioとできることはほとんど同じですが、保存できる先や使い勝手が多少違うのでこの辺は好みで決めていいでしょう。

Cacooは日本語のサポートが充実しており、国内ユーザーからの評価が高いツールです。Backlogとの連携機能もあるため、プロジェクト管理ツールとしてBacklogを使用しているチームには特におすすめです。タスクの進捗と画面遷移図を同じプロジェクト空間で管理できるため、情報の一元化がしやすくなります。

開発プロジェクトでの活用方法

画面遷移図は作るだけでなく、プロジェクトの各フェーズで積極的に「使う」意識を持つことが重要です。

画面遷移図は、システム開発プロジェクトにおいて重要な役割を果たします。特に、生成AIを活用した開発チームでは、AIとの協働作業を円滑に進めるために、明確な画面遷移図が必要不可欠です。

また、サイトリニューアルのSEO対策を考慮したWebサイト開発では、ユーザーの行動フローを最適化するために画面遷移図が活用されます。サイトリニューアル時には既存の遷移パターンを可視化した上で、SEOに有利な内部リンク構造や導線を再設計することが、検索順位を守りながらリニューアルを成功させるための重要なステップとなります。

さらに、検索エンジンのAIがWebサイトの構造を理解しやすくするためには、論理的で分かりやすい画面遷移が必要です。ページ間の関係性が明確な構造は、クローラーの巡回効率を高め、インデックスの精度向上にもつながります。

開発プロセスにおける活用場面を整理すると、以下の3つのフェーズで特に効果が高くなります。

• 要件定義フェーズ：クライアントや非エンジニアとの認識合わせに使用。「このボタンを押したらどこへ行くのか」という素朴な疑問を解消し、仕様漏れを防ぎます。
• 設計・開発フェーズ：フロントエンドとバックエンドの担当者間で、どの画面がどのAPIを呼ぶかを視覚的に共有。並行開発時の認識ズレを防ぎます。
• テスト・QAフェーズ：テストケースの網羅性確認に使用。遷移図上のすべてのパスをたどるテストを設計することで、テスト漏れを防ぎます。

また、Googleアナリティクスと組み合わせることで、実際のユーザーがどの遷移パスを多く通っているかを把握し、設計した遷移図と実態のギャップを発見することができます。ヒートマップや行動フロー分析の結果を遷移図にフィードバックすることで、継続的なUI改善の基盤となります。

よくある質問

まとめ

画面遷移図は、Webサイトやシステムの画面間の遷移関係を可視化する図であり、開発品質を左右する重要な設計ドキュメントです。

手書きのほかにもツールを使って作ることもできるので、作成しやすさだけでなくデータを社内で共有もしやすいでしょう。適切な画面遷移図を作成することで、開発効率の向上、チーム間のコミュニケーション円滑化、そして最終的により良いユーザーエクスペリエンスの実現につながります。

特に2026年6月現在、AIツールとの連携やSEO対策を考慮したWeb開発において、画面遷移図の重要性がますます高まっています。プロジェクトの規模や目的に応じて適切なツールを選択し、効果的な画面遷移図を作成していきましょう。