画面遷移図を作るよ

やっと本格的にアプリを作っていきますよ

前回から、少し時間が経ってしまいましたが、ようやくアプリ開発らしいことをやっていこうと思います。

機能は決まったので、次は「画面遷移図」と言うものを作ります。

「画面遷移図」とはアプリの操作の流れを見える形にしたものです。

書き方はこんな感じ。

どうやって考えていくかというと、必要な機能を画面単位で分けていきます。後は、画面を順番に並べていって矢印でつなぎます。

行ったり来たりするものや、いろんな画面から呼ばれるものもあるので、思いつくまま矢印を書いていきます。

どういった操作で画面を移動するのかもメモっておくと良いかも。

書いている段階で順番を入れ替えたり、画面構成自体を変えたりすることもあるので、何回も書きなおしたりします。ポストイットを使えば良いのでは、と今気づきました。。。

必要な画面を並べたら、どれをTOP画面（起動して最初に表示する画面）にするか考えます。

一般的には、一番使用する機能をTOPに持って来ることが多いです。twitterやfacebookならタイムライン、フリマやオークションアプリなら商品閲覧画面、などです。

で、今回のアプリで最初に表示すべきは、絵本を選ぶ画面（本棚）でしょう。

次に、絵本を普通に読む画面、塗り絵をする画面がメイン機能ですよね。なので、HOME画面からすぐに移動できるようにします。

塗り絵は保存したり、SNSに投稿したり

各種設定をする設定画面や案内画面（するのでその画面も必要です。関連アプリや作者紹介など）も欲しいところです。

画面ではないですが、チュートリアルも欲しいですね。

SNSのログイン設定画面もいるのかな？

で、考えた結果がこちら。結局、一回作った後に何度か修正しました。

そんなもんですよね！

画面遷移図を描くツールを探す旅に出る。

画面遷移図を作るのに便利なツールがないか探していたら、面白いツールを見つけました！

-> もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った

この記事からリンクされているこちらからダウンロードします。

macの場合はguiflow-darwin.zipをダウンロードしましょう。

マークアップ方式と言って、あるルールに則ってテキストを記述していきます。

そうすると、ほら素敵！簡単に画面遷移図がかけちゃいます。見た目？このくらい整ってたら十分でしょう。何よりもメンテナンス性が最高に良いです。

よくある、エクセルやワードで作ったものに比べると、格段に修正しやすいですね！

実際に使ってみて、出来上がるスピード感が全然違いました。今まではエクセルとかパワーポイントとかで作っていたんですが、それがバカバカしくなるくらいスピーディーに作れます。

マークアップだと難しいと感じる人もいるかもしれませんが、即座に図を表示してくれるので、ビジュアル的に確認しながら書くことができますね！

保存するファイルはテキストデータなので、gitなどのバージョン管理ツールで管理しておくことも可能です。文書のバージョン管理って地味に面倒なんですよね。なんて素敵。

とは言え、いきなりこのツールに向かうのはお勧めしません。まずは手書きで良いのでアウトラインを作りましょう。

頭で考えていることを、ダイレクトに出力するには手で書くのが一番みたいですね。

このブログを書きながら、ツールが見つからなくて途方に暮れていたのですが、最後の最後に良いツールに出会えてよかったです。