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

More Related Content

Viewers also liked

Procurement in Business
Procurement in BusinessProcurement in Business
Procurement in BusinessTom Matys
 
Dpr105 databases
Dpr105 databasesDpr105 databases
Dpr105 databasesTom Matys
 
Emerging technologies
Emerging technologiesEmerging technologies
Emerging technologiesTom Matys
 
AWS Device FarmでAndroidのUIテストをやってみた
AWS Device FarmでAndroidのUIテストをやってみたAWS Device FarmでAndroidのUIテストをやってみた
AWS Device FarmでAndroidのUIテストをやってみたYasuhiro Tajiri
 
FIN2016_Ghosh_Ficointegrationwithlogistics
FIN2016_Ghosh_FicointegrationwithlogisticsFIN2016_Ghosh_Ficointegrationwithlogistics
FIN2016_Ghosh_FicointegrationwithlogisticsSaugata Ghosh
 
人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイント人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイントMasaya Ando
 
UX白書サマリー資料20111015
UX白書サマリー資料20111015UX白書サマリー資料20111015
UX白書サマリー資料20111015hcdvalue
 
CEDEC2014「ユーザテストはリーンに行こう!」
CEDEC2014「ユーザテストはリーンに行こう!」CEDEC2014「ユーザテストはリーンに行こう!」
CEDEC2014「ユーザテストはリーンに行こう!」Tarumoto Tetsuya
 
Device Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テストDevice Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テスト健一 辰濱
 
ターゲット心理をつかむ、正しいユーザー調査・分析
ターゲット心理をつかむ、正しいユーザー調査・分析ターゲット心理をつかむ、正しいユーザー調査・分析
ターゲット心理をつかむ、正しいユーザー調査・分析schoowebcampus
 

Viewers also liked (10)

Procurement in Business
Procurement in BusinessProcurement in Business
Procurement in Business
 
Dpr105 databases
Dpr105 databasesDpr105 databases
Dpr105 databases
 
Emerging technologies
Emerging technologiesEmerging technologies
Emerging technologies
 
AWS Device FarmでAndroidのUIテストをやってみた
AWS Device FarmでAndroidのUIテストをやってみたAWS Device FarmでAndroidのUIテストをやってみた
AWS Device FarmでAndroidのUIテストをやってみた
 
FIN2016_Ghosh_Ficointegrationwithlogistics
FIN2016_Ghosh_FicointegrationwithlogisticsFIN2016_Ghosh_Ficointegrationwithlogistics
FIN2016_Ghosh_Ficointegrationwithlogistics
 
人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイント人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイント
 
UX白書サマリー資料20111015
UX白書サマリー資料20111015UX白書サマリー資料20111015
UX白書サマリー資料20111015
 
CEDEC2014「ユーザテストはリーンに行こう!」
CEDEC2014「ユーザテストはリーンに行こう!」CEDEC2014「ユーザテストはリーンに行こう!」
CEDEC2014「ユーザテストはリーンに行こう!」
 
Device Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テストDevice Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テスト
 
ターゲット心理をつかむ、正しいユーザー調査・分析
ターゲット心理をつかむ、正しいユーザー調査・分析ターゲット心理をつかむ、正しいユーザー調査・分析
ターゲット心理をつかむ、正しいユーザー調査・分析
 

More from Tarumoto Tetsuya

ユーザビリティテストの世界「入門編」
ユーザビリティテストの世界「入門編」ユーザビリティテストの世界「入門編」
ユーザビリティテストの世界「入門編」Tarumoto Tetsuya
 
無料サンプル版『UXリサーチの道具箱II』第3章 設計ガイド(全文)
無料サンプル版『UXリサーチの道具箱II』第3章 設計ガイド(全文)無料サンプル版『UXリサーチの道具箱II』第3章 設計ガイド(全文)
無料サンプル版『UXリサーチの道具箱II』第3章 設計ガイド(全文)Tarumoto Tetsuya
 
ユーザビリティテストの歴史(スタイルの変遷)
ユーザビリティテストの歴史(スタイルの変遷)ユーザビリティテストの歴史(スタイルの変遷)
ユーザビリティテストの歴史(スタイルの変遷)Tarumoto Tetsuya
 
UXプロトタイピング論 ー プロトタイプとデザイン思考
UXプロトタイピング論 ー プロトタイプとデザイン思考UXプロトタイピング論 ー プロトタイプとデザイン思考
UXプロトタイピング論 ー プロトタイプとデザイン思考Tarumoto Tetsuya
 
UXリサーチ概論 - UXブッククラブ東東京 at freee
UXリサーチ概論 - UXブッククラブ東東京 at freeeUXリサーチ概論 - UXブッククラブ東東京 at freee
UXリサーチ概論 - UXブッククラブ東東京 at freeeTarumoto Tetsuya
 
無料サンプル版「第6章 ジャーニーマップ」― 樽本徹也(著)『UXリサーチの道具箱 ―イノベーションのための質的調査・分析―』
無料サンプル版「第6章 ジャーニーマップ」― 樽本徹也(著)『UXリサーチの道具箱 ―イノベーションのための質的調査・分析―』無料サンプル版「第6章 ジャーニーマップ」― 樽本徹也(著)『UXリサーチの道具箱 ―イノベーションのための質的調査・分析―』
無料サンプル版「第6章 ジャーニーマップ」― 樽本徹也(著)『UXリサーチの道具箱 ―イノベーションのための質的調査・分析―』Tarumoto Tetsuya
 
『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所Tarumoto Tetsuya
 
ジョブ理論 - XP祭り2017
ジョブ理論 - XP祭り2017ジョブ理論 - XP祭り2017
ジョブ理論 - XP祭り2017Tarumoto Tetsuya
 
無料追補版#4「実録・UTタスク事例集」
無料追補版#4「実録・UTタスク事例集」無料追補版#4「実録・UTタスク事例集」
無料追補版#4「実録・UTタスク事例集」Tarumoto Tetsuya
 
無料追補版#3「実用ペルソナ論」
無料追補版#3「実用ペルソナ論」無料追補版#3「実用ペルソナ論」
無料追補版#3「実用ペルソナ論」Tarumoto Tetsuya
 
100円プロトタイプ(The $1 Prototype)
100円プロトタイプ(The $1 Prototype)100円プロトタイプ(The $1 Prototype)
100円プロトタイプ(The $1 Prototype)Tarumoto Tetsuya
 
価値提案キャンバス(Value Proposition Canvas)
価値提案キャンバス(Value Proposition Canvas)価値提案キャンバス(Value Proposition Canvas)
価値提案キャンバス(Value Proposition Canvas)Tarumoto Tetsuya
 
上級ユーザビリティテスト手法
上級ユーザビリティテスト手法上級ユーザビリティテスト手法
上級ユーザビリティテスト手法Tarumoto Tetsuya
 
スマホUXラボ「ユーザテストLive! 見学会」
スマホUXラボ「ユーザテストLive! 見学会」スマホUXラボ「ユーザテストLive! 見学会」
スマホUXラボ「ユーザテストLive! 見学会」Tarumoto Tetsuya
 
リーンスタートアップのための「聞く力」
リーンスタートアップのための「聞く力」リーンスタートアップのための「聞く力」
リーンスタートアップのための「聞く力」Tarumoto Tetsuya
 
ペーパー・イン・スクリーン・プロトタイピング
ペーパー・イン・スクリーン・プロトタイピングペーパー・イン・スクリーン・プロトタイピング
ペーパー・イン・スクリーン・プロトタイピングTarumoto Tetsuya
 
「ユーザビリティエンジニアリング(第2版)」無料サンプル版(第2章全文)
「ユーザビリティエンジニアリング(第2版)」無料サンプル版(第2章全文)「ユーザビリティエンジニアリング(第2版)」無料サンプル版(第2章全文)
「ユーザビリティエンジニアリング(第2版)」無料サンプル版(第2章全文)Tarumoto Tetsuya
 
UX/ユーザビリティ評価法
UX/ユーザビリティ評価法UX/ユーザビリティ評価法
UX/ユーザビリティ評価法Tarumoto Tetsuya
 
ユーザーストーリー・マッピング
ユーザーストーリー・マッピングユーザーストーリー・マッピング
ユーザーストーリー・マッピングTarumoto Tetsuya
 

More from Tarumoto Tetsuya (20)

ユーザビリティテストの世界「入門編」
ユーザビリティテストの世界「入門編」ユーザビリティテストの世界「入門編」
ユーザビリティテストの世界「入門編」
 
無料サンプル版『UXリサーチの道具箱II』第3章 設計ガイド(全文)
無料サンプル版『UXリサーチの道具箱II』第3章 設計ガイド(全文)無料サンプル版『UXリサーチの道具箱II』第3章 設計ガイド(全文)
無料サンプル版『UXリサーチの道具箱II』第3章 設計ガイド(全文)
 
ユーザビリティテストの歴史(スタイルの変遷)
ユーザビリティテストの歴史(スタイルの変遷)ユーザビリティテストの歴史(スタイルの変遷)
ユーザビリティテストの歴史(スタイルの変遷)
 
UXプロトタイピング論 ー プロトタイプとデザイン思考
UXプロトタイピング論 ー プロトタイプとデザイン思考UXプロトタイピング論 ー プロトタイプとデザイン思考
UXプロトタイピング論 ー プロトタイプとデザイン思考
 
UXリサーチ概論 - UXブッククラブ東東京 at freee
UXリサーチ概論 - UXブッククラブ東東京 at freeeUXリサーチ概論 - UXブッククラブ東東京 at freee
UXリサーチ概論 - UXブッククラブ東東京 at freee
 
無料サンプル版「第6章 ジャーニーマップ」― 樽本徹也(著)『UXリサーチの道具箱 ―イノベーションのための質的調査・分析―』
無料サンプル版「第6章 ジャーニーマップ」― 樽本徹也(著)『UXリサーチの道具箱 ―イノベーションのための質的調査・分析―』無料サンプル版「第6章 ジャーニーマップ」― 樽本徹也(著)『UXリサーチの道具箱 ―イノベーションのための質的調査・分析―』
無料サンプル版「第6章 ジャーニーマップ」― 樽本徹也(著)『UXリサーチの道具箱 ―イノベーションのための質的調査・分析―』
 
『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所
 
ジョブ理論 - XP祭り2017
ジョブ理論 - XP祭り2017ジョブ理論 - XP祭り2017
ジョブ理論 - XP祭り2017
 
無料追補版#4「実録・UTタスク事例集」
無料追補版#4「実録・UTタスク事例集」無料追補版#4「実録・UTタスク事例集」
無料追補版#4「実録・UTタスク事例集」
 
無料追補版#3「実用ペルソナ論」
無料追補版#3「実用ペルソナ論」無料追補版#3「実用ペルソナ論」
無料追補版#3「実用ペルソナ論」
 
100円プロトタイプ(The $1 Prototype)
100円プロトタイプ(The $1 Prototype)100円プロトタイプ(The $1 Prototype)
100円プロトタイプ(The $1 Prototype)
 
価値提案キャンバス(Value Proposition Canvas)
価値提案キャンバス(Value Proposition Canvas)価値提案キャンバス(Value Proposition Canvas)
価値提案キャンバス(Value Proposition Canvas)
 
上級ユーザビリティテスト手法
上級ユーザビリティテスト手法上級ユーザビリティテスト手法
上級ユーザビリティテスト手法
 
スマホUXラボ「ユーザテストLive! 見学会」
スマホUXラボ「ユーザテストLive! 見学会」スマホUXラボ「ユーザテストLive! 見学会」
スマホUXラボ「ユーザテストLive! 見学会」
 
リーンスタートアップのための「聞く力」
リーンスタートアップのための「聞く力」リーンスタートアップのための「聞く力」
リーンスタートアップのための「聞く力」
 
ペーパー・イン・スクリーン・プロトタイピング
ペーパー・イン・スクリーン・プロトタイピングペーパー・イン・スクリーン・プロトタイピング
ペーパー・イン・スクリーン・プロトタイピング
 
「ユーザビリティエンジニアリング(第2版)」無料サンプル版(第2章全文)
「ユーザビリティエンジニアリング(第2版)」無料サンプル版(第2章全文)「ユーザビリティエンジニアリング(第2版)」無料サンプル版(第2章全文)
「ユーザビリティエンジニアリング(第2版)」無料サンプル版(第2章全文)
 
UX/ユーザビリティ評価法
UX/ユーザビリティ評価法UX/ユーザビリティ評価法
UX/ユーザビリティ評価法
 
リーンキャンバス
リーンキャンバスリーンキャンバス
リーンキャンバス
 
ユーザーストーリー・マッピング
ユーザーストーリー・マッピングユーザーストーリー・マッピング
ユーザーストーリー・マッピング
 

無料追補版#2「ペーパープロトタイピング原論」

  • 1. 樽本徹也(著)『ユーザビリティエンジニアリング(第 2 版)』 無料追補版 #2 [2015.12.21 発行] - 1 - ペーパープロトタイピング原論 ※映画「ペーパー・ムーン」より ジャズのスタンダードナンバーに「It's Only A Paper Moon」という曲があるのをご存じで しょうか? ♪ そう、それはボール紙の海を渡る、ただの紙のお月様。 ♪ でも、君が僕を信じれば、見せかけのものにはならない。 ♪ そう、それはモスリン地で作った木の上にひろがる、ただのキャンバスの空。 ♪ でも、君が僕を信じれば、見せかけのものにはならない。 「信じれば、見せかけのものにはならない」のは“紙のお月様”だけではありません。“紙 のソフトウェア”も使いようによっては強力な設計ツールになります。 ■紙のソフトウェア ペーパープロトタイプは紙で作ったプロトタイプです。紙とペンしか使わない“超”ロー テクな手法で、主に手書きで作成します。紙製ですが、少しばかりの芝居心を発揮して「指 でクリック」したり、フィールドに「鉛筆で入力」したりすれば擬似的にソフトウェアの 動作が再現可能になります。 一般の人には目新しく感じられるかもしれませんが、手法自体は決して新しいものではあ りません。1970 年代に米国の NCR 社やゼロックス社で行われたプロジェクト例が専門書
  • 2. には載 れる とこ を指 タイプ イン しか in Pl 降にペ を紙 してい 載っています ようになって 右図 ろで、名詞の しているに過 プを使った設 を行う」こと し、最近は違 lain English ペーパープ にダウング いる好例です すし、1990 ていました。 ペ 左図: :システムの代 の「ペーパー 過ぎませんが 設計活動を意 とを意味しま 違った形でペ h」という T ロトタイプ レードするこ す。 年代後半に ペーパープロト ユーザはマウ 代わりに"コン ープロトタイ が、動詞形の 意味します。 ます。 ペーパープロ Twitter の初 (ペーパーク ことで、余分 樽本徹也(著) - 2 - はユーザビ タイプを使っ ウスの代わりに ンピュータ役"の イプ」は紙で の「ペーパー 。つまり「ペ ロトタイプを 期のオンライ クラフト)が 分な情報を排 )『ユーザビリ 無 リティや UX ったテスト風景 に"指"でクリッ のスタッフが次 でできたユー ープロトタイ ペーパープロ を目にする機 イン広告があ が登場します 排除して製品 ティエンジニ 無料追補版 #2 X の専門家の 景例 クする 次の画面を提示 ーザインター イピング」は ロトタイプを 会が増えてい あります。こ す。これは、 品のコンセプ ニアリング(第 2 2 [2015.12.21 の間では広く 示する ーフェイスモ はペーパープ を使って反復 います。「Tw この映像の中 敢えてデジ プトを明快に 2 版)』 1 発行] く知ら モデル プロト 復デザ witter 中盤以 ジタル に提示
  • 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/