Webサイトやアプリの制作過程において欠かせないプロトタイピングツール。海外のサービスも含めると、その種類は多岐に渡ります。
そのため、「それぞれのツールの特徴ってなんだっけ？」と混乱することも多いでしょう。特に海外の新しいツールの情報を仕入れても、結局「いつもの」ツールに留まってしまいがちです。しかし、自らのスキルや制作したいプロトタイプレベルによって最適なツールを使い分けることは、デザイン業務の可能性を広げます。
そこで今回は制作したいプロトタイプの度合いに応じて、海外のプロトタイピングツールをご紹介していきます。
シンプルなプロトタイプ制作におすすめ
ここでは、シンプルなプロトタイプ制作を行う際に推奨したいプロトタイピングツールをご紹介します。「使用感や見た目の心地よさの追求」までは行わない想定をしているので、簡易なアニメーション設定を行うことができるサービスを取り上げます。
１.POP
対応OS：iOS、Android
価格：無料（制限つき）｜有料版 $14~/月
簡易なペーパープロトタイピングが可能
POPは、2012年にリリースされたプロトタイピングツールで、2016年にはMarvelに買収されました。スマートフォンアプリケーションのみで展開しています。紙にスケッチしたワイヤーフレームを写真で撮り、アプリで画像として読み込むことができます。遷移箇所を指定するだけで、簡単かつスピーディーなプロトタイピングが可能です。
簡易に画面遷移だけ確認したいといった、アプリ構築の初期段階におすすめです。
２. InVision
対応OS： Windows、Mac
価格：無料（制限つき）｜有料版 $15~/月
共同作業に優れたトランジション特化型プロトタイピングツール
InVisionは、2012年にリリースされたプロトタイピングツールです。基本機能は画面遷移のみですが、共同作業機能に加えチャットや会話機能も付いています。プロトタイピングにおいて、円滑なチームワークを実現しやすいといえます。
簡単なユーザーテストの機能もあるので、複数人数でプロトタイピングと検証作業を素早く行うことができます。
３. CanvasFlip
対応OS：Windows、Mac
価格：無料（制限つき）｜有料版 $15~/月
「自動」で分析＆レポートもしてくれるユーザーテスト機能
CanvasFlipは、2016年にリリースされたインド発のプロトタイピングツールです。画面遷移に加え、簡易なアニメーションを設定できます。
このツールで特筆すべきは、ユーザーテスト＆アナリティクス機能です。ユーザーテスト機能でチームメンバーや協力者に操作してもらうだけで、同時にトラッキングやヒートマップなどのレポートを自動出力します。ユーザーテスト機能を実装するプロトタイピングツールが増えてきた中で、「ユーザーテストの実行しやすさ」「テストの検証＆レポートの自動出力」はユニークな機能となっています。
プロトタイピング、ユーザーテストや検証に時間をかけたくない状況では、とても役に立つツールです。
４. Adobe XD（β版）
対応OS：Windows、Mac
価格：単体プランなし（4,980円/月のAdobe CCコンプリートプランで使用可能）
PhotoshopやIllustratorで馴染みのAdobe UIのプロトタイピングツール
Adobe XDは、2016年にAdobeよりリリースされたプロトタイピングツールです。Adobe Creative Cloudで展開されているAdobe XDは、PhotoshopやIllustratorで親しみのあるUIを起用しているので、慣れるまでにコストがかからないことが大きいです。今後はこれらのソフトとの連携機能の充実も期待されています。
UIデザインをゼロから制作できる「UIデザインモード」、画面遷移や簡易なアニメーションを設定できる「プロトタイプモード」の２つのモードがあります。デザインを一から作りたい場合でも、Adobe XDは力を発揮します。
５. Atomic
対応OS：Windows、Mac
価格：無料（制限つき）｜有料版 $19~/月
シンプルなUIながらトランジションを作りこめる
Atomicは、2015年にリリースされたプロトタイピングツールです。基本的な機能はAdobe XDと似ていますが、アニメーションの演出（イージング）の設定をよりこだわることができ、よりこだわりたいユーザーのために個別の要素をFlashアニメーションのようなタイムラインで設定することもできます。
デザインをゼロから作成し、画面遷移の動きを具体的に指定したプロトタイピングを行いたい場合におすすめです。
精緻なプロトタイプ制作におすすめ
６. Flinto for Mac
対応OS：Mac
価格：$99（無料体験板あり）
3D表現を含む多彩なアニメーションが可能
Flinto for Macは、2015年にリリースされたプロトタイピングツールです。注目は、Canvasの3D表現まで対応した多彩なアニメーション機能です。トランジションなどを細かく指定できるので、視覚的な心地よさを追及することができます。
日本にオフィスを構えてはいないものの日本語対応しているなど、英語が苦手な方にも使用しやすい環境を整えています。デザインをゼロから作成することもできるので、デザイン業務にたっぷり力を注ぎたいときに役立ちます。
７. Indigo Studio
対応OS：Windows、Mac
価格：49,500円
ユーザーの行動シナリオについて可視化できるストーリーボード機能
Indigo Studioは、インフラジスティックス・ジャパン株式会社が2016年にリリースしたプロトタイピングツールです。ユニークな機能としては、「ストーリーボード」があります。専用のスペースに、ユーザーの行動を「時間軸」で分割し、各段階の「画像」「説明文」を挿入して作成します。
また、UIデザイン作成機能や詳細なアニメーションの設定、ユーザーテストまで、幅広い機能を備えています。本格的なデザイン制作ができるサービスの中では珍しく、WindowsとMacどちらのOSにも対応しています。UXを考えたデザイン制作を行っている際に、便利な機能が多いツールといえます。
８. Principle for mac
対応OS：Mac
価格：$129（無料体験版あり）
直感的にアニメーションを作成し、細かい設定も可能
Principle for macは、元Appleのエンジニアによって開発され、2015年にリリースされたプロトタイピングツールです。UIデザインをゼロからつくることも、プリセットを使用してデザインを組み立てていくこともできます。
アニメーションの作成がより直感的に作成可能で、Atomic同様、のちにタイムラインで個別に詳細な設定も可能なので、プロダクトの視覚的な心地よさの追求したいデザイナーにおすすめです。
９. UXPin
対応OS：Mac
価格：$19~/月（無料体験版あり）
手早く作って共有するための万能型UXデザインツール
UXPinは、2010年にリリースされたプロトタイピングツールです。「Experiment with 1000s of built-in elements」とブランドサイトにあるように、豊富なUIデザインのプリセットを揃えています。
また、ユーザーテストを依頼することができる機能やリアルタイム共同作業も可能で、チームを巻き込んだデザインの構築が可能です。
プリセットで手早く形にし、フィードバックを得て、またすぐ作り直せる、まさにアジャイル開発を意識した全部入りのデザインツールと言えます。
10. Origami Studio
対応OS：Mac
価格：無料
GUIによるビジュアルプログラミングで、簡単に細かいアニメーションを組み立てることが可能
Origami Studioは、2016年10月にFacebookからリリースされたプロトタイピングアプリケーションです。ユニークな機能として挙げられるものが、画面遷移やアニメーションを設定する方法です。「パッチ」という細分化されたジェスチャーなどのブロックをつなげることで、プロトタイピングを行います。
デザインを作成するためのプリセットも豊富に用意されています。見た目にもこだわりつつ、コードで記述するように画面の動きを細かく管理したい方にとっておすすめのツールです。
11. Framer
対応OS：Mac
価格：$129/年（無料体験板あり）
JavaScriptで画面遷移やアニメーションを設計できる
Framerは、コードが扱えるフロントエンドエンジニアやエンジニアに推奨したいプロトタイピングツールです。アニメーションの設計方法として、JavaScriptを使用します。
Framerなら、エンジニアの方がデザイン業務を担当する際にも、普段使い慣れている言語でアニメーションを作成できます。
まとめ
プロトタイピングのレベル感に応じて、11つのプロトタイピングツールを紹介してきました。上記内容を、デザイン業務に役立つ５つの機能を評価項目とした以下の比較表も参考にしてみてください。
クリックで拡大
とりわけ興味を抱いたツールについては、公式Webサイトなどに細かい情報が記載されているのでご覧ください。より自分と相性のいいプロトタイピングツールと出会えたら、さらに精度の高い仕事ができるでしょう。
