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

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


【前編】Sync & Liveで取り回す Illustrator でのデータ作り!!CSS Nite in KOBE, Vol.26
CSS Nite in Kobe, vol.43「ウェブページを高速化してユーザーに価値を届けたい制作者のためのセミナー&ワークショップ」に参加してきました
CSS Nite in Kobe, vol.53「XDで作るワイヤーフレーム・プロトタイプとサイト制作時のコミュニケーション」に参加してきました
CSS Nite in Kobe, vol.41「最新ネット広告の打ち手を学ぶ1dayレッスン 〜レスポンシブ検索広告からAmazon広告、ストーリーまで」に参加してきました
CSS Nite in Kobe, vol.55「モダンコーディング:XDで作られたデータを元に実装工程のセミハンズオン」に参加してきました
CSS Nite in Kobe, vol.38 デザイン批評基礎講座 〜センスで語らないデザインの伝え方〜に参加してきました
CSS Nite in Kobe, vol.39「ウェブサイトの分析とGoogleアナリティクス活用・カイゼンのノウハウを学ぼう」に参加してきました
【後編】Sync & Liveで取り回す Illustrator でのデータ作り!!CSS Nite in KOBE, Vol.26
【前編】もうライティングで困らない!説得型ランディングページとアフィリエイター活用で売り上げアップ【CSS Nite in Kobe】
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
既存プロジェクトにCompassが導入されている場合に備えて、最低限Sassのコンパイルだけでも行えるようにしておく
Figmaで画面遷移図やフローチャートをつくるときに線を自動で引いてくれるプラグイン「Autoflow」
テキストエディタ.app起動時に表示されるダイアログボックスを非表示にする方法
CSS疑似要素の「:empty」でタグの中身が空のときのスタイルを設定する
拡張機能を使わずにサイト全体のスクリーンショットを撮影する方法
横幅が広がったときの挙動が変わる!CSS Gridの「auto-fill」と「auto-fit」の違い
CSSで::placeholderにスタイルを設定する方法
macOS Mojaveのスクリーンショット機能についてまとめる
Figmaで作ったスマホデザインを「Mirror」機能を使ってリアルタイムに実機確認をする
Keyboard MaestroでMacログイン時にアプリの遅延起動を行う