本当に実践的なデザインドキュメントの書き方 第4回：Web制作現場向けのカスタマージャーニーマップ | アドビUX道場 #UXDojo

連載

本当に実践的なデザインドキュメントの書き方

この連載は、現在のWeb制作における分業体制を前提に、情報設計に関わる『デザインドキュメント』をきちんと制作することで、受託側と発注側のミゾを埋める手段を探ります。
前回は、デザインドキュメントの中でも、誰のために作るかを合意できる「簡易ペルソナ」の作成方法をご紹介しました。今回は、ユーザー（ペルソナ）の行動を時系列に並べて見える化できる「簡易カスタマージャーニーマップ」をご紹介します。

カスタマージャーニーマップ（CJM）とは？

カスタマージャーニーマップ（以下CJM）とは、ユーザーの行動を時系列にマッピングしたデザインドキュメントです。ユーザーの行動を時系列に沿って何段階かに区切り、その段階ごとにユーザーと企業のタッチポイントがどうなっているか、それによってユーザーの体験がどのように積み重なっていくかを視覚化します。

出典：ジャーニーマップ作成の実際：UX実践者への調査

「カスタマージャーニーマップは、いつどのように作るべきか」では、一般的なCJMには以下の3つのエリアがあると解説されています。

• 「レンズ」（ゾーンA）：誰がどういうゴールに向かう際の話なのか、を記します。ここには前回作成したペルソナの情報を用います
• マップ化されたエクスペリエンス（ゾーンB）：ユーザーがそれぞれの段階でどういう行動をとるのか、その際の企業とのタッチポイントは何か、どういう体験が訪れるのか、などを記載します
• このプロセスをとおして学んだ知見（ゾーンC）：ユーザーの行動に企業がきちんと応えられていない場合、どんな課題があるのかを書き記します

CJMの利点

CJMの利点のうち、一番大きいものは「ユーザー視点を持てる」という点でしょう。発信元である企業の視点ではなく、ユーザー側がどのように振る舞っているか、そのときに何を感じているかという視点を持つことで「その行動をサポートするにはどうしたらいいか？」という発想を持てるようになります。

本連載第2回でも触れましたが、体験というのは時系列に進み、積み重なっていくものです。UXデザインにおいてCJMがよく用いられるのは、頭の中でなんとなく考えていたユーザーの行動を時系列で表すことで、体験の変化を可視化できるからです。つまり行動を並べて見える化すること自体がUXデザインの第一歩であるというわけです。

もうひとつの利点は、ユーザー側のふるまいに着目することで、企業との接点がいろんなタイミングで複数あることや、接触手段も様々であることが浮かび上がってくる点です。複数のタッチポイントを俯瞰できるため、現状の様々なイベントの関係性が明らかになり、組織横断的な課題も認識できるようになります。

これらはウェブサイト制作の受注側としては大きなインプットになります。ユーザーがウェブサイトを利用する前にタッチポイントがあったり、ウェブサイト閲覧後に別のリアルイベントが存在するケースも多々あります。しかし発注側は、ウェブサイト以外の話はプロジェクトのスコープではないから伝えなくてもよいだろうと考えがちです。そうなると受注側も、考慮はその範囲に留まってしまいます。

そうした認識のギャップを埋め、デザインの対象となるユーザーに対する双方の認識を揃えるために、タッチポイントと体験を視覚的に並べた図であるCJMは効果を発揮します。

簡易なCJMでも役に立つ

ペルソナと同様、CJMも本来はコストを掛けてきちんと作るものですが、簡易なもので前に進むことも可能です。CJMにおける簡易さには、2つの側面があります。

ビジュアル的な簡易さ

ひとつは、ビジュアル的な簡易さです。「カスタマージャーニーマップ」という言葉で画像検索を行うと、きちんとグラフィックデザインされたCJMが多数見つかります。左から右に流れていくオーソドックスなレイアウトもあれば、円環状になっているものや、感情曲線にフォーカスしたものなど、バリエーションもさまざまです。

しかし、これらはあくまで最終アウトプットであり、プレゼン向けであったり、プロジェクトの象徴として掲載される用途で作成されているものです。いきなりこれを参考にして作ろうとすると、どこから手をつけて良いのか考えている間に挫折してしまうかもしれません。

出典：UXリサーチの道具箱のサンプルスライド

「UXリサーチの道具箱」という書籍では、CJMは本質的には単なる「年表」だと解説されています。ある特定のユーザーの行動をフェーズ分けして、各フェーズごとに実際に行っていることを羅列する。これがCJMのコアであるというわけです。表を書くだけであればビジュアルに凝る必要はありません。そこに様々な要素を付加すると、いわゆるCJMの形に近づきます（詳しくは後述します）。

推定で作る簡易さ

もうひとつは、ユーザー調査の結果ではなく推定に頼るという点での簡易さです。簡易ペルソナからCJMを作成する場合、ユーザーの行動の根拠になるペルソナが想定されたものであるため、CJMも必然的に推定で作ることになります。

この場合のCJMの効果は、正しい仮説を導くことよりも、チームの認識を揃えることが主眼になります。推定であっても、ユーザーの一連の行動やタッチポイントを視覚化することにより、発注側と受注側のギャップや思い込みを解消する効果があります。ユーザーの体験の前提となる現状施策を俯瞰して共通認識を持つことは、プロジェクトを成功に導く一歩となるはずです。

もちろん、連載3回目で触れた「簡易ゆえのリスクは忘れずに」という点はCJMについても同様です。推定して書いてみたCJMのような行動を取る人が実在するかどうか、可能であれば数人リクルーティングしてインタビューしてみるとよいでしょう。特に、簡易ペルソナから簡易CJMまで書いてからインタビューに臨むと、インタビューの精度が上がり、想定と実際のギャップも明確になるのでおすすめです。

簡易CJMを書く前の準備

単に表を書くだけで良いと聞くと、想定しているユーザーの行動を書き出すことは意外に簡単に始められそうです。しかし実際に書き始めるには、いくつかの準備が必要です。

現状施策を理解する

CJMには、まずユーザーの「現在の」行動を書き記します。現状を把握することで、望ましい体験とのギャップを確認し、課題を見出すためです。つまり、企業側が行っている現状施策（＝いまあるタッチポイント）を把握していなければ、CJMを書き始めることは困難です。

簡易ペルソナ作成時に用いた、ウェブサイトの要件が書かれたブリーフィングシートを確認したり、事前インプットを整理して施策リストを作るなどの準備をしておくと、作業をスムーズに始めることができます。

チームで臨める体制をつくる

簡易CJMの一番の狙いは「チームの認識を揃えること」にあります。簡易ペルソナを作成したときと同様、チームの認識を揃えるには、チームでCJMを書いてみるのが一番の近道です。誰かが作ったものをレビューするという形だと、どうしても情報の量や質チーム内で差が出てしまいます。2時間ほどあれば1枚のCJMを作れるので、予定を調整してチームが集まれるようにしておきましょう。

可能であればクライアント側から担当者に同席してもらえるとベストです。CJM作成の現場で現状施策をリアルタイムで回答できる人がいれば、短時間で正確な資料を作成できます。事前インプットを増やすことである程度はカバーできますが、「情報共有の一環としてCJMのレビューをしてほしい」という形でお願いすれば、案外参加してくれるケースも多いはずです。

ペルソナを選び、そのゴールを理解する

先の「CJMの3つのエリア」でご紹介したとおり、CJMは、その前提となるペルソナを必要とします。ペルソナとCJMは一対になるため、時間に限りがある場合は、主要な観点をある程度カバーできる2〜3体を選択して作るのがよいでしょう。

ペルソナを選定したら、そのペルソナシートの内容を改めて確認しておきます。特にゴールの明確な認識が重要です。CJMを作って可視化された行動が、ユーザーのゴールに近づけているかどうかが、現状施策とのギャップ＝改善すべきポイントの発見につながるからです。

今回は、連載3回目で作成したペルソナ、海野ルミ子氏をモデルケースとしています。

ペルソナを選定せずにCJMを書くのは混乱のもとです。CJMに類似したマップに、下記のような「エクスペリエンスマップ」と呼ばれるものがあります。このマップは企業活動を俯瞰するといった目的で用いられるもので、ペルソナが記されておらず、その企業のサービスを利用する「一般的な人」の「一般的な体験」が書かれています。似ているようで違うものであり、エクスペリエンスマップを参考にCJMを書こうとすると、行動を定めることができずに分散してしまうので注意しましょう。

出典：The Anatomy of an Experience Map

簡易CJMを書いてみる

以上の準備が済んだらCJMを書き始めます。実際に簡易CJMを書く際は、最初に骨格を決めて、その後いくつかのステップを踏みながら肉付けしていきます。ここでは、海野ルミ子氏のAdobe MAX Japanイベントサイトに関わる簡易カスタマージャーニーマップのサンプルを例に説明します。

スコープを決める

まず、今回のCJMで扱う、ユーザーの行動の範囲を決めます。これはつまり、対象とする期間を決めるということです。時間軸の単位は、一生、数十年、年、月、日、時間…とさまざまです。どの期間で区切るかは、「企業が行っているサービスのライフサイクル」「着目するUXの段階」「なにを明らかにするために作るのか」によって決まります。

もうひとつの目安として、商品やサービスの価格帯や課金モデルがあります。低価格帯のものほど認知、購入、消費、再購入のサイクルが早く、高価格帯のものほど時間がかかる傾向にあります。

それぞれの目安について、作成するウェブサイトが該当する範囲はどこなのか？を掛け合わせていくと、明らかにすべきスコープは自ずと定まってきます。

今回の例ではAdobe MAX Japanのイベントサイトがテーマです。Adobe製品はサブスクリプションモデルのため継続して課金されるものですが、イベントは特定の日に開催されるものであることから、CJMのスタートからゴールまでは2〜3ヶ月に収まりそうです。作ってみて不自然さを感じたらまた作り直せばよいので、最初は仮ギメして進めていきます。

フェーズ分けを行い、行動とタッチポイントを記載する

フェーズ分けがCJMの成否を決める作業と言ってもよいでしょう。スタートからゴールまでのあいだの行動をフェーズに振り分けて、区切りを設定します。ここではトップダウンのやり方とボトムアップのやり方の2通りがあります。どちらが正解ということではなく、両方を行き来しながら考えていくことになるでしょう。

トップダウンのフェーズ分け

トップダウンは、まずこういうフェーズがあるだろうと想定して、列を区切るやり方です。なにか取っ掛かりが欲しいときは、AIDMAやAISASといった、消費者の購買行動モデルが使われることがあります。

ただし、これらは一般化されたモデルであり、ユーザーの行動がそのようなフェーズ分けになっているとは限りません。また、「ユーザーにこのように行動してもらいたい」という期待にすり替わりやすいものでもあります。例えば、たいていのモデルにはShareの概念がありますが、現時点で共有や拡散が行なわれていないケースは多々あるはずです。

CJMはあくまで「提供側ではなくペルソナのつもりになって書く」ことが重要です。購買行動モデルをそのまま当てはめて、それに沿った「期待」を書いてしまわないように注意しましょう。

ボトムアップのフェーズ分け

そこで、ボトムアップの視点も必要になるわけです。これは、まず具体的な行動を書き出してみて、それらをグルーピングしてフェーズを区切るやり方です。

思いつくものから書き出していくのでも構いませんが、それだと軸が見えてくるまでに時間がかかることがあります。行動を書き出していくときは、UXの段階が着想の助けになります。

出典：UX白書

連載第2回で触れたとおり、体験には「予期的UX（利用前の想像）」「一時的UX（利用時）」「エピソード的UX（利用後の内省）」「累積的UX（多種多様な利用期間の回想）」という段階があります。これらの段階の中でどのような行動があるのかを考えていくと、行動の例を挙げやすくなります。

なお、各フェーズに付けるラベルは、ペルソナの視点において行動群を適切に言い表すものを選ぶ必要があります。購買行動モデルやUXの段階における表現はあくまで取っ掛かりとして、それ自体をフェーズのラベルにするのは避けましょう。

タッチポイントの記載

行動を考えていくと、自然と現状のタッチポイントの話も出てきます。タッチポイントは企業からリーチしているあらゆる対象が含まれます。ウェブサイトやアプリだけでなく、バナー広告、交通広告、CM、店舗、コールセンターなどもタッチポイントです。それぞれの目的と提供方法を短くまとめて、行動の時系列に沿って記載していきます。

CJMの解説では直線的に説明する関係上、フェーズ➝行動➝タッチポイントという順になっていることが多いのですが、実際に作業をこのような流れで進めるのは難しいと感じます。ユーザーの行動が、タッチポイントを起点に生じているケースも多々あるからです。例えば、広告が無ければ認知せず、サイトが無ければ訪問せず、申込みフォームがなければコンバージョンは起きません。また、スマートフォンから閲覧できなければ、タイミングや場所が制約されます。

見直しと調整の繰り返し

ワークショップの場などでは、「いまはフェーズ、いまは行動、いまはタッチポイント…」のように順に進めることがありますが、実際に作成するケースでは、フェーズ分けと具体的な行動やタッチポイントの記載は、やりながら調整していくことになります。

仮説なので間違い上等で書く、議論のたたき台としての簡易CJMであるという点は、簡易ペルソナと同様です。第一の目的は合意形成であるため、あとで修正したり捨てる前提で「まずチームで相談しながらいろいろ書いてみる」ことを強く意識しておきましょう。このため、紙に直接書くのではなく、自由に動かせる付箋などを使い、行動とタッチポイントでは色をわけるなどして、段階的にまとまりを見出していくやり方にすると手戻りが少なく進行しやすくなるはずです。

ペルソナが感じていることを書く

フェーズ、行動、タッチポイントが見えてきたら、ユーザーが感じていることを時系列に沿って書いていきます。時系列に沿って感想を書いていくことで、タッチポイント同士の関係性から生まれた良い点・悪い点が明らかになってきます。

このときも提供側の期待ではなく、あくまで「ペルソナであればどのように言いそうか」を考えながら書くことが重要です。その視点から書くと、ほとんどの場合、ペルソナにとって気に入らない部分が多数書かれるという結果になるはずです。良い点だけで構成されるフェーズは稀でしょう。

そうなる理由には、提供側の施策同士が「前を受けて次」になっていない、あるいは特定のマイルストーン（≒中期的なゴール）に向けて企画されていない、などがあります。広告単体で良し悪しを考えるのではなく、その広告を見てからサイトに訪れるとどうなるか、サイトのページを見てから申し込みフォームを開くとどうなるのか、といったことが把握できるのが、CJMの価値だと言えます。

課題を書く

ここまで作業が進めば、ユーザーの期待や行動と、現状施策とのギャップはかなり見えてきているはずです。次はそれを課題として時系列にマッピングします。これを書ききったらCJMの完成であるといえます。これらの課題を解消する案の検討が次のステップです。

「ジャーニーマップ作成の実際：UX実践者への調査」という記事では、「取り組むべき状況や社内の担当、指標といった知見がカスタマージャーニーマップからよく外されている」という調査結果を挙げ、この欄が無いことで次のアクションに繋がらない「使う人のいない、単なるきれいなマップ」になってしまう危険があると指摘しています。

出典：サービスブループリント：定義

なお課題の理解にあたっては、現状施策を更に深く認識するためのサービスブループリントというデザインドキュメントを使う方法もあります。

これはCJMにおけるタッチポイントが企業内ではどのような形で運営されているかを図示するドキュメントです。たとえば、サポートセンターが受けた問い合わせがどのように管理され、解決したあとに誰が関わってFAQに掲載されるか、といった「バックステージ（裏側）」の流れを解説することに主眼が置かれています。CJM作成後に、ホワイトボードレベルでもよいのでクライアント担当者にこういった図を簡易的にでも書いてもらえば、より課題の理解が進むでしょう。

次回はこの簡易CJMをもとに、理想の体験を考えるためのシナリオの解説と作成方法をご紹介します。