CSS Nite in Kobe, vol.56「プラグマティックペルソナとマイクロカスタマージャーニーを作ってみよう」に参加してきました

先日開催されたCSS Nite in Kobe, vol.56「プラグマティックペルソナとマイクロカスタマージャーニーを作ってみよう 〜UXデザインの基礎的手法を学ぶワークショップ〜」に参加してきました。
今回の登壇者
登壇者は株式会社ツルカメの森田 雄さんです。
森田さんはIA/UXデザイン、アクセシビリティ、ユーザビリティのスペシャリストとして活動されている方で、株式会社ツルカメ以外にも株式会社ネコメシの代表取締役CEOや、株式会社草冠のCXOなどもされている方です。
今回はそんな森田さんに、プラグマティックペルソナの作成方法と、そのペルソナの妥当性を検証するマイクロカスタマージャーニーの作り方を、ワークショップを通じて学びました。
前提
ペルソナに限らず、ウェブ制作の中間成果物を作る目的は全て合意形成のためです。
- 参考サイト:方向性の合意形成
- ワイヤーフレーム:レイアウトや要素の合意形成
- プロトタイピング:要素やページ遷移、アニメーションの合意形成
- デザインカンプ:ビジュアルデザインの合意形成
この合意形成を意識しながらプロジェクトを進めていかないと、余計な後戻りが生まれてしまったり、プロジェクトが破綻してしまったり、そもそもなんのためにいまの作業してるんだっけ?となってしまいます。
ペルソナはプロジェクトの最初の段階で「どんなユーザーに対していまからプロジェクトを進めるのか」のコアになる合意形成です。
しかし、実際ペルソナを作ってもそれが後々の成果物につながっていなかったり、作ったペルソナが放置され、引き出しの中に眠ったままプロジェクトが進んでしまいがちです。
そうならないためのペルソナが、プラグマティックペルソナとマイクロカスタマージャーニーでした。
全体の感想
自分のイメージするペルソナやカスタマージャーニーマップのワークショップは、最終ゴールが「ペルソナを作ること」「カスタマージャーニーマップを作ること」でした。
しかし今回のワークショップは、その先の「ペルソナを作っても使わないと意味がないよね」→「制作者もクライアントも合意を取って、納得して使えるペルソナを作る」が目的になっていました。
- 全員で合意を取って納得して使えるペルソナ(プラグマティックペルソナ)を作るのが目的
- そのための準備段階として「エンパシーマップ」を作成する
- エンパシーマップで出た要素に現実味があるかどうかを「マイクロカスタマージャーニー」で検証する
という風に、1つ1つの成果物が他の成果物を作るための材料・補強物になっていました。
そのため、できあがった成果物には一貫性がありますし、本来こうあるべきだなとも思いました。
ワークショップの形式
本来のワークショップは付箋を使って模造紙に案を書いていくのですが、今回はコロナウイルスの関係で、付箋サービスのMiroを使って行いました。
なので机に集まって、各々のPCでMiroを操作しながら会話するという特殊な形式でした。
- 付箋に書くよりもアイデアの数は出た(付箋に書くより出しやすい)
- エンパシーマップを利用してマイクロカスタマージャーニーを作成するときに、コピペで付箋を持って行けた
- 他の人のマウスカーソルが見えるのが面白い
デジタルならではの良さと、逆にもくもくと黙って作業しがちになってしまうなどの注意するポイントもありましたが、今後のワークショップの形式として面白かったです。




どうやって自分のデザインを伝える?「デザインの伝え方・話し方講座」CSS Nite in KOBE, Vol.27
売れるウェブサイトは戦略を映している【CSS Nite in Kobe】
Adobe初のUI/UXデザインツール「AdobeXD」の使い方を見てきました!【CSS Nite in Kobe】
CSS Nite in Kobe, vol.40「クライアントとのより良い関係性を築くためのコミュニケーション手法」に参加してきました
CSS Nite in Kobe, vol.52「ラクして毎日30分の時短! すぐにできるMacの作業効率化入門」に登壇してきました
CSS Nite in Kobe, vol.48「ウェブサイトの課題発見とアイデア創出の方法を学ぶワークショップ」に参加してきました
CSS Nite in Kobe, vol.42「ユーザーの感情に寄り添い、検索エンジンからも評価される「ドリルライティング」実践講座」に参加してきました
CSS Nite in Kobe, vol.45「Adobe XDの自動アニメーションで作るプロトタイプと 現場で活用できるマイクロインタラクションの作り方」に参加してきました
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理