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.25】
神戸で開催される078を盛り上げるためのアイデアソンに参加してきました
CSS Nite in Kobe, vol.52「ラクして毎日30分の時短! すぐにできるMacの作業効率化入門」に登壇してきました
CSS Nite in Kobe, vol.48「ウェブサイトの課題発見とアイデア創出の方法を学ぶワークショップ」に参加してきました
CSS Nite in Kobe, vol.40「クライアントとのより良い関係性を築くためのコミュニケーション手法」に参加してきました
CSS Nite in Kobe, vol.50「今、企業が取り組むべきウェブ動画マーケティング」に参加してきました
CSS Nite in Kobe, vol.43「ウェブページを高速化してユーザーに価値を届けたい制作者のためのセミナー&ワークショップ」に参加してきました
【後編】Sync & Liveで取り回す Illustrator でのデータ作り!!CSS Nite in KOBE, Vol.26
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Visual Studio Codeのマルチカーソル機能で文字操作を一括で行う
ATOKの「ATOKパレットの表示」「単語登録」ショートカットキーが、Emacsキーバインドと被るので変更したい
UlyssesでMathJaxを使用して、LaTeXの数式をプレビューでキレイに表示させる方法
ImageOptimをターミナルから起動する方法
ウェブサイト内の動画キャプチャから保存して共有までをスムーズに行うChrome拡張機能「Screencastify」
Bartender 4のShow for Updates機能を使って、AirPodsに接続しているときだけ「ToothFairy」のアイコンを表示させる
Karabiner-Elementsでcommand + Qの2回押しでアプリが終了するように変更する方法
MAMPでローカル開発環境にWordPressをインストールする手順
Alfredでダークモードを切り替えるWorkflowを作成する方法