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



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

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

目次
  1. プロトタイピングとは?
  2. UXデザインを確認するためのステップ
  3. プロトタイピングツールを活用しよう
  4. プロトタイピングツール3選
  5. Prott
  6. Adobe Experience Design
  7. InVision
  8. あとがき

プロトタイピングとは?

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

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

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

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

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

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

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

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

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

Prott

Prott

Prott - Prototyping tool for Web iOS Android apps

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

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

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

Adobe Experience Design

Adobe Experience Design

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

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

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

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

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

InVision

InVision

Free Web & Mobile Prototyping (Web, iOS, Android) and UI Mockup Tool | InVision

InVisionもプロトタイピングに特化したツールです。デザイン素材をドラッグアンドドロップしてアップロードしたのち、画面を作っていきます。画面ができたら、それぞれの素材に遷移を追加していきます。

プロトタイピングツールの中では高機能な部類に入り、プロジェクト管理やバージョン管理、リアルタイムコラボレーションなどの機能も備えています。

本格的に使うとなると有料のプランでないと厳しいですが、プロトタイプが1つだけ作成できるFreeプランも用意されています。気になった方は、トライアルから利用してみてください。

あとがき

プロトタイプの基礎知識と、おすすめのツールについてまとめました。プロトタイピングは、デザインフローの終盤あたる重要なステップです。デザインの齟齬や修正箇所を見つけたり、機能のブラッシュアップにもつながります。上手に活用していきましょう。

中西洋平
この記事を書いた人
中西洋平
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp