はじめまして!わたくし、デザイナーのピエール高木と申します。埼玉生まれ・J-POP育ち、悪そうなやつにはだいたいビビッてました。お願いします!!お初の投稿になりますが、デザインやコンセプトの面白いサービス&アプリ、気になるツール、参加したイベントなど幅広くお伝えできればと思っています。今回のテーマは【プロトタイピングツール】。はじめに・プロトタイピングツールとは昨今ではデザイナーに求められることが増えつつあります。ディレクターやエンジニアに対して、プロダクトの画面遷移や動きのイメージを伝えること(特にネイティブアプリなどの案件で)プロジェクトの早い段階から実装に近いイメージを作ること修正による無駄な開発リソースを削減すること・・・そんな中増えてきているのが、高度なプログラミングなしでプロトタイプが作成できる「プロトタイピングツール」。今では何種類ものプロトタイピングツールが登場し、開発現場で多く利用されるようになりました。選択肢が多くてありがたい反面「ツールの違いが分からず、何を使っていいのかわからない!」という方も多いのではないでしょうか。そこで、私が実際に使用したツールを中心に特徴や使用感をまとめてみました。インタラクション型・複合型に分けられます。全体の遷移を簡単に設定できるので、プロジェクト初期の遷移確認・共有に最適です。ブラウザ上で操作できるものが多いのが特徴。凝った動きを作りやすいのがメリット。全体の遷移を作る・共有するなどはやや苦手で、学習コストは高めです。ツールをPCにインストールして使用します。上2つの両方の要素を備えていているのが複合型。トランジション型に比べ、細かいアニメーションの設定はできますが、学習コストはインタラクション型ほど高くありません。appsいかに簡単に画面遷移を作るかを考えられており、直観的にプロトタイプが作れます。非デザイナー・非エンジニアにとっても学習コストが最も低いと感じられるでしょう。デザインを作りこむ前や、プロジェクト初期の遷移確認におすすめです。機能・特徴PSDファイルがプレビューできるSketchとの連携・同期ができるブラウザで編集したものがアプリですぐに確認できるワイヤーフレーム作成機能(有料)や、コメント機能があるSlackなど外部ツールと連携できるため、連絡や進捗共有がしやすい日本語なので安心。InVision全体としてマテリアルデザインが使われており、シンプルなUIなので僕は好きです。デザインファイルのプレビューやバージョン管理が容易で、デザイナーとしては嬉しい機能が多くあります。CCAdobeが今年(2016年)新たに出したツールです。1つのツールでUIを制作するデザインモード、遷移を確認するプロトタイプモードの2つのモードが利用できます。タブでモードの切り替えが可能です。デザインモードのUIはPhotoshopと似ていますが、画像のリピートやパーツの一括編集がより簡単にできます。プロトタイプモードは遷移が簡単に作れるのが嬉しいところ。CanvasFlipインド発のツールで、プロトタイプだけでなくユーザテストも行える優れものです。操作感も前述したツールと大きな差異はなかったのですが、ヒートマップや滞在時間などのフィードバックが無料で得られるのは凄いです。DesignAppleの元開発者が作成したツール。トランジション型ツールと比べ、より細かい値までアニメーションを設定できます。タイムラインがAnimate(旧Flash)などに似ているので個人的には使いやすいです。for.もともとはWebサービスだったものが、機能を追加してネイティブアプリとなったようです。画面遷移の設定はトランジション型のように直観的。CC)インタラクション型のツールは、主なツールの紹介のみにとどめます。ネイティブアプリなどの凝ったアニメーションを作成したい方は、以下がおすすめです。Pixate参考:Pixateif文なども使え、高度なアニメーションが実現可能です。その反面、使い込まなければ慣れるのがやや難しい、と感じました。1つのアートボードで動きを作るUIのため、レイヤーの管理が大変です。モックはアプリ(スマホ/タブレット)で共有できます。Flash、ベクターアニメ体験版Flashが名前を変えてアップデートしましたがUIは大きく変わっていません。Flashを使い慣れている方はこちらが良いかもしれません。html5、canvasとして書き出しモック共有が可能です。映像編集ソフトなので、モーションエフェクトなどアニメーション作成には最も強く個人的に好きです。プロトタイプを他ユーザと共有できない点はデメリット。最後にたくさん挙げましたが、他にも似たツールがあり、今後も色々と出てくるかと思います。Studio(2016年後半リリース予定)も面白そうです。いえツール(タイプ)ごとに特徴がありますし、ツールに優劣はありません。そもそもOS標準の簡単な動きならトランジション型が最適ですし、ネイティブアプリの詳細な動きの確認はインタラクション型や複合型を使うのが良いでしょう。プロジェクトの目的を考え、ツールを選択していくことが大事かと思いました。どのツールも無料で試せるので、是非試してみてください。それでは今回は以上です。アディ押ーーー忍!デザイナー募集していますぐるなびではWebデザイナーを募集しています。サイトの設計から考えたい、インタラクションまでこだわりたい。そんな方は是非ご応募ください!詳細はこちらピエール高木デザイン・コーディング・CG/映像など多岐に渡り経験した後、2014年7月にぐるなびに入社。色々な事に興味がありますが、現在はUI/UXの分野で突き詰めたく精進しているエセ侍です。近年ではモノマネの物真似が生業となっていますが、子供には内緒です。google.setOnLoadCallback(initialize);スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。