guiflowで書くUI Flowsによる画面遷移図の書き方と管理方法

• 動機と背景
• guiflowとは
• UI Flowsとは
• guiflowのインストール
• guiflowの使い方
• gitlabで管理

動機と背景

　今回久しぶりに新規プロジェクトの立ち上げに入り、様々な管理ツールや言語、フレームワーク等全て自由に選んで良いよと言われたので、フェーズ毎にいろいろ調べながら環境を整えている。
　画面遷移図を書くフェーズでメンテのしやすいツールを探したら、マークダウン式で書けるguiflowというツールがあったので使ってみた。

guiflowとは

　マークダウン式の記述でUI FLowsを出力してくれるツール。
Win, Mac, Linux で使えるらしい。(Macでのみ動作確認済み)

UI Flowsとは

• 画面名
• 画面パーツ
• 画面遷移するユーザーの行動
  　だけを一つのブロックに記述し、画面遷移するユーザーの行動から矢印を引っ張って画面遷移図を作っていく方法。
  細かくはこちらとgitflowの使い方の項に書かれた例を参考に。
  http://www.standardinc.jp/reflection/article/ui-flows/
  具体的なデザインは判らないが、デザイン依頼前に作成し、後からデザインと紐付けるのが有効な使い方だと思う。
  

guiflowのインストール

　UI Flowsを使う際にguiflowというツールを使うと、マークダウン式の記述で図を自動生成してくれる。
Macでしか確認していないが、Windowsやlinuxでも動くらしい。
Mac版はこちらからguiflow-darwin.zipをダウンロードする。
https://github.com/hirokidaichi/guiflow/releases/tag/v_0.1.1

guiflowの使い方

　書き方はここに書いてあるが、他に使いやすいよう以下のルールを追加
https://qiita.com/nobb_hero/items/24a8ace5137efed26061

• パーツ名の頭には「・」をつける(パーツは上から二番目の枠の中としか図では判らないので区別するため)
• 同じ遷移先の場合「==>」を一つにまとめる(2つ同じ遷移先がある場合、ユーザーの行動を2行並べてから「==>」でまとめて遷移先を書く)
• 同じパーツを使った別のアクションの場合(タップと長押しなど)は「パーツ名(ユーザーの行動)と記載する
• リロードやAjax的な画面遷移のないアクションは記載しない

例)  
[メイン画面]  
・メイン画面文言  
・Aボタン  
・Bボタン  
-  
Aボタン(タップ)  
Aボタン(長押し)  
==> サブ画面  

[サブ画面]  
・サブ画面文言  
・戻るボタン  
-  
戻るボタン  
==> メイン画面  

↑の場合、
メイン画面
* パーツはメイン画面文言、Aボタン、Bボタンの3つ
* Aボタンはタップと長押しでサブ画面に遷移(記載は無いが、内部処理が違うはず)
* Bボタンは記載が無いので遷移無し(リロードとかかな？と推測)

サブ画面
* パーツはサブ画面文言と戻るボタンの2つ
* 戻るボタンをタップするとメイン画面に戻る(記載が無い場合はデフォルトの行動をしたとする)

となり、guiflowで書くと、こうなる

　例では判らないが、ページ数が増えてくると必然的にやじるしの数がすごく増える。
追加ルールはその見づらくしている主な原因となるやじるしを減らすためのルールとなる。

gitlabで管理

　手動管理です。ごめんなさい。
作った画像をgitlabに載せるには、右上のダウンロードアイコンを押すとクリップボードにコピーされるので、gitlabのwikiに直接ペーストすると、gitlabがうまい具合にアップロードファイルに変換してはり付けられる。
　あとは、これを出力するテキストをgitの専用レポジトリにファイルとして用意しておけばOK。
　マークダウン式のテキストで図が出力できるのがとても簡単。
欲を言えばguiflowがwebサービスであればもっと良かったが、昔みたいにエクセルで書くのより遙かに楽なので満足している。