2020年1月9日 ポップインサイトのオンラインセミナーのスライドです。Webサービスやアプリをつくるとき、「ユーザーの心理に応える」とよく言われます。しかし、最初から「ユーザーの心理」を正しく理解するのはとても難しいです。こまかい試行錯誤をくるくる回し、積み重ねながらゴールに向かうほうが、やりやすく成果も出しやすいものです。「アジャイルUX」というキーワードで、明日からできる、すばやくUXデザインのプロセスを回す方法を考えます。 セミナーURL: https://popinsight.jp/seminar/detail.php?id=111&utm_source=Twitter&utm_medium=sns&utm_campaign=20200109_hayamasan&utm_content=&utm_term=

1. UXデザインを速く！ 軽く！ そして根拠をもって、回せ！
すばやいユーザー調査からつなげるアジャイルUX
HCD-Net認定 ⼈間中⼼設計専⾨家
⽻⼭ 祥樹 @storywriter
1
2020年1⽉9⽇（⽊）

2. 2
Webサービスやアプリをつくるとき、
「ユーザーの⼼理に応える」とよく⾔われますが、
最初から「ユーザーの⼼理」を正しく理解するのは、
難易度の⾼いものです。

3. 3
こまかい試⾏錯誤をくるくる回して、積み重ねることで、
ゴールにむかうほうが、やりやすく、
成果も出しやすい。

4. 4
他⽅で、アジャイルと併⾛するための
UXデザインのテクニックは、
エネルギーを求められるものが多く、
はじめて取り組む⼈にはハードルが⾼いです。

5. 5
そこで、「アジャイルUX」というキーワードで、
明⽇からできる、
すばやくUXデザインのプロセスを回す⽅法を、
考えていきます。

6. 6
今⽇のトピック：
1. ユーザー⼼理は「考える」より「調べる」
2. ⾼速でプロトタイピングとユーザビリティテストを回す
3. マウス軌跡の録画ツール
4. リモートユーザビリティテスト
5. 質疑応答

7. ⽻⼭ 祥樹 @storywriter
v HCD-Net認定 ⼈間中⼼設計専⾨家
• 使いやすいプロダクトをつくる専⾨家
v Web業界に20年くらい、IBM Watsonを3年ほど
• IBM Champion
v 主な実績など
• 2009年 ⽇経パソコン 企業サイトランキング2009
⽇本の主要企業696サイト中、ユーザビリティ／アクセシビリティ分野で第3位
• 2011年 Webユーザビリティランキング2011 企業サイト編
⽇本の⼤⼿企業150サイト中、第4位
v 主な専⾨分野
• ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、
アクセシビリティ、ライター、NOREN、IBM Watson
7

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

9. 9
ユーザー⼼理は「考える」より「調べる」

10. 10
「ユーザー⼼理」を考える？
ものづくりをするとき、
「ユーザーはなにを考えているんだろう」
と・・・⾔われなくても、ふつう考える。

11. 11
「ユーザー⼼理」を考える？
問題は「ユーザー⼼理の理解」は
先⼊観（確証バイアス）との戦いだということ。
体験してみましょう。

12. 12
資格を取るきっかけとなるユーザー⼼理は？
今⽇は「資格取得」を教材にします。
資格を取るきっかけとなるユーザー⼼理には、
どんなものがあると思いますか？
2分で考えて、思い浮かべてください。

13. 13
資格を取るきっかけとなるユーザー⼼理は？
資格を取ったユーザーにインタビューしました。

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

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

16. 16
あなたの仮説はあたっていましたか？
どうでしょうか。
あなたの仮説はあたっていましたか？

17. 17
あなたの仮説はあたっていましたか？
あなたは今「仮説あたった」と思っていますね？

18. 18
あなたの仮説はあたっていましたか？
じつは今、
この場にいる全員が「仮説あたった」と思っています。

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

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

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

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

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

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

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

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

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

28. 28

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

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

31. 31
「考える」よりも「調査する」
正しくユーザー⼼理を理解するには、
「考える」よりも「調査する」

32. 32
UXデザインとユーザー調査
ベテランのUXデザイナーたちと話していて
「いちどもユーザーに会ってないデザイナーが、
デザインをしても、UXデザインといえるか？」
という質問に、全員が顔をしかめた。

33. 33
UXデザインとユーザー調査
ユーザーに会ってなければ
いくらペルソナをつくろうが
いくらジャーニーマップを描こうが
UXデザインではない。
それは思い込みのデザインでしかない。

34. 34
UXデザインとユーザー調査
「UXデザインは、ユーザー調査をして、
デザインすること」
こう⾔って、差し⽀えなさそう。

35. 35
専⾨的な補⾜: UXデザインとユーザー調査
先の答弁は、より厳密には、以下のようなもの。
「ヒューリスティック評価やエキスパートレビューなど
ユーザーに会わないでやる⼿法もあるよね」
「じゃあ、そういった⼿法だけしか使ってなくて
本当に1回もユーザーに会ったことがなかったら？」
「それはさすがに・・・」

36. 36
⾼速でプロトタイピングとユーザビリティテストを回す

37. 37
ユーザー調査をしよう
問題は「ユーザーに会う」のは
まだ多くの企業では、わりと⼤騒ぎなこと。

38. 38
⼤がかりなユーザー調査をしようとすると
専⾨の調査会社に頼むとお⾦かかる。
社内承認がたいへん。
期間が⻑くかかる。たまにしかやれない。
⾃分でやろうにもやりかたがわからない。

39. 39
⼤がかりなユーザー調査をしようとすると
1回で正解を出すのは、とてもたいへん。
しっかりユーザー調査をして、ユーザー⼼理の地図を描く。
圧倒的な成果も狙えるけれど、
エネルギーがいるので、誰にでもおすすめはできない。

40. 40
⼤がかりなユーザー調査をしようとすると
最初に正解を出すための調査をしても、
たとえば1画⾯1画⾯のこまかいつくりは、
まだ改善の余地があることが多い。

41. 41
「アジャイルUX」
こまかい試⾏錯誤をくるくる回して、積み重ねることで、
ゴールにむかうほうが、やりやすい。
UXデザインのプロセスを、アジャイル開発のように、
柔軟に回せないか？ （アジャイルUX）

42. 42
事例 デイリープロトタイピング
デイリー（つまり毎⽇）で、
プロトタイピングとユーザビリティテストを回す。

43. 43
事例 デイリープロトタイピング
1⽇で、プロトタイプからユーザビリティテストまで。
開発の内製化で、すぐとなりにユーザーが座っているから、
気軽にユーザビリティテストができた。
プロトタイプ
実装
ユーザビリティ
テスト
プロトタイプ
修正
チーム
レビュー
朝 昼 ⼣

44. 44
事例 デイリープロトタイピング
全機能のプロトタイピングがひととおり終わるまで、
（経験的には、だいたい40⽇くらい）続ける。
プロトタイプはできるだけ具体的なものを。
ユーザビリティテストの粒度が細かいため。
（⽻⼭はHTML、CSS、JavaScriptでつくってしまう）

45. 45
本格的な「アジャイルUX」
世の中の「アジャイルUX」というと、
アジャイル開発のスピード感にあわせるため、
これもなかなかハード。
もっとカジュアルに回せないか？

46. 46
軽量な「アジャイルUX」の試み
UXデザインを
速く！ 軽く！ そして根拠をもって、回したい！
どんな⽅法があるだろうか？

47. 47
マウス軌跡の録画ツール

48. 48
マウス軌跡の録画ツール
マウスの軌跡や、クリックを録画してくれる。
Clicktale や USERDIVE が有名。
マウスカーソルの動きと、ユーザーの視線は
相関があるという研究結果がある。

49. 49
事例 マウス軌跡の録画ツール
⽻⼭が「UX顧問」をしている
サイバーウェーブ株式会社では、
SmartLook というツールを利⽤しています。
https://www.smartlook.com/

50. 50
事例 マウス軌跡の録画ツール
百聞は⼀⾒にしかず。⾒てみましょう。（5分）
動画提供: サイバーウェーブ株式会社

51. 51
マウス軌跡の録画ツールの分析のしかた
かなりいろんなことがわかる。
ただ、「マウス軌跡しか情報がない」というリスクは
強く意識する必要がある。
ぼんやりと⾒ていると、確証バイアスにやられます。

52. 52
マウス軌跡の録画ツールの分析のしかた
「こまかく⾒る」ことがポイント。
ユーザーの⾏動をひたすらフラットに書き出していく。
ユーザー⼼理でおさえるポイントは2つ。
• いま何をしようとしているか？
• 最終的に何をしようとしているか？

53. 53
ユーザー⾏動の書き起こしの例
⾏動を「すべて」
こまかく書き起こす

54. 54
ユーザー⾏動の書き起こしの例
「採⽤情報」とくに「インターン採⽤」を
じっくり⾒ている。

55. 55
ユーザー⾏動の書き起こしの例
会社案内をじっくり読んでいる。

56. 56
ユーザー⾏動の書き起こしの例
「実績」をめちゃくちゃじっくり
読んでいる。

57. 57
ユーザー⾏動の書き起こしの例
「サービス」はざっと⾒ただけ。

58. 58
ユーザーはなぜこのような⾏動をしたのか？
インターンを考えていて、どんな会社か調べている。
各ページを「じっくり読む」⼈なのに、
事業紹介にあたる「サービス」ページはざっと⾒ただけ。
なぜか？
また、「実績」ページはとてもじっくり読んでいた。
なぜか？

59. 59
ユーザーはなぜこのような⾏動をしたのか？
「サービス」ページは、システム⽤語が並んでいて、
インターンを検討する学⽣には、
実感が持てなかったのではないか。
「実績」ページをじっくり読んでいたのは、
読み物形式で、仕事が具体的にイメージできたからでは。

60. 60
どのような解決策が考えられるか
インターン採⽤のために、ユーザーのニーズは、
「具体的に仕事をイメージしたい」
具体的に仕事を
イメージしたい
「サービス」ページを
具体的にする
「実績」ページへの
動線を強める

61. 61
動画提供: サイバーウェーブ株式会社
サイバーウェーブ株式会社は
技術に特化した開発会社です。
エンジニアがユーザー⽬線をもって開発に臨めるよう、
⽻⼭が「UX顧問」として、
UXデザインの教育や⽀援をしています。
https://cyberwave.jp/

62. 62
リモートユーザビリティテスト

63. 63
マウス軌跡の録画ツールの⽋点
マウス軌跡の録画ツールの最⼤の⽋点。
発話がないこと。

64. 64
リモートユーザビリティテスト
ユーザーに⾃宅や職場で、
タスクにそってプロダクトを使ってもらい、
そのようすを録画して送ってもらう。
軽量に、ユーザビリティテストができる！

65. 65
事例 リモートユーザビリティテスト
リモートで、対⾯と同じような調査ができるの？
百聞は⼀⾒にしかず。⾒てみましょう。（7分）
動画提供: 株式会社ポップインサイト
13:40-20:30 抜粋

66. 66
発⾒点の書き起こしの例
オークションアプリのリモートユーザビリティテスト。

67. 67
発⾒点の書き起こしの例
オークションアプリのリモートユーザビリティテスト。
第⼀印象で、アニメのものだとは伝わった。
ただ、フィギュアが強調されすぎている。

68. 68
発⾒点の書き起こしの例
オークションアプリのリモートユーザビリティテスト。
ユーザーの脳内には「ヤフオク」があり、
それと⽐較することで、理解の⼿がかりを得ている！

69. 69
発⾒点の書き起こしの例
オークションアプリのリモートユーザビリティテスト。
レビューが⾼得点ばかりで
かえって不信感につながっている

70. 70
発⾒点の書き起こしの例
オークションアプリのリモートユーザビリティテスト。
アプリのアイコンに「アニメ感」をもっと求めている

71. 71
発⾒点の書き起こしの例
ユーザーの⾏動の背景となる情報を、豊かに得られる。
このような深い情報は、
これまで対⾯調査でないと得づらかった。

72. 72
動画提供: 株式会社ポップインサイト
本セミナーの主催である
株式会社ポップインサイトが、
リモートユーザビリティテストの国内のリード企業です。
ぜひご相談してみてはいかがでしょうか。
https://popinsight.jp/

73. 73
動画提供: 株式会社ポップインサイト
https://popinsight.jp/

74. 74
まとめ

75. 75
まとめ
1. ユーザー⼼理は「考える」より「調査する」
2. 「マウス軌跡の録画ツール」で、
ライトにユーザビテリティテストができる。
3. 「リモートユーザビリティテスト」で、
豊かな情報と⼿軽さを両⽴できる。

76. 76
質疑応答

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

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