加藤 雄亮 加藤 雄亮
システム開発


誰でも分かる!画面遷移図の書き方!

誰でも分かる!画面遷移図の書き方!

こんにちは、営業と進行管理を担当している加藤です。

今回は、Webサイトやシステム開発に必要な画面遷移図の書き方についてエントリーします。

画面遷移図とは

WebサイトやWebシステムが実現する画面の流れを表す図表です。業務の流れやシステムの一連の操作に沿って、画面の位置付けと流れをフロー図形式で
表現します。画面設計を行う際に必ず必要になる成果物です。

構成要素

画面遷移図の構成要素は、詳細に行うと多くの要素が必要になってしまうのですが、最低限記述しておいた方が良いポイントをお教えします。

  • 画面ID/画面名
    画面を一意に識別する識別子です。画面一覧や画面レイアウトなどの照合に利用します
  • 遷移矢線
    画面の順序関係を矢線で記述します。交錯しないように配置します
  • ボタン名(イベント)
    画面遷移を起こすトリガーを記述します。通常であれば、ボタン名を記述しておけば、ボタンを押した際に画面遷移をすることが分かります
  • アクション(データの発生やメール配信など)
    画面遷移にともなって起動される動作を記述します。データ登録やメール配信のアクションを記述しておくと、アクションによって何が起こるのか分かりやすいです

厳密には条件分岐なども必要になるケースもありますが、ほとんどの場合、上記くらいの要素で構成した方がすっきりとわかりやすいフロー図が記述できると思います。

記述してみましょう!

私は、Web上のドローツールである Cacoo(カクー)を利用して画面遷移図を書いています。画面遷移図に必要なパーツも揃っていますので、オススメです。

Cacoo

画面遷移図

この図では、全体の画面遷移図を記述していますが、システム規模が大きい場合には、サブシステム単位、機能単位で詳細な画面遷移図を記述することになります。

記述するコツは、複雑にしないこと!です。自分しか分からないものを作成しても他人は理解できません。誰にでも分かりやすいドキュメント作成を行うことが、お客様との合意を得るポイントではないでしょうか。

この記事を書いた人
加藤 雄亮

システムチームのまとめ役。個性豊かなメンバーをまとめつつ、ITをビジネスに役立てるため日々奮闘中。最近ベトナム語修行中です!

札幌市中央区北3条西26丁目3-8 N2ビル3F 〒064-0823 TEL:011-640-5437 FAX:011-640-5434
東京都港区六本木4丁目2-35 アーバンスタイル六本木三河台2F 〒106-0032 TEL:03-5772-1414 FAX:03-5772-1404
NADIA BANGKOK / 240 soi 52 Romklao Road Ladkrabang Bangkok 10520 Thailand
NADIA HANOI / 5F, SIMCO Bld., 28 Pham Hung, Ha Noi, Viet Nam
PAGETOP
ナディアFacebookページ株式会社ナディア|Nations Media Design Nadia
PAGE TOP ↑