更新日: 2017年03月15日
公開日: 2016年09月13日

プロトタイプを理解してデザインを加速する！おすすめツール3選

プロトタイプの基本と、おすすめのプロトタイピングツールについてまとめました。まずはプロトタイピングツールとはどういったものなのか、プロトタイプの説明と併せて解説していきましょう。

プロトタイピングとは？
UXデザインを確認するためのステップ
プロトタイピングツールを活用しよう
プロトタイピングツール3選
Prott
Adobe Experience Design
InVision
あとがき

プロトタイピングとは？

UXデザインを確認するためのステップ

プロトタイプとは、ウェブサイトやアプリのデザインで使われる手法のことです。ワイヤーフレームやモックアップにより練られたデザインをもとに、機能や操作性などのUX面を改善していくことを目的にしています。

具体的には、ウェブページやアプリの画面を、ブラウザや実機から操作できるものを指すことが多いです。デザイナーや開発者はプロトタイプを自分で操作しながら、または関係者に使ってもらうことで、不具合や設計上の間違いなどを洗い出していくのです。

プロトタイピングツールを活用しよう

プロトタイプを作るのは、それなりに手間がかかります。例えばウェブサイトの場合は、デザイン素材をレイアウトしたり、リンクを整備したりします。これらをHTML/CSS、JavaScriptなどのコーディングをしながら手作業でコツコツと作るのは、ちょっと大変です。出戻りがあったりすると大幅に修正しなければいけなかったりもするので、非効率ですよね。

そこで活用したいのが、プロトタイピングツールです。プロトタイピングとは、プロトタイプを作っていくことを指しています。つまり、プロトタイピングツールとはプロトタイプを作るための専用ツールなのです。ドラッグアンドドロップなどの直感的な操作で画面が作れたり、作成したプロトタイプの共有も簡単にできるものが多いです。

プロトタイプを作成する業務を一気に楽にしてくれるので、まだ使っていない方はぜひ導入を検討してみてくださいね。

プロトタイピングツール3選

ここからは、おすすめのプロトタイピングツールを3つご紹介していきます。どれも評判の良いツールですが、機能や使い勝手も異なります。プロジェクトや開発チームの体制を考慮して、最適なツールを選択していってください。

Prott

Prott - Prototyping tool for Web iOS Android apps

プロトタイピングツールとして、おそらく最も勢いのあるサービスなのがProttでしょう。作成できるプロジェクトが1つのみのFreeプランからワイヤーフレーム機能が使えるProプラン、企業向けのEnterpriseプランなど計5つの料金体系となっています。

プロトタイピングは手間なことが多いのですが、Prottだとササッと手軽にプロトタイプを作ることができます。写真やアイコンなどのデザイン素材をアップロードして画面デザインを整えたのち、画面同士をリンクさせればプロトタイプの作成が完了です。

プリセットされているUI要素をつかったり、手書きのスケッチを取り込む機能も備わっています。画面遷移の全体図を使ったり、チームメンバーなど複数人でプロトタイプを共有することも可能です。

Adobe Experience Design

ユーザーエクスペリエンス、プロトタイプ作成 | Adobe Experience Design CC

Adobeが提供しているプロトタイピングツールです。以前はProject Cometと呼ばれていたのですが、2016年3月からAdobe Experience Design（XD）という名称で新しくローンチされました。UXデザインに特化したツールで、プロトタイプ作成を便利にしてくれる機能が備わっています。

ウェブサイトとモバイルアプリのプロトタイプ作成が可能で、ドラッグアンドドロップなどの簡単な操作で使うことができます。目玉機能の一つは、要素の繰り返しができるリピートグリッド機能です。

おおまかな使い方ですが、デザインモードで画面を作り、プロトタイプモードで画面遷移などのプロトタイピングをしていきます。作成したプロトタイプは再生をしたり、録画・共有を行うことも可能です。

なお、本ツールは今のところMacでしか使うことができません。Windows版の開発も進められているようなので、Windowsユーザーの方は気長に待ちましょう。