html5 conference 2015 design sprint
TRANSCRIPT
![Page 1: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/1.jpg)
Googleベンチャーズの手法に学ぶ。デザインスプリントのワークショップ
2015/1/25 13:20-15:00 ルームF
AKQA 佐藤 伸哉 / エクサ 安藤 幸央
1
![Page 2: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/2.jpg)
本ワークショップは、
Google および Google ベンチャーズと
直接の関係はありません
![Page 3: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/3.jpg)
本日の予定概要紹介
チームビルディング
アイスブレイク
ペルソナの確認
課題発見
休憩
利用場面を切り取る
アイデアを描く
アイデアの選出
各チーム発表
講評/まとめ
適宜質問してください
タイミングをみて
適宜離席してかまいません 3
![Page 4: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/4.jpg)
目的:デザインスプリント手法を知る4
![Page 5: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/5.jpg)
批評することもできますが、自らが気付くことの方が重要です。 5
![Page 6: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/6.jpg)
4~5人/チーム分け:職種やチームが片寄らないよう可能な限り分散してください 6
![Page 7: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/7.jpg)
投票が必要なシーンが何回かあります上位2位選出,決戦投票。偶数班は複数票 7
![Page 8: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/8.jpg)
アイスブレイク → 短時間で自己紹介8
![Page 9: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/9.jpg)
お名前(ニックネーム可)職種(エンジニア/デザイナー/etc.)1画面目にあるマイナーな毎日使うアプリ
9
![Page 10: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/10.jpg)
あんどうゆきお/アンディUXリサーチャー30Boxes
10
![Page 11: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/11.jpg)
お名前(ニックネーム可)職種(エンジニア/デザイナー/etc.)1画面目にあるマイナーな毎日使うアプリ
11
![Page 12: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/12.jpg)
ポストイットに名前かニックネームを書いて、胸に張るといいかもしれません!
12
![Page 13: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/13.jpg)
本日のテーマ WoT(車/冷蔵庫/テレビ)
![Page 14: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/14.jpg)
本日のテーマ WoT(洗濯機/電子レンジ/掃除機)
![Page 15: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/15.jpg)
さて何を作るか?(ネットからの情報/リモート操作/連携操作/各種表示)
via. https://evrythng.com/2013/05/international-web-of-things-workshop-call-for-papers/
![Page 16: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/16.jpg)
挙手!(何回でも可)( 車/冷蔵庫/テレビ/洗濯機/レンジ/掃除機/その他)
![Page 17: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/17.jpg)
デザイン
スプリント
概要説明
17
![Page 18: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/18.jpg)
18
![Page 19: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/19.jpg)
19
![Page 20: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/20.jpg)
幸福度
http://www.dtelepathy.com/ux-metrics/#intro
関わり
Google HEART
採用/選択
継続
目的達成
Google Ventures の考える UX 指標
20
![Page 21: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/21.jpg)
Google Ventures デザインスプリントhttps://www.gv.com/ 21
![Page 22: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/22.jpg)
短距離走:スタートアップ企業向けのサービス構築ワークショップ(5日間) 22
![Page 23: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/23.jpg)
ハッカソンやアイデアソンとは大きく違う自社のサービスを真剣に構築する手法 23
![Page 24: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/24.jpg)
ハッカソンは簡単ですぐ実現可能なことに手を付けてしまう。そして継続しない。 24
![Page 25: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/25.jpg)
発言せず、手を動かしていなくとも、やった気になる。アドレナリン効果。 25
![Page 26: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/26.jpg)
スプリントは、個人作業とアイデアの選出スキルや職種に関係なく、全員が参加 26
![Page 27: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/27.jpg)
Understand (理解する)、Diverge (発散する)、Decide (決定す
る)、Prototype (試作品を作る)、Validate (立証する) 27
![Page 28: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/28.jpg)
28最終判断を先に伸ばす
アイデアの質より量を求める
未熟なアイデアを歓迎する
他人のアイデアを尊重し、発展させる
紙に描いて視覚的に示す
![Page 29: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/29.jpg)
29
時間厳守。締め切りのプレッシャーを
極端なユーザーを想定し、多くの人へ
ヘビーユーザーや高齢者、初心者
必要な人には必ず参加してもらう
否定しない。する時は必ず改善案を
良いところを伸ばす。細部を気にする
![Page 30: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/30.jpg)
デザインスプリントの流れ
<はじめに:60 分>
30 分:デバイスの概要
20 分:チームビルディング
10 分:Design Sprint の概要の説明
<分析 : 30 分>
10 分:ペルソナについてのチームでの議論
20 分:ペルソナが求めてる機能について発表
<アイデア検討: 30 分>
10 分:ブレスト(個人)
20 分:ブレスト(チーム)
<意思決定 : 5 分>
5 分:投票によって案を決定
<プロトタイプ作成 : 50 分>
10 分:利用シーンを作成(個人)
10 分:ディスカッション(チーム)
15 分:UX フローの作成(個人)
15 分:UX フローの決定(チーム)
<検証 : 20 分>
1 チームあたり 1 分でプレゼンテーションを実施
30
![Page 31: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/31.jpg)
31
![Page 32: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/32.jpg)
ペルソナ
の提示
32
![Page 33: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/33.jpg)
33
![Page 34: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/34.jpg)
あんどうクン
44歳/会社員●打ち合わせで外出が多い●ECでたくさん買物する
●近所にスーパーが無い●車で片道30分の通勤●物忘れがひどい●心配性で恐妻家
34
![Page 35: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/35.jpg)
35
![Page 36: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/36.jpg)
あんどうクン
44歳/会社員●打ち合わせで外出が多い●ECでたくさん買物する
●近所にスーパーが無い●車で片道30分の通勤●物忘れがひどい●心配性で恐妻家
36
![Page 37: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/37.jpg)
あんどうクンが期待していそうなことペルソナの人となりをチームで議論ペルソナが求めている機能は?
37
あんどうクンは __________ (をする方法)を必要としていて ____ (という経験)をしたいと思ってる。その理由は__________(に価値を置いている)からです。
![Page 38: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/38.jpg)
あんどうクンは (冷蔵庫の食材を使い忘れない方法)を必要としていて (牛乳が無くなる前に購入するという経験)をしたいと思ってる。その理由は(常に新鮮な牛乳が飲みたい)からです。38
![Page 39: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/39.jpg)
ペルソナが期待していそうなことペルソナの人となりをチームで議論ペルソナが求めている機能は?
39
あんどうクンは __________ (をする方法)を必要としていて ____ (という経験)をしたいと思ってる。その理由は__________(に価値を置いている)からです。
![Page 40: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/40.jpg)
ペルソナ検討作業:5分:個人:A4 数案40
![Page 41: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/41.jpg)
あんどうクン
44歳/会社員●打ち合わせで外出が多い●ECでたくさん買物する
●近所にスーパーが無い●車で片道30分の通勤●物忘れがひどい●心配性で恐妻家
あんどうクンは __________ (をする方法)を必要としていて ____ (という経験)をしたいと思ってる。その理由は__________(に価値を置いている)からです。41
![Page 42: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/42.jpg)
チーム内で案を紹介しあう:5分一押しの案をそれぞれ紹介 42
![Page 43: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/43.jpg)
発表:1分づつ43
あんどうクンは __________ (をする方法)を必要としていて ____ (という経験)をしたいと思ってる。その理由は__________(に価値を置いている)からです。
![Page 44: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/44.jpg)
ペルソナが求めていることは?ペルソナが感じている課題とは? 44
![Page 45: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/45.jpg)
どこが良かったは抜きにして、よくないところを教えてくれ。
イーロン・マスク
(Tesla CEO)
Photo by Wikipedia
45
![Page 46: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/46.jpg)
アイデアと改善
個人ブレスト
46
![Page 47: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/47.jpg)
47
アイデア(改善)の質より量を求める
未熟なアイデア(改善)を歓迎する
視覚的に示す →ポストイットに書く
![Page 48: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/48.jpg)
アイデア検討:10分:ポストイットXX:XXまで 休憩もかねます 48
![Page 49: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/49.jpg)
アイデアと改善
チームブレスト
49
![Page 50: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/50.jpg)
ホワイトボードにプロット(縦:有用さ VS. 横:困難さや複雑度) 50
![Page 51: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/51.jpg)
アイデア検討:5分:ポストイット51
![Page 52: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/52.jpg)
投票と話し合いで1~2案選出:5分定番よりもそのチームならではの案を 52
![Page 53: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/53.jpg)
利用シーンを
描いてみる
(個人作業)
53
![Page 54: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/54.jpg)
A4 の紙を 8つに折って書き込む54
![Page 55: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/55.jpg)
55
![Page 56: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/56.jpg)
利用シーンを描く:個人:5分:A4用紙うまくいかないシーン、失敗シーンも 56
![Page 57: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/57.jpg)
チームで
ディスカッション
57
![Page 58: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/58.jpg)
パレート分析 80:20 の影響を考える58
![Page 59: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/59.jpg)
各人の案を紹介し意見をもらう:5分批判しない。未熟な案も強化する 59
![Page 60: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/60.jpg)
その利用シーンでの
画面を描いてみる(個人作業)
60
![Page 61: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/61.jpg)
A4 の紙を 8つに折って書き込む61
![Page 62: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/62.jpg)
62
![Page 63: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/63.jpg)
利用する画面を描く:個人:5分:A4用紙選出された1位のアイデアの1画面 63
![Page 64: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/64.jpg)
ベスト案の選出
64
![Page 65: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/65.jpg)
投票で決め、さらにその案を強化する:5分機能を盛り込みすぎないように注意 65
![Page 66: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/66.jpg)
発表練習:5分新サービス名または新機能名をつける 66
![Page 67: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/67.jpg)
各チーム1分づつ、エレベーターピッチの気分で発表 67
![Page 68: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/68.jpg)
ブランドというものは顧客の経験(UX)
から生まれるもの
ジェフリー・ジェームズ
( Inc.com writer )
Photo by Wikipedia
68
![Page 69: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/69.jpg)
USER → PEOPLE
69
![Page 70: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/70.jpg)
“Take a Human desire.”
人間の欲を
つかむのだ!
Evan Williams (Twitter ex-CEO)
70
![Page 71: HTML5 Conference 2015 Design Sprint](https://reader030.vdocuments.mx/reader030/viewer/2022032420/55a547941a28ab29198b4590/html5/thumbnails/71.jpg)
71
アンケートにご協力ください
http://bit.ly/html5C201501