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