プロトタイピングツールも最近は色々な進化を遂げ、単にプロトタイプを作成するだけに限らず、プロトタイプの画面上にコメントを残してフィードバックしたり、リモートで音声通話ができたり、画面遷移図だってプロトタイプから出力することができるようになっています。

色々なプロトタイピングツールが登場している中、いまいちどのツールがいいのかよく分からないという方も少なくないのではないでしょうか。

そこで、今回はおすすめの7つのプロトタイピングツールについて、それぞれの機能を比較しながらご紹介したいと思います。

プロトタイピングツールとは

プロトタイピングツールとは、Webサイトやアプリなど、実際のプロダクト制作を行う前にプロトタイプを作成するためのツールです。

ではプロトタイプとは何かというと、下記のようになります。

プロトタイプを作ることで、画面遷移やアニメーションなどの動き、流れを確認することができるため、よりリアルなプロダクトに近い状態でUXデザインを確認することが可能です。

プロトタイプは一度作成したら完成というわけではなく、チームのメンバーや外部テスターに共有したりして、フィードバックをもらいながら修正を重ね、改善し続けます。

様々なプロトタイピングツールがありますが、目的によって使い分けることで、より効率よくプロトタイプ作成とフィードバックを行うことができます。

プロトタイピングツールの種類

一般的に、プロトタイピングツールの種類は大きく3つに分けることができます。まずは、プロトタイピングツールの種類についてそれぞれご説明したいと思います。

プロトタイプを作成する場合には、プロトタイプ上で何を確認したいのかを初めに決め、それからプロトタイピングツールの選定を行うのがいいでしょう。

おすすめのプロトタイピングツール

様々なプロトタイピングツールが公開されていますが、今回はその中でも特におすすめのプロトタイピングツールを7つご紹介します。

Prott

プロトタイピングツールと言われて一番最初に思いつくのは「Prott」だという方が多いのではないでしょうか。

ProttはGoodpatchという日本の会社によって提供されているサービスで、多くの企業でSketchとProttを組み合わせてデザイン制作が行われています。

Prottのおすすめポイント

機能が豊富

おすすめのポイントは、何と言っても機能の豊富さです。画面遷移を作成したり、コメントを残したり、デザイン一覧をダウンロードしたりなど、プロトタイプを作成する時に必要になる機能が一通り備わっているため、Prottを使っておけば困ることはあまりありません。

有料プランにすれば様々な機能が利用できる

有料プランと比べると使える機能が限られてしまいますが、Prottには無料プランが用意されています。チームでの制作となると機能が不足するかもしれませんが、個人で使うのであれば無料プランで困ることは無いでしょう。

なお、有料プランになると、下記機能が利用できるようになります。

ワイヤーフレーム機能や画面遷移図作成など、プロダクト開発の現場で役立つ機能がたくさんあり、それがProttの魅力の1つです。予算的に余裕がある場合は、ぜひ有料プランを利用してみてください。

Sketchと連携可能

Sketchのプラグインを使うことで、簡単にSketchとProttを連携させることができ、連携することでSketchで編集した内容を簡単にProttに反映させることが可能です。細かい修正の積み重ねが必要なデザイン作業において、この機能は非常に助かりますね。

こちらの記事にProttの詳しい情報をまとめました

InVision

InVisionは海外でよく使われているプロトタイピングツールで、細かい機能は若干異なりますが、基本的にはProttと同じようなツールです。（もともとInVisionが海外で使われており、その後にProttがリリースされているため、正確にはProttがInVisionに似ているというのが正しいです）

すでにProttを使っているという方はわざわざ乗り換える必要はないかもしれませんが、これからプロトタイピングツールを初めて使うという方は世界的にみるとInVisionの方が使われているサービスなので、ぜひ検討してみてください。

InVisionのおすすめポイント

優れたLIVE SHARE機能

InVisionにはLIVE SHAREという機能があり、リアルタイムでコメントを残したり、音声通話をすることだってできます。フィードバックをもらうためにわざわざ共有して、コメントが残されるのを待ち、それから確認して、という形で作業をしているととても効率が悪いですよね。そんな時は決まった時間にチームのメンバーでInVisionに集合し、リアルタイムでのコミュニケーションを取りながらフィードバックを行えば、作業効率もグッとあがるのではないでしょうか。

ユーザーテストが行える

UserTesting.comと連携することで、簡単にユーザーテストを行うことができます。同じサービスに長く関わっていたり、自分の作成したデザインだと第三者目線がどうしても薄れてしまい、使いづらいポイントを見つけることが難しくなってしまいます。

そんな時に役立つのがユーザーテストで、色々な人にプロトタイプを実際に触ってもらうことで、問題点が浮かび上がったり改善につながることはとても多いです。優れたサービスを作る上でユーザーテストを行えるというのは非常に大きなメリットですね。

Sketchと連携できる

Prottと同じように、InVisionもSketchと連携することでデザインの変更を簡単に反映させることができます。

InVisionについてはこちらの記事で詳しくご紹介しています

Sketch

SketchはアプリのUIデザインを作成するツールとして、多くの企業が導入しています。

元々Sketchにはプロトタイプを作成するツールはありませんでしたが、現在ではプロトタイプを作成してWeb上で共有する機能が公開されています。

Sketchでデザインを作成して、他のプロトタイピングツールと連携する方法でも実現は可能ですが、より簡単にプロトタイプを作成することができるので、管理もしやすく便利です。

Sketchのおすすめポイント

作業が効率的

Sketchは先にも説明した通り、デザインツールとプロトタイピングツールが一体となっているので、管理が行いやすく、プロトタイプを作る作業がとても効率的です。

もしデザインツールとプロトタイピングツールをそれぞれ別のツールを使用していた場合、デザインの修正をする時はデザインツールで修正して、それをプロトタイピングにも反映しなければならず、二度手間になってしまいます。

Sketchで完結させてしまえば、プロトタイプを触る中で修正したいポイントが見つかったら、すぐに修正して確認することができますね。

簡単にシェアできる

プロトタイプをクラウドにアップロードすると、URLが生成されてそれをシェアするだけで簡単にプロトタイプをメンバーに共有することができます。

Web上で実際にプロトタイプを確認したら、そのWebページ上でコメントを残すこともできるようになっているため、フィードバックが簡単に行えるというのもポイントです。

プラグインでインタラクションデザインも可能

Sketchには、標準でアニメーションなどインタラクションなデザインを作成する機能はありませんが、実はプラグインを導入することで動きを持ったデザインを作成することもできます。

クオリティはインタラクションデザインに特化したツールに劣りますが、Sketch上で実現できるというメリットはとても大きいですね。

Adobe XD

Adobe XDは、Adobeが提供するデザイン＋プロトタイピングツールです。とにかく動作がサクサクで、デザインツールの使いやすさとしてはピカイチのクオリティを誇ります。WebデザインのツールとしてはSketchよりもAdobe XDの方が人気があるみたいですね。

また、Adobe製品ということで他のソフトとショートカットが共通化されていたり、普段からAdobe製品を使っている人なら特に使い方を覚えること無く、使いこなすことができます。

Adobe XDのおすすめポイント

デザイン制作とプロトタイプ作成のどちらも可能

また、Adobe XDはデザイン制作とプロトタイプ作成のどちらも行うことができるので、作業中にツールを複数立ち上げたり、ソフトの切り替えを行いながらプロトタイプを作成する必要がありません。

SketchとProttで作業を行っている方なら分かるかと思いますが、デザインを更新した時の反映作業が意外と手間で、忘れがちだったりします。Adobe XDを使うとそういった面倒な作業が無くなるため、その分効率よく作業を行うことができますね。

Adobe CC利用ユーザーであれば実質無料で利用可能

Adobe CCに登録しているユーザーであれば、追加登録無しで利用することができます。PhotoshopやIllustratorのためにAdobe CCに登録している人も多いと思いますが、そういう方は実質無料でAdobe XDを使えることになりますね。

そのため、すでにAdobe CCを利用している方であれば追加料金無しで使用することができます。無料でこれだけ優れたソフトが使えるのであれば、わざわざSketchやProttを使う必要はありませんね。

Adobe XDの特徴や優れた点についてはこちらで詳しくご紹介しています。

Origami Studio

Origami StudioはFacebookが提供するプロトタイピングツールです。Facebookのような企業がこういったツールを公開するのは珍しく、2016年に発表された際には非常に大きな注目を集めました。

Origami StudioはProttやInVision, Adobe XDと異なりインタラクション型のプロトタイピングツールです。

画面遷移をプロトタイピングで表現することはできませんが、同じ画面内での動きやアニメーションをプロトタイプに組み込みたい場合はインタラクション型のプロトタイピングツールがおすすめです！

インタラクション型のプロトタイピングツールは、設定する項目が多く、他のツールと比べると使いこなせるようになるまで少し時間はかかってしまいますが、使い方を覚えてしまえば他のツールとは一味違ったプロトタイプを作成することができます。

Origami Studioのおすすめポイント

様々な”動き”を表現できる

インタラクション型プロトタイピングツールの特徴ですが、スクロールやアニメーションなど、リアルな動きを表現できるというのがOrigami Studio最大のポイントです。

トランジション型のプロトタイピングツールでも、モックアップを作成するのに困るわけではありませんが、Origami Studioはよりプロダクトに近い形のプロトタイピングツールを作成することができます。

できあがったデザインをパーツに分けてアップロードしないといけないのでその分手間はかかってしまいますが、再現度の高いプロトタイプが出来上がるのでフィードバックの質も高くなりますし、何よりプロダクトが出来上がった後にイメージと違うという戻しが無くなります。

急がば回れとはよく言いますが、まさにその通りでエンジニアとのコミュニケーションも取りやすくなり、Origami Studioでプロトタイプを作って開発したプロダクトはスケジュール通りに進みやすいような気がします。

iOS、Androidの基本パーツが充実

Origami StudioにはiOS, Androidで汎用的に使われるパーツの素材がライブラリで提供されているため、わざわざ素材をWebで探してダウンロードなどする必要がありません。

また、それらのパーツの動き方やパラメータなども指定することができるので、面倒な設定をすることなく、プロトタイプに活用することが可能です。

ProtoPie

ProtoPieは複合型のプロトタイピングツールです。トランジション型のような画面遷移を再現することができ、インタラクション型のようにアニメーションや動作を表現することが可能です。

ProtoPieは日本ではまだあまり知られていないサービスかもしれませんが、使い勝手がとても良く、今後利用者も増えるのではないでしょうか。

ProtoPieのおすすめポイント

どんなプロトタイプでも自在に作成できる

トランジション型はアニメーションをプロトタイプで表現することができず、インタラクション型は画面遷移をプロトタイプで表現することができません。しかし、ProtoPieは複合型のプロトタイピングツールなので、限りなく実際にプロダクトに近い状態のプロトタイプを作成することができます。

ユーザビリティも非常に高いツールで、直感的な操作でプロトタイプを作成することができます。無料で使える期間が限られているため、本格的に導入するなら有料プランに登録しなければなりませんが、お金を払ってでも使う価値のあるツールです。ぜひ検討してみてください。

インタラクション理念が分かりやすい

ProtoPieは「インタラクション理念」と呼ばれる考え方をベースに作られています。インタラクション理念は、「オブジェクト」、「トリガー」、「レスポンス」の3つの要素を組み合わせで成り立っています。

例えば、「画像（オブジェクト）」を、「ダブルタップ（トリガー）」すると、「拡大（レスポンス）」する。と言ったように、実際のプログラミングに近い考え方だということが分かるかと思います。

そのため、Origami Studioと同様に実際にプロダクトの完成形に近い形のプロトタイプを作成することができ、開発フェーズに入った際の手戻りを減らすことができるため、スムーズに開発を進めることが可能になります。

センサー機能が利用できる

画面の傾きや、マイクで拾った音声など、画面上の操作に限らず「センサー」を利用したプロトタイプを作成することが可能です。

従来のプロトタイプがデザインの確認に過ぎなかったのに対し、ProtoPieで作ったプロトタイプは簡易版プロダクトの領域まで達していて、UIだけでなくUXもプロトタイプの段階で確認することができます。

Sketchファイルの連携

ProtoPieもProttやInVisionと同様にSketchからのインポート機能が搭載されています。わざわざ画像を書き出す必要が無いので、効率的に作業を行うことができますね。

Framer X

Framer Xは、インタラクションデザインに強いプロトタイピングツールです。スクロールやタップ時のアニメーションなど、アプリデザインなどを行う際によりプロダクトに近い形のプロトタイプを作成することができます。

一番の魅力は、Reactのコードを使ってデザインを動かすことができるという点です。動的なデザインを作成するのは非常に手間がかかりますが、デザインツールの中でコードを描くことによって効率的に作業を行うことができます。

Framer Xのおすすめポイント

Reactで動的なプロトタイプが作成できる

Framer Xは、デザインツールでありながらReactのコードと連携することができ、作成したデザインをコードを使って動かしたり、変化させることができます。

例えば、チェックボックスを押すとチェックを入れるようなアクションをプロトタイピングツールで実現する場合、従来は全パターンの画面デザインを用意しなければなりませんでしたが、Framer Xを使えば1つのデザインで実現することができます。

フロントエンドエンジニアにおすすめ

実際にコードを書いてプロトタイプを作成していたような現場では、Framer Xを使うことによって同じことがより短い時間で実現することができます。

ReactはWebのフロントエンドの言語ですが、すでにReactを使っている開発チームであれば、プロトタイプを簡単に作ることができるようになり、さらにそのコードを活用してプロダクトを作ることができます。

Reactを使いこなせるフロントエンドエンジニアであれば、あっという間にプロトタイプが完成してしまうでしょう。

結局どれがいいの？

ここまで、おすすめのプロトタイピングツールを5つ紹介してきました。どのツールが一番いい、というのは使う人によって異なると思いますが、それぞれの特徴を改めてまとめてみました。

以上を参考にして、目的にあったツールを選んでみてください！

まとめ

プロトタイプを作成するためには、まずワイヤーフレームやデザインを作成する必要があります。デザインツールも最近では色々なサービスが登場しており、デザイン制作を効率的に行えるようになりました。

プロダクト開発にプロトタイピングツールを導入することで円滑に開発を進めることができるようになりますが、デザインが更新される度に設定を変えたり、メンテナンスに結構手間がかかります。また、みんなで更新をしていると、最終的にメンテナンスされなくなってしまい、放置されてしまう場合も多いです。

デザイナーならデザイナー、ディレクターならディレクターが責任を持ってプロトタイプを管理するようにし、しっかりと更新作業を行わないとプロトタイピングツールを活用する意義が半減してしまいます。

優れたプロダクトやWebサイトを作成できるよう、ぜひプロトタイピングツールを活用してみてください！

おすすめの記事