unoh.github.com by unoh

デジタルな世界で生きている同業者の皆さん、ペーパーレスの世界に過信しすぎてはいませんか？

今日は、紙を使ってプロトタイプを作ることの意義と、方法を紹介します。

紙プロトタイプは、ユーザビリティ・テストのれっきとしたメソッドであることをご存知でしたか？筆者は、前職ではよく紙と、ペンと、はさみとのりを使ったプロトタイプを作成していました。ウノウに入ってからは大体wikiやPhotoshopだけを使ってモックを作るようになり、フォト蔵チームでも大きなUIの変更の際は大体、
(1) WikiやBTSで仕様を簡単にまとめる
(2) PhotoshopやPowerPointでモック（四角がいっぱい並んでいる）
(3) HTMLでモック(大体の動作を体感)
というステップを踏んでいます。

でも、最近になって作業効率とかユーザビリティテストとか考えるようになったら、なんだかものすごく紙が懐かしくなってきたんですね。ちょうどA List Apartでも紙プロトタイプが紹介されたので、この際、紙資源がもったいないとか、アナログだとか字が汚いだとか言う批判を恐れずに、社内外にこのメソッドの布教活動をしてみようという気になりました。

紙プロトタイプの導入は、上記の(1)から(3)までのステップを一段階増やすもので、まずは(1)と(2)の間に入ることになります。一段階増やしていながら、ユーザー想いなプロダクトを作る上で最終的に効率を高める結果にあると、私は思います。

紙プロトタイプは何に使える？

紙プロトタイプは、人とコンピュータのインタラクティビティを生み出すプロダクトであれば、サイトであろうと、ソフトであろうとハードであろうと、何にでも応用できます。

必要なもの

必要なものは、紙とペンのほかに『はさみ』。あと、付けたり貼ったりが繰り返すことのできるタイプの『のり』があれば完璧です。『はさみ』と『のり』が、ただ単に紙にメモ程度にモックを書くことと、プロトタイピングの大きな、大きな違いです。なぜなら、この二つによって、例えばdiv id="login"の中身だけ、上からペタッと変えることができるじゃないですか！

紙プロトタイプの効果

紙プロトタイプの効果は、例えば次のようなものがあげられます。

意義1: プロダクトがまだ図面段階、骨組み段階にあるときに、ユーザーからのフィードバックをいち早く開発に取り入れる、早い段階で軌道修正が可能。

意義2: ニコニコ笑顔で修正できる。エンジニアマインドな開発者が言う「ここ修正して」の一言はPhotoShopを使って丹念にモックを作ったデザイナーの心を激しく傷つけます。紙だったら、いつでもやさしい人でいられます。

意義3: メモが書き込みやすい。チーム内、社内、あるいは実際のユーザーさんに見てもらって得たフィードバックを、ダイレクトに書き込むことができます。Photoshopだったら、Textレイヤーを作って、配置して、フォント設定して、あぁめんどくさい。

意義4: 簡単にインタラクティビティをデモれる。ラボブログ当番な私は今日中にこの記事を仕上げなければならず、自分で今からこれを説明するための紙プロトタイプを作ることができないので、手抜きします。さっきのA List Apartの例をご覧ください。

真ん中の方にいくつかある写真をごらんいただくと、紙プロトタイプで作られた簡単なサイト画面で、セレクトボックスのインタラクティビティ、ログインフォームのインタラクティビティが間単に表現されていることがお分かりいただけると思います。

紙プロトタイプとユーザビリティテスト

もうお気づきかもしれませんが、上であげたような紙プロトタイプの意義は、ユーザビりティテストと深い関係にあります。もちろん、ユーザビリティテストとは、チーム内、社内、あるいは実際のユーザーさんを用いてのどの場合も含まれます。紙プロトタイプがもたらすユーザビリティテストの可能性とは、どんなものがあるでしょう。

(1) 問題を見つけ、解決法に関するアイデアを誘発する。
(2) ユーザーさんがクリックするところをペンでマークできる。
(3) ユーザーさんに、「そこをクリックしたら何が見えることを期待するか」を描いてもらったりもできる。
(4) ネットワークや、PCなど、環境の準備がまったく不要で、カフェでコーヒーを飲みながら、「ねえ、ちょっとこれ見てくれる？」という感じで簡単にユーザビリティテストを開始できる。

もちろん、読み込みのスピード、スクローリングを紙でデモるには相当な工作能力を要するなど、限界もありますが、上手に使えば、ユーザーにとっても、開発にとってもハッピーなメソッドです。

それになにより、紙を使って工作、楽しいですよね？