画面遷移図は、システムの設計やプレゼンテーションで使われ、画面がどのように遷移するか確認するために重要な図です。
作成するだけであれば簡単にできますが、わかりやすく全体を管理したり、変更が生じた際に簡単に修正できることが求められます。今回は、わかりやすい画面遷移図の書き方と、簡単に作成・修正ができるツールを紹介します。
画面遷移図とは：画面の流れを描いた図表
画面遷移図は、Webサイトやアプリケーションの画面の流れを描いた図表です。画面遷移図を作るタイミングは、要件定義の段階もしくは、基本設計の作成時です。
筆者も簡単なアプリを作るときでも、記事を内部リンクするときでも、すぐに画面遷移図をつくります。図で画面の移動を表現すれば、実際に作成を始める前に、設計の不備を知ることができるようになるのでおススメです。
画面遷移図で以下のような目的を達成することができます。
画面遷移の全体像の把握
顧客や製造者への説明資料
サポートやマニュアル作成の資料
わかりやすい画面遷移図の書き方
画面遷移図は、構成案を考える段階では、どのようなツールを用いてもかまいません。ホワイトボードやメモ用紙に手書きの方がむしろ柔軟な発想ができるでしょう。
通常は、最終的にエクセルなどのツールを使用しますが、画面遷移図を書く方法のそれぞれのメリット、デメリットは以下のようなものです。
手書き
画面遷移図を作成する一番初期の段階では、手書きが一番早く簡単です。頭で考えたことを直にアウトプットするには、ツールを使うとどうしてもワンクッションが入ってしまいます。
どんな画面が必要なのか、どのようなアクションで遷移させるかという基本的なことが固まっていない段階では、すぐに修正ができる手書きでアウトラインを作った方が圧倒的に効率がいいです。
ある程度手書きで図ができた段階でツールやソフトの利用を考えましょう。
エクセル
画面遷移図を作るときは、普段から使い慣れたエクセルを使うとキレイな図を描けます。
また、要件定義や基本設計書を作成するときに、エクセルで統一する方が何かと便利です。簡易な図形しか使わない画面遷移図やエクセルの操作に慣れていれば、誰でも使えるエクセルで、さっと書くのが早いです。
ただし、エクセルの場合は、移動の線を引くのが面倒なので修正が多い場合には効率が悪くなります。画面のボタンや特別な機能をエクセルの図形で作るのは結構難しいです。
・企業なら多くの人がもっているソフトなので配布が容易
・複雑な画像を作成しにくい
パワーポイント
プレゼンテーションで使用するなら、パワーポイントで画面遷移図を作成すると非常に便利です。多くの企業でパワーポイントがインストールされているので、使い慣れている人が多く、コスト面でも負担が少ないです。
ただし、エクセルも十分に画面遷移図が作成できます。そのため、画面遷移図の作成が主目的であれば、わざわざパワーポイントを利用する必要はないでしょう。
・画像の作成や自由度はエクセルよりも高い
・エクセルよりインストールされている数が少ない
Webサービス
draw.ioやcacooなどの作図専用のWebサービスを利用すると、洗練された画面遷移図を手軽に作成できます。モックアップ作成と画面遷移図の作成が一緒にできるサービスも存在するため、単純な図形だけの遷移図よりも、より直感的に理解しやすい図が描けます。
ただし、ツールにはいくつかのデメリットもあります。操作自体は直観的で簡単ですが、初めて使用する場合には操作方法を学ぶ必要があります。また、サービスによっては利用料金が発生する場合もあります。
・専用のツールなので修正が用意
・ワイヤーフレームと同時に作成できる
・ツールによっては月額費用がかかる場合がある
・設計書の作成ツールがバラバラになる場合がある
わかりやすい画面遷移図の作成テクニック
以下では、わかりやすく効率的な画面遷移図を作成するためのポイントをご紹介します。
用紙サイズの工夫で見やすさを追求
画面遷移図が多くなると、A4用紙1枚に収めきれなくなることがあります。しかし、サービス全体の画面の流れを一覧で確認したい場合が多いため、A3用紙を使用するか、各画面を小さくして1枚にまとめる工夫が必要です。
画面の流れを左から右に整理
初心者の作成者が陥りがちなのは、メイン画面を中央に配置し、そこから放射状に画面遷移を描くスタイルです。画面の流れを一目で把握するためには、左から右、または上から下に画面が移動する形式が理解しやすいです。ただし、アプリやシステムの流れが複雑な場合、このルールが必ずしも適用できないこともあります。
画面名と条件を直感的に理解できるように
「画面1」や「LoginMenu」のような実装に近い名称は、製造段階では便利ですが、説明資料としては読みにくくなります。例えば、「顧客一覧」や「顧客情報詳細」のように、機能を直訳した日本語の名称を使用すると、後で確認する際にも見やすくなります。
権限別に画面遷移図を分類
ユーザーと管理者で画面遷移が異なる場合は、すべてを1枚の図にまとめると、非常に複雑で見づらくなります。権限ごとに遷移図を作成することで、見やすさと理解しやすさが向上します。
画面遷移図におススメのツール
画面遷移図を直観的に書けるおすすめのツールをいくつか紹介します。各ツールごとに特徴がありますので、自分に合いそうなツールを選んで試してみてください。
Cacoo
Cacooは、ブラウザ上で使用できるオンラインのドローツールです。draw.ioとできることはほとんど同じですが、保存できる先や使い勝手が多少違うのでこの辺は好みで決めていいでしょう。
Cacooの方が、保存先の種類は少ないですが、ワイヤーフレーム用のパーツが多いので、単なる図形の画面遷移図よりわかりやすい図を描くことができます。
draw.io
「draw.io」は、オンラインで簡単にフローチャートや画面遷移図などを作成できる作図ツールです。作成した図は、画像やPDFファイルでGoogleドライブやMicrosoftのOneDriveなどに保存したりローカルにダウンロードすることもできます。
エクセルやパワーポイントとの違いは、図の作成に特化しているところです。専用のアイコンが豊富にあるため、選んでドラッグするだけで簡単に画面遷移図を描くことができます。
prott
prottoは、Webサイトやスマホアプリなどのワイヤーデザインを簡単に作るためのオンラインツールです。
無料版もありますが、１ユーザー１プロジェクトしか使えない上に画面遷移図は有料のproプラン以上でしか使用できません。
prottは、画面遷移図用のツールというよりワイヤーフレームを作るツールなので簡易で全体の概要をみるというよりは、しっかりと作り込んだプロトタイプで画面遷移の詳細を作るというイメージに近いです。
Overflow
「Overflow」はMac用の画面遷移図作成ツールで現在のところはWindowsでは使えません。AdobeXDやFigma、Sketchなどのデザイン系アプリと連携することもできるので、よりビジュアル性に優れた画面遷移図を描くことができます。
Overflowは、モックアップの画面から遷移図を描くことができるので完成がイメージしやすいです、さらに、画面と画面を結ぶ線の種類が多い上に線にコメントをつけることができるのでサクサクと遷移図を描くことができます。
ただし、無料で使用できるのは1ヶ月だけでその後は有料なので、使い勝手がよいと感じる場合は続けて使うのがいいでしょう。
Visio
WindowsだとMicrosoftのVisioが有名です。Visioには画面遷移図のステンシルや、テンプレートがあるので簡単に作成することができます。
簡易的な図の画面遷移図を作成することも、Webサイトやスマホアプリのワイヤーフレームを作成して画面遷移図を作成することもできます。
まとめ
今回は、わかりやすい画面遷移図を書く方法やコツ、画面遷移図を書くときに使うさまざまなツールについて紹介しました。
画面遷移図は、キレイに書くことが目的ではなく、受け取った人がわかりやすいと思ってもらえるように描くことが大切です。今回紹介した書き方のコツや作成に便利なツールを利用してわかりやすい画面遷移図を作成してください。
