画面遷移図とは「画面フロー図」とも言い、ある状態がどのように移り変わるかで表しを図、視覚的に表現するもののことでビジネスシーンでは割とおなじみのワードではあります。
チームでプロジェクトを組んで進めていく際に欠かせないものなので、自分でも作る必要が出てきたというケースもよくあります。
しかし具体的な作り方が分からない・失敗しないポイントは？と思う人も多いものです。
そこで今回は画面遷移図の書き方について詳しく解説していきます。
おすすめのツールなども紹介していくのでぜひ参考にしてくださいね。
画面遷移図とは
画面遷移図とは、Webサイトやシステムの開発において、複数の画面間の相互関係を理解するための図です。
画面遷移図を作成することで、各画面がどのような遷移で結ばれているかを可視化することができ、開発者や関係者間での意思疎通をスムーズにすることができます。
また、画面遷移図を作成することで、システムの全体像を把握し、開発の効率化や不具合の発見に役立つことがあります。
状態遷移図との違いは？
状態遷移図は、あるオブジェクトやシステムが取りうる状態や、それらの状態間の遷移を表した図です。
つまり状態の移り変わりを図面化したものと考えればいいでしょう。
一方、画面遷移図は、Webサイトやシステムの画面間の遷移を表した図です。
つまり、状態遷移図はオブジェクトやシステム自体の振る舞いや状態を表し、画面遷移図はユーザーインターフェースの構成を表します。
ただし、状態遷移図と画面遷移図の両方において、状態や画面間の遷移について視覚的に理解しやすくすることが共通して求められます。
画面遷移図の種類と書き方
手書き
画面遷移図には、手書きによるものと専用のソフトウェアを用いて作成するものがあります。
手書きによる画面遷移図は、鉛筆やペンを用いて紙に直接描く方法で、素早く簡単に作成することができます。
手書きによる画面遷移図のメリットは、直感的であることやアイデアを素早く形にすることができることです。
また、手軽であるため、複数人での共同作業に適している点も挙げられます。
一方、デジタルによる画面遷移図は、精度や修正のしやすさが向上し、可読性も高くなります。
どちらの方法を用いるかは目的や作業環境、作成者の好みなどによって異なります。
エクセル
エクセルを用いて画面遷移図を作成することもできます。エクセルを使うと、線の引き方や図形の配置などが自由自在に行えるため、比較的複雑な画面遷移図も作成できます。
また、エクセルに慣れ親しんでいる人にとっては、操作が容易であり、利便性が高いというメリットがあります。
ただし、エクセルを使う場合は、線や図形の描画に時間がかかり、見づらくなってしまう可能性があるため、十分な注意が必要です。
また、エクセルはあくまでも表計算ソフトウェアであり、画面遷移図専用の機能がないため、専用ソフトウェアよりも限界があるという点も考慮する必要があります。
パワーポイント
パワーポイントは、スライドを作成するためのソフトウェアであり、そのスライドに線や図形を配置することで画面遷移図を作成することができます。
パワーポイントを使うと、線や図形のデザインに自由度が高く、スライド上での動きを再現することも難しくありません。
このパワーポイントというツールは、Microsoft Officeの一部であり、多くの人が使い慣れているため、初心者の人にとっても使い方も比較的簡単ではないでしょうか。
ただし、パワーポイントはスライドを作成することが主目的のため、大量の画面遷移図を作成する場合は、専用のソフトウェアよりも作業効率が低下する可能性がある点に注意が必要です。
Webサービス（ツール）
Webサービスにおいても、画面遷移図はシステム開発の初期段階で重要な役割を担います。
さらに画面遷移図を開発チームのメンバー間で共有することで、開発の進捗状況や各機能の開発状況を共有するといった使い方も可能です。
なおWebサービスの場合は、画面遷移図を作成するための専用のツールが多数存在するため、使い勝手や機能性に応じて選択することができます。
共有しやすさなのか、編集しやすさ・軽さなどか用途や目的によって選ぶことをおすすめします。
画面遷移図を書く際のポイント
列で構造をわかりやすく表現する
画面遷移図を作成する際に、列で構造を表現することは、画面遷移図の見やすさや理解しやすさに大きく関わってきます。
列を使って構造を表現することで、画面遷移図において画面間の関係性を分かりやすくすることができます。
例えば、一つのページに複数の機能がある場合には、それぞれの機能を別の列に分けることで、どの機能がどの画面に関連するのかを一目で確認することができます。
また、列を使って構造を表現することで、画面遷移図全体の見た目も整えることができます。
ただし、列を多用すると、画面遷移図が縦長になってしまう場合があるため、適宜改善する必要があります。
1枚ずつ見やすくまとめる
画面遷移図を作成する際に、1枚ずつ見やすくまとめることは非常に重要です。そのためには、以下のようなポイントがあります。
1枚につき情報を限定する
複数の画面や機能の関係性を表現するものですが、1枚につき情報を限定することで、見やすさを向上させることができます。
1枚につき、関連する画面や機能のみを掲載し、余白を適切に設けることで、情報の密集感を解消し、見やすさを向上させることができます。
見出しやラベルを明確にする
画面遷移図には、多くの要素が含まれるため、見出しやラベルを明確にすることが重要です。
見出しは、そのページやセクションの内容を表現するものであり、ラベルは、各要素の名称や役割を表現するものです。
見出しやラベルを明確にすることで、情報の整理がしやすくなります。
色や線の使い方に注意する
色や線の使い方によって、情報の可視化や重要度の表現ができます。しかし、色や線を使いすぎると、情報が混沌としやすくなってしまいます。
そのため、必要最低限の色や線を使用し、情報の表現に必要なものに絞ることが大切です。
利用者の権限で遷移図を分ける
画面遷移図を作成する際には、利用者の権限によって遷移図を分けることが重要です。
例えば、管理者と一般ユーザーでは操作できる画面が異なるため、それぞれの権限に応じた画面遷移図を作成することが必要です。
また、利用者の権限に応じて、表示される情報や操作できる機能に制限を設けることも重要です。
これにより、ユーザーは自分の権限内で操作できる範囲が明確になり、システムを利用する上での混乱や不正な操作を防止することができます。
適切な利用者の権限に応じた画面遷移図を作成することで、より使いやすく、安全なシステムを提供することができます。
矢印で無理につながない
画面遷移図を作成する際には、矢印で無理につながないことが重要です。繋げすぎてしまうと以下のようなことが起きやすくなります。
- 意図しない遷移が生じる可能性がある
- 見た目が複雑になりやすい
- 遷移の流れが把握しやすい
適切な場所で矢印を使うことで、遷移の流れを明確にし、ユーザーがアプリケーション内での移動に迷わないようにすることができます。
また、矢印を多用すると画面遷移図が見た目的に複雑になり、遷移が混乱してしまう場合があります。
そのため、矢印を適切に使い、それ以外の場所では線で繋ぐなどの方法で表現することで、見やすくわかりやすい画面遷移図を作成することができます。
画面名や条件はわかりやすい名前に
画面遷移図を作成する際には、画面名や条件をわかりやすい名前にすることが重要です。
適切な名前を付けることで、ユーザーがどの画面にいるのか、何をするためにその画面にいるのかを瞬時に理解できます。
また、条件についてもわかりやすい名前をつけることで、遷移に必要な条件が明確になり、誤った遷移をしてしまうことを防ぐことができます。
画面遷移図を書く際のおすすめツール
Overflow（オーバーフロー）
「Overflow」はMac用の画面遷移図作成ツールで現在のところはWindowsでは使えないので注意しましょう。
なおAdobeXDやFigma、Sketchなどのデザイン系アプリと連携することもできるので、よりビジュアル性に優れた画面遷移図を描くことができます。
Overflowの特徴をまとめると以下の通りになります。
- シンプルで使いやすいインターフェース：シンプルで直感的なインターフェースを備えています。そのため、初めてのユーザーでも簡単に使い始めることができます。
- プロトタイプの作成が容易：プロトタイプの作成を容易にするために、ワイヤーフレームと画面遷移図の作成を同時に行えるようになっています。そのため、画面のレイアウトや遷移がスムーズに行えるようになります。
- コラボレーションがしやすい：複数のユーザーが同時にプロトタイプを編集できるため、チームでのコラボレーションがしやすいです。また、コメント機能や共有機能を備えているため、コミュニケーションが円滑になります。
- 他のツールとの連携が可能：SketchやFigma、Adobe XDといったデザインツールと連携することができます。そのため、既存のデザインを流用してプロトタイプを作成することができます。
- プレビュー機能が充実：プレビュー機能が充実しています。プロトタイプを実際のデバイスでプレビューすることができるため、実際のユーザーの動きをシミュレーションすることができます。
ただし、無料で使用できるのは1ヶ月だけでその後は有料なので、無料期間の間で使い勝手などを見極めましょう。
draw.io（ドロー）
「draw.io（ドロー）」はオープンソースのベクター図形エディタであり、無料で利用できるウェブアプリケーションとして提供されています。その特徴は以下の通りです。
- 豊富な図形：UML、フローチャート、ER図など、多くの図形を提供しており、画面遷移図をはじめ、様々な種類の図形を作成することができます。
- テンプレートの利用：予め用意されたテンプレートを利用することで、作成する図形のデザインやレイアウトの手間を省くことができます。
- リアルタイム共同編集：複数の人が同じ図形を編集できる機能を持っているため、チーム開発などの場面での共同作業がしやすくなります。
- オフラインでも利用可能：ローカルにダウンロードすることで、オフラインでも利用可能です。
リアルタイム共同編集やオフラインでの利用が可能であるため、画面遷移図の作成に適したツールの一つと言えます。
Prott（プロット）
Prottは、WebサービスやモバイルアプリのUI/UX設計に特化したツールであり、以下のような特徴があります。
- シームレスなワイヤーフレーム作成：シンプルで直感的なインターフェイスを備え、簡単にワイヤーフレームを作成できます。
- コラボレーション機能：プロジェクトメンバーとの共同作業が可能で、アプリのプレビューを共有しながら、フィードバックをやりとりすることができます。
- プロトタイピング機能：作成したワイヤーフレームをもとに、プロトタイプを簡単に作成できます。
- モバイルフレンドリー：スマートフォンやタブレットでの利用に最適化されたインターフェイスであり、手軽に利用できます。
- 多彩なUIコンポーネント：用意された多数のUIコンポーネントがあり、さまざまなデザインスタイルに対応できます。
プロトタイプの作成やUI/UX設計を手軽に行えるツールとして、Prottは高い評価を得ています。
figma（フィグマ）
Figmaは、UI/UXデザインのためのオンラインツールで、Webブラウザ上で動作するクラウドベースのアプリケーションです。
複数人で同時に編集ができるため、チームでのデザイン作業に向いています。
また、スマートフォンやタブレットでも使用できるため、デザイン作業を場所や時間にとらわれずに行えます。
他のデザインツールと比べ、シンプルで使いやすいインターフェースや、様々なプラグインやテンプレートを利用することができることも特徴です。
さらに、画面遷移図の作成やプロトタイプの作成も可能で、UI/UXデザイン全般をサポートするツールとして人気があります。
Excel（エクセル）
Excelは描画ソフトの中でも使っている人が多いツールの1つでしょう。特徴としては、以下のようなものが挙げられます。
- 使いやすさ：シンプルなインターフェースであり、直感的に操作が可能です。
- 多機能性：数値計算、グラフ作成、統計処理、データベース操作など様々な機能があり、幅広い用途に対応できます。
- 柔軟性：ユーザーが自由に式や関数を定義できるため、様々な計算処理に対応できます。
- データの整理・管理性：データの取り扱いが容易で、大量のデータも簡単に処理できます。
- 拡張性：プログラミング言語「VBA」を使って、自動化やカスタマイズが可能です。
Excelは使いやすく、多機能で、柔軟性があり、データの整理・管理性に優れた表計算ソフトウェアです。
ただしExcelのデメリットは、線を引く作業が面倒な点です。また、ボタンなどのアクションを作るのも難易度が高く、効率性はあまり良くありません。
Lucidchart（ルシッドチャート）
Lucidchartは、オンラインで使えるプロフェッショナルな図表作成ツールです。以下は、その特徴です。
- 多彩な図形とテンプレート：図形のライブラリが豊富で、各種テンプレートも用意されているので、様々な種類の図を作成できます。
- リアルタイム共同作業：チームで作業する場合に便利なリアルタイム共同作業が可能で、同時に複数の人が同じ図を編集できます。
- 外部アプリケーションとの連携：GoogleドライブやSlackなど外部アプリケーションとの連携ができ、さらに利便性を高めることができます。
- フローチャートの自動作成：テキストを入力するだけで、自動的にフローチャートを作成する機能もあります。
- カスタムスタイル：スタイルを自由にカスタマイズでき、ブランディングに合わせた見栄えの良い図表を作成できます。
Cacoo
Cacooは、クラウドベースのデザインツールであり、画面遷移図やフローチャートなどの図を作成するために使われます。特徴としては、以下のようなものがあります。
Cacooの特徴をまとめると以下の通りになります。
- リアルタイムでの共同作業が可能：複数のユーザーが同時にワークスペースにアクセスして、リアルタイムでの編集・コメントができます。
- 豊富なテンプレート：用途に応じた多彩なテンプレートを用意しており、初めての方でも簡単に作成ができます。
- 多言語対応：日本語をはじめ、英語、中国語、韓国語、ドイツ語、フランス語、スペイン語、ポルトガル語など、多言語に対応しています。
- 便利な共有機能：作成した図は、URLで簡単に共有することができます。また、各種ファイル形式（PDF、SVG、PNG、JPEG）での出力も可能です。
- 無料トライアルあり：機能制限があるものの、無料トライアルを利用することができます。
draw.ioとできることはほとんど同じですが、保存できる先や使い勝手が多少違うのでこの辺は好みで決めていいでしょう。
まとめ
画面遷移図は、Webサイトやシステムの画面間の遷移関係を可視化する図です。
複雑なシステムの開発や改善において、全体像を理解しやすくするために重要な役割を担います。
手書きのほかにもツールを使って作ることもできるので、作成しやすさだけでなくデータを社内で共有もしやすいでしょう。
