100円プロトタイプ（the $1 prototype）
TRANSCRIPT
＜アジャイルUCD研究会＞
2015年2月28日
100円プロトタイプ
ポストイットで、あっという間にモバイルUXデザイン
Regional Scrum Gathering® Tokyo 2015
「ユーザビリティエンジニアリング(第２版)」
1章 ユーザ中心設計概論2章 インタビュー法3章 インタビューの実践4章 データ分析法5章 発想法6章 プロトタイプ7章 ユーザビリティ評価法8章 ユーザテスト9章 ユーザテストの準備10章 ユーザテストの実施11章 分析と再設計12章 ユーザ中心設計活動
*無料サンプル版（第2章全文）http://www.slideshare.net/barrelbook/ss‐26183115
全面広告
全面広告
Shida Tarumoto
本日の案内役
Low HighFidelityMid
一般的には見た目が大雑把ならばローファイ、本物そっくりならばハイファイと呼ぶ
ローファイの代表的手法が「ペーパープロトタイピング」
「THE $1 PROTOTYPE」はモバイル時代の新しいペーパープロトタイピング論
1. ENVISION2. PROTOTYPE3. TEST
$1 Prototype
1ドル・プロトタイプ法の3ステップ
1. ENVISION
正方形の付箋紙を使って「ストーリーボード」を描く
2. PROTOTYPE
長方形の付箋紙を使って「ペーパープロトタイプ」を作成する
3. TEST
近くのコーヒーショップに行って、”客”にコーヒーを奢って「インタビュー」に協力してもらう
ストーリーボード
あるイベント会場にて店主：「2冊で60ドルになります。」
客：「カード使えますか？」
店主：「ええ、どのカードでも結構ですよ。」
店主：「レシートに指でサインしていただけば、SMSかメールでお送りできます。」
その日の夜
店主：「今日は何冊売れたかな？」
引用元：「The $1 Prototype」
カード決済サービス「Square」を題材としたストーリーボードの例
Establishing Shot（場面設定）から
始める
正方形の付箋紙5‐8枚
主に「吹き出し」で話を進める
製品やアプリの画面は重要な”登場人物”
最後のコマは「顧客のベネフィット」を描く
UXストーリーボードのポイント
作・shida
付箋紙ストーリーボードの作成例
ペーパープロトタイプ
長方形の付箋紙をスマホの画面に見立てる
※さらに極細サインペンがあれば尚可
道具一式：付箋紙、シャーペン、消しゴム、定規
付箋紙プロトタイプの作成例
DRAWER SEARCH & KEYBOARDホーム画面
付箋紙を重ね合せれば、動きのある画面でも表現できる
ペーパープロトタイプ・インタビュー
「これがあなたのスマホだとします。」
「アプリを起動すると、こんな感じの画面が出てきます。どうしますか？」
「そこを押すと、次はこんな画面になります。どうしますか？」
XXXXXXXX >
XXXXXXXX >
XXXXXXXX >
XXXXXXXX >XXXXXXXX >
XXXXXXXX >
TOP ←
「（仮に）あなたはドコドコでナニナニを
しようとしていると思ってください。」
ユーザの「操作」に応じて画面を「追加」していく
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Done
XXXXXX
XXXXXX
XXXXXX
XXXXXX
「そこを押すと、画面が左側からこんな風に入ってきます。」
「そこを押すと、こんな画面が下側から出てきます。」
「トランジション（アニメーション効果）」は口頭で説明する
「ナビゲーションバーにある”ハンバーガー”アイコンをタップすると、サイドドロワーが左からスライドインして、ホーム画面にオーバーレイ表示します。」
インタビューの大原則は「ユーザの言葉で話す」こと
おわりに
• リーンスタートアップ /リーンUX
• Design Studio / DesignSprint
• アジャイル開発（スクラム / XP）
• ユーザストーリー・マッピング
• プロトタイピング・ツールetc…
100円プロトタイプ
＋
付箋紙プロトタイプは他の手法と相性がよい
特に「POP」や「Prott」とは相性がよい
プロトタイピングにはデザインパターンが役立つ
おまけ
BEGINING・偶然、1ドルの付箋紙でスマホは簡潔にシミュレーションできることに気付いた。・5年前にスティーブ・クルーグに勇気づけられた。・サンフランシスコ州立大学で「Agile Mobile UX Design Certificate Course」を教えている。・1ドルプロトタイプ法はモバイルUXデザインとリーンスタートアップの完全な結合である。・「ENVISION（ビジョン構築）」のステップを省略しないように。
Part 1: ENVISION・正方形の付箋紙を使う。・「Establishing shots（場面設定）」が重要。・5‐8枚のストーリーボードを描く。・最後のコマは「顧客のベネフィット」を描く。
・「ストーリボードウォークスルー」でブラッシュアップする。
Part 2: PROTOTYPE・長方形の付箋紙を使う。・「ホーム画面」から描く。・「デザインパターン」を活用する。・シャーペンと定規を使う。・画面要素（アイコンなど）は原則として全部描く。
Part 3: TESTING・「コーヒーショップ」でテストする。・店員に「ワイロ（チップ）」を渡す。
・「客（朝の待ち行列）」にコーヒーを奢って協力してもらう。・一人当たり4‐7分程度で「1画面フロー」をテストする。・午前中だけで15‐20人テスト～改善を繰り返する（RITEメソッド風）。・「Adding（追加）」で画面遷移させる。・画面トランジションは「口頭」で描写する。・付箋紙はバインダーで管理する。・画面管理係（helper）と組む。・誘導質問しない。・専門用語を使わない。
Part 4: COLLABORATE・1ドルプロトタイプ法はアジャイル開発と相性がよい。・ペルソナよりもコンテキストが重要。
・キックオフミーティングで付箋紙ストーリーボードを描く。・付箋紙プロトタイプとテストは1スプリント先行して行う。・付箋紙プロトタイプを成果物として利用する。
“The $1 Prototype” Cheat sheet
樽本徹也 ‐ 利用品質ラボ代表
• UXリサーチャ/ユーザビリティエンジニア• 認定人間中心設計専門家• 認定スクラムプロダクトオーナー（CSPO）• NPO 人間中心設計推進機構 評議員• アジャイルUCD研究会 共同代表
◎人机交互論 ‐ユーザビリティエンジニア的HCI論http://www.usablog.jp/◎アジャイルUCD研究会 ‐リーン/アジャイルUX 新Newshttp://groups.google.com/group/agileucdja?hl=ja◎Facebook ‐樽本徹也https://www.facebook.com/tetsuya.tarumoto
UX/UCDの講演・研修 UX/UCDの社内導入支援 UX/UCDによる製品開発支援
Keep in touch!
簡単・便利なコトづくり応援します。
UX/UCDの講演・研修UX/UCDの社内導入支援UX/UCDによる製品開発支援
東京都台東区下谷1‐11‐15ソレイユ入谷4F