UXデザインの専門家でない人向けに、何をどうするとUXデザインになるのか、なんのためにやるのかを、ちょー乱暴に解説したスライドです。まだこれ自体が模索中であり、本当におかんが見たら意味がわからないこと請け合い。今後のバージョンアップが期待されます。なお、スライド中の解説について、深く知りたい場合はそれぞれ別個にぐぐるなり何なりして頑張ってください。 (本バージョンはversion 0.4です。CSS Nite in SENDAI, Vol.8で発表いたしました)

1. UX Design for mothers
おかんでもわかるUXデザイン
～ユーザーエクスペリエンスデザインって何？～
Yu Morita
Director, User Experience
Turucame ltd.
CSS Nite in SENDAI, Vol.8
2014/11/22

2. 自己紹介
• 株式会社ツルカメ 代表取締役社長
• 株式会社ネコメシ 代表取締役CEO
• 株式会社KDDIウェブコミュニケーションズ
顧問
• IA/UXデザインの自称専門家、森田雄です。
• Web担当者Forumにて「UX侍」連載ちう
2014/11/22 CSS Nite in SENDAI, Vol.8 2

3. 本日の主旨
• UXという言葉が、Webサイトやアプリ制作などの現
場でよく使われるようになりました。
• そのほか、経営や事業の戦略であるとか、組織論的な
ものであるとか、さまざまな場面でUXという言葉を
散見します。
• でもUXがどうの言われても、ちょっとピンと来ない
という人もいるのでは？
• 本講ではIA/UXデザインの非専門家の方々を対象に、
「UXデザインとは何か」をご説明いたします。
2014/11/22 CSS Nite in SENDAI, Vol.8 3

4. 最近、こんな人見かけませんか？
サイトか何かにダメ出しをしているようです
2014/11/22 CSS Nite in SENDAI, Vol.8
どうもねえ、
UXがねえ、
足りないんだよ
4

5. あと、こんな人とか
スマホアプリの使用感を述べています
2014/11/22 CSS Nite in SENDAI, Vol.8
何このUX！
やべー、めちゃ
ヌルヌル！
5

6. ようするに
• UX言いたいだけだろ案件です。
• UXという言葉を知る以前のほうが、よく
伝わるコミュニケーションがとれていた
かもしれません。
2014/11/22 CSS Nite in SENDAI, Vol.8 6

7. 唐突ですがクイズです
2014/11/22 CSS Nite in SENDAI, Vol.8
ニューヨークへ行きたいかー
＼ お～～～～！／
7

8. UXとは何でしょう？
・・・・・・
ちなみにUser Experienceの略です
2014/11/22 CSS Nite in SENDAI, Vol.8 8

9. わかりました！
ユーザの
体験！
2014/11/22 CSS Nite in SENDAI, Vol.8 9

10. やれやれ、これだから子供は
エクスペリエンスは
経験だろう！
2014/11/22 CSS Nite in SENDAI, Vol.8 10

11. 直訳しててどうすんのよ！
使い勝手とか、
使い心地の
ことです！
2014/11/22 CSS Nite in SENDAI, Vol.8 11

12. うーん、なんか聞いた話だけど
おもてなし…？
2014/11/22 CSS Nite in SENDAI, Vol.8 12

13. さて正解は…
• 製品やサービスの利用を通じて得られる
ユーザの体験の総称で、使いやすさ・使
い勝手といったユーザビリティ的な要素
を備え、使い心地・感動・印象・生活の
変化など経験としての累積を含む。
• おもてなしだけ、違ったかな？
的な。
2014/11/22 CSS Nite in SENDAI, Vol.8 13

14. ものすごく簡単にいうと
• ユーザの「主観」といっていいでしょう。
• いい体験だった、いい経験をした、これ
は本人にしかわかりませんね。
• すなわちUXとは、本人の主観と、それに
基づいた感想や結果のことです。
2014/11/22 CSS Nite in SENDAI, Vol.8 14

15. UXDとは何でしょう？
・・・・・・
ちなみにUX Designの略です
2014/11/22 CSS Nite in SENDAI, Vol.8 15

16. わかりました！
UXの
デザイン！
2014/11/22 CSS Nite in SENDAI, Vol.8 16

17. やれやれ、これだから子供は
デザインとは
設計だよ！
2014/11/22 CSS Nite in SENDAI, Vol.8 17

18. 直訳しててどうすんのよ！
顧客のニーズを
満たすこと
です！
2014/11/22 CSS Nite in SENDAI, Vol.8 18

19. うーん、なんか聞いた話だけど
おもてなし…？
2014/11/22 CSS Nite in SENDAI, Vol.8 19

20. さて正解は…
• UXを設計すること。特に「良い」UXを。
• ユーザが求めていることに先回りして、
結果として喜んでもらえる体験や経験を
作り出すためのデザイン手法です。
• いい接待を受ければ嬉しいものですから、
おもてなしも手法が明文化されていれば
UXDだといえますね。
2014/11/22 CSS Nite in SENDAI, Vol.8 20

21. 少し補足
• ここでの「デザイン」とは、見た目や雰囲気
などのことではありません。
• 商業や工業といった産業の成果物（製品や
サービスそのもの）をデザインするというよ
うな、大きな意味でのデザインです。
• UXDとは、「良い」UXを量産的に作り出す
仕組み、それ自体をつくることです。
2014/11/22 CSS Nite in SENDAI, Vol.8 21

22. UXDを成果物から読み解く
ま
っ
た
く
あ
ん
た
っ
て
子
は
朝
ま
で
フ
ァ
ミ
コ
ン
ば
っ
か
り…
Ｕ
Ｘ
Ｄ
し
て
る
ん
だ
よ
……
母
ち
ゃ
ん
……
2014/11/22 CSS Nite in SENDAI, Vol.8
ここからが真の本題です
22

23. ちょー乱暴な解説
• ペルソナ
• カスタマージャーニーマップ（CJM）
• ユーザシナリオ
• この３つをやれば、UXDです。（キリッ
2014/11/22 CSS Nite in SENDAI, Vol.8 23

24. まず、ペルソナ
• ペルソナ（persona）とは心理学の用語で
「人間の外的側面」、哲学でいうところの
「理性的本性をもつ個別的実体」のことです。
• が、そんなことはどうでもよくて、UXDで
は何のことを指すかというと
• 仮想的なユーザ。実在しそうだけど非実在。
いてもおかしくないので、もしかしたらいる。
2014/11/22 CSS Nite in SENDAI, Vol.8 24

25. ペルソナをつくる目的
• それは合意のためです。
• チームメンバーで共通の指標をつくり、
同じ目的のために思考・行動できるよう
に、ペルソナをつくります。
2014/11/22 CSS Nite in SENDAI, Vol.8 25

26. ユーザは20代前半の女性です
ペルソナが無いチームの場合
2014/11/22 CSS Nite in SENDAI, Vol.8 26

27. ユーザは20代前半の女性です
ペルソナが有るチームの場合
2014/11/22 CSS Nite in SENDAI, Vol.8 27

28. みんなのイメージが同じになりました！
• これで、メンバー各自が異なるユーザ像を想
定しちゃうってことがなくなります。
• 「“誰”のためにデザインするのか」を共有す
ることができますね。
• もちろん、今の例では一般的なターゲット
ユーザの範疇を出ませんので、もう少しペル
ソナとは何なのかを掘り下げましょう。
2014/11/22 CSS Nite in SENDAI, Vol.8 28

29. 簡易なペルソナの作り方
1. まず基本となるデモグラフィックを用意
します。
– 顧客データを分析済みなら、それを使う。
– なければ想定しているターゲットユーザーを
ベースにする。（リリース後に実データをと
り、ペルソナをアップデートする）
2. ワークショップ形式でインサイトマップ
を作ります。
3. それを肴に作文して、ペルソナの完成。
2014/11/22 CSS Nite in SENDAI, Vol.8 29

30. ペルソナは実在ユーザの代表格
• 完全に想像だけで作ったペルソナは使い物にな
りませんし、使ってはいけません。
• ペルソナを作ってみよう的なセミナーなどで、
実データに基づくデモグラフィックを使わずに
作ってしまう事例を散見しますが、意味があり
ません。
• なお、本当に実在するユーザ自体をペルソナ化
してもいけません。
2014/11/22 CSS Nite in SENDAI, Vol.8 30

31. 実データのデモグラのままだと
実務的に使いにくい
2014/11/22 CSS Nite in SENDAI, Vol.8 31
このデザインは我が社のECサービスの全顧客のうち
38%を占める首都圏在住で年収600万円台かつ結婚5年
以内の30代後半の賃貸住宅住まいの世帯が使用した時
にスムーズに使えるのだろうか。本当に効果的な購買に
つながると思うかい？
このデザインだと我
が社のECサービスの
全顧客のうちの38%
を占める首都圏在住
で年収600万円台か
つ結婚5年以内の30
代後半の賃貸住宅住
まいの世帯だと、確
かにちょっと使いに
くいかもしれません
ねえ…。

32. だからペルソナを作る
2014/11/22 CSS Nite in SENDAI, Vol.8 32
このデザインは「山田くん」にとってい
いものだろうか？ 「山田くん」は効果
的な購買をするだろうか？
確かに、「山田さん」にはとっつきに
くいデザインかもしれませんねえ。

33. デモグラフィック
2014/11/22 CSS Nite in SENDAI, Vol.8 33

34. インサイトマップ
2014/11/22 CSS Nite in SENDAI, Vol.8 34
SeeListen
Action
Think
Pain Gain

35. プラグマティックペルソナ
2014/11/22 CSS Nite in SENDAI, Vol.8 35
ユーザー種別 デモグラフィック
抱えている問題点コンテクスト

36. 次に、CJM
• カスタマージャーニーマップ（CJM）とは、
カスタマー（Customer）ジャーニー
（Journey）マップ（Map）のことです。
• カスタマーは「顧客」、ジャーニーは「旅」、
マップは「地図…というかマッピング」。
• 具体的な顧客としてペルソナを題材に、提供
する製品やサービスを利用する「旅」に出て
もらい、その経緯をマッピングしたものです。
2014/11/22 CSS Nite in SENDAI, Vol.8 36

37. CJMをつくる目的
• それは合意のためです。
• チームメンバーで共通の指標をつくり、同じ目
的のために思考・行動できるようにつくったペ
ルソナが、具体的にどう利用しているのか、共
通の指標をつくり、同じ理解で思考・行動でき
るようにCJMをつくります。
2014/11/22 CSS Nite in SENDAI, Vol.8 37

38. ユーザが製品を必要とする時
CJMが無いチームの場合
2014/11/22 CSS Nite in SENDAI, Vol.8 38

39. ユーザが製品を必要とする時
CJMが有るチームの場合
2014/11/22 CSS Nite in SENDAI, Vol.8 39

40. みんなの理解が同じになりました！
• これで、ユーザが製品を必要としているタイミ
ングを、メンバー各自が異なる想定しちゃうっ
てことがなくなります。
• ユーザが製品を、どこで知り、どこで理解を深
め、どこで利用し、どのような結果になるかと
いった「旅」の経緯を書き出して、実際にどの
ように製品が使われているのかの理解を共有す
るわけです。
2014/11/22 CSS Nite in SENDAI, Vol.8 40

41. あれ、どこで知り…？
• つまり、製品を使うどころか、出会う前
のところから「旅」が始まっていますね。
• 実際に「UX白書」では、UXを期間で区
切って整理しています。
2014/11/22 CSS Nite in SENDAI, Vol.8 41

42. 異なる期間で生じるUXの内在プロセス
利用前
予期的UX
体験を想像する
利用中
一時的UX
体験する
利用後
エピソード的UX
ある体験を
内省する
利用期間全体
累積的UX
多種多様な利用
期間を回想する
いつ
なにを
どのように
Anticipated UX Momentary UX Episodic UX Cumulative UX
よく“UI/UX”といわれるのは、一時的UXの中の、画面と向き合っている時間だけ。
UXDは、利用前・利用中・利用後、そして利用期間全体を対象としたデザインです。
2014/11/22 CSS Nite in SENDAI, Vol.8
（UX白書 http://site.hcdvalue.org/docs より）
42

43. UXの連続性
• UXの全体期間のほとんどは、製品やサービスを
利用して「いない」期間です。
• CJMをつくる時は、デザインチームだけでなく、
他の部署からも組織全体から横断的にメンバーを
集め、多様な視点で検討する必要があります。
• 利用前・利用中・利用後、また利用し、利用を終
え、そしてまた利用し…この繰り返しを連続的な
ものと捉え、利用期間全体として「良い」UXを
もたらす仕組みをつくることがUXDです。
2014/11/22 CSS Nite in SENDAI, Vol.8 43

44. 簡易なCJMの作り方
1. まず、関係者一同、ペルソナのことをよ
く理解しておきます。
– そのうえで、プラグマティックペルソナやイ
ンサイトマップを、常に見返せる状態にして
おく。
2. ワークショップ形式でカスタマーの
ジャーニーをマッピングしていきます。
– 分岐してもいいですが、ペルソナとして腑に
落ちる範囲での分岐まで。
2014/11/22 CSS Nite in SENDAI, Vol.8 44

45. カスタマージャーニーマップ
2014/11/22 CSS Nite in SENDAI, Vol.8 45

46. そして、ユーザシナリオ
• ユーザシナリオとは、ペルソナの理想的
な「旅」です。
• 理想の旅は、ペルソナ中心ではなく、ど
ちらかといえばサービス提供者中心のス
トーリーです。
2014/11/22 CSS Nite in SENDAI, Vol.8 46

47. ユーザシナリオをつくる目的
• それは合意のためです。
• チームメンバーで共通の指標をつくり、同じ目的
のために思考・行動できるようにつくったペルソ
ナが、具体的にどう利用しているのか、共通の指
標をつくり、同じ理解で思考・行動できるように
CJMをつくりましたが、これは現実の「旅」です。
理想的な「旅」とのギャップが改善すべき点なの
です。チームメンバーで同じゴールを見据えて思
考・行動できるようにユーザシナリオをつくりま
す。
2014/11/22 CSS Nite in SENDAI, Vol.8 47

48. 現実の「旅」の問題点
顧客はターゲットを認識できていない
2014/11/22 CSS Nite in SENDAI, Vol.8 48

49. 理想の「旅」では、こう
顧客は確実にターゲットを捕捉している
2014/11/22 CSS Nite in SENDAI, Vol.8 49

50. みんなの目標が定まりました！
• CJMを検討した結果、ペルソナはターゲットをうまく見
つけられないケースがあるようで、実際にカスタマーサ
ポート部門へ問い合わせると、顧客からのクレームが多
数確認されました。
• ユーザシナリオでは、ペルソナは確実にターゲットを捉
えています。ここにギャップがあることがわかったわけ
です。
• 背中に目印をつけることで、顧客の飛び蹴り成功率が格
段に向上するだろうと結論づけられました。チームメン
バーは、その実現のために、具体的なデザイン作業へと
突入していくのです……！
2014/11/22 CSS Nite in SENDAI, Vol.8 50

51. 簡易なシナリオの作り方
• 前のステップで作成したCJMと同様のフォーマットで、
理想的な旅をマッピングしてみましょう。
• もしくは、作成したCJMにさらにポストイットを重ねて
貼っていくのでもOK。
2014/11/22 CSS Nite in SENDAI, Vol.8 51

52. CJMに書き足したバージョン
2014/11/22 CSS Nite in SENDAI, Vol.8 52

53. CJMとシナリオのギャップ
• CJMとユーザーシナリオの間には、いろいろと
ギャップがあることがわかってきますね。
• このギャップを解決するためには、どうすべき
かを考える必要があります。
– UIレベルで解決できるのか？
– コンテクストを作らないとだめなのでは？
– そもそもプロモーションができていない？
– サポート体制に問題があるのでは？
2014/11/22 CSS Nite in SENDAI, Vol.8 53

54. ようするにUXDとは
• チームメンバー、ひいては組織全体が、提供する製品や
サービスを利用するユーザの「認識」「理解」を同一の
ものとし、「何のために、何をどうするのか？」を明文
化するための手法です。
• この後の流れは、まあふつうにプロトタイピングしたり、
ワイヤーフレームつくったり、制作作業をしたりしてい
きます。
• ペルソナ、CJM、シナリオをつくってから、ふつうの制
作をしてみましょう。それがUXDの実践の第一歩です。
2014/11/22 CSS Nite in SENDAI, Vol.8 54

55. 以上ここまで、すべて仮説です
• しかしその仮説を、成り立ちからすべて、全関係者で共
有・合意していること自体が重要なのです。
• 製品やサービスをリリース後、実データをとって分析し、
最初の仮説と比較検証しましょう。
• 実際のユーザのニーズを知り、仮説をアップデートして
改善していく。この繰り返しの中で、常に中心となるの
がペルソナです。ペルソナを成長させながら継続的にデ
ザインしていくことが、UXDです。
2014/11/22 CSS Nite in SENDAI, Vol.8 55

56. UXDというデザイン思考
• 観察→アイディア創出→プロトタイピング→ストーリー
テリングというデザイン思考のプロセスがありますが、
これだけだとユーザー視点を損ないがちです。
• 特に大きな組織であればあるほど。複数の部署にまた
がった関係者がいればいるほど。
• デザイン思考に実データを掛け合わせて、プロセスの透
明化と共有、KPIの設定、PDCAの継続をしていくこと
が、「UXD」というデザイン思考のひとつの形である
ともいえるでしょう。
2014/11/22 CSS Nite in SENDAI, Vol.8 56

57. てか、おかん突き放しすぎ…
こ
の
人
……
さ
っ
き
か
ら
何
の
話
を
し
て
る
の
？
今
夜
の
献
立
ど
う
し
よ
う
か
し
ら
2014/11/22 CSS Nite in SENDAI, Vol.8 57

58. UXDを学ぶのに良い文献（ごく一部）
• User Experience White Paper
HCDの専門家たちによる和訳：UX白書
http://site.hcdvalue.org/docs
• 誰のためのデザイン？
新曜社認知科学選書／一読してほしいデザイン思考の定番的書物。
• 理解の秘密─マジカル・インストラクション
NTT出版／最高です。僕の座右の書でもあります。
• コトラー＆ケラーのマーケティング・マネジメント
第12版、丸善出版／鈍器になるほどの重厚感で1万円弱。ぜひ家宝に。
2014/11/22 CSS Nite in SENDAI, Vol.8 58

59. ご清聴ありがとうございました
今
夜
は
カ
レ
ー
よ
~
やったあ～
て
か
家
族
だ
っ
た
の
か
…
このスライドはコミPo!とパワポで作成しました
2014/11/22 CSS Nite in SENDAI, Vol.8 59

60. Presented by
Yu Morita
Director, User Experience
Turucame ltd.
http://necomesi.jp/blog/securecat/
https://twitter.com/securecat
https://www.facebook.com/securecat
CSS Nite in SENDAI, Vol.8
http://cssnite-sendai.info/
Made with Comipo!
http://www.comipo.com/
2014/11/22 CSS Nite in SENDAI, Vol.8 60