Weitere ähnliche Inhalte
Mehr von Tarumoto Tetsuya (20)
無料追補版#2「ペーパープロトタイピング原論」
- 1. 樽本徹也(著)『ユーザビリティエンジニアリング(第 2 版)』
無料追補版 #2 [2015.12.21 発行]
- 1 -
ペーパープロトタイピング原論
※映画「ペーパー・ムーン」より
ジャズのスタンダードナンバーに「It's Only A Paper Moon」という曲があるのをご存じで
しょうか?
♪ そう、それはボール紙の海を渡る、ただの紙のお月様。
♪ でも、君が僕を信じれば、見せかけのものにはならない。
♪ そう、それはモスリン地で作った木の上にひろがる、ただのキャンバスの空。
♪ でも、君が僕を信じれば、見せかけのものにはならない。
「信じれば、見せかけのものにはならない」のは“紙のお月様”だけではありません。“紙
のソフトウェア”も使いようによっては強力な設計ツールになります。
■紙のソフトウェア
ペーパープロトタイプは紙で作ったプロトタイプです。紙とペンしか使わない“超”ロー
テクな手法で、主に手書きで作成します。紙製ですが、少しばかりの芝居心を発揮して「指
でクリック」したり、フィールドに「鉛筆で入力」したりすれば擬似的にソフトウェアの
動作が再現可能になります。
一般の人には目新しく感じられるかもしれませんが、手法自体は決して新しいものではあ
りません。1970 年代に米国の NCR 社やゼロックス社で行われたプロジェクト例が専門書
- 3. 樽本徹也(著)『ユーザビリティエンジニアリング(第 2 版)』
無料追補版 #2 [2015.12.21 発行]
- 3 -
また、IT ベンチャー起業家が自らのアイデアを投資家に売り込む際にも、ペーパープロト
タイプはよく使われています。どんなに壮大なビジョンの製品であってもペーパープロト
タイプならば1行のコードを書く必要もありません。そしてパワーポイントのスライドよ
りも製品コンセプトが相手に“伝わる”からです。
このように、従来は主に設計段階で利用されていたペーパープロトタイプですが、現在で
は企画や宣伝でも大活躍するようになっています。
■見た目は悪い方がいい?
「より“できている”ように見えるほど、フィードバックは幅が狭く増分的なものになる」
――。キャシー・シエラはプロトタイプの忠実度によって、設計レビュー時のフィードバ
ックがどのように変わるのかを例示しています。
Photoshop 等で作った(本物そっくりの)モックアップの場合――「この"T"
のフォントは変えられる?ベベルの線の太さがちょっと…」
Visio 等で作った(白黒の)ワイヤーフレームの場合――「ツールボックス
のレイアウトが2列になっているのが気に入らない。一番上に持って行くこ
とはできないか?」
手書きのラフスケッチの場合――「ツールはコンテキストに依存した方がい
いかもしれない。ツールバーをなくして、その時点で意味のあるツールだけ
出てくるようにしたら?」
ストーリーボードの場合――「ここにドローイング機能を入れるべきじゃな
い。それは機能過多であって、多くのユーザにはほとんど利点がない」
これは、エンドユーザにプロトタイプを見せる場合にも当てはまります。美しく整形され
たプロトタイプを見せると、フォントや色づかい、ちょっとした誤字脱字など表面的な問
題に多く言及します。それに、作り手に努力に遠慮してしまうのか、あまり批判的な指摘
をしない傾向もあります。それに対して、ペーパープロトタイプのようなローファイ(低
忠実度)なプロトタイプを見せると、ユーザはもっと根本的な問題について疑問や不満を
率直に指摘してくれます。
■そのアプリは“紙”だった・・・
「ペーパープロトタイプは簡単(にテストできる)」――。これは全くの誤解です。実はプ
ロトタイプの忠実度が下がれば下がるほど高いテスト技術が求められます。
IT 系のブログメディア TechCrunch に「iPhone アプリケーションを試してみて欲しいと言
- 4. 樽本徹也(著)『ユーザビリティエンジニアリング(第 2 版)』
無料追補版 #2 [2015.12.21 発行]
- 4 -
われたが、そのアプリケーションは「紙」だった」という記事が掲載され、ちょっと話題
(議論)になりました。
<前略>会計をしようと列に並んでいたときのことだ。非常に礼儀正しいスタンフォ
ード(大学)の青年が、拡張現実用モバイルアプリケーションのプロトタイプを見て
くれないかと頼んできた。疲れてはいたが、学生たちが何かを為す手伝いはしたい。
それでデモを拝見することとした。
ところが彼の手元を見て驚いた。彼が手にしていたのは iPhone ではなく何枚かの紙だ。
紙には鉛筆で線画が書いてある。すなわちこれが彼のアプリケーションというわけだ。
紙に書いたものを iPhone 画面に見立てて、動作の流れを見るのに手描きのボタンをク
リックするところから始める<後略>
記事の最後の部分で、記者はこれを「無駄(iPhone アプリケーションを紙の上で見ても意
味はないし、ボタンを押すフリをしてもつまらないだけだ)」とバッサリ切り捨てています。
ただ、それを見た“UCD 原理主義者”は「ペーパープロトタイピングという手法に対する
冒涜」と感じたようでコメント欄が“炎上”しました。この記者はそういった背景をよく
知らなかったらしく、「みんな、どうして怒っているの?」と、ちょっと当惑したようです。
一方、私は「意外と痛いところを突かれたな」と感じました。ユーザテストというのは本
質的には「ごっこ遊び」です。対象が紙であれデジタルであれ、「もし○○だとすれば・・・」
という仮想の状況設定に強く依存しています。それを客観的に(冷静に)見てしまうと違
和感を覚えるのは当然かもしれません。そんな「子供だまし」を成立させるのがインタビ
ューアの“腕前”です。
完成品の場合は、テスト設計さえしっかりしていれば、司会役は誰でも務まります。極端
に言えば、ユーザの操作を横で見ているだけでいいのです。それがベータ版になると、シ
ステムが途中でクラッシュしたり、極度に動作が遅い部分があったり、様々な問題が発生
します。経験を積んだインタビューアならば、そんな時でも臨機応変に対応してテストを
無駄にしません。
ペーパープロトタイプの場合は、さらに、ユーザを“その気”にさせるような話術、コン
ピュータ役の人間を含むテスト見学者への指導力なども求められます。ユーザと対話する
場面が多いので、バイアスを与える危険性も増えます。ユーザを誘導せず、適切な対応が
瞬時にとれるようになるには、かなりの経験が必要になります。テスト技術がない人が、
ペーパープロトタイプを使ってテストしても、あまり有効なデータは得られないでしょう。
- 5. 樽本徹也(著)『ユーザビリティエンジニアリング(第 2 版)』
無料追補版 #2 [2015.12.21 発行]
- 5 -
■ペーパー・イン・スクリーン・プロトタイプ
スマートフォンのアプリのペーパープロトタイプを作成する場合、実物大にすると小さす
ぎて制作しづらかったり、拡大すると実物とイメージが大きく異なってしまったりします。
そこで、ペーパープロトタイプを写真に撮ってスマートフォンの画面上に表示する「ペー
パー・イン・スクリーン・プロトタイプ」というテクニックがあります。
ペーパー・イン・スクリーン・プロトタイプは以下のような手順で作成します。
1. シナリオ(画面遷移図)を作成する。
2. 1画面ずつ写真撮影する。
3. スマートフォンの画面サイズに合うように画像を加工する。
4. 画像をスマートフォンに取り込んでカメラロールで閲覧する。
ただ、このやり方では上記の写真のように手動で切り替えながら順番に画面を閲覧するだ
けで、能動的に「操作」することはできません。もちろん、HTML のイメージマップにし
たり、リンク付 PDF に変換したり、ひと手間かければインタラクティブになりますが、初
- 6. 樽本徹也(著)『ユーザビリティエンジニアリング(第 2 版)』
無料追補版 #2 [2015.12.21 発行]
- 6 -
期段階のプロトタイプはなるべく手間を掛けずに作りたいものです。
そんな悩みを解決してくれるのが「POP」や「Prott」です。これらのアプリを使えばイン
タラクティブなペーパー・イン・スクリーン・プロトタイプを手軽に作成できます。トラ
ンジション(画面遷移時のアニメーション効果)も設定できるので、デモやテストに最適
ですし、さらに、プロトタイプをオンラインで共有して関係者からフィードバックを集め
る機能もあります。
■100 円プロトタイプ
「100 円プロトタイプ(The $1 Prototype)」とは、米国のインタラクションデザイナであ
るグレッグ・ヌーデルマンが提唱する、モバイル UX デザインのための最新ペーパープロ
トタイプ手法です。
その概要は、(1)正方形の付箋紙を使ってストーリーボードを描く(ビジョン構築)、(2)次に
長方形の付箋紙を使ってペーパープロトタイプを作成する(試作)、(3)それを片手にユーザ
インタビューを行う(テスト)、というものです。
身近な付箋紙を活用するのが特徴で、従来のペーパープロトタイプと比較して、さらに軽
量かつ高速に UX デザイン活動が行えます。特にリーンスタートアップやアジャイル開発
の現場に適しているとして、今、注目を集めています。
ただ、このオリジナルの 100 円プロトタイプ法にはちょっとした欠点があります。作成し
たプロトタイプがあまりにも「フラット」で、どこが操作可能なのか分かりづらいのです。
また、付箋紙に付箋紙を重ねると剥がれやすいので、取り扱いに注意が必要です。
- 7. 樽本徹也(著)『ユーザビリティエンジニアリング(第 2 版)』
無料追補版 #2 [2015.12.21 発行]
- 7 -
実は、この問題は、2 種類の付箋紙(通常タイプと強粘着タイプ)を併用すると簡単に解消
できます。強粘着タイプは蛍光色なので、パステルカラーの通常タイプの上に重ねるとコ
ントラストがついて視認性が上がります。もちろん、粘着力も十分なので、デモやテスト
時に剥がれ落ちる心配はありません。
そこで、この“改良型”100 円プロトタイプのデザイン・パターンを少し作ってみました。
このようなパターンを組み合わせれば、「付箋紙とペンとハサミ」で誰でも手軽にスマート
フォンの UI を試作できるようになります。
■ペーパープロトタイプの真価
多くの人は、ペーパープロトタイプを使う最大の利点として「短期間、低コストで作成可
能」という点を挙げると思いますが、私はもっと根源的な利点があると考えています。そ
れは、ペーパープロトタイプならば「誰も作り込む気持ちにならない」という点です。
一般に、開発チームはプロトタイプの作成を開発者やデザイナに一任してしまいます。彼
らの本職は「完璧を目指す」ことなので、プロトタイプであっても一生懸命に作り込んで
しまいがちです。何日も徹夜して“完成”させた“労作”がテストで晒しものにされると、
- 8. 樽本徹也(著)『ユーザビリティエンジニアリング(第 2 版)』
無料追補版 #2 [2015.12.21 発行]
- 8 -
それを作った開発者やデザイナは自分自身が批判されているように感じてしまいます。
その結果、彼らはテストで発見された問題点について「犯人探し」の議論を始めてしまい
ます。「この画面仕様はチーム全体で合意したのだから、私(開発者)の責任ではない」「送
信ボタンの位置については、何も議論しなかったのだから、私(デザイナ)を批判するの
は筋違い」などなど。
これは、全く無駄な議論です。ユーザテストは反証アプローチなのですから、問題点が見
つかるのは当たり前のことです。それも、初期のプロトタイプならば、問題は山ほどあっ
て当然です。開発チームは「犯人探し」に時間を費やすのではなく、「解決案の議論」に時
間を費やすべきなのです。ところが、こういった感情のもつれは、プロジェクトが進行す
るに従いさらに大きくなり、やがては開発チームを分断する危険さえあります。
一方、ペーパープロトタイプならば“責任者”は不要です。開発チームはワイワイガヤガ
ヤと共同でプロトタイプを作成できます。開発者はその中の1人に過ぎませんし、デザイ
ナは絵が上手いので他のメンバーから重宝されますが、みんなから頼まれて「ボタンの絵
を描いた」という理由で責任を問われることはありません。
それに、ペーパープロトタイプはテストが終われば捨てるのが明らかです。多少線が曲が
っていようと、多少ラベルの文字が読みづらかろうが、差し当たりテストに支障がないレ
ベルならば十分です。つまり、早く、安く制作できるのです。
このように、ペーパープロトタイプは少ない投資で制作しているので、テストで酷い結果
が出たとしても、開発チームは気軽にそのアイデアを捨てることができます。その際に、
犯人探しや費用の心配は無用です。
「バグは設計の初期段階で潰す」というのはソフトウェア開発の鉄則です。設計プロセス
にペーパープロトタイピングを導入すれば、従来ならば不可能であったような設計のごく
初期段階からユーザテストが実施できるので、開発チームはリスクを大幅に低減できます。
ところで、ペーパープロトタイピングのような“目新しい”手法を導入する際には、往々
にして手段と目的を取り違えてしまいがちです。「紙」を使うのは手段に過ぎません。目的
は「設計の初期段階から試作とテストを繰り返し実施すること」です。もし、ユーザ中心
設計のプロセスを構築せずに、外部のコンサルティング会社頼みでペーパープロトタイピ
ングだけを試してみるとすれば、それこそ「全く無駄な投資」ということになります。
- 9. 樽本徹也(著)『ユーザビリティエンジニアリング(第 2 版)』
無料追補版 #2 [2015.12.21 発行]
- 9 -
■ペーパープロトタイプの教科書
現在の UX デザイン関連の書籍には、必ずと言っていいほどペーパープロトタイプに関す
る記述が含まれています。ただ、「もっと知りたい」と思っても、意外と専門書は見つかり
ません。そこで、参考までに、代表的な専門書を 3 冊ご紹介しておきましょう。
◎キャロリン・スナイダー(著)、「ペーパープロトタイピング」、2003 年刊行
ペーパープロトタイプに言及する際には必ず引用される“バイブル”です。豊富な内容で
すが、その“副作用”としてかなりボリュームがあります。本を手に取るとその“重さ”
に少しためらうかもしれませんが、思い切って読み始めましょう。ただし、必ずしも全部
読む必要はありません。ペーパープロトタイプに関する実務的な知識ならば差し当たり第
1章から第4章まで(87 ページまで)読めば十分把握できます。
◎Todd Zaki Warfel (著)、「Prototyping」、2009 年刊行
本書はペーパープロトタイプだけではなく、紙から専用ツールまで幅広いプロトタイプ手
法を紹介しています。ただ、その中でも特にペーパープロトタイプに関する記述が優れて
います。著名な UI デザイナである著者のノウハウが満載で、「紙でここまで出来るのか!」
とインスピレーションをかきたててくれます。
◎Greg Nudelman (著)、「The $1 Prototype」、2014 年刊行
3 冊の中では一番新しい本です。モバイル UX デザインに特化した内容で、製品ビジョンの
構築から UI プロトタイピングまで一貫して付箋紙を使うのが特徴です。なお、著者のグレ
ッグ・ヌーデルマンは Android の UX/UI デザインに精通しています。Google のマテリア
ル・デザインは元々「紙とインク」から着想を得ているので、彼がペーパープロトタイプ
に着目したのは自然なことかもしれません。
- 10. 樽本徹也(著)『ユーザビリティエンジニアリング(第 2 版)』
無料追補版 #2 [2015.12.21 発行]
- 10 -
【参考資料】
◎Twitter in Plain English
https://youtu.be/ddO9idmax0o
◎Kathy Sierra / 青木靖 訳「デモではものができあがっているように見せない」
http://www.aoky.net/articles/kathy_sierra/dont_make_the_d.htm
◎TechCrunch「iPhone アプリケーションを試してみて欲しいと言われたが、そのアプリ
ケーションは「紙」だった」
http://jp.techcrunch.com/archives/20100923will-you-try-my-paper-iphone-app/
◎UX Magazine: Paper-in-Screen Prototyping
http://uxmag.com/articles/paper-in-screen-prototyping
◎POP - Prototyping on Paper
https://popapp.in/jp
◎Prott - 高速プロトタイピングツール
https://prottapp.com/ja/