この記事はTech-Circle Hands on Advent Calendar 2016の1日目の記事です。
経緯
7月ごろにモバイルアプリの画面設計をすることになりました。
これまでずっとインフラ関連の開発をしていたので、GUIがあるソフトウェアの設計経験もなくどうしようかという感じに。とりあえずパワポで画面イメージを作ってみたものの、PC画面とモバイルでは印象は違うし、操作感も分からないのでイマイチでした。
そこで、いい感じのツールないかなーと思って調べて見ると、そのものズバリ、プロトタイピングツールなるのものがあるではないか。試しに使ってみたところ、実機で操作できるインタラクティブなプロトタイプが簡単に作れて感動したので、紹介したいと思います。
ペーパープロトタイプのツール
プロトタイピングツールは色々あるのですが、フリープランで利用できるPrott、Pop、CanvasFlipあたりを試しました。中でも、Prottは日本語の丁寧な解説があるので、最初に使ってみるのに良いと思います。また、CanvasFlipは、後発なだけあり、機能が充実しています。これらは（権利関係が心配になるぐらい）インターフェースが似ているので、一度覚えれば他のツールに乗り換えるのは難しくないと思います。
パワポとCanvasFlipでつくるじゃんけんゲーム
今回はCanvasFlipと（Sketchを使いこなせなかったので）PowerPointをつかって、じゃんけんゲームを作ってみます。
パワポでスクリーンをつくる
まずはアプリ画面（スクリーン）の画像をパワポでつくります。
今回は縦向け画面にするため、パワポのページ設定で縦向け16:9のレイアウトに変更します。
ページ設定を変更したら、背景を変えたりボタンを配置したりして、スライドでアプリ画面をつくっていきます。最近のアプリとはとても思えない、レガシーなデザインの画面ができあがりました。
スライドの作成が完了したら、[ファイル]-[エクスポート]から、PNG形式を選択して出力します。スライドが個別のPNG画像として保存されます。
ボタンをタップした際にオーバレイ表示させる画像も用意しておきます。パワポではオブジェクトを選択して[図として保存]することで、透過PNG画像として保存できます。
CanvasFlipのプロジェクト作成
CanvasFlipにログインして、[My Account]の[Create Project]から新規にプロジェクトを作成します。名前は適当に入力し、「Android Phone（1920x1080）」の縦向け（Portrait）レイアウトにしておきます
画面遷移の設定
プロジェクトを作成したら、画像出力したスライドをスクリーンとして取り込み、画面遷移の設定をしていきます。CanvasFlipでは画面遷移の方法として、「指定個所のタップ、スワイプ」と「タイマーによる自動遷移」が設定できます。
タップ・スワイプ
下の図では、スタートボタンをタップすると次のスクリーンに遷移する設定を行なっています。タップする範囲を指定して遷移先のスクリーンを指定します。
タイマー
下の図はタイマーによる画面遷移を設定しているところです。スクリーンが表示されてから指定秒数が経過すると、自動で次のスクリーンに切り替わります。
レイヤー
タップ・スワイプの場合は、画面遷移の他にオーバレイ表示の設定が可能です。遷移先としてレイヤータブに登録した画像を指定すると、現在のスクリーンに重ねて画像が表示されます。下の図では、説明ボタンをおすと説明文がオーバレイ表示されるよう設定しています。
画面遷移の確認
Interaction Mapという機能で、どのスクリーンからどのスクリーンに遷移するのか、プロジェクト全体の画面遷移を確認することができます。この記事を書いている時点では、タイマーによる遷移が反映されていないので、今後の改善に期待です。
プロトタイプの公開
画面遷移を設定したら、プレビューで実際に動作を確認することができます。プレビューはブラウザかCanvasFlipのアプリから確認できます。
プレビューは、シェア用のQRコードかURLを配布して公開することができます。プロジェクトの初期設定ではCanvasFlipへのログインが要求されるので、以下のようにログイン不要の設定にしておくと試しやすくなります。
プロトタイプの公開は終了しました。
今回作成したプロトタイプは以下のURL、QRコードから試せます。
https://www.canvasflip.com/protected/app/playback.php?project=13587
アプリのデザインはともかく、実際にじゃんけんを楽しむことができます。
（この程度のアプリならもう実装いらないんじゃないかと思うぐらいです。）
今回、ヘッダとフッタの部分を考慮していなかったので、スマホだとスクリーンの上下が切れて少し残念な感じになってしまいました。
まとめ
この記事では、パワポとCanvasFlipを使って、モバイルアプリのプロトタイプを作成する方法を紹介しました。
プロトタイプ自体はスクリーン画像を切り替えているだけなのですが、インタラクティブなプロトタイプを実機で試せることに大きな意味があると思います。画面のデザインについて具体的に議論できることはもちろん、関係者への早期のプレゼンで大いに役立ってくれました。
モバイルアプリの開発現場では普通に行われていることかもしれませんが、このスピード感に衝撃を受けた1年でした。