1.
はじめてのUXデザイン、はじめてのデザイン思考
〜現場で使えるように〜
HCD-Net認定 ⼈間中⼼設計専⾨家, IBM Champion
⽻⼭ 祥樹 @storywriter
1
2018年 4⽉20⽇（⾦）

2.
2
UXデザインとは
ユーザーエクスペリンス（UX）とは
UXデザインのフレームワーク
UXデザインとデザイン思考
ユーザー調査
代表的な⼿法：
ユーザーインタビュー、現場観察
ユーザビリティテスト
質的分析・モデリング
代表的な⼿法：
KA法、カスタマージャーニーマップ
プロトタイピング
発想法
代表的な⼿法：
エンパシーマップ
ビジネスモデル検証
代表的な⼿法：
サービスブループリント、
ビジネスモデルキャンバス

3.
3
こまけぇことは
いいんだよ！

4.
4
私たちは
誰を「しあわせ」にするために
モノをつくっているのだったか？
【UXデザイン（デザイン思考）の前提】

5.
⽻⼭ 祥樹 @storywriter
v HCD-Net認定 ⼈間中⼼設計専⾨家
• 使いやすいWebサイトをつくる専⾨家
v Web業界に20年くらい、Watsonは2年ほど
• IBMChampion for 2018
v 主な実績など
• 担当したWebサイトが、雑誌のWebユーザビリティランキングで
国内トップクラスの評価を受ける ほか実積多数
v 主な専⾨分野
• ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、
アクセシビリティ、ライター、NOREN、IBM Watson
5
ユーザー⼼理を
つかむプロです

6.
6
メンタルモデル
ユーザーへの共感から⽣まれるUXデザイン戦略
Amazonで購⼊
http://amzn.asia/3cgueBZ
コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼「1位」
コンピュータ・IT 総合 最⾼「9位」

7.
7
IBM Champion 2018
受賞しました
みなさまのおかげです
本当にありがとうございます

8.
8
要件定義での根本的な課題：
情報システム室の担当者は、
現場のニーズを、正確に語ることはできるのか？

9.
9
要件定義での根本的な課題：
そもそも現場の担当者は、⾃分たちが本当に欲しいものを
正確に⾔葉にすることはできるのか？

10.
10
要件定義での根本的な課題：
有名な実験：
⾷器メーカーです
どんな新商品が欲しいか
議論してください

11.
11
要件定義での根本的な課題：
有名な実験：
ガヤガヤ
ワイワイ
ざわ・・・ざわ・・・
ざわ・・・ざわ・・・

12.
12
要件定義での根本的な課題：
有名な実験：
⿊くて四⾓いお⽫が
スタイリッシュで
欲しいです

13.
13
要件定義での根本的な課題：
有名な実験：
ありがとうございます
お礼に好きなお⽫を
お持ち帰りください

14.
14
要件定義での根本的な課題：
有名な実験： 全員が
⽩くて丸いお⽫を
取った

15.
15
要件定義での根本的な課題：
有名な実験：
いや・・・
家にあるのは⽩ばかりだし
四⾓いと収納しづらいし
ちょっと待って
⿊くて四⾓いのがいい
って⾔ったじゃん

16.
16
ユーザーは
⾃分が「本当に」欲しいものを
そもそも、⾃分でわかっていない
【認知⼼理学の前提】

17.
17
要件定義での根本的な課題：
別の事例：ある製造業
QC活動として、
この帳票を転記して
ミスを減らします

18.
18
要件定義での根本的な課題：
別の事例：ある製造業
なんでわざわざ
転記するのですか？
誤読による
ミスを防ぐためです
（エヘン）

19.
19
要件定義での根本的な課題：
別の事例：
システムから印字される
帳票の⽂字が⼩さくて
誤読しやすい

20.
20
要件定義での根本的な課題：
別の事例：
システムを改修して
⽂字を⼤きくすれば
いいのでは・・・

21.
21
要件定義での根本的な課題：
別の事例：
それは
思いつきませんでした

22.
22
ユーザーは
⾃分が想像できる範囲でしか
改善策の発想ができない
【認知⼼理学の前提】

23.
23
つまり、ユーザーは
⾃分が「本当に」欲しいものを
⾔葉にできないし、知らない
【認知⼼理学の前提】

24.
24
ということは、
いくらヒアリングしても、無策では
ユーザーが本当にしあわせになるモノは
つくれない

25.
25
では
どうすればいい？

26.
26
みんなでブレインストーミングする？
よくある事例：
どんな⼈が
ユーザーだと思う？

27.
27
みんなでブレインストーミングする？
よくある事例：
きっとこの業務の
ベテランで ITリテラシーは
きっと⾼いよ
少し難しくても
使ってくれる
きっと40代⼥性

28.
28
みんなでブレインストーミングする？
よくある事例：
きっと
スマホでこの業務を
したがっている
えらい⼈

29.
29
みんなでブレインストーミングする？
よくある事例：
そうですね そうですね
えらい⼈

30.
30
想像でユーザー像を決めると
ステークホルダーに都合の良い
ユーザー像になる
【ゴムのユーザー】

31.
31
では
どうすればいい？

32.
32
ユーザーの意⾒ではなく
⾏動（じっさいにした＝事実）に
注⽬する
【認知⼼理学の原則】

33.
33
まず、体験してみましょう

34.
34
まず、体験してみましょう：
今⽇は、わかりやすいように、ワークショップは、
「資格試験のウェブサイトを改善する」
という題材で進めます。

35.
35
資格試験のサイトの例：
引⽤：
https://www3.jitec.ipa.go.jp/JitesCbt/

36.
36
まず、体験してみましょう：
資格試験（TOEIC、情報処理技術者など）を取ろう、
と思う⼈の⼼理は、どういうものがあるでしょうか。
思いつくままに書き出しましょう。（60秒）

37.
37
どんな案が出ましたか？
では、こう⾔われたらどうでしょう。
「どれがいちばん重要なの？」
「それホントなの？」
「私はそうは思わない」

38.
38
まず、体験してみましょう：
質問を変えます。あなたが過去に、
資格試験（TOEIC、情報処理技術者など）を受けたとき、
そのきっかけは何でしたか。気にしたことは何でしたか。
事実を書き出しましょう。（60秒）
資格試験を受けたことがない⼈は
なぜ受けないのか、書いておいてください。
（あとで使います）

39.
39
1問⽬と2問⽬で
感覚が少し異なったのに
気がつきましたでしょうか

40.
40
こういうことが起きていたはず：
1問⽬では「きっと」こうだろう、というイメージ。
2問⽬では、あなたが「じっさいにした」こと。
おそらく、2問⽬のほうが、リアルだったと思います。
会社の推奨だから
1問⽬ 2問⽬
休⽇がつぶれて
嫌だった
会社の出世に
必要だった

41.
41
エンドユーザーの「⾏動」を調べよう：
「したい」ことをヒアリングしていても、想像しか出ない。
「じっさいにしたこと」は事実なので、確固な根拠になる。

42.
42
エンドユーザーの「⾏動」を調べよう：
エンドユーザーの「⾏動=事実」を調べる⽅法には、
• 過去の⾏動にフォーカスしてユーザーインタビューする
• 現場に⼊ってユーザーの⾏動を観察するエスノグラフィ
などがあります。

43.
43
ワークショップ：
ユーザーインタビューを体験してみよう！

44.
44
資格を取ろうと
思ったきっかけは？
会社で
勧められたから
査定が
良くなるから
インタビュー⾵景：

45.
45
ユーザーインタビューで訊くこと：
ユーザーインタビューでは
「過去のエピソード（実際にしたこと）」を訊く。
「何が欲しいか」とは、訊かない。（とくに調査に不慣れなうちは）
ユーザーの「〜したい」は、その状況になったとき、
本当にその⾏動をするとは限らない。
過去の出来事は、じっさいにしたことなので、確度が⾼い。

46.
46
ユーザーインタビューは確証バイアスとの戦い：
⼈間には、先⼊観（確証バイアス）という
認知の働きがあります。体験してみましょう。
冒頭で考えた、
「資格を取る⼈の⼼理」を思い出してください。

47.
47
ユーザーインタビューの結果
「資格をとろうと思ったのは、会社で、査定にプラスになるから。たく
さん持っていれば、昇格につながるし、履歴書にも書ける。受験料が
5100円もするし、参考書も3000円するけど、昇格のためならね。⽇曜
⽇が⼀⽇つぶれて、疲れるけど、体系的な知識も⾝につくと思うし。も
ともと新しいことを学ぶのは好きなんです。公的資格なら、社内でも評
価されるし、世の中でも評価されると思う。受験料も仕⽅ないかなと思
います」

48.
48
あなたの仮説は当たっていましたか？
たぶん「あたっていた」と感じていると思います。
その感じを、覚えておいてください。

49.
49
確証バイアス：「社内の評価のため」
「資格をとろうと思ったのは、会社で、査定にプラスになるから。たく
さん持っていれば、昇格につながるし、履歴書にも書ける。受験料が
5100円もするし、参考書も3000円するけど、昇格のためならね。⽇曜
⽇が⼀⽇つぶれて、疲れるけど、体系的な知識も⾝につくと思うし。も
ともと新しいことを学ぶのは好きなんです。公的資格なら、社内でも評
価されるし、世の中でも評価されると思う。受験料も仕⽅ないかなと思
います」

50.
50
あなたの仮説は当たっていましたか？
「社内の評価のため」と仮説をもっていた⼈は、
こう感じているはずです。
仮説
あたった！

51.
51
確証バイアス：「コスト（費⽤・時間）を⼼配」
「資格をとろうと思ったのは、会社で、査定にプラスになるから。たく
さん持っていれば、昇格につながるし、履歴書にも書ける。受験料が
5100円もするし、参考書も3000円するけど、昇格のためならね。⽇曜
⽇が⼀⽇つぶれて、疲れるけど、体系的な知識も⾝につくと思うし。も
ともと新しいことを学ぶのは好きなんです。公的資格なら、社内でも評
価されるし、世の中でも評価されると思う。受験料も仕⽅ないかなと思
います」

52.
52
あなたの仮説は当たっていましたか？
「コスト（費⽤・時間）を⼼配」と仮説をもっていた⼈は、
こう感じているはずです。
仮説
あたった！

53.
53
（2014年12⽉13⽇ 渋⾕駅の⾵景 漢字検定）
ユーザーの⼼理は、これですべて？
1
2
3社内の評価
転職
社内の評価
⾃信

54.
54
仮説はかならず当たる（確証バイアス）：
「⾃分の興味のある情報ほど、⽬に⼊りやすい」
中途半端に当たるために、むしろ他の⼼理を⾒失う。
仮説
あたった！
他の⼼理は？
仮説
あたった！

55.
55
確証バイアスを避けるためには：
確証バイアスを避けるためには、
ユーザーインタビューの途中では、
何が重要かという判断はせず、
出た話題は、とにかくメモする
という姿勢で臨みます。
（何が重要かは、インタビュー後の分析で考える）

56.
56
ユーザーインタビューは誘導との戦い：
確証バイアスと同じように、
質問の仕⽅によっても、
ユーザーを誘導してしまうことがあります。

57.
57
ユーザーは無意識に「同調」する：
Aという状況
におかれて はい
Bという課題
があったら はい
Cという製品
便利ですよね
はい
この訊きかたで「いいえ」と
いう⼈はあまりいない。

58.
58
ユーザーは無意識に「同調」する：
えっ！？
Aという状況
先⽉に何回
ありました？

59.
59
誘導しないためには：
ユーザーインタビューの最中は、
仮説をもたずに（いったん捨てて）
過去のエピソードを、
具体的に掘り下げるように、質問する
という姿勢で臨みます。
こちらから、仮定や状況設定を押しつけない。

60.
60
良いインタビューの結果：
仮説をもたず、フラットにインタビューができると、はじ
めてから3〜5回⽬までは、ユーザー⼼理の世界がどんどん
広がっていきます。

61.
61
インタビュー事前アンケート：
まず、以下のアンケートに記⼊してください。（1分）
1 お持ちの資格をひとつ教えてください。
複数ある⽅は、最近のものを。
（資格を持っていない⽅は、興味のある資格を教えてください）
2 その資格を取ろうと思ったきっかけを教えてください。

62.
62
チーム分け（1チーム3⼈）：
3⼈ごとに1チームになってください。
「社会⼈になってから、資格を取ったことがある⼈」
が、チームに1名は、いるようにしてください。
⻩のふせん緑のふせん ⻩のふせん

63.
63
ワークショップの進めかた：
1セッション「5分」で3交代。
質問者、回答者、観察者を、ローテーションしてください。
質問者、観察者は、メモをとる。
観察者
回答者質問者

64.
64
ワークショップの進めかた：
1セッションが終わったら、振り返りとして、
それぞれ30秒ずつ、感想を共有してから、
次のセッションに⼊ってください。
観察者
回答者質問者

65.
65
ワークショップの進めかた：
インタビューのなかで、次の5枚の質問カードを使い切るよ
うにしてください。
資格を取
るきっか
けを教え
てくださ
い。
〜はなぜ
ですか。
〜はなぜ
ですか。
他の選択
肢でな
く〜なの
はなぜで
すか。
他にはど
んなこと
を考えま
したか。

66.
66
ワークショップの進めかた：
カードはそれぞれ、次の意図を持っています。
いずれもインタビューでよく使う話法テクニックです。
過去のエ
ピソード
を訊く
理由を訊
く。
さらに深
掘る。
他のもの
と⽐較す
る。
副次的な
理由を訊
く。

67.
67
資格をとくに取ってない相⼿のとき：
過去にチャレンジしたことのある資格や、
今、取得しようと勉強中のものがあれば、
それについてインタビューしてください。

68.
68
資格に「まったく興味がない」相⼿のとき：
「エクストリームユーザー」という考えがあります。
極端なユーザーの⼼理には、「根本的な何か」が含まれて
いるかもしれません。
チャンスと思って、
なぜ興味がないのか、
訊いてみましょう。
なぜ資格
に興味が
ないので
すか。
〜はなぜ
ですか。
〜はなぜ
ですか。

69.
69
何をメモとして抜き出せばよいか？：
ユーザー⼼理が現れる発話や⾏動は、すべてメモとして
抜き出す。メモ1枚=⼼理1つ。（注：⾃分の推測や意⾒は⼊れない）
例：
参考書の価格が
⾼いので
ためらった
専⾨学校に
通うことにした
意識が⾼い
新社会⼈だった
から
この資格は
実務に役⽴つのか
不安だ
短期の⾏動 中⻑期の⾏動 気持ちや疑問 ⾃分の推測や意⾒

70.
70
メモの書き⽅のポイント：
「動詞」を含めます。
単語だけだと、ユーザーの⼼理がわからない。
例：
価格
参考書の価格が
⾼いので
ためらった
単語だけ 動詞を含めた⽂章
単語だけにしない。
例:
「価格」とだけ書くと。
「価格を安くしたい」と
「価格を⾼くしても保証
をつけたい」という、
まったく別の⼼理の区別
がつかなくなる。

71.
71
講師による実演：

72.
72
インタビューをしてみよう：
それでは、
「資格をとったきっかけ」について
インタビューしてみましょう。
1セッション5分で3交代。どんどんメモをとる。
事前アンケートは相⼿に⾒せてよい。
交代のさいに、30秒ずつ感想を共有する。

73.
73
インタビューを重ねるごとに
想像でない「確固とした事実」が
⼿元に集まっていく感触は
感じられましたか

74.
74
会場から感想：

75.
75
次のステップ：
インタビュー結果からインサイトを発⾒する
本⽇は時間の関係で、紹介のみに留めますが、
また、多くのノウハウのあるところです。

76.
76
「ユーザーの⼼理」ごとにグループ化する：
「ユーザーの⼼理」として似ているものを、
グループ化していきます。
「ユーザーの⼼理」が似ている
カードをグループにします。
グループを代表するカードを選
びます。次にグループとグルー
プを線でつないでいきます。
関係の強いグループとグループ
を、⼤きく線で囲んで、⼤きな
グループにします。

77.
77
じっさいのインタビューデータでの例：

78.
78
インタビュー結果を分析をする：

79.
79

80.
80
ギャップ分析：
ユーザー⼼理から、さらにインサイトへ踏み込む。
たとえば「ギャップ分析」という⼿法があります。
ユーザー⼼理と、現状を
ひとつひとつ、ていねいに⽐べていくプロセス。

81.
81
ギャップ分析のしかた：
1 2
ユーザー⼼理を、
しっかりと理解する。
現状を、
機能やコンテンツごとに、
ひとつずつ分ける。

82.
82
ギャップ分析のしかた：
3 4
機能やコンテンツを、
ユーザー⼼理ごとに並べる。
ユーザー⼼理に対し、
機能やコンテンツが
不⾜しているところを⾒る。
不⾜
（ギャップ）

83.
83
ギャップ分析のしかた：
5
ギャップを埋める改善案を
考える。 画⾯でいっしょに
やってみましょう！

84.
84

85.
85
資格サイトの例：
引⽤：
https://www3.jitec.ipa.go.jp/JitesCbt/
電話で連絡できる
「⼊⾨」イメージ
がある
合格発表について
わかる
組織の育成状況
がわかる
必要書類がわかる
親しみが持てる

86.
86
資格サイトの例：
引⽤：
https://www3.jitec.ipa.go.jp/JitesCbt/
模擬試験を
受けられる
社会で評価される
とわかる
合格のメリット
具体的にわかる
企業や学校で
評価される
受験申し込みが
できる
親しみを持って
メリットを伝える

87.
87
洗い出した機能やコンテンツ：
電話で連絡できる
「⼊⾨」イメージ
がある
合格発表について
わかる
組織の育成状況
がわかる
必要書類がわかる
親しみが持てる
模擬試験を
受けられる
社会で評価される
とわかる
合格のメリット
具体的にわかる
企業や学校で
評価される
受験申し込みが
できる
親しみを持って
メリットを伝える

88.
88
機能やコンテンツを⼼理に並べる：
「⼊⾨」イメージ
がある
模擬試験を
受けられる
親しみを持って
メリットを伝える

89.
89
電話で連絡できる
「⼊⾨」イメージ
がある
合格発表について
わかる
組織の育成状況
がわかる
必要書類がわかる
親しみが持てる
模擬試験を
受けられる
企業や学校で
評価される
受験申し込みが
できる
親しみを持って
メリットを伝える
合格のメリット
具体的にわかる
社会で評価される
とわかる

90.
90
電話で連絡できる
「⼊⾨」イメージ
がある
合格発表について
わかる
組織の育成状況
がわかる
必要書類がわかる
親しみが持てる
模擬試験を
受けられる
企業や学校で
評価される
受験申し込みが
できる
親しみを持って
メリットを伝える
合格のメリット
具体的にわかる
社会で評価される
とわかる
ユーザー⼼理とのギャップ（不⾜）を⾒る
ギャップ
（不⾜）
ギャップ
（不⾜）

91.
91
ギャップを埋める改善案を考える：
体系的な試験
だと、もっと訴求
できないかな！？
IT業界の必須知識
マップとか
どうだろう？

92.
92
ギャップ分析：
「ギャップ分析」を、ひとつひとつ、ていねいにやると
明確な根拠をもって、⽅向性が⾒えます。

93.
93
UXデザインとイノベーション：
UXデザイン（デザイン思考）で、より、
イノベーション・・・斬新な発想を求めるならば、
強制発想法（例：XB法など）と組み合わせるのもよい。
斬新な発想=イノベーション、とは限らない点に留意。

94.
94
終わりに：講師より

95.
95

96.
96
冒頭のワークを思い出してください：
冒頭のワークと⽐べてください。
あなたの仮説は当たっていましたか？
あなたの仮説は、
ユーザー⼼理の全体像をつかんでいましたか？

97.
97
それらをすべて、独⼒で
思いつくことはできたでしょうか

98.
98
情報システム室の担当者に
会議室でヒアリングするだけで
洗い出せたでしょうか

99.
99
エンドユーザーを
「しあわせ」にする⼿がかりが
つかめた感じはありますか

100.
100
まず、体験してみましょう：
次の線分は、⻑いですか？ 短いですか？

101.
101
まず、体験してみましょう：
次の線分は、「ものさし」となる線分に⽐べて、
⻑いですか？ 短いですか？
「ものさし」

102.
102
まず、体験してみましょう：
次の⾊は、濃いですか？ 薄いですか？

103.
103
まず、体験してみましょう：
次の⾊は、「ものさし」となる⾊に⽐べて、
濃いですか？ 薄いですか？
「ものさし」

104.
104
冒頭を思い出してください：
「ものさし」が有るときと無いときで、
各⼈の意⾒も視点もバラバラでした。
では、冒頭の、
「資格試験を受ける⼈の⼼理はどういうものがあるか」
という質問は、どういう状態だったでしょうか？

105.
105
冒頭を思い出してください：
モノが良いか悪いかは、
「ものさし」と⽐べないとわからない。
「ものさし」は、それを使うユーザーの⼼理です。
冒頭のときと、今で、資格試験の⾒えかたは
あなたのなかで、どれくらい変わっていますか。

106.
106
冒頭を思い出してください：
改善提案するとしたら、説得⼒はどうでしょうか。
では、今、こう⾔われたらどうでしょう。
「どれがいちばん重要なの？」
「それホントなの？」
「私はそうは思わない」

107.
107
冒頭を思い出してください：
今、この場にいる全員が、同じ⽅向を向いています。
この状況を、あなたのチームや、クライアントとつくれる
としたら？

108.
108
UXデザイン（デザイン思考）の2つの効果：
ユーザー⼼理の全体像を、しっ
かりと理解し、ビジネスの成果
につながる製品をつくる。
ユーザーを理解する過程を、プ
ロジェクトメンバー全員で共有
することで、同じ⽅向をむく。
1 2
UXデザイン（デザイン思考）には2つの効果があります。

109.
109
UXデザイン（デザイン思考）とは
ユーザーをしあわせにする
ことを⽬的にモノづくりをすること
【UXデザイン（デザイン思考）の原則】

110.
110
ユーザーを
「本当に」しあわせにする
モノづくりをしよう

111.
111
ありがとうございました。
⽻⼭ 祥樹
Twitter: @storywriter
Facebook: storywriter.jp
Facebook、ぜひ、つながってください！

112.
⽻⼭のプレゼンのアレ が、
スタンプになりました！
スタンプ名：ハーミィ（CSS編） 作者名：⽻⼭ 祥樹
https://store.line.me/stickershop/product/1228201/ja
Web・CSSネタ
全40種類