KOBITブログ

納期間際の徹夜からはもうおさらば!早期にUIデザインを固めるプロトタイピングツールのまとめ

この記事は約 7分 で読めます。

Invision

「機能追加をしてほしい」「この見栄えが気にいらない」納期が近づいてからの仕様変更はプロジェクトの成否に大きく関わります。Web制作会社にとってはUI/UX設計について顧客と合意できるかどうかが死活問題と言えるでしょう。プロジェクトの早期にプロトタイプを作成し、顧客とのコミュニケーションを深め、認識の齟齬をなくす試みは欠かせないものとなりました。そんな開発者に必要な、誰でも簡単にプロトタイプが作成できる便利なツールを紹介します。

アニメーションやモバイル対応も可能な最新のプロトタイピングツール

クックパッドのデザイナー元山和之氏は、プロトタイピングを「製品やサービスを作る前に早期に完成形に近い試作品を作って、問題点を検証したり精度を高めたりする手法やそのプロセス」であると語りました。プロトタイピングによって依頼主、デザイナー、エンジニアといったチーム間での共通理解を深め、作業の手戻りを防ぐ効果が期待できます。

UIデザインは言葉で伝えるのが困難であるため、本質的に共通理解をとるのが難しい存在です。そこで視覚的に訴える手段により、相互理解が進むようになります。特に、新規のWebサービスやモバイルアプリを開発する場合、ユーザーからのフィードバックを受けていないプロジェクト初期段階では、どのような機能をどのような見栄えで提供するのかは、誰にも分かりません。早い段階で問題点を洗い出す作業が、プロジェクトの生産性に大きく影響するのです。

プロトタイプは紙に鉛筆で記載しても作成は可能です。小さなチームで小規模の製品を開発するのであれば、それで十分かもしれません。あるいは、パワーポイントを使って画像とアニメーションを駆使すれば、試作品はできてしまいます。しかし、開発の規模が少し大きくなると、紙やパワーポイントでには限界があります。

複雑な画面遷移やユーザーとの双方向性のある処理は、実際のアプリと同様の挙動が再現できるツールの採用が適しています。さらに、マルチデバイスへの対応が要求される現代では、マウスオーバーやフリックなど、デバイスによって異なるアニメーションやアイコンの使い分けが必要です。また、オンラインツールであれば、お互いがプロトタイプに対してコメントを書き込むなど、チーム間でのコミュニケーションが容易になるというメリットも上げられます。

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

balsamiq

Balsamiq

balsamiqはドラッグ・アンド・ドロップを使い、鉛筆でスケッチするかのように簡単にワイヤーフレームが作成できるツールです。画面遷移などの表現も可能なので、複雑なサイト構成であっても対応できます。Web上で利用できるのに加え、WindowsやMacにダウンロードした後でのプロトタイプ作成も可能です。AppleやAdobe、ソニーといったデザインに優れた企業を含めて、30万社が利用しています。

https://balsamiq.com/

axure

Axure

axureはUX(ユーザー体験)の設計を行うプロ仕様のプロトタイピングツールです。画面のワイヤーフレームはもちろん、画面遷移図やユーザー・シナリオの設計まで、全て一つのツールにまとまっています。ユーザーが抱える本当の問題に気付き、後続の作業を行うエンジニアに正確な情報を伝えるのに役立つでしょう。

http://www.axure.com/

prott

prott

「1000の会議より、1つのプロトタイプ」prottが伝えるメッセージは明確です。世界的なデザインコンサルティング会社IDEOや、ヤフージャパン、DeNA、GREEなどがユーザーとなっています。直感的な操作で簡単にプロトタイピングが行える点が人気を集めました。東京とベルリンに拠点を置くグッドパッチ社が開発しています。

https://prottapp.com/

InVision

Invision

一つのプロジェクトまでは無料で利用できる高品質なプロトタイピングツールがInVisionです。画像をアップロードし、アニメーションなどを設定すれば、立ちどころにインタラクティブな画面デザインが完成します。画面デザインの中にコメントを書き込めるので、チームメンバーやテストユーザーからのフィードバックを収集するのが容易になります。リアルタイムでのチーム内コミュニケーションを促進するのがInVisionが評価される理由の一つです。TwitterやUBERなどの企業から利用され、既に150万人のユーザーを抱えています。

https://www.invisionapp.com/

Sketch

Sketch

プロのUIデザイナーが設計する際に活用できるツールがSketchです。ピクセル単位での画像の作成・配置など専門的な機能が提供されています。画面要素の再利用や複数のフォーマットでの出力などによって生産性向上に寄与します。デザイナーが好んで使用するMac上で使用するツールです。

http://www.sketchapp.com/

FLINTO

Flinto

FLINTOはMac向けとオンラインと2通りに利用可能なプロトタイピングツールです。特に、Mac向けアプリでは簡単なクリックでプロトタイプを作成できる点が特徴となっており、アニメーションによる画面遷移など、複雑な挙動でも単純な操作でプロトタイプが完成します。前述のツールSketchからファイルを取り込む機能も提供されています。

https://www.flinto.com

Marvel

marvel

無料で無制限にプロトタイプが作成したければ、Marvelは検討する価値があります。キャンバスと呼ばれるデザインツールによってモバイルアプリやWebサイトのプロトタイプ作成が可能です。Google DriveやDropboxとの連携機能により、作成したプロトタイプをクラウド上に保存できます。

https://marvelapp.com/

atomic

atomic

atomicはプロトタイピングに関わる一連の作業を網羅するツールです。画面デザインに始まり、実際のデバイス上でのプレビュー、さらに、バージョン管理やフィードバック収集など、実際のプロトタイプ設計に必要な各工程で大きな助けになります。GoogleやSalesforceといった大企業からの利用も報じられました。

https://atomic.io/

Pixate

pixate

Pixateは2015年にGoogleへ買収されたプロトタイピングツールです。デスクトップアプリは無料、クラウド上での利用であれば毎月5ドルからという格安の料金が設定されています。値段は安くても、機能はその他のツールに負けておらず、操作が容易なデザイン機能、チーム内コラボレーションなどが可能です。

http://www.pixate.com/

Adobe XD

adobe

Photoshopを始めとするデザインツールで知られるAdobeからもプロトタイピングツールが開発されています。以前はProject Cometと呼ばれていましたが、現在はAdobe XD(Experience Design)として提供されるようになりました。インタラクティブなプロトタイプを作成し、デザイン要素の再利用を促し、プレビュー・共有を行うというプロトタイピングに関わる一連の作業に有用です。

http://www.adobe.com/es/products/experience-design.html

まとめ

納期間際の仕様変更によって徹夜するのは止めましょう!プロジェクトの初期段階からUX/UIに関する擦り合わせを行うプロトタイピングは、作業の手戻りを防ぎ、チームの生産性を大きく向上させ、プロジェクトの成功に大きく寄与します。

参考文献

http://careerhack.en-japan.com/report/detail/463


さあ、KOBITをスタートしよう。