はじめに
この記事は、アプリケーション開発におけるUI設計の、画面遷移図について個人的に考察したものです。画面遷移図を作る上で、現状どのような選択肢があるかをまとめています。正直調べ足りないところも多々ありますので、内容が偏っていたり間違ってる可能性があります。参考にする場合はご注意ください。
画面遷移図の役割
画面遷移図とは、画面とその移り変わりを図にしたものです。画面同士を矢印などでつなぎ、矢印の方向に画面が遷移することを表したりします。
最近はUI設計の成果物として、実際に画面遷移の操作をできるモックアップの開発も盛んになっています。しかし、それはそれで良いものですが、画面とその相互関係を一覧できる画面遷移図は、また別な価値のある資料です。画面遷移図を作ること、そして作り方を検討して改善していくことは、アプリケーションの設計において重要ではないかと思います。
画面遷移図の種類
画面遷移図と呼ばれる図の種類について整理したいと思います。
正式名称なし（自己流）
特に明確な記述ルールを適用せず、開発者が自己流で作った画面遷移図です。当然、開発者や企業によって細部は異なります。簡単な図なら、あえて細かいルールを作らずとも描けるので、慣習的に過去の画面遷移図を参考に作られていくことも多いでしょう。基本的には、四角形の枠に画面の名前を書き、それを矢印で繋いだ形式が一般的かなと思います。また、遷移するときのイベントなどが矢印に記述されることもあります。
UML2.0 状態遷移図
UML2.0の状態遷移図は、画面遷移図としても用いることができます。状態遷移図はその名の通り状態の移り変わりを図にしたもので、書き方にある程度の規則があります。通常は「プログラムの状態」の移り変わりを表すのに使われますが、「画面の状態」の移り変わりを表すことにも使用できます。
UI Flows
画面とそこで起こる画面遷移のイベントを記述して、イベントから他の画面への矢印を描く手法です。37signalsが考案した技法で、あまりメジャーではないと思いますが、個人的には気に入っています。単に矢印だけで画面遷移を表したりすると、どのようなきっかけで遷移するのかがわからなくなり、画面の機能をイメージしにくいです。UI Flowsで画面とイベントをセットで記述することにより、画面で何が起きるのかがイメージしやすくなります。
参考サイト
画面遷移図を描くツール
画面遷移図をPC上で描くために使うツールを紹介します。大きく分けて、レイアウトを手動で調整するものと、自動で調整するものがあります。
レイアウトを手動で調整するタイプのツール
マウスを使い要素を配置していくタイプのツールを紹介します。レイアウトを自由に調整できるので、がんばれば綺麗な図を作れる反面、調整作業に手間がかかるります。
Excel
Excelで図形を挿入して画面遷移図を作ることができます。機能的には十分ですが、もともと表計算ソフトなので、使い勝手は微妙なところがあります。
PowerPoint
Excelと同じく。まだExcelのほうが使いやすい気がします。アニメーションがほしいならモックアップ開発専用のツールを使ったほうが良いでしょう。
astah
株式会社チェンジビジョンが販売しているUMLモデリングツールです。UML全般（＋α）を記述できます。機能が多い反面、編集が煩雑になりがちなのが難点かと思います。様々なエディションが販売されていますが、状態遷移図（ステートマシン図）は無償版でも利用できます。
参考サイト
draw.io
図形作成を行えるアプリです。Googleドライブ上でそのまま使うこともできます。比較的使いやすく機能も充実していると思います。
参考サイト
レイアウトを自動で調整するタイプのツール
一定のルールに従って図の定義を記述することで、そこから図の画像を自動生成するツールを紹介します。レイアウトの調整を自動で行うため楽ですが、細かい調整が行いにくいのが難点です。マウス操作に比べて難しいと思われるかもしれませんが、基本的には非常に簡単な書き方で定義できるので、難易度は高くありません。
Graphviz
DOT言語というスクリプトでグラフの内容を記述してビルドすると、グラフを画像として出力してくれます。コマンドラインから実行できるので、これ単体で利用するよりは、他のツールから呼び出されることが多い印象です。
参考サイト
blockdiag
Graphvizと同様にスクリプトからグラフの画像を生成してくれるツールです。日本人の方が開発しています。
参考サイト
PlantUML
UMLを生成することのできるツールです。状態遷移図にも対応しています。
参考サイト
guiflow
UI Flowsを描画する専用のツールです。かなり最近作られたもので、まだベータ版（2016/05/31現在）と書かれている通り機能は少ないです。しかし、現状ではUI Flowsを簡単に記述できる貴重なツールです。
参考サイト
総括
個人的にはレイアウトを自動調整するツールを使い、画面遷移図を記述するのが良いような気がします。理由は以下のとおり。
- レイアウトを整える手間がいらない
- 後の修正も楽
- バージョン管理しやすい
- 差分が簡単にわかる
- 非常に軽量
- 他のアプリケーションと連携しやすい
- Redmineと連携できるツールなどもある
特に画面数が多くなるほど、レイアウト調整に書ける時間が要らなくなるメリットは大きいと思います。手作業で丁寧に作ったものに比べ、見栄えでは多少劣ると思いますが、そこは割りきるしかないでしょう。美しい画面遷移図を作ることで、後工程の作業が劇的に改善するなら別ですが、別にそんなに変わらないと思います。また、専用の記述形式で図を定義しなければいけないという手間もありますが、簡単な記法なので学習コストは殆ど考えなくても良いと思います。
最終的に何がベストなのかは決められませんが、プロジェクトの管理方針も含めて色々と検討するところがありそうです。