ペーパープロトタイプ - Webデザイン図工の時間

ミニチュア模型の効用

プロトタイプは「試作品」と訳されることが多い。しかし私は「試用品」といった方が適切ではないかと考えている。試作品と言うと「制作者が試しに作ってみる」という意味に捉えられがちだが、本当はプロトタイプとは「ユーザーに試しに使ってもらう」ために作るものだからだ。

ここで、たとえ話として、家を建てる場面を考えてみよう。レンガ・木材・コクリートといった素材が、大工などの建築技術者の手によって加工されて組み上げられ、まず家の骨組みができ上がる。さらに屋根や壁が施工され、最後に内装や電気工事を施して家は完成する。しかし、実際には、工事を始める前に建築家が設計図を描いている。その際に建築家は厚紙やスチレンボードを使ってさまざまなミニチュア模型を作ることがある。このような建築模型は、設計の妥当性を検証するとともに、クライアントに見せて、さらに具体的な要望を引き出すために利用される。

模型を作るメリットは、設計の間違いや、クライアントのあらたな要望に柔軟に対応できることだ。もし、工事を始めてから設計ミスがあきらかになったり、クライアントが1部屋を増やしてほしいと言い出したりしたら、建設費用も工事期間も予定を大幅に超過してしまうだろう。そんなことが何度も繰り返されれば、その家は完成しないかもしれない。

プロトタイプとは、建築の例で言えば「骨組みの家」ではなく「ミニチュア模型」に相当するものだ。プロトタイプは、製品を完成させる過程の中間成果物ではなく、設計者が試行錯誤するためのテスト材料なのだ。家であってもWebサイトであっても、本格的に工事が始まってから根本的な問題が見つかったのでは、もはや手遅れなのだ。

ユーザビリティ人名図鑑（その5）

図1　ジャレッド・スプール

ジャレッド・スプール

ヤコブ・ニールセンに並ぶユーザビリティ界の西の横綱。ユーザビリティテストやプロトタイピングのオーソリティとして講演や執筆を活発に行っている。User Interface Engineeringの創業者で、現在もCEOを務めている。

紙製のWebサイト

建築家がミニチュア模型を作るときのように、Webサイトのプロトタイプも手近なツールで制作できる。たとえば、PhotoshopなどのグラフィックソフトやDreamweaverなどのオーサリングツール、また、ExcelやPowerPointのようなビジネスソフトを使ってもかまわない。

ただ、もっと手軽な方法がある。それは紙を使うことだ。そもそもソフトウェアで作業を始める前に、ラフなスケッチを紙に描くデザイナは多い。また、紙ならば、ソフトウェアの操作に習熟していないメンバーでもプロトタイプ制作に参加できる。さらに、Photoshopで作った見た目が立派なものよりも、一見すると大雑把な感じのプロトタイプの方が、ユーザーが気軽に問題点を指摘する傾向があることも知られている。

このような「ペーパープロトタイプ」はフリーハンドで描けばよい。色は白黒で、画像やアイコンは省略して構わないし、サイトロゴは「ロゴ」と書いた四角形を描くだけだ。もし、同じような絵を何度も描くのが嫌ならば、既存の画面ショットをプリントアウトして切り貼りしたり、ラジオボタンやドロップダウンリストなど画面要素のシールを作成したりするという手もある。

ペーパープロトタイプ制作にそれほど難しいテクニックはないので、ここでは小技をいくつか紹介しておこう。

ブラウザ

Webサイトはブラウザ上で動作する。すべての画面にいちいちブラウザの絵を描くのが面倒ならば、まず紙のブラウザを作ろう。

ブラウザを作ると言っても、難しく考えることはない。画面をA4サイズの紙で作成するなら、一回り大きいB4サイズの紙をブラウザにすればよい。ブラウザも手書きで構わない。メニューバーやアドレスバーなどは不要だし、ツールバー上のボタンも、通常は「戻る」と「進む」だけ用意すればよい。

ラジオボタン、チェックボックス

ユーザーがオプションを自由に選択できるようにするには、貼って剥がせるテープを使うと便利だ。小さく切ったテープに黒丸やバツ印を描いて、それを貼り付けたり、剥がしたりすれば、オプションの選択状態を「オン」や「オフ」にすぐさま変更できるのだ。

ドロップダウンリスト

ドロップダウンリストは下向き矢印をクリックすると選択リストが開く。こういった状態変化を、別々の画面として書き起こしていくと枚数が膨大になってしまう。そこで、選択リストは別の用紙（ポストイットなど）に書くようにしよう。ユーザーがドロップダウンリストを操作したときは、ポストイットで作ったリストを貼り付ければよい。

同様の理由から、エラーなどを表示するダイアログボックスも別の用紙に書いて、必要な場面で画面に貼り付けるようにしよう。また「詳細」ボタンなどでダイアログボックスの下部がさらに展開する場合は、事前に用紙を折りたたんでおいて、ユーザーが操作したときに開けばよい。

指でクリック、鉛筆でインプット

ユーザーにペーパープロトタイプを使ってもらうには、ちょっとした芝居心が必要だ。まず、進行役とコンピュータ役のスタッフを用意しよう。

進行役がトップページをユーザーに見せて、特定の作業を行うよう要請しよう。そして、ユーザーには紙面上の任意のリンクやボタンを指でクリックしてもらう。すると、コンピュータ役がその操作に合わせて、ただちに次の画面を提示したり、画面の状態を変更したりする。これを繰り返せば、ユーザーは紙のWebサイトでも一とおりの作業を体験できるのだ。

図2　ペーパープロトタイプを使ったテスト風景その1。ユーザーはマウスの代わりに“指”でクリックする。

図3　ペーパープロトタイプを使ったテスト風景その2。コンピュータ役が次の画面を提示する。

なお、テキストフィールドならば鉛筆で入力してもらおう（当然ながら、入力データは消しゴムでデリートできる）。ショッピングカートに追加した商品の合計額が必要になれば、コンピュータ役がその場で電卓で計算すればよい。もし、警告音が発生する場面ならば、口頭で「ブー」などとユーザーに教えてあげよう。

最初は、こんな子供だましのようなことをやって、これで妥当な評価ができるのかと不安を感じるかもしれない。しかし、実際にテストを実施すれば、ユーザーが真剣に紙製のWebサイトを使用して、メニューの選択に迷ったり、操作を失敗したり、必要な機能がないと不満を表明したりすることがわかるだろう。

Webサイトと言うと、デジタルなユーザー体験の代表のように思われがちだが、意外にも「少し想像力を働かせれば、ほとんど何でもシミュレーションできる」ものなのだ。