SlideShare a Scribd company logo
1 of 27
Download to read offline
実践編
   なぜなに?
   ユーザエクスペリエンスマップ




                  Hashimoto Naoki
中央線UX        vistawalk@gmail.com
考えたいこと

UXマップって
 •  What なに?
 •  Why なんで作るん?
 •  How どうやって作るん? ←ココ
に答えを出したい
前置き
ここで紹介するUXマップの作り方は、いろいろ
あるうちのやり方の一つです。これでやった方
が必ずいいよ!というわけではないです
                        すし…
           いろんなUXマップがありま




とはいってもどうやんの?という人のために、
まずは一つのやり方をご紹介してみます
まずは
話を始める前に試しに作ってみたものを紹介
(テーマ:毎日の料理)
まずは
話を始める前に試しに作ってみたものを紹介
(テーマ:毎日の料理)
           利用段階
                        ユーザ・
                       ユーザゴール

          タスクフロー
      (行動・問題・思考・懸念点)




          感情レベル


         ステークホルダー      また、後で
          利用チャネル
                       説明します
UXマップを作るプロセス (素案)


 描くテーマと チーム内 現状体験の   理想体験の
  範囲の整理 インタビュー 可視化    可視化


   1	
   2	
   3	
    4
1. テーマと範囲の整理
範囲について:
あるトピックに関するユーザのひとつなぎの体験
であること。事業者視点で設定すると狭く、かつ
前後の文脈が抜け落ちやすくなる
 例)友だちとの旅行
        集まって    前日    旅行を   お土産   写真
 きっかけ
        計画作成    準備    楽しむ   ばなし   見返す


               旅行プランを売るアプリに役立てたいので、
               ここだけ…ってのは本来的にはNG
1. テーマと範囲の整理
範囲について:
ざっくりでいい、というか仮くらいで。
話してみて合ってなかったら後で変えてけば
いいのです。
2. チーム内インタビュー
a. チーム内でテーマに関して話し合ってみよう

•  本来的にはユーザから直接、過去の体験を
   引き出すことが望ましいです(少数でもい
   いので…)
•  チーム内でさきほどのテーマと範囲につい
   て体験談を話しあってみましょう
2. チーム内インタビュー
a. チーム内でテーマに関して話し合ってみよう
                   急に話し合って
                   と言われても…
質問例:
•  最近、○○したのはいつ?
•  ○○しようと思ったのはどうして?
•  ○○した時の苦労は?
   •  予想してなかったけど、これはたいへんだった
      という想い出は?
   •  できるかどうかは抜きにしてこういうことがで
      きればというのは?
•  逆に○○して一番良かったのは?
インタビュー技法については詳しくは以下で。
樽本 徹也『アジャイル・ユーザビリティ ―ユーザエクスペリエンスのためのDIYテスティング―』,オーム社,2012
2. チーム内インタビュー
a. チーム内でテーマに関して話し合ってみよう

ちゃんと知るために掘り下げる:
?と少しでも思ったところは遠慮せず、どうして?
と掘り下げて聞いてみる。その人の体験に共感して、
自分が後で説明できるくらいに。
                旅行ガイドブックも持って行ったんですけど
例)                    そんなに使わなかったですねー	

     あれ?さきほど、計画時に行きたいところにたくさん印をつけて
     いたと仰ってましたけど、結局それは使わなかったのですか?	

             2種類持っていったんですよね。計画の時に使った
             A4くらいのものと持ち歩きやすい新書サイズの2つ
                  でも、現地で使った新書サイズのものには
                街歩きに必要な情報があんまり載ってなくて…	

     その「街歩きに必要な情報」ってのは?
2. チーム内インタビュー
a. チーム内でテーマに関して話し合ってみよう

聞く、書きだす:
•  時間内に一人ずつマンツーマンでインタビュー
•  ただ、聞きながら内容を書き出すのはインタ
   ビューのプロでもハード
•  チーム内に筆記役を決めて、付箋にガシガシ書き
   だしてもらうのがオススメ
•  行ったこととその際の
   感情・問題は別の色に
   しておくと整理しやす
   いです
2. チーム内インタビュー
a. チーム内でテーマに関して話し合ってみよう

焦点を定める:
•  ひと通りインタビューが終了したら、誰の内容を
   ベースに体験を考えるか決める。誰のどんな体験
   を考えるのか明確にするため。
2. チーム内インタビュー
b. 簡単なペルソナを設定する

誰に向けてデザインするの?
•  今回だとベースにした人が目の前にいると思いま
   すが、他チームに伝えるために簡易的なペルソナ
   があると伝えやすいです。   ※対象とするユーザの典型的な
                   特徴を記したもの	
•  これが主題ではないですし、
   ターゲットユーザ像に具体的な
   想像がしやすい情報を肉付けす
   る程度でOK
2. チーム内インタビュー
b. 簡単なペルソナを設定する

冒頭の毎⽇日の料料理理のマップづくりで
対象としたユーザ
•    独⾝身、⼀一⼈人暮らし。
•    都内在住。⾷食材はスーパーで調達。スーパー⾃自体は24Hオープン
•    冷冷蔵庫は単⾝身者⽤用(140L)、IHコンロが1⼝口ある
•    社会⼈人、仕事が忙しく8-‐‑‒9時くらいに退勤
•    帰ってから料料理理を始める。9-‐‑‒10時くらいから。
•    できるだけ短時間で美味しいものが作りたい
•    外⾷食ではなく⾃自分で作りたいと思っている
      •  外⾷食だけだと飽きてくるから
      •  ⾃自分の好きなものを好きに⾷食べたい
      •  ⼈人間的で⽣生活しているという充実感がある
      •  料料理理は達成感があるので好き
3. 現状体験の可視化
 インタビューが終わったら内容をマップにまとめていきましょう
  a.    書き出したタスクや感情・問題を時系列に並べる
  b.    タスクの固まりに名前(フェーズ)をつける
  c.    使う道具(チャネル)を記載する
  d.    関わる人(ステークホルダー)を記載する
  e.    感情の揺れ動きを曲線で表現する
  f.    自社・競合他社の担当領域を明確にし、達成度を評価する
             b


             a


             e

             d
             c
3. 現状体験の可視化
a. 書きだしたタスクや感情・問題を時系列に並べ替える




                 行動と感情・問題点が対になるよう
                 に並べていきます
                 •  問題点を分けているのは、後で各問
                    題を解消する改善案を考える際にわ
                    かりやすくするため
                 •  感情・懸念点を分けているのは、実
                    装の際の参考材料として参照しやす
                    くするため
3. 現状体験の可視化
b. タスクの固まりに名前(フェーズ)をつける




                  最初に考えた範囲から、
                  •  新たに出てきたところに名前を
                     つけて
                  •  行動がほとんど無いところは取
                     り除きます
3. 現状体験の可視化
c. 使う道具(チャネル)を記載する




           •  場所、道具名、サイト/サービス名を書き出し
              ます、スーパーなどリアルなものも含む
           •  それぞれの行動がどういう場所で、何を使って
              やっているのか文脈を明らかにします
3. 現状体験の可視化
d. 関わる人(ステークホルダー)を記載する




  •  各行動での登場人物を書き出します
  •  (この例だと一人なんで意味ないですが…)
  •  行動が一人でするのか、複数人でするのか、複数人だ
     としたら誰が関わるのかなど、行動の文脈を明らかに
     します
3. 現状体験の可視化
e. 感情の揺れ動きを曲線で表現する




  •  感情の揺れ動きを書いておきます。揺れ動きがあるところには、
     なぜそうなっているのか、ユーザの言葉で一言言わせておくと、
     わかりやすいです
  •  タスクフローだけだとドライな感じですが、感情曲線があると、
     書いた体験に魂が入ったように生き生きとしたものに見えます
  •  また、問題がどこにあるのかを把握する点でも重要です(後述)
3. 現状体験の可視化
e. 自社・競合他社の担当領域を重ねあわせ、達成度を評価する




  以下のように、自社でどれくらいユーザ行動をサポートできている
  かを行動を色別に囲って示します。


   ユーザの行動を十分に    ユーザの行動の       現在、サービスを提供
   サポートできている	
   サポートは不十分である	
 していない
4. 理想体験の可視化
 現状体験が見えたら、それをどう良くしていくかを考えます
  a.  どのエリアの改善に取り組むかを考え、各エリアに対し、改善
      方針を付箋で貼っていきます
  b.  (補足として)各改善案のUIイメージを必要に応じて書きます
  c.  改善後の感情曲線を描きます
  d.  (検索結果一覧、詳細など)画面単位で構成図を書き、対応す
      る行動郡にぶらさげます
4. 理想体験の可視化
a. どのエリアの改善に取り組むかを考え、改善方針を付箋で貼っていく

問題の範囲をどこに置くか
•  局所的に負荷が高いタスクがある
  → その部分を集中的にサポート・改善する
•  全体を通じて負荷が高すぎて、そもそもユーザがやる気
   なくすレベル…
  → 構造的な問題を捉えたうえで、改善策を考える(コン
    シェルジュ的な人的サービスを提供するとか)

•  感情曲線があると、問題が局所的なのか、全体に及ぶの
   かわかりやすいです
4. 理想体験の可視化
b. 各改善案のUIイメージを必要に応じて書きます


 切切ったり、つけこんだ   いちいちスクロールして、
 りなど、⾷食材の下ごし   材料料や調味料料を確認しな
 らえをする         いといけないのが⾯面倒。
               「★のタレを混ぜる」な      
               ど


                                



                                




•    イメージがわかりづらい部分は書いておきます
•    デザインで載せてますが、スケッチレベルのほうがいいです。というか、
     補足なんでむしろそうしてください。
4. 理想体験の可視化
d. 画面単位で構成図を書き、対応する行動郡にぶらさげます




   検索索結果⼀一覧




              検索索結果詳細




                        ※イメージです
最終形態だけ見せても、初めての人はわかりにくいと思うの

運用での工夫        で、その点に配慮するなら、透明フィルムを重ねるようにし
              て、各層毎に見られるようにしておくといいかも…




         • 


         • 



    • 

    • 




         • 




                            UI層	

                                    理想体験層	

                                       現状体験層

More Related Content

Viewers also liked

対話からはじまるデザインプロセス:UX Japan Forum2015
対話からはじまるデザインプロセス:UX Japan Forum2015対話からはじまるデザインプロセス:UX Japan Forum2015
対話からはじまるデザインプロセス:UX Japan Forum2015Satoru MURAKOSHI
 
schoo "よりよいサイトやアプリを作るための、情報設計"
schoo "よりよいサイトやアプリを作るための、情報設計"schoo "よりよいサイトやアプリを作るための、情報設計"
schoo "よりよいサイトやアプリを作るための、情報設計"Takashi Sakamoto
 
そもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何かそもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何かSatoru MURAKOSHI
 
UXマップ(退職者の送別会幹事)
UXマップ(退職者の送別会幹事)UXマップ(退職者の送別会幹事)
UXマップ(退職者の送別会幹事)Naoki Hashimoto
 
20160217_よりよいプロダクトづくりのためのデザインプロセス
20160217_よりよいプロダクトづくりのためのデザインプロセス20160217_よりよいプロダクトづくりのためのデザインプロセス
20160217_よりよいプロダクトづくりのためのデザインプロセスSatoru MURAKOSHI
 
”安藤昌也さん”のUX論 ~ 利他的な「私」
”安藤昌也さん”のUX論 ~ 利他的な「私」”安藤昌也さん”のUX論 ~ 利他的な「私」
”安藤昌也さん”のUX論 ~ 利他的な「私」Masaya Ando
 
リクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組みリクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組みRecruit Lifestyle Co., Ltd.
 
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善Uxマップを使ったサービス改善
Uxマップを使ったサービス改善Keisuke Tsukayoshi
 
即興で どうにかする力 ~家庭の料理→HCDに活かす ~
即興でどうにかする力 ~家庭の料理→HCDに活かす ~即興でどうにかする力 ~家庭の料理→HCDに活かす ~
即興で どうにかする力 ~家庭の料理→HCDに活かす ~Azumi Wada
 
Webディレクション講座 - 初級編 -
Webディレクション講座  - 初級編 -Webディレクション講座  - 初級編 -
Webディレクション講座 - 初級編 -Colorkrew
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方Satoru MURAKOSHI
 
「実践的」カスタマージャーニー分析のすすめ
「実践的」カスタマージャーニー分析のすすめ「実践的」カスタマージャーニー分析のすすめ
「実践的」カスタマージャーニー分析のすすめAkihiko Uchino
 
Brugnoli System Ux
Brugnoli System UxBrugnoli System Ux
Brugnoli System Uxfrog
 
IA Summit 2012: Mapping the Experience
IA Summit 2012: Mapping the ExperienceIA Summit 2012: Mapping the Experience
IA Summit 2012: Mapping the ExperienceChris Risdon
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセットSatoru MURAKOSHI
 

Viewers also liked (17)

121010_ia_lecture_03
121010_ia_lecture_03121010_ia_lecture_03
121010_ia_lecture_03
 
対話からはじまるデザインプロセス:UX Japan Forum2015
対話からはじまるデザインプロセス:UX Japan Forum2015対話からはじまるデザインプロセス:UX Japan Forum2015
対話からはじまるデザインプロセス:UX Japan Forum2015
 
schoo "よりよいサイトやアプリを作るための、情報設計"
schoo "よりよいサイトやアプリを作るための、情報設計"schoo "よりよいサイトやアプリを作るための、情報設計"
schoo "よりよいサイトやアプリを作るための、情報設計"
 
そもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何かそもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何か
 
UXマップ(退職者の送別会幹事)
UXマップ(退職者の送別会幹事)UXマップ(退職者の送別会幹事)
UXマップ(退職者の送別会幹事)
 
20160217_よりよいプロダクトづくりのためのデザインプロセス
20160217_よりよいプロダクトづくりのためのデザインプロセス20160217_よりよいプロダクトづくりのためのデザインプロセス
20160217_よりよいプロダクトづくりのためのデザインプロセス
 
”安藤昌也さん”のUX論 ~ 利他的な「私」
”安藤昌也さん”のUX論 ~ 利他的な「私」”安藤昌也さん”のUX論 ~ 利他的な「私」
”安藤昌也さん”のUX論 ~ 利他的な「私」
 
リクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組みリクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組み
 
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
 
即興で どうにかする力 ~家庭の料理→HCDに活かす ~
即興でどうにかする力 ~家庭の料理→HCDに活かす ~即興でどうにかする力 ~家庭の料理→HCDに活かす ~
即興で どうにかする力 ~家庭の料理→HCDに活かす ~
 
User Experience Journey Map (version 1)
User Experience Journey Map (version 1)User Experience Journey Map (version 1)
User Experience Journey Map (version 1)
 
Webディレクション講座 - 初級編 -
Webディレクション講座  - 初級編 -Webディレクション講座  - 初級編 -
Webディレクション講座 - 初級編 -
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
 
「実践的」カスタマージャーニー分析のすすめ
「実践的」カスタマージャーニー分析のすすめ「実践的」カスタマージャーニー分析のすすめ
「実践的」カスタマージャーニー分析のすすめ
 
Brugnoli System Ux
Brugnoli System UxBrugnoli System Ux
Brugnoli System Ux
 
IA Summit 2012: Mapping the Experience
IA Summit 2012: Mapping the ExperienceIA Summit 2012: Mapping the Experience
IA Summit 2012: Mapping the Experience
 
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
 

なぜなに?ユーザエクスペリエンスマップ(実践編)