画面遷移図とは、Webサイトやシステム開発の際にサービス全体を把握するためにまとめる図です。画面遷移図はチーム全体で共有し、全体の流れが見やすい内容にする必要があります。この記事では、画面遷移図に関する以下の点を解説します。画面遷移図（がめんせんいず）とは画面遷移図とは、Webサイトやシステム開発の際に、画面間の相互関係を理解するためにまとめる図です。画面遷移図を作成すると、サービス規模が把握しやすくなります。チームメンバーがサービスの全体像を捉えることにより、認識の相違やページの抜け落ちなどを避けられます。状態遷移図との違い画面遷移図と似ている図面に、状態遷移図（ステートマシン図）があります。状態遷移図は、状態の移り変わりを図面化したものです。状態遷移図は図形や矢印などのビジュアルを使用し、動作と結果の遷移を表現します。たとえば、事象を以下のように図面化すると分かりやすいです。起動していないパソコンの電源ボタンを押す→起動する起動しているパソコンの電源ボタンを押す→シャットダウンするシステム開発では、複雑な構造を多く含むため、状態遷移図の作成により使用の抜けや漏れを防げます。画面遷移図の書き方画面遷移図の書き方には、主に以下2つの方法があります。手書きでラフにまとめるツールで綺麗に作る手書きでラフにまとめるシステム開発の試作段階では、画面遷移図は手書きのラフなものであっても構いません。ほとんどの場合、画面遷移図は繰り返し書き直し、ブラッシュアップしていく必要があります。そのため、形式にこだわらず紙とペンで直感的に書き出すほうがスムーズです。初めに手書きでラフにまとめたものを、共有する段階で綺麗に作り直してもよいでしょう。ツールで綺麗に作る綺麗で見やすい画面遷移図を手軽に作れるツールもあります。画面遷移図作成に特化したツールを使用すると、直感的な操作で作成でき効率的です。他の人に共有する段階では、手書きより綺麗にまとめられた図を用意するのがおすすめです。画面遷移図をうまく作るポイント画面遷移図を見やすく作成すると、開発に携わるチームメンバー全員がより業務の全体像を掴みやすくなり効率的です。画面遷移図を作る際のポイントは、以下の3つです。列で構造をわかりやすく表現する矢印で無理につながない1枚ずつ見やすくまとめる列で構造をわかりやすく表現する画面遷移図をわかりやすくするためには、階層構造が明確である必要があります。たとえば、以下のように列を作り、階層を分けて表現できます。トップページ2階層目のページ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は、クラウドベースの資料作成プラットフォームです。すべてのデバイスに対応しており、直感的なインターフェースで図が作成できます。画面遷移図のテンプレートも用意されており、簡単に画面デザイン作成が可能です。%3Cdiv%20style%3D%22background-color%3A%20%23eee%3B%20border%3A%201px%20solid%20%23ddd%3B%20padding%3A%2020px%3B%20margin%3A%20auto%3B%22%3E%0A%3Ca%20href%3D%22https%3A%2F%2Fn-v-l.co%2Fcontact%3Futm_source%3Dblog%26utm_medium%3Dbanner%26utm_campaign%3Darticle-inside-banner%22%20target%3D%22_blank%22%20rel%3D%22noopener%22%20style%3D%22display%3A%20block%3B%20text-decoration%3A%20none%3B%22%3E%0A%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Fstorage.googleapis.com%2Fstudio-cms-assets%2Fprojects%2FmoWvdvrgq6%2Fs-2400x1000_v-frms_webp_d771ec1e-0c46-4bdc-97d1-622fc7e3da55.png%22%20alt%3D%22Job%20X%E3%83%90%E3%83%8A%E3%83%BC%22%20style%3D%22width%3A%20100%25%3B%20height%3A%20auto%3B%22%3E%0A%3C%2Fa%3E%0A%0A%20%3Cp%20style%3D%22color%3A%20%23555%3B%20line-height%3A%201.6%3B%22%3ETechUnit%EF%BC%88%E3%83%86%E3%83%83%E3%82%AF%E3%83%A6%E3%83%8B%E3%83%83%E3%83%88%EF%BC%89%E3%81%AF%E3%80%81%E6%9C%88%E9%A1%8D%E5%88%B6%E3%81%A7%E9%96%8B%E7%99%BA%E6%94%AF%E6%8F%B4%E3%82%92%E8%A1%8C%E3%81%86%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%A7%E3%81%99%E3%80%82%3C%2Fp%3E%0A%20%3Cdiv%0A%20%20%20style%3D%22margin-top%3A%2020px%3B%20padding%3A%200%3Bbackground-color%3A%20%23fff%3B%20margin-bottom%3A%2010px%3B%20padding%3A%2010px%3B%20border-radius%3A%205px%3B%20box-shadow%3A%200%202px%204px%20rgba(0%2C0%2C0%2C0.1)%3B%22%3E%0A%20%20%20%3Cul%20style%3D%22list-style%3A%20none%20!important%3B%20%22%3E%0A%20%20%20%20%20%3Cli%3E%E2%9C%94%20%3Cspan%20style%3D%22color%3A%20red%3B%22%3E%20%E9%96%8B%E7%99%BA%E3%81%8C%E9%80%B2%E3%81%BE%E3%81%AA%E3%81%84%3C%2Fspan%3E%3C%2Fli%3E%0A%20%20%3Cli%3E%E2%9C%94%20%3Cspan%20style%3D%22color%3A%20red%3B%22%3E%20%E8%A6%81%E4%BB%B6%E3%81%8C%E6%B1%BA%E3%81%BE%E3%81%A3%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%81%AE%E3%81%A7%E6%9F%94%E8%BB%9F%E3%81%AB%E9%80%B2%E3%82%81%E3%81%9F%E3%81%84%3C%2Fspan%3E%3C%2Fli%3E%0A%20%20%3Cli%3E%E2%9C%94%20%3Cspan%20style%3D%22color%3A%20red%3B%22%3E%E4%BB%8A%E4%BE%9D%E9%A0%BC%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E9%96%8B%E7%99%BA%E4%BC%9A%E7%A4%BE%E3%81%AB%E4%B8%8D%E6%BA%80%E3%81%8C%E3%81%82%E3%82%8B%0A%3C%2Fspan%3E%3C%2Fli%3E%0A%20%20%20%3C%2Ful%3E%0A%20%3C%2Fdiv%3E%0A%0A%20%3Cp%20style%3D%22color%3A%20%23555%3B%20line-height%3A%201.6%3B%22%3E%0A%20%20%20%3Cspan%20style%3D%22color%3A%20%23007bff%3B%20font-weight%3A%20bold%3B%22%3E%E8%B2%BB%E7%94%A8%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%97%E3%81%AA%E3%81%84%E3%81%94%E7%9B%B8%E8%AB%87%E3%81%AE%E6%AE%B5%E9%9A%8E%E3%81%A7%E3%80%81%E3%82%B3%E3%83%B3%E3%82%B5%E3%83%AB%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%92%E8%A1%8C%E3%81%84%E3%80%81%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%AF%8E%E3%81%AB%E6%9C%80%E9%81%A9%E3%81%AA%E3%83%81%E3%83%BC%E3%83%A0%E3%82%92%E3%81%94%E6%8F%90%E6%A1%88%E3%81%97%E3%81%A6%E3%81%8A%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%3C%2Fspan%3E%0A%20%3C%2Fp%3E%0A%3Cp%20style%3D%22color%3A%20%23555%3B%20line-height%3A%201.6%3B%22%3E%0A%E3%83%97%E3%83%A9%E3%83%B3%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6%E6%9F%94%E8%BB%9F%E3%81%AA%E9%96%8B%E7%99%BA%E4%BD%93%E5%88%B6%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%84%E3%81%9F%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%E3%82%82%E3%81%A1%E3%82%8D%E3%82%93%E3%80%81%E9%96%8B%E7%99%BA%E7%8A%B6%E6%B3%81%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%9F%E3%83%A1%E3%83%B3%E3%83%90%E3%83%BC%E3%81%AE%E5%A2%97%E6%B8%9B%E3%82%82%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%99%E3%80%82%3C%2Fp%3E%0A%0A%20%3Cp%20style%3D%22color%3A%20%23555%3B%20line-height%3A%201.6%3B%22%3E%0A%20%20%20%3Cspan%20style%3D%22color%3A%20%23007bff%3B%20font-weight%3A%20bold%3B%22%3E%E7%84%A1%E6%96%99%E7%9B%B8%E8%AB%87%E3%82%82%E6%89%BF%E3%81%A3%E3%81%A6%E3%81%8A%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%3C%2Fspan%3E%E3%81%BE%E3%81%9A%E3%81%AF%E3%81%8A%E6%B0%97%E8%BB%BD%E3%81%AB%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%EF%BC%81%3C%2Fp%3E%0A%20%3Cdiv%20style%3D%22text-align%3A%20center%3B%20margin-top%3A%2030px%3B%20margin-bottom%3A%2020px%22%3E%0A%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fn-v-l.co%2Fcontact%22%0A%20%20%20%20%20target%3D%22_blank%22%20rel%3D%22noopener%22%0A%20%20%20%20%20style%3D%22display%3A%20block%3B%20background-color%3A%20%23ff9d00%3B%20color%3A%20white%3B%20padding%3A%2020px%2020px%3B%20text-decoration%3A%20none%3B%20border-radius%3A%205px%3B%20border%3A%201px%20solid%20%23d67c00%3B%20box-shadow%3A%203px%203px%205px%200px%20rgba(0%2C0%2C0%2C0.3)%3Bwidth%3A50%25%3Bmargin%3A%20auto%3B%22%3E%0A%20%20%20%20%20%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%20%20%20%3C%2Fa%3E%0A%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3Eシステムの開発ならNOVELへ画面遷移図とは、Webサイトやシステム開発の際に全体像を掴むために作成する図です。画面遷移図を作成するなら、チーム全体でサービスの全体像を共有し、開発に当たって漏れや抜け落ちを防止できます。画面遷移図は1つの業務を1枚にまとめ、見やすいものを作ることがポイントです。システム開発に取り掛かる前に、全体のイメージや構造を明確化し、チーム全体で共有することは欠かせません。当社では経験豊富なエンジニアがチームに加わり、成功確度の高い立ち上げをサポートする月額制アジャイル開発を提供します。開発の技術面だけでなく、運用面のアドバイスも可能です。新規のシステム開発をご検討中でしたら、ぜひお気軽にお問合せください。