2014.09.27 ⽇日本ディレクション協会セミナー・ワークショップ in Osaka
ディレクターのためのUXの基本講座
〜～カスタマージャーニーマップを体験しよう〜～
シナジーマーケティング株式会社 R&D 徳⾒見見理理絵

申し遅れましたが、⾃自⼰己紹介
徳⾒見見理理絵
シナジーマーケティング株式会社 R&D
HCD-‐‑‒net認定 ⼈人間中⼼心設計専⾨門家
● 10年年以上Web畑
- ⾃自社製品UI設計や⼤大⼿手メーカーECサイト、⾏行行政サイト、コミュニティ
サイトなど⼤大⼩小合わせて50以上のプロジェクトを経験
● Webの役割の変化を体験
1. 作ればいい時代
2. 使いやすさが求められる時代
3. ビジネス全体の最適化が求められる時代へ
● HCDやデザイン思考を中⼼心としたデザイン応⽤用研究
11

講義の内容（〜～14:20）
• UXって何がいいの？
• UXとは？
• UXのためのデザイン法
12

UXって何がいいの？
13

ディレクターあるある（１）
どんどん作業が増える（追加・変更更依頼が多い）
14

ディレクターあるある（２）
個⼈人の好みや主観による不不⽑毛な議論論
15

ディレクターあるある（３）
リリース直前のどんでん返し
（「思ってたのと違う」）
16

17
不不幸がうまれる要因（1）→UXデザインのいいこと
イメージしている
ユーザーが⼈人それぞれ
ユーザー像が共有される

18
不不幸がうまれる要因（2）→UXデザインのいいこと
ゴールが明確じゃない
ゴールが明確になる
（途中でぶれない）

19
不不幸がうまれる要因（3）→UXデザインのいいこと
イメージしているアウトプッ
トも⼈人それぞれ
作りながら考える
（可視化されているので共
有できる）
?

さらに！
• ユーザーが喜ぶ、そしてクライアントも喜ぶ
• PJメンバーのモチベーションがアップ
（誰のどんな問題を解決するのかというゴールがはっきりし
ているから）
• イノベーション！（できるかもしれない）
20

事例例
21

事例例
22

23
事例例

24
事例例
source:ノハナ⽴立立ち上げをUXerの視点で振り返る by Saori Baba

25
事例例
source:ノハナ⽴立立ち上げをUXerの視点で振り返る by Saori Baba

UXとは？
26

モノではなくコト（ユーザーの経験）
27
⾚赤ちゃんが
ひとりでも
飽きずに
遊べる
ペン
ユーザー
状況
感情
⾏行行動
モノ
UX 製品やサービスの「購⼊入」「利利⽤用」「所有」などの⼀一連の体験を通じて感じる、
「便便利利」「⾯面⽩白かった」「嬉しかった」などの感情を含めた概念念。

WebにおけるUXの要素
製品・サービスの状況と
ビジネスの⽬目標に応じて
⽬目指すレベルを設定
価値が⾼高い
28
満⾜足
効果・効率率率的
使いやすい
使いにくい
（ストレス）
⽬目的を達成できない
（クレーム・離離脱）
⾯面⽩白い
ワクワクする
⼼心地いい
役に⽴立立つ
早い
⾒見見つけやすい
探しやすい
遅い信頼できる
分かりにくい
情報がない
参考
•The User Experience Honeycomb
http://semanticstudios.com/publications/semantics/000029.php
•The UX Treasure Map
http://semanticstudios.com/publications/semantics/000228.php
•The Elements of User Experience
http://www.jjg.net/elements/pdf/elements.pdf

29
4つのUX
利利⽤用前
予期的UX
!
体験を想像する
利利⽤用中
⼀一時的UX
!
体験する
利利⽤用後
エピソード的
UX
! ある体験を内省省する
利利⽤用時間全体
累累積的UX
! 多種多様な利利⽤用
時間を回想する
source:UX⽩白書

30
利利⽤用時・⾮非利利⽤用時の経過によるUX
過去の経験
累累積的UX
source:UX⽩白書をアレンジしたもの
予期的
UX
⼀一時的
UX
エピソード的
UX
予期的
UX
⼀一時的
UX
エピソード的
UX
予期的
UX
⼀一時的
UX
エピソード的
UX
予期的
UX
⼀一時的
UX
エピソード的
UX
⾮非利利⽤用期間
⾮非利利⽤用期間
▲
現在

31
UX⽩白書
http://site.hcdvalue.org/

UXのためのデザイン法
32

33
UXのためのデザイン
⼈人間中⼼心設計（HCD） ユーザー中⼼心設計（UCD） デザイン思考
1980年年代〜～ 1980年年代〜～ 1980年年代〜～
ヨーロッパ中⼼心アメリカ中⼼心アメリカ中⼼心
⼈人間⼯工学認知⼼心理理学経済学？
Donald A. Norman IDEO David Kelly／Tim
Brown
• ISO 9241-‐‑‒210 • User Centered System Design：
Donald A. Norman, Stephen W.
Draper 1986
• The Design of Everyday
Things（誰のためのデザイン？）：
Donald A. Norman 1988
• The Sciences of the Artificial（シ
ステムの科学）：Herbert A. Simon
1967
• Design Thinking（デザインの思考過
程）：Peter G. Rowe 1987
• The Art of Innovation（発想する会
社）：David Kelly 2002
「⼈人」が中⼼心

34
これまでは？
製品志向（明治維新後／19世紀後半）
⾼高品質で丈夫な製品を作りさえすればそれを売ることは難しいことではない「良良いモノを作れ
ば、客が押し寄せてくる」時代
販売志向（1950年年〜～1960年年）
市場の拡⼤大が飽和すると、モノを売ることはだんだんと難しくなっていったため、販売に重点
が置かれる時代
市場志向（1970年年〜～）
「製品を作って、それを売る」よりも、「顧客の望むものを知り、それから作る」べき。すな
わち「顧客が全ての戦略略的意志決定をドライブする」。
マーケティング⾰革命 by Wikipedia
デザイナーにとって当たり前な考え⽅方も、まだ浸透していない企業・⼈人も多い

35
HCD／UCD
ISO 9241-‐‑‒210 ⼈人間中⼼心設計活動の相互依存性の図

36
デザイン思考
Stanford d.school
共感
定義
発想
プロトタイプ
テスト
HEAR
理理解
CREATE
創造
DELIVER
実施
Source by ⼀一般社団法⼈人デザイン思考研究所
IDEO（Human Centered Design Toolkit）

唯⼀一の型はないが、
まずは完成された型をひとつちゃんと学ぶことがダイジ
37

38
HCD／UCD
調査
評価定義GOAL
ユーザの要求を満たす
創造
START
⼈人間中⼼心設計（HCD）でいこう！

39
よく使われる⼿手法
調査
評価定義GOAL
ユーザの要求を満たす
創造
START
⼈人間中⼼心設計（HCD）でいこう！
• インタビュー
• オブザベーション（観察）
• フィールドワーク
• ご近所リサーチ など
• ユーザテスト
• パフォーマンス測定 など
• ペルソナ／シナリオ法
• ジャーニーマップ
• 評価グリッド
• ワークモデル分析 など• ブレーンストーミング
• プロトタイプ
• ストーリーボード など

カスタマージャーニーマップとは？
40
• ⼈人の⾏行行動と感情および環境を時間軸で⽰示したマップ
⼈人間軸環境軸時間軸

例例：スターバックス
Source:http://theoperationsblog.com/wp-content/uploads/2011/09/experiencemap1.pdf 41

例例：スターバックス
人の感情
環境
人の行動
時間
Source:http://theoperationsblog.com/wp-content/uploads/2011/09/experiencemap1.pdf 42

43
例例：LEGO
Source:http://experiencematters.wordpress.com/2009/03/03/legos-building-block-for-good-experiences/

なぜ、注⽬目されているのか
• スマホやウェアラブル端末の流流通
⇒利利⽤用者の使⽤用状態が特定できなくなった
⇒ウェブが解決できる範囲が広がった
Google Glass
NIKE+ FUELBAND SE
Sony SmartWatch 2 44

なぜ、注⽬目されているのか
• 可視化して顧客視点を共有できる
45
製品開発Web制作決裁者広報マーケティング

やってみよう（ワークショップ）
46

47
テーマ
お部屋（賃貸）探し

テーマ
48
ある⼤大⼿手不不動産の物件情報サイトの
リニューアルコンペに参加すること
が決まりました。
クライアントは、「これまでにない
新しい物件情報サイトをつくりた
い！」と熱意ムンムンです。
そこで今回は、まず予備調査からカ
スタマージャーニーマップを作成し、
これまでにない新しい物件情報サイ
トのアイデアを考えてください。

49
テーマ

50
ワークショップの流流れ
ワークショップ 14:30〜～16:50 （80分）
アイスブレイク• ⾃自⼰己紹介10分
インタビュー・CMJ
• インタビュー（10分）
• ジャーニーマップ（15分）
発表・振り返り 17:00〜17:30（30分）
• 発表（3分×6チーム）
• 振り返り（7分）
• まとめ（5分）
50分
発想
• テーマ決定
• 発想
• 投票
15分
｝2回
発表準備5分

⾃自⼰己紹介
51
• 10分間（1⼈人1分程度度）
• お名前／所属／今の住まいを選んだ理理由

ターゲット
1⼈人暮らし
• 賃貸
• 最近引っ越しをした⼈人
52

インタビュー
• ターゲット理理解のためにユーザー調査（インタビュー）
53

代表的なユーザー調査⼿手法
54
調査⼿手段調査⼿手法特徴
アンケート
（質問紙法）
• 郵送調査（ファックス・郵送）
• インターネット調査（Web/Email）
• 電話による調査（テレマーケティング）
• 訪問・該当調査
市場全体の傾向が
掴める
フォーラム• インターネット掲⽰示板
• チャット
• ユーザグループ（メーリングリスト）
意⾒見見の収集およ
び、全体的傾向を
知ることができる
インタビュー
（⾯面接法）
• グループインタビュー（フォーカスグループ）
• エスノグラフィインタビュー
• フィールドワーク
• ⽂文脈的インタビュー（コンテクスチュアルインクワリー）
• デプスインタビュー
潜在的ニーズが発
⾒見見できる
観察• ファウンドビヘイビア
• ⾃自然観察（ビデオ・写真）
• モニタリング（ロギングツール・アクセスログ）
• 参与観察
• ラピッドエスノグラフィー
詳細な利利⽤用状況や
潜在ニーズが理理解
できる
情報デザインの教室（2014, 情報デザインフォーラム, ⼭山崎, 浅野, 上平）P043より抜粋

代表的なインタビュー⼿手法
55
インタビュー⼿手法調査⽬目的場所要する時間
構造化インタビュー統計的集計会場短
半構造化インタビュー統計的集計または
質的調査
会場または
現地
中
⾮非構造化インタビューディプスインタビュー質的調査会場⻑⾧長
エスノグラフィックインタビ
ュー
質的調査現地⻑⾧長
グループインタビュー統計的集計または
質的調査
会場中
情報デザインの教室（2014, 情報デザインフォーラム, ⼭山崎, 浅野, 上平）P043より抜粋

代表的なインタビュー⼿手法
56
インタビュー⼿手法調査⽬目的場所要する時間
構造化インタビュー統計的集計会場短
半構造化インタビュー統計的集計または
質的調査
会場または
現地
中
⾮非構造化インタビューディプスインタビュー質的調査会場⻑⾧長
エスノグラフィックインタビ
ュー
質的調査現地⻑⾧長
グループインタビュー統計的集計または
質的調査
会場中
情報デザインの教室（2014, 情報デザインフォーラム, ⼭山崎, 浅野, 上平）P043より抜粋

インタビュー
主な役割
• モデレーター：1⼈人
• タイムキーパー：1⼈人
• メモ：他の⼈人全員
!
インタビューのコツ
• まず「何をしたか」⾏行行動を聞いてから「なぜ？」を聞く
• 基本的にはモデレーターが質問・進⾏行行する
• 他の⼈人は気になったポイントを質問
57
今⽇日は⾃自分の主観や推測とはちがった、
別の視点を発⾒見見できればOK

ターゲット
1⼈人暮らし
• 賃貸
• 最近引っ越しをした⼈人
58

59
準備：線とラベルを描く
ステップきっかけ情報収集検討決定
タッチポイント
企業とユーザーの接点
⾏行行動
思考・感情
課題・アイデア
!!
付箋2つ分!!
付箋1つ分

60
ジャーニーマップに記述
ステップきっかけ情報収集検討決定
タッチポイント
企業とユーザーの接点
⾏行行動
思考・感情
課題・気付き
なかなか
いい物件ないな～
予想外!にお金
かかる！
イラッ
!!
発言から
おしゃれな家に
すみたいな
ワクワク
!!
発言・主観（気付き）から
課題課題課題課題

アイデアを膨らませる・絞る
• テーマを決める
• 感情が最低⇒解決のアイデア
• 感情が最⾼高潮⇒さらに⾼高めるアイデア
• アイデアを付箋に書く
• 質より量量
• 評価しない
• ⼈人のアイデアに乗ってもOK
• 投票
• ●⾃自分が欲しいアイデア
• ●売上に貢献できそうなアイデア
• ●実現可能⽣生の⾼高いアイデア
61

発表
1チーム2〜～3分
63

チーム内振り返り
• 今⽇日の気づき
• ⾃自分の仕事に置き換えると？
• 翌週からできそうなこと
64

まとめ
65

カスタマージャーニーマップの役割
• 精度度や網羅羅性がゴールではなく、⾏行行動と感情のつながりを⾒見見
える化する
• 最初はペルソナひとりにつき2〜～3時間のワークショプ形式が
おすすめ
• タッチポイントが沢⼭山ある／⾏行行動と思考・感情がつながって
いる！ということが共有されたら、⼤大きな前進
• 最初は粗くてもいい
仮説として運⽤用を始め、必要に応じては追加調査する
• 個⼈人でやってみても、ユーザーへの理理解が深まる
66

カスタマージャーニーマップの応⽤用
• ジャーニーワークシート by 徳⾒見見@シナジーマーケティング
67
(

(
+ %*
, #')
,-$
-!(

68

カスタマージャーニーマップの応⽤用
• ユーザーが商品を購⼊入するまでの体験 by 池⽥田さん＠ファーストブランド
69
Catch Connect Close
;=2=+

*.?
;=2=+916
87=,OOH)(
*/?
:54=3+
(0):54=3/
$'!.@?
/
(+- * .@
;=2=+
;=2=#/%'
.@?

⼈人間中⼼心設計（HCD）を学ぶ場
• HCD-‐‑‒net ⼈人間中⼼心設計推進機構
- ⼈人間中⼼心設計専⾨門家 認定制度度
• ヒューマンインターフェース学会
• 全国UXコミュニティー
- UX OSAKA, UX KYOTO, UX KOBE・・・
• Open CU
- ロフトワーク運営のオープンな学びの場
• その他
- 京都 D-‐‑‒School
- 産業技術⼤大学院⼤大学 ⼈人間中⼼心デザイン
- ⼀一般社団法⼈人デザイン思考研究所
71
オススメ
by 情報デザイン研究室

おすすめ書籍
• 実⽤用：教科書的
72
◆ 定番：思想や概念念を学ぶ

PR
73
Synergy Marketing Open LAB
- 11.15＠TOKYO
- 11.21@OSAKA
Synergy Marketing公式Blog
シナジーマーケティングがWebマーケティ
ングに関する解説やノウハウを発信中

74
お疲れさまでした！
Marketing technology for better life.
私たちは、最先端のマーケティングテクノロジーで、コミュニケーションをよりよくする会社です。