Web上で無料で使えるプロトタイピングツール「InVision」

Webサイト制作を行う際に意図したことをユーザーに本当に伝えられるかどうか検証するにはプロトタイプが非常に役に立ちます。

プロトタイプとは

プロトタイプとは、ホームページやアプリのデザイン時に制作される試作品のようなものです。
簡易的にWebサイトを制作し、情報を配置し、リンクなどを設置します。
制作者がワイヤーフレームやモックアップによってデザインしたアイデアをもとに、より目的に即したUI（※注1）と、UX（※注2）を実現するために実際に動作させて検証することを目的としています。

※注1 User Interfaceの略。ホームページの場合、画面に表示されるデザインやフォントなど、ユーザーの目に入るすべての情報のことを指します。
※注2 User Experienceの略。ホームページの場合、「デザインが美しい」、「注文までの導線がわかりやすい」など、ユーザーが得られるすべての体験のことを指します。

プロトタイプを制作するメリット

• お客様と制作者の意向に齟齬はないか？
• ファーストビューでターゲットとするユーザーが離脱してしまうような見た目でないか？
• コンバージョンに至るまでの導線に無駄はないか？

プロトタイプによってより完成に近いイメージを確認することで、ドキュメントでの記述レベルでは伝わりにくい部分も分かり易い形で共有することができます。
そのため、デザイン面での修正や改善を早期に行うことができます。
また機能や操作性の確認もできるので、漏れや間違いを修正したり、ブラッシュアップしたりすることも可能です。
このような特長を持つプロトタイプは、お客様と制作者の、また制作プロジェクトに関わるすべてのメンバー間での円滑なコミュニケーションを行うためのツールにもなるのです。

プロトタイピングツール

一見メリットだらけのプロトタイプですが、第三者に見てもらうためには、評価に値するレベルのものを作る必要があります。実際のところ、テキストや画像を配置したり、リンクなどの機能を整備したりと、プロトタイプを手作業で作るのはとても手間がかかります。
そこで活躍してくれるのが、制作専用のツールであるプロトタイピングツールですが、プロトタイピングツールと一言で言っても、海外で開発されたツールのほか日本発のものもあり、目移りしそう。そこで今回はお勧めプロトタイピングツールのひとつ、「InVision」をご紹介します。

「InVision」

「InVision」は2012年にリリースされた、Web上で無料使用できる（機能に制限あり。有料版は＄15～/月。）プロトタイピングツールです。
「Get high-fidelity in under 5 minutes.」とうたっているとおり、簡単な操作で高品質かつ原案に忠実なプロトタイプを作成することができるのが魅力です。
もともとプロトタイプ作成に特化されているため、ドラッグ＆ドロップでファイルをアップロードし、リンクを繋げることによって簡単にプロトタイプを作ることができるだけでなく、使い勝手の良い機能が満載です。なかでも評価の高いものには次のようなものがあります。

「LIVESHARE」機能

「InVision」には「LIVESHARE」という機能があり、離れた場所にいる他のメンバーとリアルタイムでやり取りができます。ライブシェア時には各メンバーが実際に画面を確認し、やり取りしながら、動作確認やコメントを残すといったこともできます。なにかしらの提案に対し、他のメンバーからのコメントを待つといった時間のロスがなくなるため、非常に作業効率があがります。

気軽にコメントが残せる

コメントを残したい場所をクリックするだけでコメントが残せるので、どの箇所を示すのか詳しく説明する必要がありません。また個々のコメントに対して返信ができるだけでなく、4色に色分けできる点もポイント。内容によって色を使い分けることにより、複数人でフィードバックする場合でも見やすく、タスク管理がしやすくなります。

スマホのデザインが実機でチェックできる

URLから、スマホ画面を通した実際の見た目や操作性を確認できる機能もポイントが高いです。実際にホームページを制作しはじめてしまってからスマホでチェックしたときに問題が発覚し、大きな修正が必要になるケースがあります。プロトタイプの段階できちんと実機で確認、修正を行っていれば、後で余計な労力と時間を費やすことがなくなります。

今回は汎用性の高い3つの機能をご紹介しましたが、「InVision」にはこれら以外にも、さまざまな機能が搭載されており、使い方次第では、どこまでも作業効率を向上させることができそうです。

とにかく使ってみよう！

プロトタイプとは？プロトタイピングツールとは？だいたいおわかりいただけたでしょうか。
今回ご紹介した「InVision」のほかにも、Adobe社が提供している「Adobe XD」や国産プロトタイピングツールの「Prott」など広く利用されている様々なツールがあります。
他のツールの多くも、簡単に操作できるという共通点がありますが、使い勝手や特長もさまざまです。まだ使ったことがない方はこの機会に比較してみて、ご自身がもっとも効率よくデザインできるツールを導入することをおすすめします。

参考：InVision