画面遷移図とは、Webサイトやシステム開発の際にサービス全体を把握するためにまとめる図です。画面遷移図はチーム全体で共有し、全体の流れが見やすい内容にする必要があります。

この記事では、画面遷移図に関する以下の点を解説します。

画面遷移図（がめんせんいず）とは

画面遷移図とは、Webサイトやシステム開発の際に、画面間の相互関係を理解するためにまとめる図です。

画面遷移図を作成すると、サービス規模が把握しやすくなります。チームメンバーがサービスの全体像を捉えることにより、認識の相違やページの抜け落ちなどを避けられます。

状態遷移図との違い

画面遷移図と似ている図面に、状態遷移図（ステートマシン図）があります。状態遷移図は、状態の移り変わりを図面化したものです。状態遷移図は図形や矢印などのビジュアルを使用し、動作と結果の遷移を表現します。たとえば、事象を以下のように図面化すると分かりやすいです。

• 起動していないパソコンの電源ボタンを押す→起動する

• 起動しているパソコンの電源ボタンを押す→シャットダウンする

システム開発では、複雑な構造を多く含むため、状態遷移図の作成により使用の抜けや漏れを防げます。

画面遷移図の書き方

画面遷移図の書き方には、主に以下2つの方法があります。

• 手書きでラフにまとめる

• ツールで綺麗に作る

手書きでラフにまとめる

システム開発の試作段階では、画面遷移図は手書きのラフなものであっても構いません。ほとんどの場合、画面遷移図は繰り返し書き直し、ブラッシュアップしていく必要があります。そのため、形式にこだわらず紙とペンで直感的に書き出すほうがスムーズです。

初めに手書きでラフにまとめたものを、共有する段階で綺麗に作り直してもよいでしょう。

ツールで綺麗に作る

綺麗で見やすい画面遷移図を手軽に作れるツールもあります。画面遷移図作成に特化したツールを使用すると、直感的な操作で作成でき効率的です。

他の人に共有する段階では、手書きより綺麗にまとめられた図を用意するのがおすすめです。

画面遷移図をうまく作るポイント

画面遷移図を見やすく作成すると、開発に携わるチームメンバー全員がより業務の全体像を掴みやすくなり効率的です。画面遷移図を作る際のポイントは、以下の3つです。

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

2. 矢印で無理につながない

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

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

画面遷移図をわかりやすくするためには、階層構造が明確である必要があります。たとえば、以下のように列を作り、階層を分けて表現できます。

1. トップページ

2. 2階層目のページ

3. 3階層目のページ

列に分けて表現するとシステム全体をイメージしやすくなり、画面遷移図も見やすいものとなります。

矢印で無理につながない

画面遷移図では、制御構造を矢印でつなぎ関係性をわかりやすく表現します。しかし、無秩序に配置された​画面遷移を無理に繋ぐと、矢印が交差して非常に見づらくなるでしょう。画面遷移を流れに沿った順番に配置し、矢印で繋ぐと整然としたビジュアルになります。

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

画面遷移図は、1つの業務を1枚ずつにまとめるのが理想的です。たとえば、販売業務用のシステムであれば以下のように分割します。

• 受注

• 発注

• 管理

流れの途中で他ページに移ったり、下位遷移を別のページにまとめたりすると全体像がつかみにくくなります。補足したい内容が多くある場合には、別ページに移るのではなくコメントを利用するのがおすすめです。

画面遷移図の作成ツール

画面遷移図を簡単に作成できる、便利なツールもあります。ここでは、以下7つのツールを紹介します。

• Overflow（オーバーフロー）

• draw.io（ドロー）

• Prott（プロット）

• figma（フィグマ）

• Excel（エクセル）

• PowerPoint（パワーポイント）

• Lucidchart（ルシッドチャート）

Overflow（オーバーフロー）

Overflowは、Mac用の画面遷移図の作成に特化したツールです。SketchやAdobe XDなどのデザインツールからデータをインポートできるため、対応ツールで作成したデザインがある場合には作業が効率的です。

画面を結ぶ線の種類が多く線にコメントもつけられるので、見やすい画面遷移図が作成できます。

draw.io（ドロー）

draw.ioは、オンラインで画面遷移図などを作成する作図ツールです。作成したものは以下の方法で保存可能です。

• 画像

• Googleドライブ

• MicrosoftのOneDrive

• ローカルにダウンロード

図の作成に特化したツールのため機能性が高く、アイコンを選んでドラッグするだけで簡単に画面遷移図が作成できます。

Prott（プロット）

Prottはプロトタイプから画面遷移図を作成するツールです。0からの作成ではなく、作成済みのプロトタイプを元に画面遷移図を作る際に役立ちます。​​

画面遷移図の作成には有料のproプランの登録が必要です。

figma（フィグマ）

figmaはオンライン上で利用できるデザインツールサービスで、アカウント作成をすれば無料で利用できます。図形の作成方法は、PowerPointと同様です。

図形とアイコンと文字を管理するシステムに優れており、見やすい画面遷移図の作成に適しています。

Excel（エクセル）

Excelは使い慣れている人が多いため、他の書類とあわせて画面遷移図の作成にも使用される場合があります。簡易な図形しか使用しない画面遷移図の場合は、Excelでも十分に作成できます。

Excelのデメリットは、線を引く作業が面倒な点です。また、ボタンなどのアクションを作るのも難易度が高く、効率性はあまり良くありません。

PowerPoint（パワーポイント）

PowerPointもExcelと同様、他の書類を作成するのに慣れている人が多い点はメリットです。画面遷移図をプレゼンで使用する場合は、PowerPointで作成すればそのまま利用できます。

画像作成の際の自由度はExcelより高い点もPowerPointの特徴です。

Keynote（キーノート）

PowerPointに似たツールとして、Mac用のKeynoteも使用できます。KeynoteもPowerPointと同様、プレゼン用に使われることが多いツールです。

図形のバリエーションが多いのが特徴で、PowerPointよりもスタイリッシュなビジュアルの図が作成できます。

Lucidchart（ルシッドチャート）

Lucidchartは、クラウドベースの資料作成プラットフォームです。すべてのデバイスに対応しており、直感的なインターフェースで図が作成できます。画面遷移図のテンプレートも用意されており、簡単に画面デザイン作成が可能です。

TechUnit（テックユニット）は、月額制で開発支援を行うサービスです。

• ✔ 開発が進まない
• ✔ 要件が決まっていないので柔軟に進めたい
• ✔ 今依頼している開発会社に不満がある

費用が発生しないご相談の段階で、コンサルティングを行い、プロジェクト毎に最適なチームをご提案しております。

プランに応じて柔軟な開発体制を構築いたします。もちろん、開発状況に応じたメンバーの増減も可能です。

無料相談も承っております。まずはお気軽にお問い合わせください！

お問い合わせはこちら

システムの開発ならNOVELへ

画面遷移図とは、Webサイトやシステム開発の際に全体像を掴むために作成する図です。画面遷移図を作成するなら、チーム全体でサービスの全体像を共有し、開発に当たって漏れや抜け落ちを防止できます。画面遷移図は1つの業務を1枚にまとめ、見やすいものを作ることがポイントです。

システム開発に取り掛かる前に、全体のイメージや構造を明確化し、チーム全体で共有することは欠かせません。

当社では経験豊富なエンジニアがチームに加わり、成功確度の高い立ち上げをサポートする月額制アジャイル開発を提供します。開発の技術面だけでなく、運用面のアドバイスも可能です。新規のシステム開発をご検討中でしたら、ぜひお気軽にお問合せください。

▌【一緒に働くメンバー募集】生成AIを活用し、顧客の課題解決をしませんか？

最後までお読みいただき、ありがとうございます。

NOVEL株式会社では、生成AIを活用して企業の業務改善や新規プロダクト開発を支援しています。

私たちは「現場に眠るデータをつなぎ人とAIが協働する社会を創る」というビジョンのもと、非IT業界が抱える複雑な課題に日々向き合っています。

もしあなたが、

• 新しい技術の可能性にワクワクする方

• 困難な課題解決を楽しめる方

• 自分の手で「0から1」を創り出す経験をしたい方

であれば、私たちのチームで大きなやりがいを感じていただけるはずです。 まずは、私たちがどんな未来を描いているのか、採用ページで少し覗いてみませんか？

▶ 募集中のポジションを確認する