1. なぜなに？
ユーザエクスペリエンスマップ
概要編
中央線UX
Hashimoto Naoki
vistawalk@gmail.com

2. UXマップって
• Whatなに？
• Whyなんで作るん？
• Howどうやって作るん？
に答えを出したい
考えたいこと

3. ユーザがサービスを利用する上での一連の行動フロー・利用チャネル・
思考/感情などを図解したもの
（カスタマージャーニーマップ、UXジャーニーマップとか呼び方はまあいろいろあります）
Rail Europe Experience Map by AdaptivePath
UXマップって？

4. [ユーザ体験：UX]
ユーザが製品・サービスを利用する一連の
シーンにおける体験およびその主観的価値
[ユーザ体験デザイン:UXDesign]
ユーザ体験を達成できるようなサービスの計画
でも、体験って見えないし、
あれって指し示せないよね…
そもそものお話

5. A!
方針（提供したい体験）
がブレやすくなる
a!
α!
空中戦に陥りやすい
見えない、示せないとマズイこと
• 何を作ろうとするのか、はっきりさせる
• 作るものが見えていない/わかりづらい/複雑である時ほど有効

6. ペルソナ＆シナリオ ストーリーボード
ユーザの一日 UXマップ
可視化する手段はたくさんあります

7. ペルソナ＆シナリオに比べて
ストーリーボードに比べて
• 行動が詳細に描ける
• とっつきにくい
• 感情面の描写が書き手の描写ス
キルに依存する
• 個人作業に向いており、 団体で
は作りづらい
• とっつきやすい
• 感情が一見して把握しやすい
• 書き手のお絵かきスキルに依存する
• 個人作業に向いており、 団体では
作りづらい
※そもそも役割でいえば各チャネルのデザインなので、
コンセプトを描くUXマップとは異なるかも
他の手段の利点・欠点

8. UXマップ • 利用状況をより広い視点で俯瞰
して捉えることができる（→抜
け漏れを無くす）
• 行動フローがわかりやすい
• 共同作業に向いている
UXマップの利点

9. 俯瞰して捉えるって…？
例えば、イベント紹介サイト
使ったことのある方も多いと思います

10. 俯瞰して捉えるって…？
イベントの概要や参加表明は
もちろんここでできますが…
• イベント概要の把握
• 趣旨、発表者、参加者、定員
• 開催日時、参加費、場所…
• 参加表明

11. 全体を俯瞰する
Twitter
イベントを知る
◯日前
• 既存予定の確認
• 予定の登録
スケジュール
管理アプリ
地図
アプリ
開催場所まで
のナビ
当日
ノート
内容をメモる
翌日以降
ブログ・
ソーシャルメディア
• 参加した感想を書く
• 他の人の感想を読む
スライド共有
サイト
• 見て復習する
• 同僚などに共有
する
「イベントへの参加」全体を
俯瞰してみると、
ユーザが自サイト以外でも
多くの行動をとっていること
がわかります
• イベント概要の把握
• 参加表明
イベント
管理サイト
時間と場所の
再確認
イベント
管理サイト

12. 他の行動を意識する
Twitter
イベントを知る
◯日前
• 既存予定の確認
• 予定の登録
スケジュール
管理アプリ
イベント
管理サイト
地図
アプリ
開催場所まで
のナビ
当日
ノート
内容をメモる
翌日以降
ブログ・
ソーシャルメディア
• 参加した感想を書く
• 他の人の感想を読む
スライド共有
サイト
• 見て復習する
• 同僚などに共有
する
他の行動を意識して、
それを自サービス内で
どう展開するかという
視点が必要になります
• サポートする
• 連携する
• 他に任せる

13. 時々それぞれの役割を俯瞰する
◯日前
当日
翌日以降
また、サイト自体も時間の
経過によって、ユーザに
とっての意味が変わってく
るでしょう。
「どんなイベントかな？」
「参加したいな」
「まだ受付してるっけ？」
「キャンセルはどこから…？」イベント
管理サイト
イベント
管理サイト
イベント
管理サイト
「いつからだっけ？」
「どこでやるんだっけ？」
「遅れそう…」
「次の発表者は誰かな？」
「これやってるのかな？」
「これの感想とかあるかな？」
「こういうのやってたんだ」
「Ustreamとかあるかな？」

14. • 浅く広く：計画全体を俯瞰できるようにする
考えたことをどうまとめ/見せるか
• 深く狭く：特徴的なシーンにフォーカスしサマ
リーを伝える
• 詳細まで利用状況を深く広く捉え
られる
• 内容を理解するにはある程度読み
込みが必要
• パッと見て内容が頭に入りやすい
• 利用シーン・チャネルが複数ある場
合、全体が見渡しにくい

15. どの場面で使うか
• コンセプト企画
• 開発・実装
h"ps://speakerdeck.com/kawagu3/10
h"p://bit.ly/taskanalysisgrid
ユーザストーリーマッピング タスク分析シート
UXマップ ストーリーボード

16. 現状の
体験
as-is
理想の
体験
to-be
体験の表現形は2種類あります

17. 現状の
UXマップ
理想の
UXマップ
現状の
１日
理想の
１日
現状
ストーリーボード
理想
ストーリーボード
現状
シナリオ
理想
シナリオ
可視化された体験も2種類あります

18. 気づく
気づきを
形にする
解決案を
作る
試す
利用状況の把握と明示 ユーザ要求の明示
ユーザ要求を満たす
解決案の作成 要求に対する設計の評価
現状体験の可視化
Visualize as-is
理想体験の可視化
Visualize to-be
HCDプロセス(ISO9241-210)に当てはめる
参考資料 モバイル夜間大学 UCDプロセス
http://www.slideshare.net/enjoji/ucdenjoji100721

19. サービス
デザイン
HCD-Net Forum 2012 | Session C
http://www.slideshare.net/atsushi/hcdnet-forum-2012-session-c/2
サービスデザインをいかに捉え教育につなげていくべきか
http://www.slideshare.net/masaya0730/uxd-in
• KA法による価値分析
• バリューシナリオ
サービスの価値定義 現状体験の可視化(as-is) 各チャネルのデザイン
体験
デザイン
インタラクション
デザイン
ビジネスモデルの定義
• 顧客価値連鎖分析
• ビジネスモデルキャンバス
• ビジネスオリガミ
• UXマップ（as-is）
理想体験の可視化(to-be)
（チャネル全体のデザイン）
• アクティビティシナリオ
• UXマップ（to-be）
• アクティングアウト
• インタラクションシナリオ
• サービスブループリント
• ストーリーボード
参考資料
デザインの3階層から

20. Starbucks Experience Map
スターバックス
Rail Europe Experience Map
AdaptivePath
現状体験
Rail Europeは欧州内の鉄道・バスのチケットの
予約・発券サービスを提供している代理店。
北米からの旅行者がRailEuropeを使って旅行する
際の調査～旅行後までに渡るプロセスを描いている
現状体験
スターバックスを利用するお客の検討～来店～
退店～感想までの一連のプロセスを描いている
事例

21. エクスペリエンステーブル
日立製作所
UXジャーニーマップ（UXデザインパッケージ）
NetYearグループ
【推測】
システム開発案件の発注を考えている会社が
取引会社を探す～問い合わせるプロセスを描いている？
銀行窓口をお客が訪問した時の、来店前～？ま
での行員とお客の一連の行動プロセスと感情
理想体験 理想体験
事例

22. 利用方針
各チャネルとその行動
定性的情報（考えること・思うこと）
定量的情報（感情の起伏）
ビジネスとしてのアクションビジネス
ユーザ
タッチポイ
ントでの
行動
要素

23. ユーザ
ユーザ ターゲットの詳細
ユーザゴール 最終的に目的とするところ
タッチポイント
での行動
利用段階 一連のフローにおける各行動のステップ
利用チャネル 各行動で利用するチャネル
利用状況 利用する時間・場所
行動 実際の行動
ユーザ
心理・思考
思考・感情の内容
課題点
利用する上でユーザが考えること、感じ
ること、心配に思うこと
感情レベル
上記感情を定量化したもの
（影響の大きさを把握）
ビジネス ビジネス要件 サービス提供側がおさえておくべきこと
要素

24. Starbucks
Experience Map
Rail Europe
Experience Map
エクスペリエンス
テーブル
UXジャーニーマップ
ユーザ ユーザゴール 利用段階
利用チャネル
（デバイス）
利用状況
（時間・場所）
行動 課題点
思考・感情の
内容
感情レベル ビジネス要件
ユーザ ユーザゴール 利用段階
利用チャネル
（デバイス）
利用状況
（時間・場所）
行動 課題点
思考・感情の
内容
感情レベル ビジネス要件
ユーザ ユーザゴール 利用段階
利用チャネル
（デバイス）
利用状況
（時間・場所）
行動 課題点
思考・感情の
内容
感情レベル ビジネス要件
ユーザ ユーザゴール 利用段階
利用チャネル
（デバイス）
利用状況
（時間・場所）
行動 課題点
思考・感情の
内容
感情レベル ビジネス要件
要素（ユーザはだいたい抜けてるけど…）

25. • 抽象度の高い作業はドキュメントベース
ではなく体験ベースが向いている
• 成果物そのものよりも、WSなどで一緒に
それを作り上げる過程を通じて、関係者
間の息を合わせることのほうが超大事
• UXマップは成果物ではなく、プロセスと
して考えるほうがいいと思う（HCD関連
の成果物は大体そうですが…）
モノそのものを目的化しない云々

26. ビジネスでの使いドコロ
▼ スタートアップにとって
事業機会を俯瞰的に捉え、検討の抜け漏れを防ぐ
全体を捉えた上で取り組むエリアを決めることで、ユーザ
にとってはニッチで不十分なサービスを目指してしまうこ
とを避ける

27. ビジネスでの使いドコロ
▼ 既存サービス運営者にとって
自社サービスの評価 / 競合比較ができる
現状体験を振り返って、自社/他社がどこまでユーザの欲
求に応えられているかを視覚的に捉えられる
チームの目線・目標を合わせやすくなる
目指す体験と現状の達成度を伝える際の資料として有効
（人の入れ替わりが激しい時に有用）
連携すべき事業パートナーがわかる
1事業者でユーザのひとまとまりの体験全てをサポートす
るのは難しい。お互いの事業価値を高められるパート
ナーを発見できるかも
○ ✕ ✕
フムフム…
VALUE

28. 有効でない 特に有効
向き・不向き
UXマップが向いている時、いない時

29. シチュエーション・ニーズ分析くらいで十分かも
左から右に埋める
コンセント社のシチュエーション・ニーズ
分析シートへの記入例
出典：
長谷川敦士『IA100-ユーザエクスペリエン
スデザインのための情報アーキテクチャ設
計』項目28
向いていない場合は？

30. エクスペリエンスジャーニーマップ／カスタマー
ジャーニーマップ – Think Social Blog
http://www.coprosystem.co.jp/marketingblog/2012/01/26.html
The Anatomy of an Experience Map -
AdaptivePath
http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map
Lead the webmasters to future with "IA
Thinking" for UX Design
http://www.slideshare.net/bookslope/lead-the-webmasters-to-future-with-
ia-thinking-for-ux-design
User Experience Journey Map - ユーザ・エクス
ペリエンス・ジャーニー・マップ – SEPARATE KS
http://d.hatena.ne.jp/separate-ks/20110908/1315492018
サービスデザインとは何か ～デザイン能力はサー
ビスビジネスの不可欠要素に～ - コンセント
http://www.concentinc.jp/labs/2011/12/service-design/
製品ではなくサービスをデザインする – Think
Social Blog
http://www.coprosystem.co.jp/marketingblog/2012/01/19.html
モバイル夜間大学「HCDが拓く新しいものづくり」
発表資料- コンセント
http://www.concentinc.jp/labs/2010/07/mobile-daigaku-hcd1/
参考文献