Google UXデザイン：ユーザージャーニーマップを作る

# はじめに

わたしが[Google UX Design Certificateで得られた素晴らしい体験][google]を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

[google]: https://qiita.com/mapami/items/7a0d0a3d4661c50f8bec

https://www.coursera.org/professional-certificates/google-ux-design

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/3729adea-8dba-b2a3-6127-9b0bf6886e54.png" width="800">

# ユーザージャーニーマップとは

***<font color="MediumVioletRed">『ユーザが特定のゴールを達成するまでの一連の体験のこと』</font>***

ユーザージャーニーマップは、あなたがユーザーの立場で考え、感じることを助けてくれます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/ea2d7f55-6a97-ecb0-5558-8c01a80b9377.jpeg" width="700">

- ペルソナ：登場人物
- ユーザーストーリー：筋書き
- ユーザージャーニーマップ：ストーリーのアウトライン

# 利点

### 1つ目
***<font color="MediumVioletRed">『UXデザイナーがユーザーのために障害物のない道筋を作る』</font>***　

たとえば、車で海水浴に向かうとします。

1. 携帯電話で地図を表示し、最適なルートの概要を把握します。
1. 出発地と目的地がわかったので、さっそくドライブに出かけます。ここまでは順調。
1. おっと、この先で渋滞しているようだ。幸い、地図アプリが渋滞を避ける迂回路を提示してくれました。地図アプリは、ドライバーがルート上の障害物を回避する手助けをしてくれます。

同じ考え方が、ジャーニーマップにも当てはまります。

### ２つ目

***<font color="MediumVioletRed">『デザイナーバイアスの影響を軽減する』</font>***　

デザイナーバイアスは、デザイナーがユーザーではなく自分のニーズや欲求に従ってデザインする傾向として記憶されているかもしれません。ユーザージャーニーマップを作成することで、ユーザーが体験するイベントやインタラクションの一連の流れを、あなたのデザインとのインタラクションも含めて、徹底的に文書化することができます。そうすることで、ユーザーではなく、特定のペルソナが旅の各ステップでどのように考え、感じるかに焦点を当てることができます。


### 3つ目

***<font color="MediumVioletRed">『新たなペインティングポイントを浮き彫りにする』</font>***　

たとえば、あなたのペルソナ「Kindred」が白人種であるとします。彼女のユーザージャーニーは、国勢調査の情報をオンラインで入力することです。ドロップダウンメニューから人種を選択するまでは、すべてが順調に進んでいます。突然、彼女は障害にぶつかりました。黒人とアジア人の両方を識別するオプションがないのです。これは大きな問題だ。しかし、「Kindred」というペルソナを作り、彼女にストーリーを与え、ユーザージャーニーマップを使って彼女の旅を描くことで、彼女が経験している問題を明確に特定し、デザインを改善することができるようになるのです。


「Kindred」の例では、ユーザーが自分の人種を書き込めるようにメニューにオプションを追加したり、多人種の市民のためのドロップダウンメニューに別のフィールドを追加したりすることができるかもしれません。ここでのUXを改善することで、大きな変化をもたらすことができるのです。

# ユーザージャーニーマップの作り方

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/63629fb2-63b9-ea1f-b827-1f1328dccd91.png" width="700">

### Step1: ACTION

***<font color="MediumVioletRed">『1回に1つのアクションを書きます』</font>***　

例えば、ペルソナのJamalはミシシッピ州の田舎町にある人口500人の町から来たとします。彼は車いすを使って移動しており、初めてニューヨークを訪れました。今日、彼はエンパイアステートビルの最上階まで行くという夢を叶えたいと考えています。彼の旅路をどのように描くか？まず、ユーザーが最初に完了しなければならないタスクを特定します。この場合、ジャマールはエンパイアステートビルに行くための地下鉄のルートを探す必要があります。

### Step2: TASK LIST

***<font color="MediumVioletRed">『ユーザーがゴールに到達するために必要なことをすべてリストアップします』</font>***　

ここでは、Jamalの主なタスクをリストアップしています。

1. 乗るべき地下鉄の路線とルートを決定する。
1. 車いすで乗れる最寄りの駅を探す。
1. 切符を買う。
1. 正しいプラットホームを見つけ、電車がエンパイアステートビルの方に向かっているか、離れていないかを確認する。
1. 地下鉄に乗る。
1. 正しい出口を見つける。

ユーザージャーニーのマッピングの次のアクションは、次のメインタスクに移る前に、ユーザが達成しなければならないすべての小さなことを記述することです。

### Step3: FEELING ADJECTIVE

***<font color="MediumVioletRed">『タスクからタスクへ移動するときのユーザーの感情を特定する』</font>***　

例えば、Jamalが初めて地下鉄の路線図を見たとき、どのように感じるかを想像してみましょう。あるいは、Jamalが切符を買って、正しいホームに向かおうとしているところを想像してください。彼は階段を使うことができないので、エレベーターかタラップを見つける必要があります。エレベーターは使えないかもしれないので、タラップを探さなければならない。

### Step4: IMPROVEMENT OPPOTUNITIES

***<font color="MediumVioletRed">『ユーザー体験を向上させる機会を特定する』</font>***　

# さいごに

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/eabfb013-1639-2a74-ece4-81e516b30024.png" width="700">

Jamalの旅の行動をマッピングしなければ、車椅子のユーザーが地下鉄の駅をより簡単に移動できるよう、地図にアクセシビリティキーを追加することは思いつかなかったかもしれません。

このように、ユーザージャーニーマッピングはUXデザインに大きな効果をもたらします。