第2回 プロトタイプを使ってデザインしよう！
前回（第１回 CORDOVA開発環境紹介）に続いて、実際に経路探索アプリを作成してく前に、今や当たり前となりつつあるプロトタイプを使ったアプリのデザイン（プロトタイピング）を行っていきます！
今回のプロトタイピングの目的は「欲しいアプリを具体化すること」です。プロトタイピングを支援するツールはたくさんありますが、今回は「Prott（プロット）」を使いたいと思います。ちなみに、「Prott」を選んだ理由は、使い方を知らなくても、使ってみてなんとか使えてしまったからです。大事ですよね、これ。
「Prott」とは？
Prott(プロット)はプロトタイピングツールです。UIデザイン会社GoodpatchがUIデザインプロセスの中で本当に使えるデザインツールとして開発しました。Android版ProttとiOS版、Web版（https://prottapp.com/）はそれぞれ単体でもプロトタイピングできますが、連携することでより効果的なツールになります。プロトタイプができたらリンクを共有してパソコンやスマホでUIデザインをインタラクティブに確認しましょう。
「Prott」を使ってみよう！
プロジェクト作成
まずはプロジェクトを作成しましょう！なお、私だけかもしれませんが、プロジェクトが無い状態だとAndroid版アプリがおちます（2015/8/25時点）。Web版でプロジェクトを1個以上作成してあげましょう。プロジェクトが1個以上あると、Android版アプリも正常に動作しています。
方法は簡単。Web版の右上にある「+新規プロジェクト」ボタンを押して、プロジェクト名とデバイスを選ぶだけです。ちなみに、私はNexus5を選びましたが、後でiPhone等に変更することができます。この辺はCORDOVAと相性がいいですね。
スクリーン撮影
プロトタイピングの手法は色々とあるそうですが、今回は「ペーパープロトタイピング」をやってみました。「ペーパープロトタイピング」とは、紙に書いたスケッチを撮影して、実際に操作できるようにするものです。スケッチであれば、デザインをすぐに形にすることができるので速くておすすめです。
スケッチができたら、カメラでスクリーン撮影を行います。これは、Android版アプリが圧倒的に便利ですね。アプリを起動、（＋）を選んでカメラを選択し、作成したスケッチに合わせて撮影すると自動的にプロジェクトにスクリーンが追加されます。
リンク先指定
ボタンなどの範囲（ホットスポット）を置いて、遷移先スクリーン、遷移時のトランジション（スクリーン遷移時の動き）、ジェスチャー（タップやスワイプ等）を設定することで、デザインに動きを付けることができることができます。
Android版アプリよりもWeb版の方が小さいサイズのホットスポットが使えるので、ここはWeb版を使う方をお勧めします。
プレビュー・シェア
プレビューボタンを押すとプロトタイプが確認できます。また、作成したプロトタイプはURLで簡単にシェアできます。ここまでの速さと簡単さが魅力ですね！
ワイヤーフレーム機能もあるよ
Material Designにも対応したUIコンポーネントをドラッグ＆ドロップして、簡単にデザインを作成することもできます。公式ブログに「ワイヤーフレーム機能でもっとスピーディーに！」とあるように、使いこなせるようになるともっと高速にデザインできるようになりそうですが、今回はそこまで辿り付けず、「ペーパープロトタイピング」にしました。
次回は…
今回はプロトタイプを使ってデザインすることで、欲しいアプリを具体化することができましたが、
- 欲しいアプリは具体的になったが、CORDOVAでの実現方法を考える必要がある。
- iPhoneとAndroidの両方で動くアプリを目指しているので、デザインを統一する必要がある。
これらの課題が見えてきたので、次回は、画面やコンポーネントごとに検証しながら、CORDOVAでの実現方法やデザインの統一について考えていこうと思います。