アプリのUI設計は「紙でやる」のが早い！

はじめに

こんにちはー！！
UI設計やってますか？

今回は「ペーパープロトタイピング」の話。
アプリでは主流になってる現場も少なくないですよね！

今までのやり方とペーパープロトタイピングの違いや、
プロトタイピングツール「POP」と「Prott」の比較の話なんかをしようと思います！

今までのアプリUI設計

Webデザインと同じ方法でアプリ設計を行っている場合、手順は

●ワイヤフレーム→モックアップ→実装
厳密に言うと
●①ヒアリング→②ワイヤフレーム→③レビュー→④モックアップ→⑤レビュー→⑥実装→⑦レビュー

デザイナーがいないと
●①ヒアリング→②ExcelでUI設計→③レビュー→④実装→⑤レビュー
って場合も結構多いと思います。
これ結構時間かかりますよね～。

しかも！
大抵の場合、実装後のレビューの段階（つまり最終段階）で

「やっぱここ動きおかしいよね！直せる？」
「・・・。（えー！先にいってよー！モックアップ見せたジャ～ン、Excel見せたジャ～ン）」
てパターンあります。

つまりさっきの手順は本当はこうなっちゃうことが結構ある！
●…略…→⑥実装→⑦レビュー→②またワイヤフレーム→③…略…
(●…略…→④実装→⑤レビュー→②またExcelでUI設計→略…)

これは仕方のないことなのかなと思っています。
なぜなら「動かしてみて初めてわかる」ことはどうしてもあるからです。
もし、設計段階で「アプリの様に動かせれば…」もっとスピーディーに（というより手戻りが少なく）進められると思います。
結果的に早くプロダクトを完成させることができます。

それをできるのがペーパープロトタイピングです。

これからのアプリ設計はペーパープロトタイピング

まず誤解のないように書いておくと、ここで言っているペーパープロトタイピングは
「手書き」＋「プロトタイピングアプリ」
での設計を指してます。

で、メリットはなんといっても
●簡単
●作成が早い
●アプリの様に動く
だと思います。

簡単で早いと、
学習コストも時間的コストも低いです。
また、アプリの様に動くと、
開発した後の手戻りが発生しにくいです。

ペーパープロトタイピングに使うツール

先にも述べていますが、使うのは「手書き用テンプレート」と「プロトタイピングアプリ」の２つです。

●手書き用テンプレート

POPのページにAndroidとiOSの手書き用テンプレートが無料でダウンロードできます。(15/09/15追記)
https://popapp.in/jp/sketchpad/

紹介するのはiPhone用のみですが、個人的にはAndriodもこれで充分かなと思ってます。
http://www.hugkey.com/wp-content/uploads/2014/02/iPhone_paper_prototype1.pdf
とか
http://www.hugkey.com/wp-content/uploads/2014/05/iPhone_paper_prototype_type_b.pdf
とかもあります。

●プロトタイピングアプリ

以下のサイトがよくまとまっています。
http://blog.mb.cloud.nifty.com/?p=213

僕は「POP」か「Prott」を使っています。
POP
https://popapp.in/jp

Prott
https://prottapp.com/

無料で使えますです。はい。
「で、どういうツールなの？」と思った方は、上記のリンクから動画を見てください。
どれくらい簡単にプロトタイプが作成できるかすぐにわかるはず！

無料版の「POP」と「Prott」の比較

先に断っておきますが、どちらも無料のプランでしか使ったことがありませんので、
無料版のみの比較です。悪しからず。

まずはアプリの比較から。個人的に特に気になるところをピックアップします（'15/07/27 現在）

	POP	Prott
対応端末	iPhone、iPad、Android	iPhone、iPad、Android
横向きの設計	○	×
無料で作成できるプロジェクト数	2（※現在は無制限）	1
遷移アニメーションの数	6	10
ジェスチャの数	8	9
プレビューの終了方法	○	△　○

評価：　個人的にはPOPに軍配を上げます ＊
評価：iPhoneを使う分にはどちらも甲乙つけがたいです。(15/07/27更新)
評価：Prott最近ガツガツ機能改善してますね。よくなってきましたよね！

【理由】
・対応端末：そのうちに出るとは思いますが、Prottは現在はまだAndroid のアプリがありません。
なお、サイトによると「標準的なiOS/Android端末はもちろん、カスタムサイズのディスプレイも設定できます。」とありますのでアプリでなくWebでのプレビューはできるようです。（15/07/27更新）

・無料で作成できるプロジェクト数：プロジェクトが2つ作れると、チームでA案B案どちらが良いか意見を聞くときに良いです。（※Prottも有料版だと2つ以上作れます）

・遷移アニメーションの数、ジェスチャの数：POPの方が数が少ないのですが正直あんま困りません。
・遷移アニメーションの数：POPの方が数が少ないのですが、今のところあんま困ったことはありません。
・ジェスチャの数＊：Prottはピンチイン、ピンチアウトができるので、画像の拡大縮小をイメージしたプロトタイプを作れるのがGoodです！＊

・プレビューの終了方法：
プレビューの終了方法はPOPは画面を2本指で触るのに対し、Prottは端末を「ブンッ！」って振る or ３本指でタップするとプレビューを終了することができます。＊

プレビューの終了方法はPOPは画面を2本指で触るだけなのに対し、Prottは端末を「ブンッ！」って振らないといけません。
（プロトタイプツールの良いことの一つに、写真さえ撮っておけば、電車の中で仕事ができることがあります）
　　電車の中でiPhoneを「ブンッ！」て振るの嫌です…。
　　恥ずかしいし、端末がたまにぶっ飛びそうになるし。端末が壊れたりしたらもう、ね。＊

（＊は2014/11/21 に追加、訂正）

====
つぎはWebコンソールの比較。
こちらも個人的に特に気になるところをピックアップ（※'14/11/19 現在）

	POP	Prott
レビューコメント記入	○	○
横向きのプレビュー＊	△	△
シェア機能	○	○
プレビュー機能	○	◎
プレビューのiframe化	○	×
プレビューのURL更新	×	○
アプリのワイヤフレーム作成(15/07/27追記)	×	○
AppleWatchのプロトタイプ(15/07/27追記)	×	○
Webのプロトタイプ(15/07/27追記)	×	○
チャット連携	×	slack、hipchat
クラウドドライブ連携	Dropbox	×（Dropbox、Google Driveに今後対応予定とのこと）

評価：　甲乙つけがたくどちらも良い！です。＊
評価：　どちらのサービスもほぼ完成されてきていると感じています！
が、縦横どちらも利用する画面設計が必要な場合は少し物足りなさを感じるかもしれません。＊

横向きのプレビュー＊：横向きのプレビューはどちらもいまいち使い勝手が悪いです。
　POPは横向きのプレビューができるというより、横向きのプロジェクトを作ることになるので縦から横への切り替えをシームレスに行うことはできません。＊

　Prottは横向きプレビューはできますが、縦向きと横向きの画像を切り替えられるわけではなく、
　単純に縦向き用の画像を横向きで見るだけです。なので必ずスクロールします（スマホサイト見てる感じ。）＊

プレビュー機能：Prottの方がスマホの色や背景の色など沢山の設定があって良いです。

プレビューのiframe化：POPはこれはが良いですね。
　ツール系のアプリとかだとそのままサイトに埋め込むとサービスを伝えやすくなると思います。
　もちろん、Prottでもプレビューのリンクをサイトに貼ればできなくはないですが、プレビューのために別のページに飛ぶのはひと手間ですし、なによりカッコ悪いかなと。

プレビューのURL更新＊：Prottはこれができるのがうれしいです。チームから外れた人がでたり、プレビューのURLを公にしているときは、公開をやめたいタイミングも出てくるので重宝します＊

チャット連携：slackとかhipchat使ってるチームはProttの方が良いのかなー。
　どちらも使ったことないのでこれ以上はコメント控えます。

（＊は2014/11/21訂正）

POPとProttでサンプル作ってみた

自分たちが作っているサービスを題材にしてサンプルを作ってみました。

無料で使えるユーザーサポートライブラリ
「アプリヘルプ」
http://www.applihelp.com/freeplan/?qi_prf
（少しだけ説明しておくと、FAQの作成や、ユーザとのメッセージのやり取りを簡単にできるようになるライブラリです。）

ペーパープロトタイプの良さをより伝えられるように、今回は手書きではなく製品のキャプチャをそのまま
利用しました。
しっかりとペーパープロトタイプができ上がっていれば、PhotoshopやIllustratorでこのレベルのモックアップを作成すると、よりプロダクトの完成イメージがよりリアルに体感できると思います。

POPで作ったサンプル
https://popapp.in/w/projects/546b359611e93be531490bf5/preview

Prottで作ったサンプル
https://prottapp.com/p/6e40c0#/

これが設計段階で作れると思うとびっくりですよね！
まだ使ったことがない方は是非使ってみてくださいね