DXのためのUX（ユーザーエクスペリエンス）〜ユーザーとシステムが手をつなぐために〜

DXのためのUX（ユーザーエクスペリエンス）
〜ユーザーとシステムが⼿をつなぐために〜
特定⾮営利法⼈⼈間中⼼設計推進機構（HCD-Net）
⽇本ウェブデザイン株式会社
⽻⼭祥樹
1
2020年12⽉9⽇（⽔）
ご質問は
Sli.do へ︕

2
DX（デジタルトランスフォーメーション）をざっくり
技術とインフラの発達で、これまでデジタル化できなかっ
たものもデジタル化ができるようになった。なんでもデー
タにすることで、すっごい便利になったり、ビジネスが広
がったりする。

3
DXの例
紙の⽂書
の⼭
電⼦化して
どこでも
参照
たまった
ビッグデータ
を分析
ビジネス
に活⽤
紙の
売上伝票
IT化して
便利に
多⾓的に
集計できる
売れ筋に注⼒して
営業活動

4
なんで「IT化」って⾔っちゃいけないの︕︖
それは端的には、意識改⾰ができないからです。
「経営」や「事業」（儲かるしくみ）を
IT化をしなくちゃいけなくて、
これまでの「業務改善」の意識だとできない。

5
これまでも、さんざんIT化は進めてきたはず。
なのに、イマイチなITシステムになってしまう・・・。
同じように進めたら、今回のDXも
同じ結果になってしまうのではないか︖

6
DX認定制度のウェブサイトより
企業は、ビジネスとITシステムを⼀体的に捉え、デジタル技術による
社会及び競争環境の変化が⾃社にもたらす影響（リスク・機会）を踏
まえた、経営ビジョンの策定及び経営ビジョンの実現に向けたビジネ
スモデルの設計を⾏い、価値創造ストーリーとして、ステークホル
ダーに⽰していくべきである。
引⽤: https://www.ipa.go.jp/files/000086670.pdf

7
DX認定制度のウェブサイトより
企業は、ビジネスとITシステムを⼀体的に捉え、デジタル技術による
社会及び競争環境の変化が⾃社にもたらす影響（リスク・機会）を踏
まえた、経営ビジョンの策定及び経営ビジョンの実現に向けたビジネ
スモデルの設計を⾏い、価値創造ストーリーとして、ステークホル
ダーに⽰していくべきである。
引⽤: https://www.ipa.go.jp/files/000086670.pdf
これだと
今までのIT化と
ちがいがよくわからない
たぶん同じ失敗する

8
DXのためにとるべき思考のコツ
ビジネス ITシステム
ビジネスって何︖
いつもやってるよ︖
いつもと同じでいいの︖

9
儲かるしくみをつくる
ITシステムを中⼼に
具体的な⾔葉に⾔い換え

10
儲かるしくみをつくる業務改善ではなく
売上の拡⼤を狙う

11
ITシステムが
ユーザーにしあわせを届ける
必須条件

12
ITシステムが
ユーザーにしあわせを届ける
必須条件
わりと
むずかしい

サグラダ
ファミリア
炎上
13
ITシステムについてよく聞く声
使いづらい
実務に
合わない
イメージと
ちがった
運⽤で
カバー
あれもこれも
追加要件
未稼働

14
どうすれば
ユーザーをしあわせにする
ITシステムがつくれるのか︖
今⽇のテーマ

⽻⼭祥樹 @storywriter
• NPO法⼈⼈間中⼼設計推進機構（HCD-Net）理事
• ⽇本ウェブデザイン株式会社代表取締役
• HCD-Net認定⼈間中⼼設計専⾨家
• 使いやすいプロダクトをつくる専⾨家
• Web業界に22年、AIシステムのUXデザインを4年
• 主な実績など
• 2009年⽇経パソコン企業サイトランキング2009
⽇本の主要企業696サイト中、ユーザビリティ／アクセシビリティ分野で第3位
• 2011年 Webユーザビリティランキング2011 企業サイト編
⽇本の⼤⼿企業150サイト中、第4位
• 主な専⾨分野
• ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、アクセシビリティ 15

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

17
⼈間中⼼設計推進機構（HCD-Net）
HCD-Netは、HCDに関する学際的な知識を集め、産学を超えた⼈間
尊重の英知を束ね、HCD導⼊に関する様々な知識や⽅法を適切に提供
することで、多くの⼈々が便利に快適に暮らせる社会づくりに貢献し
ます。
ざっくり⾔うと
国内唯⼀の
UXデザイナーの業界団体

18
UXデザインの勉強会
UXデザイナーの資格
など・・・︕

19
本イベント主催の
アイエンターさんにも
資格保有者がいます︕

20
要件定義での根本的な課題
どうすればユーザーをしあわせにするITシステムがつくれるのか︖

21
これまでのシステム開発の根本的な問題点。
ユーザーが「ほしい」と
⾔ったもの
ユーザーをしあわせに
するもの
要件定義で、ユーザーが「ほしいもの」を
訊いていませんか︖

22
情報システム室の担当者は、
現場のニーズを、正確に語ることはできるのか︖

23
そもそも現場の担当者は、⾃分たちが本当に欲しいものを
正確に⾔葉にすることはできるのか︖

24
有名な実験︓
⾷器メーカーです
どんな新商品が欲しいか
議論してください

25
有名な実験︓
ガヤガヤ
ワイワイ
ざわ・・・ざわ・・・
ざわ・・・ざわ・・・

26
有名な実験︓
⿊くて四⾓いお⽫が
スタイリッシュで
欲しいです

27
有名な実験︓
ありがとうございます
お礼に好きなお⽫を
お持ち帰りください

28
有名な実験︓ 全員が
⽩くて丸いお⽫を
取った

29
有名な実験︓
いや・・・
家にあるのは⽩ばかりだし
四⾓いと収納しづらいし
ちょっと待って
⿊くて四⾓いのがいい
って⾔ったじゃん

30
ユーザーは
⾃分が「本当に」ほしいものを
そもそも、⾃分でわかっていない

31
別の事例︓ある製造業
QC活動として、
この帳票を転記して
ミスを減らします

32
別の事例︓ある製造業
なんでわざわざ
転記するのですか︖
誤読による
ミスを防ぐためです
（エヘン）

33
別の事例︓
システムから印字される
帳票の⽂字が⼩さくて
誤読しやすい

34
別の事例︓
システムを改修して
⽂字を⼤きくすれば
いいのでは・・・

35
別の事例︓
それは
思いつきませんでした

36
ユーザーは
⾃分が想像できる範囲でしか
改善策の発想ができない

37
つまり、ユーザーは
⾃分が「本当に」ほしいものを
⾔葉にできないし、知らない

38
ということは、
いくらヒアリングしても、無策では
ユーザーがしあわせになるものは
つくれない

39
「ゴムのユーザー」に陥る議論

40
ゴムのユーザー
「きっと」や「たぶん」を積み重ねて要件を定める。
ユーザーはきっと
こう使う

41
議論の「落としどころ」として使いかたを提案する。
ユーザーには
こう使ってもらいましょう

42
現実: 意図したようには
ぜんぜん使ってくれない

43
結果:
このシステム
使いづらいです

44
無意識のうちにステークホルダーに都合のよいユーザー像
に寄ってしまう。これを「ゴムのユーザー」と呼ぶ。

45
想像のユーザーと
現実のユーザーは
まるで異なる

46
ではどうするか︖
「ユーザー調査」をしましょう

47
「ユーザー調査」をはじめよう

48
まず体験してみましょう。
今⽇はわかりやすいように、題材は、
「資格試験の申し込みをするウェブサイトを改善する」
というテーマで進めます。
（資格試験は、多くの⼈が経験している題材なので）

49
まず、体験してみましょう
資格試験（TOEIC、ITパスポートなど）を取ろう、と思う
⼈の⼼理は、どういうものがあるでしょうか。
思いつくままに書き出しましょう。（60秒）

50
どんな案が出ましたか︖
どうでしょうか。
いろんな案がでたと思います。
では、こう⾔われたらどうでしょう。
「それホントなの︖」
「私はそうは思わない」

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

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

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

54
エンドユーザーの「⾏動」を調べよう
「ほしい」ものをヒアリングすると、
ユーザーは無意識のうちに想像に寄った回答をしてしまう。
それに対して「実際にしたこと」は事実なので、
確かな根拠になる。

55
現場の「代表者」にヒアリングするのではなく、
エンドユーザーの「当事者」を調べよう。
「代表者」の意⾒は「推測」が混ざる。

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

57
• 「ほしい」ものを訊かない。
• ユーザーの「過去の⾏動」を調べる。
なにがほしい
ですか︖
〜をするために
なにをしましたか︖

58
「エンドユーザーに会って、話を聞き、⾏動を観察する」
のが、すべての基本です。

59
「ユーザーに直接に会う」ことが⼤切
越えられない壁ユーザー調査
したことない
ユーザー調査
したことある
プロジェクトの品質が明らかに変わる。
< <

60
「ユーザー調査」の基本

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

62
ユーザー調査で訊くこと
ユーザー調査では
「過去のエピソード（実際にしたこと）」を訊きます。
「〜という状況で、〜の機能があったら、使うか」
とは、訊きません。（とくに調査に不慣れなうちは）
ユーザーの「〜したい」は、その状況になったとき、
本当にその⾏動をするとは限りません。
過去の出来事は、じっさいにしたことなので、確度が⾼い。

63
ユーザー調査は確証バイアスとの戦い
⼈間には、先⼊観（確証バイアス）という
認知の働きがあります。体験してみましょう。
最初のアイスブレイクで考えた、
「資格を取る⼈の⼼理」を思い出してください。

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

65
あなたの仮説はあたっていましたか︖
どうでしょうか。

66
あなたは今「仮説あたった」と思っていますね︖

67
じつは今、
この場にいる全員が「仮説あたった」と思っています。

68
⼈間は先⼊観に合う情報に意識がいってしまう
「確証バイアス」は⼼理学の⽤語で、
「⼈間は先⼊観に合う情報に意識がいってしまう」
という認知のはたらきです。
あなたには、次の部分がとくに残っているはず。

69
確証バイアス︓「社内の評価のため」
います」

70
「社内の評価のため」と仮説をもっていた⼈は、
こう感じているはずです。
仮説
あたった︕

71
確証バイアス︓「コスト（費⽤・時間）を⼼配」
います」

72
「コスト（費⽤・時間）を⼼配」と仮説をもっていた⼈は、
こう感じているはずです。
仮説
あたった︕

います」
73
確証バイアス︓「体系的な知識を学びたい」

います」
74
確証バイアス︓「望む仕事に就きたい（就職・転職）」

います」
75
確証バイアス︓「⼈⽣の教養を深めたい」

76
資格を取るきっかけとなるユーザー⼼理
資格を取るきっかけとなるユーザー⼼理は、
⼤きくわけると5種類あります。

78
すべての⼼理をもらさずにいられたか︖
では、こういう問いならどうでしょう。
「仮説はあたっていましたか」
「すべての⼼理をもらさずに思い浮かべられましたか︖」
わりと難しい。

79
仮説はかならずあたる（確証バイアスにより）
中途半端にあたる。むしろ他の⼼理を⾒失う。
仮説
あたった︕
他の⼼理は︖
仮説
あたった︕

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

81
ユーザー調査は誘導との戦い
確証バイアスと同じように、
質問の仕⽅によっても、
ユーザーを誘導してしまうことがあります。

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

83
ユーザーは無意識に「同調」する
えっ︕︖
Aという状況
先⽉に何回
ありました︖

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

85
ユーザー⼼理分析の基本

86
定性分析をする
集まった膨⼤なデータは
そのままでは開発に活かせません。
「定性分析（ユーザー⼼理分析）」
をして、開発に活かせる
かたちにします。

87
いちばん⾝近な定性分析は
「ふせん」を使ってやることができます。

88
⽻⼭が以前にした調査で、
「ゲーミングディスプレイを買うきっかけの⼼理」
を例にとって説明します。

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

90
カードの書き⽅のポイント
「動詞」を含めます。
単語だけだと、ユーザーの⼼理がわからない。
例︓
ゲームの操作
ディスプレイが良
くなると、ゲーム
が操作しやすい
単語だけ動詞を含めた⽂章
単語だけにしない。
例:
「価格」とだけ書くと。
「価格を安くしたい」と
「価格を⾼くしても保証
をつけたい」という、
まったく別の⼼理の区別
がつかなくなる。

91
何をカードとして抜き出せばよいか︖
ユーザー⼼理が現れる発話や⾏動は、すべて
カードとして抜き出しましょう。（注︓⾃分の推測や意⾒は⼊れない）
例︓
ディスプレイが良
くなると、ゲーム
が操作しやすい
TVチューナーに
つないで使ってい
る
筐体のデザインが
悪い
PS3やテレビを
PCモニタにつな
ぐ⽅法が知りたい
短期の⾏動中⻑期の⾏動気持ちや疑問⾃分の推測や意⾒

92
「ユーザーの⼼理」ごとにグループ化する
G6
PS3やテレビをPCモニタに
つなぐ⽅法が知りたい
A6
PC以外のAV機器やゲーム機
をHDMIで接続できる
A1
4
スピーカーの⾳質が悪い
A2
0
TVチューナーにつないで
使っている
F5
TVのフレーム遅延が3〜4フ
レームで、このモニタは
0.05
F16
ディスプレイが良くなると、
ゲームが操作しやすい
F18
数年前のTVから乗り換えた
ら、遅延がまったくなくな
り感動した
K2
YouTubeをモニタのでなく、
ノートパソコンのスピー
カーで聞きたい
K11
PlayStation4をつなぎたい
ので、内蔵スピーカーの⾳
質が気になる
G6
A6
A1
4
A2
0
使っている
F5
0.05
F16
F18
り感動した
K2
K11
質が気になる

93
グループを代表するカードを選ぶ
グループ化したら、
そのグループを代表するカードに、しるしをつける。
しるしをつけた例︓
G6
A6
A1
4
A2
0
使っている
F5
0.05
F16
F18
り感動した
K2
K11
質が気になる

94
グループを代表するカードを選ぶ
さらに、グループとグループで、
似ているものを、線で囲んだり、つないでいく。
似ているグループをさらにグループ化した例︓
G6
A6
A1
4
A2
0
使っている
F5
0.05
F16
F18
り感動した
K2
K11
質が気になる

95
組み上げていくと
G3
120hzに対応したモニタ
を探している
G15
ゲーミングモニタを探し
ている
A1
夜戦のあるゲームで画⾯
設定を明るくするのが⾯
倒
A12
他社の安価なモニタが画
⾯遅延がひどく買い替え
た
A18
ゲームの操作がしやすく
なった
A32
暗部強調モードは役に⽴
つが、眼が疲れる
A33
思った以上に暗いところ
が⾒やすい
A35
ゲーム画⾯を回転するた
びに、妙にちらつく
F5
TVのフレーム遅延が3〜4
フレームで、このモニタ
は0.05
F16
ディスプレイが良くなる
と、ゲームが操作しやす
い
F15
良いディスプレイでゲー
ムをすると盛り上がる
F18
数年前のTVから乗り換え
たら、遅延がまったくな
くなり感動した
K19 ゲーム⽤に買った

96ダウンロード︓http://www.slideshare.net/storywriterjp/20140621-linkshare-valuemap

97
ゲームを
もっと
楽しみたい
モニタを
買い替えたい
マルチモニタ
にしたいコスパの
よい品を
買いたい
初期不良
が不安

98
恐怖に耐える
いったい何時間
かかるんだ︖
数百件の
散漫なデータ
やってもやっても
進んだ感じがしない
全体像が
ぜんぜん⾒えない
「効率よく、正解を⾒つける」ことに慣れた⼈には、すごい不安感。キツい。
この恐怖が、ずっと続きます。
全体像が⾒えるのは、作業が3/4くらいしてから。

99
恐怖に耐えられなかった⼈は、何をするか
効率よく
結論を出すには
枠組みを
先につくろう︕
恐怖に耐えられなかった⼈の典型的な失敗パターン︓
• 「縦軸に...を、横軸に...をひいて整理してみよう」
• 「ぱっと⾒て、...と...と...に分類できそうだね」
• 「AIDMAやタッチポイントで分類してみよう」

100
「枠組み」では、⼼理は理解できない
⼈間の⼼理は、そもそも粒度も軸もバラバラで、
しかも⽭盾しているものです。
ひとつの視点で、効率よく整理すると、誤解します。
「混沌のまま」モデル化しましょう。
性能価格
家電AとB
どっち買おう
枠組みで整理じっさいの⼼理
好み評判
価格ポイント
還元
性能好み
評判
⾊

101
シナリオ化
仕上がった⼼理マップは、全体を俯瞰できますが、
複雑なので、そのままプロジェクトの資料として、
つねに参照するには不便。
なので、⼼理のグループごとに、シナリオに書き起こして、
A4で1枚のシートにしておく。
プロジェクト中は、ことあるごとに、シートに⽴ち返る。

102
モニタを
買い替えたい
マルチモニタに
したい
ゲームを
もっと楽しみたい
初期不良が
不安
コスパのよい
品を買いたい
• PC買替のタイミングで、
モニタの買替や追加を考
えます。
• 気にしているポイントは、
画⾯サイズやスペースが
ちょうどいい、画⾯のき
れいさ、視野⾓が広い、
発⾊がいい、⽬が疲れな
い、デザインがよい、リ
モコン、付属品、操作し
やすい、です。
• 実物を⾒に、店頭に⾏き
ます。店頭と⾃宅のサイ
ズの印象の違いがありま
す。
• デュアルモニタ、マルチ
モニタにしたいです。
• 設定⽅法がわからず困っ
たり、そもそも⾃分の機
種がマルチモニタできる
のか分からず、購⼊して
よいか悩んでいます。
• モニタを設置するための
機器を探しています。モ
ニタが省スペースだと嬉
しいです。
• フレーム遅延のないモニ
タや、暗部強調機能でプ
レイすると、対戦ゲーム
で有利になります。他の
ゲームの感動も⼤きくな
ります。
• PC以外の機器も接続しま
す。PlayStation、テレビ
など接続します。その端
⼦や、⼿軽な切り替え⽅
法も気になります。
• メディアを堪能するため、
スピーカーの⾳質も必要
です。
• ドット抜け、初期不良を
不安にしています。
• 中国製、韓国製より国内
製造のもののほうが安⼼
だと感じます。
• 有名メーカーの品である、
5年保証がある、と安⼼し
ます。
• 配送途中に壊れたり、汚
れるのも不安なので、
ちゃんとした配送をして
ほしいです。
• 各社、各シリーズの製品
はいずれも似ていて、ど
れが良いのか判断がしづ
らいです。
• できれば安いのがいいで
す。テレビと⽐較すると
きもあります。
• せっかくだから良いもの
を、とも思います。
• コスパの良いものがどれ
か、知りたいです。⽐較
サイトが⾒たいです。
• 購⼊後、とりあえず満⾜
しますが、違いはいまい
ち分かりません。
シナリオ化の例

104
要件を決める
ここまで推進してきたら、あなたには、
「ユーザーの状況」も「ユーザーの本質的な課題」も
「望ましい解決策」も⾒えているはずです。
あなたが主体となって要件を決め、
ステークホルダーの合意を取りにいきましょう︕

105
ユーザーはものづくりのプロではない
ユーザーの要望を「そのまま」システム化すると
ユーザーをしあわせにするシステムはできない。
そのとおりにつくると
じつは使いづらい要望
表⾯的な
解決策
⻑期にはプロダクトを
ダメにするアイデア
本当に必要なものは
⾔語化できない

106
要件を決めるのは誰か
「なにをつくるか」を決めるのはユーザーではありません。
ここまでユーザー調査を推進してきたあなたです。
「ユーザーをしあわせにする⽅法」を知っているのは
あなただからです。

107
まとめ

108
まとめ
1. DXへの道は「ユーザーをしあわせにするシステム」
をつくる道。
2. 「ユーザー調査」をすることで、
ユーザーの本質的な課題にたどりつくことができる。
3. ユーザー調査の結果を、細かくして、グループ化して、
「ユーザー⼼理の分析」をする。

109
ユーザーをしあわせにする
ITシステムをつくりましょう

110
ありがとうございました。
⽻⼭祥樹
https://storywriter.jp/
Twitter: @storywriter

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

DXのためのUX（ユーザーエクスペリエンス）〜ユーザーとシステムが手をつなぐために〜

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to DXのためのUX（ユーザーエクスペリエンス）〜ユーザーとシステムが手をつなぐために〜

Similar to DXのためのUX（ユーザーエクスペリエンス）〜ユーザーとシステムが手をつなぐために〜 (20)

More from Yoshiki Hayama

More from Yoshiki Hayama (18)