ひとりでも作れる！デザインの質を向上させる画面設計特化型カスタマージャーニーマップ

こんにちは、まおです！

「この画面って結局何が目的だっけ？」
「アイディアが出てこない…」
「ボタンの位置は本当にここでいいのかな？」

デザインの画面設計時、このように手が止まってしまうことはないですか？

今回はカスタマージャーニーマップをアレンジして画面設計に特化した書き方と効果について紹介します。このマップを活用すれば、思考を整理してユーザー視点に立った、質の高いデザインへと繋げられます。

アトラスのような少人数体制のプロジェクト（例：PM1名、デザイナー1名、エンジニア3〜7名程度）で進める場合でもデザイナーが1人で作れる軽量型なので、ぜひ役に立てば嬉しいです。項目などは自己流なので、使いやすいようにアレンジしてください。

ちなみに、本来カスタマージャーニーマップはユーザーがプロダクトやサービスと接する前後も含めた体験を可視化しますが、画面設計特化型との簡単な違いは以下の通りです。もちろんチーム内で共通認識を持つためのツールとしても使えます。

観点	本来のカスタマージャーニーマップ	画面設計特化型
対象範囲	サービス・ユーザーのライフサイクル全体	特定の機能や画面にフォーカス
目的	サービス体験の全体像や課題発見	ユーザー視点を捉え、UI設計においての思考整理と画面の目的の明確化
作成の容易さ・手軽さ	チームでの議論・時間がかかることが多い	ひとりでも短時間で作れる軽量版
作成タイミング	プロジェクト初期・リサーチ段階	画面設計前 設計中に迷って思考をリセットしたいとき

画面設計特化型カスタマージャーニーマップ

これが私がよく使う画面設計特化型カスタマージャーニーマップです。今回は架空のブログサイトを例にしています。基本的な項目は本来のカスタマージャーニーマップとほぼ同じで、左から右にユーザーの行動の流れを記述していきます。

画面名	ログイン画面	ダッシュボード表示	新規投稿画面	〜
操作者	編集者	編集者	編集者	〜
出来事		お知らせがあればポップアップ通知（連続投稿数、キャンペーン、いいね数の記録）		〜
画面の役割・目的	ログイン	PV数やコメント数などサイト全体の状況を把握	効率的かつ安全に作成・編集できるようにする	〜
行動	ID/パスワードを入力し、「ログイン」ボタンをクリック		「新規投稿」をクリック、執筆	〜
感情・思考		「あとでここ最近のアクセス数を確認しよう」 「今日投稿すれば10日連続なんだ！」	「さぁ書こう」 「まちがえて公開しちゃわないかこわい」 「こわいから最初から”非公開”設定にしておこう」	〜
メモ		「新規投稿」はもっと目立った方がいいか？ ダッシュボードでユーザーが最も必要とする情報は何か	公開設定のデフォルトは「下書き」が良い 執筆集中モードを検討 外部からのコピペ時の書式崩れを自動修正する機能の検討	〜

例としてHTMLテーブルで作成していますが、普段は列や行が追加しやすいFigjamやNotionのテーブル機能を使って作成することが多いです。列や行の移動も容易なので便利です！

なお、テーブルが大きくなりすぎると扱いにくいため、細かい単位（たとえばブログサイトであれば投稿完了までや、記事のエクスポートなど）で1つのシチュエーションごとに区切ることをおすすめします。

基本的な7つの項目と役割

項目はそのときどきでの開発規模や必要に応じて項目を増減させることはありますが、基本的には以下7つで作成します。

画面名	操作者が操作する画面名 作成ツールによっては画面キャプチャをそのまま貼ることもあります
操作者	実際に画面を操作するユーザー
出来事	操作者に起こる出来事やタッチポイント（通知表示やメール受信など）
画面の役割・目的	1画面につき1つの目的を設定
行動	「画面の役割・目的」に基づいて操作者が画面上で起こす行動
感情・思考	操作者の感情や思考をポジティブな面もネガティブな面も書きます
メモ	画面設計するうえで気がかりなことなど、補足でも何でも入れます

項目のポイントと効果

「画面の役割・目的」で目的を明確化する

「行動」などは本来のカスタマージャーニーマップの定番項目だと思いますが、画面設計型のポイントは「画面の役割・目的」です。

1つの画面に複数の機能や要素を詰め込みすぎると、ユーザーが目的を達成しにくくなります。それを避けるため、　詰め込み過ぎな機能や要素は分散させて「1画面、1目的」を意識します。画面ごとの目的を明確にしておくことで、ユーザーがスムーズに目的を達成できる設計につながります。また、設計中に迷ったときも、立ち返る基準として機能し、ぶれずにデザインを進めることができます。

「感情・思考」を書けるだけ書き出して見落とし防止

「感情・思考」も定番項目です。通常は1つの行動に対して1つの感情を設定するのが一般的ですが、画面設計特化型の場合は例のように思いつく限り書き出します。そうすることで「この画面がこういう状態のときはどういう動きが必要なんだろう？」「こんな機能も必要では？」と様々な視点から検討できるようになり、見落としの防止につながります。

コツは鉤括弧や感嘆符を使うと、よりユーザーの声として捉えやすくなるため客観的な理解が深まります。

書き起こす手間で再考の機会を得る

「画面の役割・目的」や「感情・思考」を含めてすべての項目に共通して言えるのは、自分の頭のなかだけにある情報を外に出す行為そのものが、思考の整理と再考の大きなきっかけになります。「わざわざ書き起こすことじゃないな」と思うようなものほど実際に書き起こしてみると、うまく言語化できなかったり、新たな視点の発見に繋がります。

手が止まってしまった時や、複数の選択肢で迷った時は、項目をひとつひとつ埋め直してみてください。ユーザーの行動や感情、画面の目的を改めて言葉にしていくことで、それらが呼び水となって、「あれ、そもそもこの状態のとき何が必要だっけ？」「この情報、本当にこの画面で必要かな？」といった問いが浮かんできて、思考を前に進めることができます。

終わりに

以上が私が実践している画面設計特化型カスタマージャーニーマップでした。

開発者ブログでも以前に紹介した、KRAFTS&Co.の倉光美和さんが提唱された「ユーザーショートストーリー」もあるとさらに強力です。抽象度が高いユーザーショートストーリーと合わせることで設計意図がより一貫したものになります。

なお、アトラスでは以前に本来のカスタマージャーニーマップについての勉強会も開催しており、これをきっかけに社内で広く認知されチームごとに活用しています。そちらの取り組みについては「カスタマージャーニーワークショップを開催しました」もぜひご覧ください。