kigoulab 我が社の本棚に、長いあいだ詰ん読になっていた本がありました。「ペーパープロトタイピング 最適なユーザーインターフェースを効率よくデザインする」です。紙とペンで設計するユーザーインタフェースデザイン手法であるペーパープロトタイピングとはどのような物なのか、オウンドメディアの記事になるかなと思い、これを機に読んでみました。
まずは、書籍とは関係ないですが、この動画をご覧ください。韓国のAjaxメールのペーパープロトタイプの記録動画です。
これは完全にやり過ぎ感ありますが、なんとなくペーパープロトタイピングというものがどういうものかわかったでしょうか。デバイス役（パソコン役、スマホ役）のひとと、テスターが紙に手書きでかかれたインターフェースを間に、操作をテストしていくのです。
ペーパープロトタイピングはユーザーテストである
ペーパープロトタイピングは、手書きのインターフェースを使ったユーザーテストです。動作モックなどをつかってテストをするのは工数も、手直しもかかります。そのためプロジェクトのできるだけ早い段階に紙とペンだけ（付箋やテープもつかいますが）でテストをするわけです。
ユーザーテストについては、過去の記事「ユーザーテストはじめの第一歩」にまとめていますので、参考にして頂ければと思いますが、ここに記載している「動作モック」が「ペーパープロトタイプ」に変わったと思って頂ければよいと思います。そして、必要な役割に、デバイス役のひとが加わります。
ペーパープロトタイピングをおこなう利点
- 速く、低コストである
- コーディングの前に問題を発見できる
- ユーザーから、より多くの、そしてより質の高いフィードバックを得られる
- 開発者だけでなく、チーム全員が、開発プロセスの早い段階で設計・評価に参加できる
- 開発者に創造的な思考を促す
- 手書きだからこそ、意見を言える。不完全さの利点
すなわち、Photoshopや動作モックをつかったプロトタイプでは、出戻りが発生した場合、その修正にかかるフットワークが悪すぎます。そのためペーパープロトタイプで開発の初期に検証することで、問題点にたいしてスピード感ある改善をしようと言うことです。アプリやサイトが高度化するにつれ、問題点は早めにつぶしておく必要があります。紙とペンなら、実装すると修正が難しい部分でも素早く改善案を提示することができます。すなわち、開発の初期段階でPDCAサイクルを回しやすいのです。
ペーパープロトタイプとワイヤーフレームの違い
見た目にていますので、ワイヤーフレームでペーパープロトタイピングが可能とおもってしまいますが、異なる点があります。ペーパープロトタイプは、実装のシミュレーションですので、クリックしたときのインタラクション画面などを用意する必要があります。すなわち操作可能である必要があるのです。逆に要素の大きさなど、あまりシビヤに考えずに書くことができます。あくまでもテストができればよいのです。
一方、ワイヤーフレームは要素の場所取りが主たる目的ですので、要素の位置や大きさなどは厳密に検討する必要があります。一種の設計図である必要があります。一方、使いやすさは問われません。むしろ、ペーパープロトタイピングで明らかになった使い勝手を、ワイヤーフレームに反映する形になります。
似ている２つのツールですが、目的がことなるのです。ペーパープロトタイプを先行して作成して、ユーザーテストを踏まえて、ワイヤーフレームに反映していくのがよい方法かと思います。
ペーパープロトタイピングにあると便利なもの
基本、紙とペンだけで行うペーパープロトタイピングですが、あると便利なものがあります。それは次のようなものです。
ウインドウがすでに印刷されている用紙
スマホ用は、スケッチパッドで入手可能な台紙があると、作業効率があがります。Web用はIllustratorなどで自作して印刷するとよいでしょう。
太いペンと、細いペン
ウインドウと要素を書き分けるのに使います。太いペンでウインドウを書き、細いペンで要素を書きます
コピックの薄いグレー
背景領域を塗りつぶして、操作領域が明確にわかるようにします。
付箋紙
作者は使わないと言ってたのですが、モーダルウインドウやプルダウンメニューを作るためにあったほうがよいでしょう。はさみで適当な大きさに切ってつかいます。
はがせるテープ
３Mのはがせるテープです。入力欄にキーボード打鍵にかわって入力してもらう時に、このテープの上に書いてもらって、ペーパープロトを再利用できるようにします。そのほか、チェックボックスの上に貼って、状態を書き込むなど、さまざまな場面で活躍します。
UIステンシル
おもにスマホ用ですが、主要なインターフェースが定規にかたどってあり、それをトレースすれば綺麗に書けるというものです。UIstencilsで手に入れることができます。あれば便利です。
プロトタイプツール
道具ではないですが、POPのようなペーパープロトタイピング支援ツールをつかって、インタラクションをデバイスで操作させて検証する方法も考えられます。書籍発行時にはまだそのようなツールがなかった（DENIMという実験的なツールはありましたが）ので詳しく触れられてなかったですが、最近はたくさんのツールがありますので、検討の余地ありです。詳しくは「プロトタイプツールが花盛り、どれが便利？」の記事をご参照ください。
その他、OHPシートなどがあると便利です。
書籍の感想とか
翻訳本にありがちな、回りくどさと、冗長なジョークが、読むのを疲れさせました。書籍はペーパープロトタイピングの本となっていますが、多くがユーザーテストを行うときの注意点や問題点について書かれており（もちろんペーパープロトタイピングが前提なのですが）その点では勉強になりました。
とにかく、プロジェクトの早い段階で、手間のかからないペーパープロトタイプでユーザーテストを行うこと、それが無駄な出戻りを減らし、より使いやすいインターフェースを作るヒントになる。これにつきます。
最後に、著者は、ペーパープロトタイピングは便利な手法だが、ユーザー中心設計（HCD）という大きな概念の下にある手法にすぎないと述べていました。UXや、HCDの考え方を踏まえて、プロトタイプを作る必要があると思います。
私も機会あれば、ペーパープロトタイピングにチャレンジしてみたいと思います。
参考図書、サイト
ペーパープロトタイピング 最適なユーザーインターフェースを効率よくデザインする
著：Carolyn Snyder 監訳：黒須正明
ペーパープロトタイピング入門 – 第1回 どうして紙でプロトを作るのか
（担当：小山智久）