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

色々なプロトタイピングツールが登場している中、いまいちどのツールがいいのかよく分からないという方も少なくないのではないでしょうか。そこで、今回は2017年現在でおすすめのプロトタイピングツールについて、それぞれの機能を比較しながらご紹介したいと思います。

スポンサーリンク

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

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

では、プロトタイプとは何かというと、UIやUXを確認するために、作成した画面デザインを組み合わせて作成したプロダクトのモックアップのことを指します。プロトタイプを作ることで、画面遷移やアニメーションなどの動き、流れを確認することができるため、よりプロダクトに近い状態でデザインを確認することが可能です。プロトタイプは一度作成したら完成というわけではなく、チームのメンバーや外部テスターに共有したりして、フィードバックをもらいながら修正を重ね、改善し続けます。最近のプロダクト開発の現場では、まずプロトタイプを作成してUI,UXを確認し、フィードバックをもらうという流れが一般的になってきました。

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

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

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

  1. トランジション型
  2. トランジション型は、画面遷移をプロトタイプで行うことができます。プロダクト全体の流れや、操作のフローを確認したい場合はトランジション型が使われます。

  3. インタラクション型
  4. インタラクション型は、同じ画面内での細かなアニメーションや動き方をプロトタイプに落とし込むのに使われます。スクロールした時にアニメーションをつけたり、スクロールの動き方などを表現したい場合はインタラクション型を使うのが向いています。

  5. 複合型
  6. 最後に複合型は、トランジション型とインタラクション型のどちらも行うことができるタイプです。画面遷移の確認も行えて、アニメーション等も表現することができます。そのため機能が豊富で多様なプロトタイプを作成することができますが、無料で利用できるものが少なかったり、使い方を覚えるのに時間がかかってしまうものが多いです。

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

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

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

  • Prott(トランジション型)
  • InVision(トランジション型)
  • Adobe XD(トランジション型)
  • Origami Studio(インタラクション型)
  • ProtoPie(複合型)

プロトタイプを作成する場合、画面遷移を確認したい場合が多いためトランジション型が最も一般的なツールとなっており、3つ選びました。その他、インタラクション型と複合型のおすすめのツールを選んでいます。

それぞれのツールが異なる機能を持っていて、それによって作成できるプロトタイプも異なってきます。

では、それぞれのツールの特徴を比較しながら、それぞれご紹介していきたいと思います。

スポンサーリンク

Prott

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

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

Prottのおすすめポイント

Prottのおすすめポイントを紹介していきます!

機能が豊富

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

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

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

  • 1ユーザー
  • 1プロジェクト
  • スクリーン無制限
  • レビュアー無制限

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

  • 複数ユーザーでの利用
  • プロジェクト無制限
  • ワイヤーフレーム機能
  • 画面遷移図機能
  • macOS用アプリ
  • 共同編集機能
  • 組織管理機能
  • グループ機能

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

Sketchと連携可能

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

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

InVision


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

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

InVisionのおすすめポイント

では、InVisionのおすすめポイントをご紹介していきます。

優れたLIVE SHARE機能

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

ユーザーテストが行える

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

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

Sketchと連携できる

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

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

Adobe XD


Adobe XDは2016年にβ版がリリースされて2017年8月20日現在もまだβ版として提供されていますが、公式サイトで「使いやすさを追求した専用ツール」と紹介されているだけあり、とにかく動作がサクサクで使っていてとても気持ちがいいです。

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

まだリリースされて1年ほどしか経っていないため、機能面ではSketch+Prottの組み合わせに劣る部分がありますが、操作性の良さは目を見張るものがあります。

Adobe XDのおすすめポイント

では、Adobe XDのおすすめポイントをご紹介していきます。

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

また、Adobe XDはデザイン制作とプロトタイプ作成のどちらも行うことができるので、作業中にツールを複数立ち上げたり、ソフトの切り替えを行いながらプロトタイプを作成する必要がありません。SketchとProttで作業を行っている方なら分かるかと思いますが、デザインを更新した時の反映作業が意外と手間で、忘れがちだったりします。Adobe XDを使うとそういった面倒な作業が無くなるため、その分効率よく作業を行うことができますね。

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

2017年8月現在はAdobe XDはβ版が提供されているため、Adobe IDを持っている人であれば無料で利用することができますが、今後製品版となったらAdobe CCに登録している人のみ使えるようになると発表されています。そのため、すでに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はよりプロダクトに近い形のプロトタイピングツールを作成することができます。

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

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

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

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

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

ProtoPie


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

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

ProtoPieのおすすめポイント

では、複合型プロトタイピングツールということで、他のツールとは一味違った使い心地のProtoPieのおすすめポイントをご紹介していきます!

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

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

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

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

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

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

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

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

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

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

Sketchファイルの連携

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

結局どれがいいの?

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

Prott
  • Sketchで作成したデザインをもとにプロトタイプを作成したい人におすすめ
  • 国産ツールなので、サポートとのコミュニケーションが取りやすい
InVision
  • Sketchで作成したデザインをもとにプロトタイプを作成したい人におすすめ
  • 海外の相手と仕事を行う場合でも安心
Adobe XD
  • デザインとプロトタイプの作成の両方の機能を利用できる
  • すでにAdobe CCに登録している人は製品版になっても無料で利用できる
Origami Studio
  • アニメーションやスクロールなど、動きを細かく設定することができる
  • 無料で利用できる
Adobe XD
  • 複合型なので、完成度の高いプロトタイプを作成することができる
  • 直感的なインターフェイスで、すぐに使いこなせるようになる

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

Googleもプロトタイピングツールをリリースするかも


Googleのマテリアルデザインに関するサイトで、Galleryと呼ばれるツールの紹介ページが公開されています。まだサービスとしてリリースされていませんが、公式サイトに公開されている情報をもとに、どんなサービスになりそうかご紹介しています。

実際にどんなツールが公開されるのか分かりませんが、Google製ということで公開されるのが待ち遠しいですね!

まとめ

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

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

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

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

おすすめの記事