【2014.08.15 追記】"使える"モバイルアプリのUIプロトタイピングツール・サービス18個
2013年ふりかえりと2014年の予想でも書いたように、ここ1年でモバイルアプリのプロトタイプを作れるツール・サービスが数多く登場しています。
もうけっこうな数が出てきましたので、これからプロトタイピングを検討しようとしている方の参考に、また自分自身の把握のために、一度整理してみたいと思います。
なお、例によって後半は息切れ気味です。気付いたら1万文字近く書いてた…
(2014.08.15)記事書いてから半年くらい経って、各種サービスもアップデートしたりがあったのでいろいろと追記しました
プロトタイピングとは何か
そもそもプロトタイピングって何ぞやというお話なのですが、Wikipediaにいい感じの解説が載っておりましたので転載します。
"プロトタイピング（Prototyping）とは、実働するモデル（プロトタイプ）を早期に製作する手法およびその過程を意味する。その目的は、設計を様々な観点から検証するためだったり、機能やアイデアを形にすることでユーザーから早めにフィードバックを得るためだったり様々である。"
従来であれば、モバイルアプリのデザイン進行は、デザイナーがPhotoshopやIllustratorでワイヤーフレームやデザインカンプなどの静的イメージを作成し、クライアントに確認を取り、フィードバックが出れば作り直し、OKが出れば必要なパーツを書き出して開発側に渡し、開発が始まったあとも確認&フィードバックが入り直しが入り……というフローがとられていました（経験則です）。
↑めっちゃ簡単な説明図
なので、手戻りが発生したり、全体の構成を修正する、という事態がまま発生します。
（実際はカンプだけではなく、設計書なども見つつ確認作業を進めていくので、上図はかなりざっくりしてます）
アプリケーションはいくつもの画面の連続であり、小さなインタラクションの集合体です。カンプをただ並べただけでは分からない情報がたくさん隠れており、全体の流れや細かな使い勝手について、プロジェクトメンバーが一致団結して取り組む必要があります。
では、プロトタイプを介して進めるとどうなるか。
こんなに上手いこと話が進むかはまた別のお話ですが、少なくともプロジェクト初期の段階から「クライアントとデザイナー間」「デザイナーとエンジニア間」の齟齬は極力まで減らすことが可能となります。
実装前に、モックでもいいから動くものを提供することで、エンジニアから「この動きをさせると割と体力使うんだけど、本当に必要なの？」とツッコミきたり、クライアントに「この流れでいくと確かにあの要素はいりませんね」と納得してもらえたり。そういったレスポンスが増えることで、成果物のイメージがブレずに共有でき、クオリティの高いプロダクトが生まれる…ハズです笑
しかしながら、最も大切なのは『プロトタイプを作ること』ではなく『プロトタイピングというサイクルをちゃんと回す』ことにあります。ただツールがうまく使えるだけではなく、クライアントとプロトタイピングについてどう認識合わせをしていくか、どう予算を頂くか、スケジュールに組み込むか、あるいはどうユーザーテストを行うか、といった範囲にまで気を使い実践していく必要があります。
個人的な経験としては、まず簡易なプロトタイプを作って「実装フェーズに移らなくてもこれだけのものが短時間で作れるのか」とクライアントに意識してもらい、そこから徐々にペーパープロトタイプによる要件定義や、ユーザーテストによる確認などに広げていければいいのかな、と思います。
以下、『プロトタイピングをまわすために作る試作』という意味を含んだものは全て『プロトタイプ』と記載を修正しました。
(2014.08.15 追記)
プロトタイプの種類
プロトタイプの種類は段階によっていくつかあります。
『ペーパープロトタイプ』
まだデザインカンプを作成する前の段階、紙ベースでプロトタイプを作成し、クライアントやエンジニアと認識合わせを行います。要件定義など、初期の打合せの場で「こんな感じですかねー」と話しながらやると、意思疎通が素早くこなせて効果ばつぐんです。
よくあるペパプロの形としては、デバイスを模したベースの紙上にUIコンポーネントの形をした紙片を置き、福笑いのように入れ替えながらレイアウトについて議論したり、紙芝居のように1枚1枚画面を遷移の順にスライドして流れを確認したり、などがあります。
詳しくは下記記事が参考になります。
ペーパープロトタイピング入門 – 第4回 見やすいペーパープロトの描き方 | fladdict
僕はまだ本格的なペパプロを業務で行ったことはないのですが、経験者いわく、準備と時間がかかるが、プロジェクト開始時にできれば後の工程がとてもスムーズにいくそうです。
そこまで本腰を入れられない、という場合は、アイデアスケッチレベルのものでもよいので主な設計に関わる画面を紙面に起こし、それをもとにクライアントと認識に齟齬がないか打合せを行うだけでも効果があります。よくある『こちらはこう思ってたんですけど…（思ってただけでお互い言ってない）』が多発することはなくなるでしょう。
『UIプロトタイプ』
要件も固まり、デザインカンプを作成した後は、より実際のプロダクトに近いプロトタイプを作ることで、具体的なイメージ・全体的な流れをクライアントと共有できます。
特に固有名詞はないと思うのですが、ここでは便宜上『UIプロトタイプ』と記載します。
デザインカンプを用いて作成することがほとんどとなり、UIの振る舞い方や画面遷移のトランジションなど、より本物らしいプロトタイプを作ることが可能です。
今回の記事で紹介するツール・サービスはこのシチュエーションのものがメインです。
『インタラクションプロトタイプ』
最後に、こういったカテゴリがあるのかどうか不明ですが、インタラクションやアニメーション寄りのプロトタイプを『インタラクションプロトタイプ』として紹介したいと思います。
UIプロトタイプでは画面遷移の作成が主となるため、細かいアニメーションやインタラクションといった部分は機能的に補えないものがほとんどです。
しかしながら、近年ではアプリにおいても、インタラクション・アニメーションが重要な役割を担っており、それらを再現するのがインタラクションプロトタイプです（名前なげー）。
画面の遷移を補うことは難しいため、要所要所で作成することになります。
さて今回は『UIプロトタイプ』『インタラクションプロトタイプ』を中心に"使える"（あるいは"使えそう"）ツール・サービスを紹介していきます。
ただ雑然と並べるだけにせず、いくつかのカテゴリ分けを行い、少しでも判断材料となれるようにしてみたいと思います。さすがに全部を試せる金銭的余裕もなかったので（いくつかは試用期間過ぎてた…）情報量として少ないものがあったりしますが、そこはご愛嬌ということで。。
★による個人的オススメ度も付けようと思ったのですが、未使用のツールもいくつかあったため、ランキング形式にはしていません。あしからず。
デスクトップ型
その名の通り、デスクトップ上で動作するタイプのツールです。
買い切りである点や機能が豊富である点が特徴です。後述のインタラクション型もこの部類に入ります。反面、メンバー分の数を購入しようと思うと（特にBriefsは）費用が掛かってしまいます。
・Briefs
価格：¥19,800 (Store)
対象端末：iPhone / iPad / Android / Android Tab
特徴：価格に見合った豊富な機能 / 本物のアプリに近い挙動が得られる
このブログでも折にふれているBriefsをトップに持ってきました。
プロトタイピングツール Briefs 入門 第1回目『新規作成・ボタン配置・画面遷移』 - よりぶろ
プロトタイピングツール Briefs 入門 第2回目『アセット・ホットスポット・スクロール領域』 - よりぶろ
さすがの価格だけあって、プロトタイプツールとしては豊富な機能を備えています。が、逆に豊富すぎて使わなかったり使えなかったりするものもあったり。。作成したデータサイズが大きいことや、クラッシュしやすいのも弱点です。
とは言え『タップ時のパーツを指定する』『NavigationBarとTabBarを別パーツにして、中のリストだけスクロールさせる』『一部だけ横スクロールする画面を作る』など細かいパターンが作れるのはBriefsならではと言えます。
ちなみに最近Androidにも対応しましたが、なぜかPhoneの最高解像度がqHDでした。
なお、10画面までであればフル機能が使える無料版がありますので、興味のある方はインストールしてみてください。
また、最近のバージョンでは『このボタンをタップしたら（同じ画面で）別のパーツを出現させる』なんて動きもできるようになりました。動かしたいパーツの透明度を0にしたり、画面外に置いた状態にしておいて、ボタン (HotSpot) と連動させて透明度を100にしたり画面内へ移動させることで、画面遷移させることなく要素を出現させられます。
(2014.08.15 追記)
・Tweak
価格：？
特徴： プロトタイプからObjective-Cをエクスポート可？
まだリリースされていないツール？ですが、どうやら成果物がObjective-Cで作られるようです。そのためか、チラ見しているサンプル画面を見ると標準のUIコンポーネントしか利用できないようにも見えます。
もしアニメーションの作成ができるのであればそれをエクスポートできるので、かなり有用なのではないかと密かに期待しています。
現時点ではまだリリースされていませんが、ちょっと前にデモ動画がアップロードされていました。
New 'Tweak' Demos: an iOS tool for prototyping animations - Designer News
見た感じ『簡単に使えるOrigami』という印象を受けました。使えるようになるのが楽しみです。
(2014.08.15 追記)
ちなみに、エントリーから漏れてしまったアプリに『Prototypr』があります。1,000円とお買い得ですが、見た感じこの程度であれば他のツールでも代用できると感じたため、レビューからは外しました。
モバイルアプリ型
モバイルアプリ上でプロトタイプが作成できるタイプです。
主としてペーパープロトタイピング用として用いられることが多いですが、スクショを読み込むことでそれっぽい形に仕上げることも可能です。
・POP
価格：無料 (App Store / Google Play)
対象端末：iPhone / iPad / Android / Android Tab / Windows 8
特徴：ペパプロに最適 / iPhone, Androidで利用可能
プロトタイピング、と言われて多くの人が思い浮かべるアプリでしょう。
ペーパープロトタイピング用という触れ込みですが、カメラロールからスクショを読み込むことで一般的なクオリティのプロトタイプが作れます。Android用にアプリが出ているというのも、大きな特徴です（だいたいのツールはiOS限定だったりするので）。
ただBriefsや他のサービスのように多機能ではないので、縦に長い画面があれば、もちろん全体がスクロールしてしまいます。
いつの間にかWindows ストア アプリ版が出ていました。
POP - Prototyping on Paper app for Windows in the Windows Store
機能的には最小限で、ただタップエリアを作成して、遷移先を選ぶだけです。トランジションの種類は残念ながら選べず。しかしストアアプリで作れるというのは大きなメリット！これからのアップデートにも期待してしまいます。
(2014.08.15 追記)
・Demonstrate
価格：基本無料 (Store)
対象端末：iPhone
Paperと似ていますが、トランジションの豊富さが特徴的です。スライドメニュー用の動きが用意されているのは、けっこう珍しいと思いました。またDropboxと連携して画像を読み込むこともできます。
一方、弱点としては『プロトタイプ作成時に画面が縮小された状態で表示されるため、ちょっと扱いにくい』『無料で作れるのは1プロジェクト6画面までで、無制限に使うためには500円でアップグレードが必要』といった点があります。
ただ、500円であのクオリティが作れるなら安いものだと思います。
Webサービス型
その名の通り、Webブラウザ上で動作するタイプです。ここでは紹介しきれないほどのサービスが存在しており、激戦区と言えます。
Webサービスであることを活かし、他のWebサービスとの連携、複数人によるプロジェクトの共有やコメント付与機能などが特徴と言えます。
反面、月額課金制のものが多く、支払う金額だけを見るとデスクトップ型には劣ってしまいます。また外部サービスを利用する性質上、情報の取り扱いに厳しい会社・案件で利用しようとするのは難しいのもウイークポイントです。
・Flinto
価格：試用期間30日 / 月額$18〜
対象端末：iPhone / iPad / Android / Android Tab
特徴：固定エリア指定 / LinkSnap
個人的に導入をオススメしたいのが、このFlintoです。
必要最低限、しかしカユいところに手が届く親切設計、少ないコストでの運用が可能とイイとこ尽くしです。
だいぶ前の記事にも書きましたが、上下に固定領域を設けられるので、縦長の画面を作ってもちゃんと中身だけがスクロールできます。
しかし最近は他のサービスも同機能は搭載してきており、さてFlintoどうする？となったところに出てきたのが新機能『LinkSnap』。
詳しくはFlintoのサイトに飛んで体験してもらうのがよいと思いますが、自動的にタップエリアを認識して候補を出してくれます。すげー頭いい。
弱点としてはAndroidに対応していないところくらいでしょうか。コメント機能とか、そのうち付くといいなぁ。。
なお月額$8というのは年間プランを契約した時のみで、月契約では$10になります。またチームで運用する場合は月額$25となります。
Androidの解像度に対応しました！ばんざーい！わーい！
それに伴い、価格は月額$20一律となりました（年契約で$18）。
(2014.02.19 追記)
最近ではDropbox連携やデュレーションの追加も行われ、ますます使いやすいサービスとなっています。
(2014.08.15 追記)
・InVision
価格：1プロジェクト無料 / 3プロジェクト月額$15〜
対象端末：デスクトップ / iPhone / iPad / Android / Android Tab
特徴：豊富な同期手段 / コメント機能 / LiveShare / バージョン管理
1プロジェクトのみ利用であれば無料が嬉しいInVisionも、基本機能はFlintoと同等です。上下の固定領域も作れます。
特徴としては、iOSやAndroidのみならずデスクトップ（Webサイト）にも対応していること。Webサービス型の多くはこのようにさまざまな端末に対応しています。
コメント機能やヒストリーが備わっているのも嬉しいですね。Dropboxのような同期用クライアントが用意されていたり、DropboxやBoxと連携できるのもWebサービスならではと言えます。
あえて弱点を書くなら、やはり利用料金でしょう。3プロジェクトで月額$15、月額$25なら無制限（ただし個人。チーム利用だと$100）は、人によっては尻込みするかもしれません。
とは言えiOSとAndroid、それにデスクトップもできるのですから、見方によっては安いと捉えることもできます。
アップデートも頻繁に行われており、複数人でコメントやライン引きができるLiveShare機能の追加、.ai や .sketchへの対応などがありました。コラボレーションツールとしての側面が強化されたり、多様なフォーマットに適用するなど、この界隈では最前線を走っているツールと捉えてもよいのではないでしょうか。
また、個人利用であれば月額$25 でプロジェクトが無制限 (以前は5プロジェクト)になったのも嬉しいポイントです。
(2014.08.15 追記)
・Proto.io
価格：試用期間15日 / 3プロジェクト月額$24〜
対象端末：制限なし
特徴：豊富な機能 / アニメーションの細かな調整
試用した時の第一印象は「Web界のBriefs」。Briefsのほうが後だから表現としては反対かな。
とにかく機能が豊富です。というか、まだ全部把握しきれてない…ｗ
例えばこのチュートリアルビデオを見ると、アニメーションが細かに調整できることが分かります。
また画面サイズを自由に設定できるため、どんな端末向けのプロトタイプでも作れたりします。まさに全部乗せです。
価格はInVisionのさらに上を行く3プロジェクト月額$24、10プロジェクト月額49。さすがです。
・Marvel
価格：無料
対象端末：制限なし
特徴：Dropbox連携 / PSDファイルからのプロトタイプ作成
Webサービス型としては後発に入るMarvelの特徴は、Dropbox連携が前提であることと、PSDファイルが読み込めること。
（iPhoneアプリ単独でも作れるようですが、日本ではインストール不可のため確認できず。。）
そのため、Dropbox内のファイルを修正すれば、Marvel側にも反映がされます。そのせいか、ファイルを移動してしまうとリンクが正しくないとエラーが出てしまいます。
IllustratorやSketh、Fireworksのファイル形式のインポートにも今後取り組むとのことなのでとても楽しみです。
価格はWebサービス型としては珍しい、基本無料。今後Proプランの導入を検討しているそうですが、無料プランは残すそうです。
・Prott
価格：？
対象端末：iPhone / iPad / Android / Android Tab (Nexus 7)
特徴：豊富なアクション / コメント機能 /
日本のUIデザイン会社であるGoodpatchが開発を進めているWebサービスです。
現在はティザーサイトのみなので全容は不明ですが、どのようなサービスになるのかとても楽しみです。サイト内の文言を見るとワイヤーフレームの作成やアニメーション、コメント機能っぽいものが載る気配があります。
現在はオープンβとなり、どなたでも試用が可能です。機能的にはほぼFlintoをなぞったかたちとなっていますが、ジェスチャの種類の豊富さ（横スワイプやピンチイン・アウト）やコメント機能など、Prottならではの特徴も備えています。Flinto使ってみたいけどお金がかかるしなあ。。と悩んでいる方は今のうちにProttを使い倒してみてはいかがでしょうか。
また、スケッチを撮影し、同期も可能なiPhoneアプリの開発も進んでいるようです。
気になるのはやはりお値段で、果たしていかほどで勝負をされるのかが楽しみです。
(2014.08.15 追記)
・Pixate (2014.08.15 追加)
価格：？
特徴：細かな機能・アクション / ネイティブとしてアウトプット可能？
最近注目しているのが Pixate。知らなかったんですけど、もともと？はCSSでiOSアプリの見た目が作れる！というライブラリなのですね。
たぶんこれはこれで残ってて、また別のアプローチが今回のPixateなのかな？と思います。
Pixateのすごさは、言葉で説明するよりもブログに上がっているサンプル動画を見て頂いたほうがよろしいでしょう。
このように、細かいインタラクションを作ることができます。
ただ、見た感じだと画面遷移はできない？もしくは難しい？みたいで、使い方としてはOrigamiやTweakに近いものになるのかなと思います。
はじめに書きましたが、Webサービス型はまだまだ紹介しきれないほど存在しています。もっと知りたい！という方は『ui prototyping service』などでググると幸せになると思います。
Photoshop連携型
数は少ないですが、最近はPhotoshopと連携してプロトタイプを作るツールも登場しています。使い慣れたツールで作れることや、リソースの書き出しをわざわざ行わなくてよい、といったメリットがあります。
・Stand In
価格：試用期間14日 / 月額$25〜
特徴：Photoshopエクステンションを利用したプロトタイプ作成
エクステンションを使ってレイヤー名に遷移先や遷移方法を記載してプロトタイプを作成できます。
以前このブログでも簡単に取り上げました。
Photoshopでモバイルアプリのプロトタイプが作れる「Stand In」を軽く使ってみた - よりぶろ
やはり月額$25は高いのう…という印象。ここからどう巻き返してくるのか、気になります。
もう一つ弱点としては、次に紹介するCompositeでもそうですが、レイヤー名をいじるのでSlicy利用者は二の足を踏んでしまいます。なかなか、難しいところですねぇ。。
価格：¥1,000
対象端末：iPhone
特徴：PSDのレイヤー名に遷移先 / 遷移アクションを記載して作成
こちらもPSDファイルにいろいろ記載してプロトタイプを作るツールなのですが、面白いのがプレビューソフトであるiPhoneアプリが有料な点。なかなか見ないタイプです（Ps連携自体、あまり見ませんが、、）。
ちょっと残念なのは、現状iPhoneにしか対応していない点と、アプリ側が有料なのでクライアントワークには向かない点、でしょうか。
しかしながら"使えない"わけではないので、覚えておいて損はないアプリです。
インタラクション型
最後にインタラクション型です。どういうものかと言うと、これは「プログラミングするものである」とまとめられるのではと思います。動きを再現するには、それなりにプログラムを組む必要がありますからね。
反面、インタラクションを作ることは得意ですが、簡単な画面遷移を作ろうと思うと時間がかかることが多いです（おそらく。今のところの経験則）。
・Storyboard (Xcode)
価格：無料
特徴：ネイティブである
もはや言わずもがなですが、Storyboardでプロトタイプを作ることで本物と同じ動きを持たせることができます。
…なんて言いつつ、実はやったことないのですが…
いくつかHow To記事も出てきています。
How To Prototype In Xcode Using Storyboard | Meng To - UI/UX Designer
Mobile Prototyping for Designers with Xcode Storyboards | MindSea Development Inc.
Storyboards Tutorial in iOS 7: Part 1 | Ray Wenderlich
たしかにね、デザイナーができると色々捗るんだろうとは思うけど、難易度高そ〜〜。
もしStoryboardを使ってバリバリプロトタイピングされてる方がいらっしゃったら、どんな感じか教えて頂きたいです。
・Framer
価格：無料
対象端末：制限なし
特徴：HTML、JSによるプロトタイプ作成
特徴で全てを物語っていますが、高品質なプロトタイプをHTMLとJSで作成できます。
ちなみに僕は挫折しました。
JSに馴染みがあるデザイナーであれば、Framerは有用な手段と言えます。ドキュメントやサンプルも豊富ですので、分からない人でも勉強できます。
しかしながらこれはもう完全にプログラミングなので、クオリティが高い分、時間はかかるでしょう。そのあたり、どうバランスを取るかは難しいところです。
最近ではFramer Generatorというリソース生成ソフトやFramer Studioという開発環境もリリースされたりと、少しずつ大きなアップデートがされています。
(2014.08.15 追記)
・Hype
価格：¥3,000 (Store)
対象端末：制限なし
特徴：HTML、JSによる作成
Hypeも使ったことはないので深いコメントは残せないのですが、開発会社がブログでプロトタイプの作り方を載せています。
Mobile Prototyping for iOS in Tumult Hype 2 | Tumult Company Blog
Webデザイナーからモバイルアプリのデザイナーに転向された方は、FramerやHypeを使うことで、比較的慣れた環境で手早くプロトタイピングが可能となるのではないでしょうか。
価格：無料
対象端末：制限なし？
もはややる気のない特徴欄ですが、OrigamiというのはQuartz Composerでプロトタイピングをするためのパッチです。
FBのデザインチームはこのOrigamiを使用してPaperなどのプロトタイプを作成していたそうです。
Introducing Origami for Quartz Composer — The Year of the Looking Glass — Medium
Prototyping with Quartz & Facebook Origami — Quartz & Facebook Origami — Medium
Prototyping with Facebook Origami from Jay Thrash on Vimeo.
まだまだサンプルが少ないので実践するとなると手探り状態で挑むことになりますが、コードを書かなくても作れるので、慣れてくると楽しいです。
なお、qc-mobileというフレームワークを導入することで、iOS端末でも確認することができるようです。
Xcode5におけるQuartzComposerの導入 + qc-mobile | Septeni Engineers' Blog | セプテーニ エンジニアブログ
↑これ、いまだ上手くいかず…
ちなみに最近はバージョンが1.3になってパッチが増えたりと、少しずつではありますが標準の状態でできることが増えてきました。しかしながらデバイスでの確認はまだサポートされておらず、今後も楽しみなツールであります。久しぶりに触ろうかなぁ。。
(2014.08.15 追記)
さて、最後に紹介するのはお馴染みAfter EffectsとFlashです。
僕はFlash派ではなくAE派なのでAEの話だけになってしまいますが、全体の流れをBriefsで作って細かいインタラクションの部分だけAEで作るようになりました。
PSDからそのまま移れるし、軽度のアニメーションであればパパっと作れるのは楽ですねえ。いやきっとFlashもそうなんだろうけど。
ここまで読んでうすうす勘付いた方もいらっしゃると思いますが、インタラクションプロトタイプに関しては、馴染みのある手段で進めるのがひとつの解と言えるんじゃないかと思います。また、どれくらいの重要度を持って進めていくかも判断基準になります。
時間がかかってもいいから、細かい動きが作れるもの・エンジニアにそのまま渡せるもの・触って動かせるものを作る、ということもあれば、動きを確認しないわけにはいかないから動画でささっと作る、実装は信頼してるエンジニアと一緒に頑張る、という方針もあるでしょう。
個人的には、仕事は後者で進めつつ、でもコードも書けるようにプライベートは勉強、でしばらくやってみようかなと思います。
…という感じに、長々とまとめてみました。ここまでお読み頂き、ありがとうございます。いかがでしたか？
僕自身、久しぶりに一通り触ってみて「いろんなツールがあるもんだなあ」と改めてその量、その質に圧倒されました。
じゃあこれらの中からどれを使おう、というのはきっと個々人で求めているものが違うと思います。
Webサービスを使うのに制限がなくチーム全体で使うならFlintoやInVision、細かいアニメーションまでやってみたいならproto.io、デスクトップアプリしか使えないならBriefs、コストをかけたくない場合はDemonstrateやMarvel、がっつりインタラクションを作りこみたいならインタラクション型の中から自分の相性に合うものを、といった感じでしょうか。
ちなみに僕はBriefs + AEのスタイルで仕事しています。
もし「これを紹介しないなて、ありえない！」「この書き方は間違っている！」などツッコミありましたらよろしくお願い致します。
さて2014年のプロトタイピング事情ですが、はたしてどうなのでしょうね。予想としては、アニメーションに特化したものと、デザイナーとエンジニアの橋渡しを行うもの（アニメーションをコードで出力してくれるとか）が今年のトレンドになると睨んでいるのですが。うーん、楽しみ！
