UXデザインに欠かせない!おすすめのプロトタイピングツール7選【2019年最新】UXデザインに欠かせない!おすすめのプロトタイピングツール7選【2019年最新】プロトタイピングツールも最近は色々な進化を遂げ、単にプロトタイプを作成するだけに限らず、プロトタイプの画面上にコメントを残してフィードバックしたり、リモートで音声通話ができたり、画面遷移図だってプロトタイプから出力することができるようになっています。色々なプロトタイピングツールが登場している中、いまいちどのツールがいいのかよく分からないという方も少なくないのではないでしょうか。そこで、今回はおすすめの7つのプロトタイピングツールについて、それぞれの機能を比較しながらご紹介したいと思います。Xのおすすめポイント結局どれがいいの?まとめプロトタイピングツールとはプロトタイピングツールとは、Webサイトやアプリなど、実際のプロダクト制作を行う前にプロトタイプを作成するためのツールです。プロトタイプとは何かというと、下記のようになります。UIやUXを確認するために、画面デザインを組み合わせて作成したプロダクトのモックアップのこと。UI、UXデザインのブラッシュアップに用いられる事が多い。プロトタイプを作ることで、画面遷移やアニメーションなどの動き、流れを確認することができるため、よりリアルなプロダクトに近い状態でUXデザインを確認することが可能です。プロトタイプは一度作成したら完成というわけではなく、チームのメンバーや外部テスターに共有したりして、フィードバックをもらいながら修正を重ね、改善し続けます。様々なプロトタイピングツールがありますが、目的によって使い分けることで、より効率よくプロトタイプ作成とフィードバックを行うことができます。一般的に、プロトタイピングツールの種類は大きく3つに分けることができます。プロトタイピングツールの種類についてそれぞれご説明したいと思います。トランジション型トランジション型は、画面遷移をプロトタイプで行うことができます。プロダクト全体の流れや、操作のフローを確認したい場合はトランジション型が使われます。インタラクション型インタラクション型は、同じ画面内での細かなアニメーションや動き方をプロトタイプに落とし込むのに使われます。スクロールした時にアニメーションをつけたり、スクロールの動き方などを表現したい場合はインタラクション型を使うのが向いています。最後に複合型は、トランジション型とインタラクション型のどちらも行うことができるタイプです。画面遷移の確認も行えて、アニメーション等も表現することができます。そのため機能が豊富で多様なプロトタイプを作成することができますが、無料で利用できるものが少なかったり、使い方を覚えるのに時間がかかってしまうものが多いです。プロトタイプを作成する場合には、プロトタイプ上で何を確認したいのかを初めに決め、それからプロトタイピングツールの選定を行うのがいいでしょう。おすすめのプロトタイピングツール様々なプロトタイピングツールが公開されていますが、今回はその中でも特におすすめのプロトタイピングツールを7つご紹介します。X(複合型)Prottプロトタイピングツールと言われて一番最初に思いつくのは「Prott」だという方が多いのではないでしょうか。ProttはGoodpatchという日本の会社によって提供されているサービスで、多くの企業でSketchとProttを組み合わせてデザイン制作が行われています。Prott公式サイトProttのおすすめポイント機能が豊富おすすめのポイントは、何と言っても機能の豊富さです。画面遷移を作成したり、コメントを残したり、デザイン一覧をダウンロードしたりなど、プロトタイプを作成する時に必要になる機能が一通り備わっているため、Prottを使っておけば困ることはあまりありません。有料プランにすれば様々な機能が利用できる有料プランと比べると使える機能が限られてしまいますが、Prottには無料プランが用意されています。チームでの制作となると機能が不足するかもしれませんが、個人で使うのであれば無料プランで困ることは無いでしょう。1ユーザー1プロジェクトスクリーン無制限レビュアー無制限なお、有料プランになると、下記機能が利用できるようになります。グループ機能ワイヤーフレーム機能や画面遷移図作成など、プロダクト開発の現場で役立つ機能がたくさんあり、それがProttの魅力の1つです。予算的に余裕がある場合は、ぜひ有料プランを利用してみてください。Sketchと連携可能Sketchのプラグインを使うことで、簡単にSketchとProttを連携させることができ、連携することでSketchで編集した内容を簡単にProttに反映させることが可能です。細かい修正の積み重ねが必要なデザイン作業において、この機能は非常に助かりますね。こちらの記事にProttの詳しい情報をまとめました国産プロトタイプツール「Prott」の特徴やメリットなどプロトタイプとは、作成した画面のデザインを、擬似的に動くように組み立てて、その表示のされ方や動きを確認するために作成するモックアップのようなものです。trendsInVisionInVisionは海外でよく使われているプロトタイピングツールで、細かい機能は若干異なりますが、基本的にはProttと同じようなツールです。(もともとInVisionが海外で使われており、その後にProttがリリースされているため、正確にはProttがInVisionに似ているというのが正しいです)すでにProttを使っているという方はわざわざ乗り換える必要はないかもしれませんが、これからプロトタイピングツールを初めて使うという方は世界的にみるとInVisionの方が使われているサービスなので、ぜひ検討してみてください。SHAREという機能があり、リアルタイムでコメントを残したり、音声通話をすることだってできます。フィードバックをもらうためにわざわざ共有して、コメントが残されるのを待ち、それから確認して、という形で作業をしているととても効率が悪いですよね。そんな時は決まった時間にチームのメンバーでInVisionに集合し、リアルタイムでのコミュニケーションを取りながらフィードバックを行えば、作業効率もグッとあがるのではないでしょうか。ユーザーテストが行えるUserTesting.comと連携することで、簡単にユーザーテストを行うことができます。同じサービスに長く関わっていたり、自分の作成したデザインだと第三者目線がどうしても薄れてしまい、使いづらいポイントを見つけることが難しくなってしまいます。そんな時に役立つのがユーザーテストで、色々な人にプロトタイプを実際に触ってもらうことで、問題点が浮かび上がったり改善につながることはとても多いです。優れたサービスを作る上でユーザーテストを行えるというのは非常に大きなメリットですね。Sketchと連携できるProttと同じように、InVisionもSketchと連携することでデザインの変更を簡単に反映させることができます。InVisionについてはこちらの記事で詳しくご紹介していますプロトタイピングツール「InVision」はここまで進化したプロトタイピングツールは、実際にウェブ制作を行う前にモックを作成し、完成形をイメージしやすくするためには欠かせないツールです。trendsSketchSketchはアプリのUIデザインを作成するツールとして、多くの企業が導入しています。Sketchにはプロトタイプを作成するツールはありませんでしたが、現在ではプロトタイプを作成してWeb上で共有する機能が公開されています。Sketchでデザインを作成して、他のプロトタイピングツールと連携する方法でも実現は可能ですが、より簡単にプロトタイプを作成することができるので、管理もしやすく便利です。Sketch公式サイトSketchのおすすめポイント作業が効率的Sketchは先にも説明した通り、デザインツールとプロトタイピングツールが一体となっているので、管理が行いやすく、プロトタイプを作る作業がとても効率的です。デザインツールとプロトタイピングツールをそれぞれ別のツールを使用していた場合、デザインの修正をする時はデザインツールで修正して、それをプロトタイピングにも反映しなければならず、二度手間になってしまいます。Sketchで完結させてしまえば、プロトタイプを触る中で修正したいポイントが見つかったら、すぐに修正して確認することができますね。簡単にシェアできるプロトタイプをクラウドにアップロードすると、URLが生成されてそれをシェアするだけで簡単にプロトタイプをメンバーに共有することができます。Web上で実際にプロトタイプを確認したら、そのWebページ上でコメントを残すこともできるようになっているため、フィードバックが簡単に行えるというのもポイントです。プラグインでインタラクションデザインも可能Sketchには、標準でアニメーションなどインタラクションなデザインを作成する機能はありませんが、実はプラグインを導入することで動きを持ったデザインを作成することもできます。クオリティはインタラクションデザインに特化したツールに劣りますが、Sketch上で実現できるというメリットはとても大きいですね。Sketchは、Sketch上でアニメーションのデザインが作成できるプラグインです。XDは、Adobeが提供するデザイン+プロトタイピングツールです。動作がサクサクで、デザインツールの使いやすさとしてはピカイチのクオリティを誇ります。XDの方が人気があるみたいですね。Adobe製品ということで他のソフトとショートカットが共通化されていたり、普段からAdobe製品を使っている人なら特に使い方を覚えること無く、使いこなすことができます。XDはデザイン制作とプロトタイプ作成のどちらも行うことができるので、作業中にツールを複数立ち上げたり、ソフトの切り替えを行いながらプロトタイプを作成する必要がありません。SketchとProttで作業を行っている方なら分かるかと思いますが、デザインを更新した時の反映作業が意外と手間で、忘れがちだったりします。XDを使うとそういった面倒な作業が無くなるため、その分効率よく作業を行うことができますね。CCに登録しているユーザーであれば、追加登録無しで利用することができます。XDを使えることになりますね。CCを利用している方であれば追加料金無しで使用することができます。無料でこれだけ優れたソフトが使えるのであれば、わざわざSketchやProttを使う必要はありませんね。XDの特徴や優れた点についてはこちらで詳しくご紹介しています。XDは、SketchがUIデザインツールの主流となりつつある中で、2016年に突如登場したUIデザインツールです。StudioはFacebookが提供するプロトタイピングツールです。Facebookのような企業がこういったツールを公開するのは珍しく、2016年に発表された際には非常に大きな注目を集めました。XDと異なりインタラクション型のプロトタイピングツールです。画面遷移をプロトタイピングで表現することはできませんが、同じ画面内での動きやアニメーションをプロトタイプに組み込みたい場合はインタラクション型のプロトタイピングツールがおすすめです!インタラクション型のプロトタイピングツールは、設定する項目が多く、他のツールと比べると使いこなせるようになるまで少し時間はかかってしまいますが、使い方を覚えてしまえば他のツールとは一味違ったプロトタイプを作成することができます。Studio最大のポイントです。Studioはよりプロダクトに近い形のプロトタイピングツールを作成することができます。できあがったデザインをパーツに分けてアップロードしないといけないのでその分手間はかかってしまいますが、再現度の高いプロトタイプが出来上がるのでフィードバックの質も高くなりますし、何よりプロダクトが出来上がった後にイメージと違うという戻しが無くなります。Studioでプロトタイプを作って開発したプロダクトはスケジュール通りに進みやすいような気がします。Androidで汎用的に使われるパーツの素材がライブラリで提供されているため、わざわざ素材をWebで探してダウンロードなどする必要がありません。それらのパーツの動き方やパラメータなども指定することができるので、面倒な設定をすることなく、プロトタイプに活用することが可能です。ProtoPieProtoPieは複合型のプロトタイピングツールです。トランジション型のような画面遷移を再現することができ、インタラクション型のようにアニメーションや動作を表現することが可能です。ProtoPieは日本ではまだあまり知られていないサービスかもしれませんが、使い勝手がとても良く、今後利用者も増えるのではないでしょうか。インタラクションデザインのプロトタイプ作成には「ProtoPie」がおすすめ!ProtoPieは、インタラクションデザインのプロトタイプを作成できるプロトタイピングツールです。trendsProtoPie公式サイトProtoPieのおすすめポイントどんなプロトタイプでも自在に作成できるトランジション型はアニメーションをプロトタイプで表現することができず、インタラクション型は画面遷移をプロトタイプで表現することができません。ProtoPieは複合型のプロトタイピングツールなので、限りなく実際にプロダクトに近い状態のプロトタイプを作成することができます。ユーザビリティも非常に高いツールで、直感的な操作でプロトタイプを作成することができます。無料で使える期間が限られているため、本格的に導入するなら有料プランに登録しなければなりませんが、お金を払ってでも使う価値のあるツールです。検討してみてください。インタラクション理念が分かりやすいProtoPieは「インタラクション理念」と呼ばれる考え方をベースに作られています。インタラクション理念は、「オブジェクト」、「トリガー」、「レスポンス」の3つの要素を組み合わせで成り立っています。「画像(オブジェクト)」を、「ダブルタップ(トリガー)」すると、「拡大(レスポンス)」する。言ったように、実際のプログラミングに近い考え方だということが分かるかと思います。Studioと同様に実際にプロダクトの完成形に近い形のプロトタイプを作成することができ、開発フェーズに入った際の手戻りを減らすことができるため、スムーズに開発を進めることが可能になります。センサー機能が利用できる画面の傾きや、マイクで拾った音声など、画面上の操作に限らず「センサー」を利用したプロトタイプを作成することが可能です。従来のプロトタイプがデザインの確認に過ぎなかったのに対し、ProtoPieで作ったプロトタイプは簡易版プロダクトの領域まで達していて、UIだけでなくUXもプロトタイプの段階で確認することができます。Sketchファイルの連携ProtoPieもProttやInVisionと同様にSketchからのインポート機能が搭載されています。画像を書き出す必要が無いので、効率的に作業を行うことができますね。Xは、インタラクションデザインに強いプロトタイピングツールです。スクロールやタップ時のアニメーションなど、アプリデザインなどを行う際によりプロダクトに近い形のプロトタイプを作成することができます。魅力は、Reactのコードを使ってデザインを動かすことができるという点です。動的なデザインを作成するのは非常に手間がかかりますが、デザインツールの中でコードを描くことによって効率的に作業を行うことができます。Xは、デザインツールでありながらReactのコードと連携することができ、作成したデザインをコードを使って動かしたり、変化させることができます。Xを使えば1つのデザインで実現することができます。Xを使うことによって同じことがより短い時間で実現することができます。ReactはWebのフロントエンドの言語ですが、すでにReactを使っている開発チームであれば、プロトタイプを簡単に作ることができるようになり、さらにそのコードを活用してプロダクトを作ることができます。Reactを使いこなせるフロントエンドエンジニアであれば、あっという間にプロトタイプが完成してしまうでしょう。結局どれがいいの?ここまで、おすすめのプロトタイピングツールを5つ紹介してきました。どのツールが一番いい、というのは使う人によって異なると思いますが、それぞれの特徴を改めてまとめてみました。Xフロントエンドエンジニアが簡易的にプロトタイプを作る場合におすすめReactを使った動的なプロトタイプが作れる以上を参考にして、目的にあったツールを選んでみてください!まとめプロトタイプを作成するためには、まずワイヤーフレームやデザインを作成する必要があります。デザインツールも最近では色々なサービスが登場しており、デザイン制作を効率的に行えるようになりました。日々新たなデザインに関するニュースが飛び交っていますが、それはUIデザインツールに関しても同様です。trendsプロダクト開発にプロトタイピングツールを導入することで円滑に開発を進めることができるようになりますが、デザインが更新される度に設定を変えたり、メンテナンスに結構手間がかかります。みんなで更新をしていると、最終的にメンテナンスされなくなってしまい、放置されてしまう場合も多いです。デザイナーならデザイナー、ディレクターならディレクターが責任を持ってプロトタイプを管理するようにし、しっかりと更新作業を行わないとプロトタイピングツールを活用する意義が半減してしまいます。Trends(ウェブデザイントレンド)は、Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立つ情報、最新トレンド、チェックすべきサービスなどを配信しています。