プロトタイプを活用して、利用体験をわかりやすく共有しよう

インタラクションデザイナーの橋本です。今回はアプリケーションをデザインする際の、プロトタイプの活用のしどころとプロトタイプの種類と使い分けについて紹介します。

プロトタイプの活用のしどころ

先日、FacebookからiPhone用のニュースリーダーアプリPaperが米国向けにリリースされました。
雑誌を流し読むように投稿やニュースにざっと目を通しつつ、気になったものは新聞を広げるようにして続きを読む...そんな使い方が、手のかかったなめらかな動きで実現されています。*

しかし、こうしたインターフェイスも、当然ながら最初は発案者の頭の中にしかなかったものです。こうした動きのある製品を作ろうとするとき、私たちはインターフェイスのイメージをプロジェクト関係者にどうやって共有していけばよいのでしょうか？

画面イメージを伝える際にはワイヤーフレームがよく使われますが、このような動きのない静的なドキュメントでは、実際にアプリがどのように使えるのか想像しづらいでしょう。そのため、動きをつけたプロトタイプでデザインした画面を共有していくことが効果的です。

例として、私が作成したプロトタイプ（を操作している様子を動画で）以下にご紹介します。

電子書籍アプリのプロトタイプ

ECサイトのプロトタイプ

いかがでしょうか。文書で説明されるときと比べ、グッと内容がわかりやすくなったのではないでしょうか。このような動きをつけた詳細なプロトタイプは共有のために有用ではありますが、静的な文書と比べるとコストが掛かってしまいます。

プロトタイプには詳細度や作成コストによっていくつかの種類に分けられるのですが、それらを適材適所で使い分けていくことで、費用対効果を最大限あげることができるでしょう。

プロトタイプの種類と使い分け

プロトタイプは大きく、以下の種類に分けられます。

手書きのプロトタイプ

紙やホワイトボードにペンで書いて作ったアナログなプロトタイプ

イメージマッププロトタイプ

画面イメージをリンクで紙芝居のようにつなげたプロトタイプ

詳細なプロトタイプ

実際の動きにある程度近いプロトタイプ

プロジェクトのフェーズによって最適なプロトタイプは異なります。

プロジェクト初期では共有の精度より、様々なデザインの選択肢を洗い出し最適なものを見つけることがより重要になりますから、なるべくコストの低いプロトタイピングが求められるでしょう。

その点では、紙やホワイトボード上に手書きで画面内容を書いて検討していく（ペーパープロトタイプ）ほうが、多くのパターンが検討できますし、レビューする側も完成度が低いためかえってフィードバックしやすいというメリットがあります（完成度が高いと、出来上がった感じがしまい、コメントがあまり出なくなると経験的に感じています）

ある程度進んだ段階で、実際の利用体験に近いものへと詳細なプロトタイプを利用していくとよいでしょう。

プロトタイピングツール

最後に、デザインの現場で役立ちそうなプロトタイピングツールをいくつかご紹介いたします。

POP

POPはスマートフォン用アプリです。

ペーパープロトタイプをカメラで撮影し、アプリ上でリンクを設定していくことで、手書きの動くプロトタイプが作成できます。プロジェクト初期に作成したペーパープロトタイプをテストしてみる際に便利です。ただし、対象がスマートフォンのアプリに限られる点は注意です（PC未対応、スクロール不可のため）

InVision

InVisionはブラウザで使えるウェブサービスで、POPに似ていますが、PC・スマートフォン、どちらのプロトタイプも作成できます。

POPがカメラで撮影した画像を動くプロトタイプにするのに対し、InVisionはデザインした画面の画像をアップロードしてプロトタイプにしていきます。ですので、InVisionはビジュアルデザインが出来てくるあたりで役立つでしょう。

Axure RP

POPやInVisionは気軽に導入できますが、一方で設定できる動きには限界があります。

リッチアプリケーションなどインタラクティブな製品のプロトタイプを作成する場合はAxureが良いでしょう。Axureはかなり高機能なソフトウェアで、画面の非同期での書き換えやUI部品固定などが実現できる数少ないソフトです。上記で掲載した動画（私が作成したプロトタイプ）もこのAxureで作成しています。

なお、AxureはPOPやInVisionと違い、UIパーツをキャンバスにドラッグアンドドロップしながらプロトタイプを作成するツールです（PC/Mac対応）

---

* 幾つかのユーザビリティ問題は抱えていますが・・