読者です 読者をやめる 読者になる 読者になる

CGメソッド

CG制作に関してのヒント

MENU

【guiflow】画面遷移図の作成方法

guiflowはマークダウンのような文法で、テキストを打てば、自動で遷移図を作成してくれます。

画面遷移のことだけ考えたいのに、ついつい見た目も調整して時間をかけてしまいがちなのを解消してくれます。

guiflowの導入方法

Release 暫定動作確認版 · hirokidaichi/guiflow · GitHub

こちらからダウンロード。

Windowsならguiflow-win32.zipをダウンロードして解凍、guiflow.exeを起動するだけです。

guiflowの使い方

図の構成

まず、UI Flowsという考え方で図を作成していきます。

  • 画面名
  • 表示(ユーザーが見るもの)
  • 行動(ユーザーがすること)

3つの情報で構成

画面名入力

[]でくくりるとその画面名の図が作成されます。

[スプラッシュ]

つなぎ方

==>でつなぎたい画面名を入れると矢印が生成されます。

f:id:min0124:20170209081452p:plain

※Windowsだけかもしれませんが、==>が複数記述されたものをコピペで入力すると、繋がらないことがありますので、

試しに使う場合も、手入力で打ってソフトを確認することを推奨します。

区切り

表示するものは-で区切り、

その下に行動するもの、たとえばボタン名など入力します。

[画面名]
+トップ絵
-

TAP TO START
==>ホーム画面

図の保存

右上の下矢印ボタンを押します。

感想

f:id:min0124:20170209084646p:plain

シンプルなソフトですが、情報を整理するときに非常に便利だと思います

参考

qiita.com