guiflowはマークダウンのような文法で、テキストを打てば、自動で遷移図を作成してくれます。
画面遷移のことだけ考えたいのに、ついつい見た目も調整して時間をかけてしまいがちなのを解消してくれます。
タップできるもくじ
CGブロガー
すいみん
Suimin
某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。
書籍：Unity デザイナーズ・バイブル
プロフィール詳細はこちら
guiflowの導入方法
Release 暫定動作確認版 · hirokidaichi/guiflow · GitHub
こちらからダウンロード。
Windowsならguiflow-win32.zipをダウンロードして解凍、guiflow.exeを起動するだけです。
guiflowの使い方
図の構成
まず、UI Flowsという考え方で図を作成していきます。
- 画面名
- 表示（ユーザーが見るもの）
- 行動（ユーザーがすること）
3つの情報で構成
画面名入力
[]でくくりるとその画面名の図が作成されます。
[スプラッシュ]
つなぎ方
==>でつなぎたい画面名を入れると矢印が生成されます。
※Windowsだけかもしれませんが、==>が複数記述されたものをコピペで入力すると、繋がらないことがありますので、
試しに使う場合も、手入力で打ってソフトを確認することを推奨します。
区切り
表示するものは–で区切り、
その下に行動するもの、たとえばボタン名など入力します。
[画面名] +トップ絵 - TAP TO START ==>ホーム画面
図の保存
右上の下矢印ボタンを押します。
感想
シンプルなソフトですが、情報を整理するときに非常に便利だと思います
参考 もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita取得できませんでした【flowchart】フローチャートでUI遷移図を作成する方法
プログラムの設計のフローチャート（flowchart.js）にURLリンク先に飛ばすことができる機能がついているので、UIの遷移図にも使えないか試してみました。
結果は無理やり、やりたい条件を満たせたという感じです。
かんたんMarkdown
Markdownエディタ「かんたんMarkdown」でフローチャート（flowchart.js）が使えるので、そちらで作成しています。
スプラッシュ=>start: スプラッシュ:>https://www.cg-method.com/[blank] ホーム=>end: ホーム:>https://www.cg-method.com/[blank] トップ=>condition: トップ:>https://www.cg-method.com/[blank] データ引き継ぎ=>condition: データ引き継ぎ:>https://www.cg-method.com/[blank] データ引き継ぎ確認=>condition: データ引き継ぎ確認:>https://www.cg-method.com/[blank] キャッシュクリア=>condition: キャッシュクリア:>https://www.cg-method.com/[blank] キャッシュクリア確認=>condition: キャッシュクリア確認:>https://www.cg-method.com/[blank] 規約の同意=>condition: 規約の同意:>https://www.cg-method.com/[blank] 利用規約=>condition: 利用規約:>https://www.cg-method.com/[blank] プライバシーポリシー=>condition: プライバシーポリシー:>https://www.cg-method.com/[blank] 名前登録=>condition: 名前登録:>https://www.cg-method.com/[blank] 入力エラー=>condition: 入力エラー:>https://www.cg-method.com/[blank] 名前確認=>operation: 名前確認:>https://www.cg-method.com/[blank] ダウンロード確認=>operation: ダウンロード確認:>https://www.cg-method.com/[blank] ダウンロード中=>operation: ダウンロード中:>https://www.cg-method.com/[blank] チュートリアル=>operation: チュートリアル:>https://www.cg-method.com/[blank] スプラッシュ->トップ(yes)->規約の同意-> トップ(no)->データ引き継ぎ(no)->キャッシュクリア(no) データ引き継ぎ(yes)->データ引き継ぎ確認 キャッシュクリア(yes)->キャッシュクリア確認 規約の同意(yes)->名前登録(yes)->名前確認->ダウンロード確認->ダウンロード中->チュートリアル->ホーム 規約の同意(no)->利用規約(no)->プライバシーポリシー(no) 名前登録(no)->入力エラー
横バージョン
流れの向きを指定すると横型にもできます
スプラッシュ(right)->トップ(yes,right)->規約の同意-> トップ(no)->データ引き継ぎ(no,under)->キャッシュクリア(no) データ引き継ぎ(yes,right)->データ引き継ぎ確認 キャッシュクリア(yes,right)->キャッシュクリア確認(right) 規約の同意(yes,right)->名前登録(yes,right)->名前確認(right)->ダウンロード確認(right)->ダウンロード中(right)->チュートリアル(right)->ホーム 規約の同意(no)->利用規約(no)->プライバシーポリシー(no) 名前登録(no)->入力エラー
カスタマイズ
表示領域(CSS)
.previewMode #previewer {
width: 980px;
}
.previewMode #previewer {
width: 1920px;
}
下線追加(CSS)
text {
text-decoration: underline;
}
文字・ベース色調整(HTML)
"font-color":"black",
↓
"font-color":"blue",
fill:"white",
↓
fill:"yellow",
余計な文字の削除(HTML)
"yes-text":"yes","no-text":"no",
"yes-text":"","no-text":"",
