2015年2月28日 Regional Scrum Gathering Tokyo 2015 : Day 1 : [1E-2] 100円プロトタイプ ～ ポストイットで、あっという間にモバイルUXデザイン

1. ＜アジャイルUCD研究会＞
2015年2月28日
100円
プロトタイプ
ポストイットで、あっという間にモバイルUXデザイン
Regional Scrum Gathering® Tokyo 2015

2. 「ユーザビリティ
エンジニアリング(第２版)」
1章 ユーザ中心設計概論
2章 インタビュー法
3章 インタビューの実践
4章 データ分析法
5章 発想法
6章 プロトタイプ
7章 ユーザビリティ評価法
8章 ユーザテスト
9章 ユーザテストの準備
10章 ユーザテストの実施
11章 分析と再設計
12章 ユーザ中心設計活動
*無料サンプル版（第2章全文）
http://www.slideshare.net/barrelbook/ss‐26183115
全面広告
全面広告

3. Shida Tarumoto
本日の案内役

4. Low High
Fidelity
Mid
一般的には見た目が大雑把ならばローファイ、本物そっくりならばハイファイと呼ぶ

5. ローファイの代表的手法が「ペーパープロトタイピング」

6. 「THE $1 PROTOTYPE」はモバイル時代の新しいペーパープロトタイピング論

7. 1. ENVISION
2. PROTOTYPE
3. TEST
$1 Prototype
1ドル・プロトタイプ法の3ステップ

8. 1. ENVISION
正方形の付箋紙を使って「ストーリーボード」を描く

9. 2. PROTOTYPE
長方形の付箋紙を使って「ペーパープロトタイプ」を作成する

10. 3. TEST
近くのコーヒーショップに行って、
”客”にコーヒーを奢って「インタビュー」に協力してもらう

11. ストーリーボード

12. あるイベント会場にて
店主：「2冊で60ドルに
なります。」
客：「カード使えますか？」
店主：「ええ、どのカードで
も結構ですよ。」
店主：「レシートに指で
サインしていただけば、
SMSかメールでお送り
できます。」
その日の夜
店主：「今日は何冊売
れたかな？」
引用元：「The $1 Prototype」
カード決済サービス「Square」を
題材としたストーリーボードの例

13. Establishing Shot
（場面設定）から
始める
正方形の付箋紙5‐8枚
主に「吹き出し」
で話を進める
製品やアプリの
画面は重要な
”登場人物”
最後のコマは
「顧客のベネ
フィット」を描く
UXストーリーボードのポイント

14. 作・shida
付箋紙ストーリーボードの作成例

15. ペーパー
プロトタイプ

16. 長方形の付箋紙をスマホの画面に見立てる

17. ※さらに極細サインペンがあれば尚可
道具一式：付箋紙、シャーペン、消しゴム、定規

18. 付箋紙プロトタイプの作成例

19. DRAWER SEARCH & KEYBOARDホーム画面
付箋紙を重ね合せれば、動きのある画面でも表現できる

20. ペーパープロトタイプ・
インタビュー

21. 「これがあなたのス
マホだとします。」
「アプリを起動する
と、こんな感じの画
面が出てきます。
どうしますか？」
「そこを押すと、次
はこんな画面にな
ります。どうします
か？」
XXXXXXXX >
XXXXXXXX >
XXXXXXXX >
XXXXXXXX >
XXXXXXXX >
XXXXXXXX >
TOP ←
「（仮に）あなたは
ドコドコ で
ナニナニ を
しようとしていると
思ってください。」
ユーザの「操作」に応じて画面を「追加」していく

22. XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
Done
XXXXXX
XXXXXX
XXXXXX
XXXXXX
「そこを押すと、
画面が左側か
らこんな風に
入ってきます。」
「そこを押すと、
こんな画面が下
側から出てきま
す。」
「トランジション（アニメーション効果）」は口頭で説明する

23. 「ナビゲーションバーにある”ハンバーガー”
アイコンをタップすると、サイドドロワーが左
からスライドインして、ホーム画面にオー
バーレイ表示します。」
インタビューの大原則は「ユーザの言葉で話す」こと

24. おわりに

25. • リーンスタートアップ /
リーンUX
• Design Studio / Design
Sprint
• アジャイル開発（スクラ
ム / XP）
• ユーザストーリー・マッピ
ング
• プロトタイピング・ツール
etc…
100円
プロト
タイプ
＋
付箋紙プロトタイプは他の手法と相性がよい

26. 特に「POP」や「Prott」とは相性がよい

27. プロトタイピングにはデザインパターンが役立つ

28. おまけ

29. 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

30. 樽本 徹也 ‐ 利用品質ラボ代表
• UXリサーチャ/ユーザビリティエンジニア
• 認定 人間中心設計専門家
• 認定 スクラムプロダクトオーナー（CSPO）
• NPO 人間中心設計推進機構 評議員
• アジャイルUCD研究会 共同代表
◎人机交互論 ‐ ユーザビリティエンジニア的HCI論
http://www.usablog.jp/
◎アジャイルUCD研究会 ‐ リーン/アジャイルUX最新News
http://groups.google.com/group/agileucdja?hl=ja
◎Facebook ‐ 樽本徹也
https://www.facebook.com/tetsuya.tarumoto
 UX/UCDの講演・研修
 UX/UCDの社内導入支援
 UX/UCDによる製品開発支援
Keep in touch!

31. 簡単・便利なコトづくり応援します。
 UX/UCDの講演・研修
 UX/UCDの社内導入支援
 UX/UCDによる製品開発支援
東京都台東区下谷1‐11‐15 ソレイユ入谷4F