デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」

Design Boost in FUKUOKA | 2026.06.24の登壇資料
FGNにて

URL : https://db2026-summer.peatix.com/

Transcript

1. Design Boost in FUKUOKA | 2026.06.24 その画面は誰に何と言わせたい？ @Garyuten 合同会社CGFM 代表 金内 透（UIデザインアドバイザー） デザインツールを開く前に 受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
2. 自己紹介 @Garyuten X,Instagram PROFILE 金内 透 Toru Kanauchi 合同会社CGFM 代表 ／ プロダクトデザイナー(UI/UX) ・ファシリテーター HCD-Net認定 人間中心設計スペシャリスト 「問いとデザインの力で ビジネスを成長促進」 • Webデザイン制作歴 15年 ／ UIデザイン歴 13年 • 崇城大学デザイン学科 非常勤講師 10年目 • 「九州・福岡にバフをかける」をテーマに活動中
3. 合同会社CGFM 福岡市のUX/UIデザイン会社 システム会社の新規事業、スタートアップのデザインアドバイザーの案件多数 事業立ち上げや仕様策定段階から参加する壁打ちスタイルが得意 Before After Create a Good Future Meeting
4. UIアドバイザー/チーム育成 (官公庁・熊本市さま / SaaS企業) 教育系ファシリテーター ( NPO AIP 合同エンジニア新人研修 / 大学・短大非常勤講師) 企業研修 ファシリテーター （社員総会/チームビルディングなど） UIデザイン スタートアップ/上場企業/SaaS
5. 実績紹介 SaaSのUIデザイン実績 [ここに 現場ポケット 画面サムネ] screenshot — site / app 2022年度 グッドデザイン賞 現場ポケット 現場で働く職人さんのコミュニケーションをデジタル 化した、建設現場アプリ。 [ここに sigfy 画面サムネ] screenshot — site / app 株式会社Fusic と協働 sigfy シグフィー 保護者にとってわかりやすい一斉連絡サービス。 学校 × 保護者の連絡アプリ。
6. とあるBtoB 業界特化型の ECサイト リニューアル打ち合わせ ？？？した後に 彼が言ったセリフは？ 買わないっすわ 全国営業成績トップ のエースが 自らペルソナと シナリオを作成 顧客解像度が一番高い のは私です！ ？？？ このシナリオなら顧客 は絶対買ってくれる！
7. 前置き/前提 最初に 言葉の定義、話すこと話さないことなど
8. 今回しない話(対象外) 万能ノウハウ／Tips集／AIの使い方／ツール モックやプロトタイプの作り方 前置き このマークのスライドは 撮影禁止/SNS禁止 お断り 実際の打ち合わせ風景や写真や動画から、 生成AIで匿名化したイラスト/写真を掲載してます
9. する話 受託UIデザイナーが顧客解像度を高めるための “打ち合わせの場での確かめ方”（私たちの実践例） 大事なのは「誰の・何を解決するか」。 それを知るために泥臭くやってきたことの共有 （＝身体知・場づくり） 前置き AIはどんどん活用推進派。プロセスは自由。
10. 言葉の定義 顧客 ：そのサービスに対価を払ってくれる人 ユーザー ：実際に使うエンドユーザー（対価を払う人とは限らない） 依頼主 ：クライアント、その仕事の発注主 顧客解像度とは 顧客像がどれだけ具体的・リアルに想像できるか 顧客がどんな場面で、何に困り、どんな悩みを思い浮かべ、 何を優先して判断するのか？ 以上の定義で今⽇はお話しします
11. 私たちの仕事のやり方 会社紹介
12. CGFMのUIデザインのお仕事 サービス開発の関わり方 上流の要望定義・要件定義の手伝いからUIデザインまで PMがビジネス判断するための材料を作成・提案 ・UIデザイン 　 概念整理、利用フロー、ワイヤフレーム、 　 モック、プロトタイプ、figma納品、 　 開発後のデザインチェック ・デザインシステム構築補助 ・UIデザイナーのメンター ・デザインアドバイザー
13. サービス開発の弊社の関わり方(受託) 一次情報 ワイヤーフレーム 二次情報 UIデザイン ヒアリング インタビュー ヒートマップ ユーザー観察 要望/要求書 企画書/競合調査 機能リスト(Excel) ペルソナ ユーザーシナリオ ※マーケティング、現状調査などは省略 プロトタイプ 概念整理 業務フロー把握 依頼側 が提供 ※案件によってプロジェクト参加地点は異なります 情報設計 UI作成 実装 要求定義 ツール起動 情報が欠ける (背景/状況/心理) どの工程から参加しても依頼側からの資料を鵜呑みにせず 顧客解像度を高める
14. 自分たちがよくやっていること 圧縮された情報を擬似的に一次情報へ再展開 依頼側からの情報、テキスト ＝そぎ落とされた情報 時間・感情といった文脈が落ちている 一次情報 二次情報 擬似的に“再展開” 声に出す／演じる／壁に貼る／時間軸 失われた文脈を少しでも取り戻す ＝ 顧客解像度を少しでも高める 擬似的に再展開 情報が欠ける (背景/状況/心理)
15. 依頼主側が作った ペルソナとシナリオの検証 事例1 業界特化型ECサイトのリニューアル
16. 日本全国に支店がある塗料卸業者の ECサイト検討ワークショップのこと 演じきった後に 彼が言ったセリフは？ 買わないっすわ 全国営業成績トップ のエースが 自らペルソナと シナリオを作成 顧客解像度が一番高い のは私です！ 関係者たちの前で ペルソナになりきり シナリオを最後まで 読み上げた このシナリオなら顧客 は絶対買ってくれる！
17. ✔シナリオ ✔ペルソナ （依頼会社が作成） 情報設計 UI作成 実装 二次情報 ユーザーシナリオ 業務フロー 情報設計 UI作成 実装 要求定義 擬似 一次情報 打ち合わせ前 打ち合わせ後 関係者によるペルソナなりきり読み上げ 本当にシナリオ これでいいの？ 依頼会社提供のペルソナで、なりきり読み上げを行った結果 読み合わせするだけでも違和感に気づいてもらえた ①業界特化型のECサイト 前提が間違っていた ことに気づけた！ 要求定義 ？ 事例
18. 事例 ①業界特化型のECサイト なぜ、読み合わせするだけでも違和感に気づけたのか？ 買わないっすわ 考察 • 文章を見るだけだと違和感に気付けない • 都合の良いペルソナやシナリオを考えがち ◦ 人は自分が作ったものを信じやすい (意外と気付けない) 施策 • ペルソナになりきってシナリオを読み上げてもらう 結果 • 実際になりきり声に出し、耳にし、時間軸で流れを体験 ◦ 身体性を発揮して利用シーンを具体的に認識する ことで違和感に気づけた • 「このペルソナ、この流れでこんな行動するか…？」
19. 依頼主が作成した ワイヤフレームを検証 事例2 料金シミュレーターのUIデザイン
20. ②料金シミュレーター 顧客が持参したワイヤーフレームを元にそのまま作る？ • システム開発会社側のデザイナーとして 画面検討の打ち合わせに参加 • 打ち合わせの場でクライアントの皆様に 利用シーンの即興演劇をその場でお願い (ロールプレイング） ※無茶振りで仕事流れても良い覚悟でお願いした • 「いい客／嫌な客」の2パターンで 演じ分けてもらう どうやったら仮説を検証できるか？ 事例 ロールプレイング風景 状況 え！？そんなに安く なるんですか？ はい。まずは現在の使用状 況を教えてもらえますか？
21. 演じてもらったら、依頼主側で検証レビューが 勝手に 始まった ②料金シミュレーター 考察 • 機能ありきで作成すると利用シーン が想像しづらい 施策 • 利用シーンを演じてもらう 結果 • 利用シーンごとに必要な画面要素 や遷移などまだ検討すべきことが わかった • 開発者・デザイナー・依頼主の 全員が利用イメージを共有できた 事例 ロールプレイング→レビュー風景 今の流れだと ここから入れた方が 自然よね？ あー、確かに
22. ✔ワイヤーフレーム （依頼会社が作成） 情報設計 UI作成 実装 要求定義 二次情報 ユーザーシナリオ 業務フロー 情報設計 UI作成 実装 要求定義 擬似 一次情報 打ち合わせ前 打ち合わせ後 関係者による再現ロールプレイング 本当にこのまま 進めて良い？ 依頼会社提供の資料で再現ロールプレイングを⾏った結果 利⽤シーンをメンバーで共通認識できた ②料金シミュレーター｜顧客解像度を高めた構造(仮） ？ 誰の何を解決すれば いいかわかった！ 事例
23. UI設計前に 顧客の業務フローを理解 事例3 戸建て向け営業の 見積ツールの改修UIデザイン
24. ③戸建て向け営業の見積ツールの改修UIデザイン 営業の利用シーンが分からない → 現場を知るには？ 客先訪問シーンの “現状”と“理想”を 営業担当(依頼主側)に 即興演劇してもらう 事例 即興で書いたペーパープ ロトタイプ画面を 演者の手元にそっと置く →営業が気付き手に取る 営業「これで十分!」 →理想シーンを演じる 😕 😅 わかりやすい！
25. ✔要求定義リスト （依頼会社が作成） 情報設計 UI作成 実装 二次情報 ユーザーシナリオ 業務フロー 情報設計 UI作成 実装 要求定義 擬似 一次情報 打ち合わせ前 打ち合わせ後 関係者によるロールプレイングで再現 利用シーンが 全く想像できない💦 実際の利用者と想定顧客とのロールプレイングを行った結果 営業の利用シーンと必要機能がより明確になった 利用シーンと現状の 課題がわかった😄 要求定義 ？ ③⼾建て向け営業の⾒積ツールの改修UIデザイン 事例
26. 考察 • 要望機能一覧からの断片的な情報だけでは 本質的な課題と利用シーンを想像するのは難しい 施策 • 実際に顧客との利用シーンを現状と理想で ロールプレイングしてもらった 結果 • 現状の課題がわかり、理想の状態を知ることで要望機能 の意図を理解できた • 開発者・デザイナー・依頼者(営業)、他関係者全員が 利用イメージを共有できた • 録画→ AI文字起こし → 台詞↔画面の対応表を作成 ◦ 「ここで“こう言わせたい”」を起点に画面フローを設計 ◦ 同じ台詞を言いながらプロトタイプを触って検証 ③戸建て向け営業の見積ツールの改修UIデザイン 実際の利用者と想定顧客とのロールプレイングを行った結果 営業の利用シーンと課題背景がより明確になった 事例
27. プラン 比較表 • 「ここで“こう言わせたい”」を起点に画面フローを設計 • 同じ台詞を言いながらプロトタイプを触ってUIチームで検証→当事者にレビュー 余談 録画→ AI文字起こし → 台詞↔フロー→画面の対応表を作成 もうちょっと 何とかならない？ それじゃLINEで 送りますね 営業 お客 画面 現地調査 登録 見積作成 共有 商談用 見積調整計算 それじゃメール で送りますね すみません、社内に持 ち帰って明日までに… 理想 現在 ではこちらで どうですか？ 家族と話して 決めるから見積を ◯◯◯でください こんにちわ 現地調査します ねー どうもどうも 見積をテンプレー トから選んで… これを修正して 5プランのうち こちらが長期で オススメですね ちゃんと説明して くれてるなー いくらになるか… 信用してるが大丈 夫だろうか
28. 顧客が切望する 仕様･機能の必要性の検証 事例4 業界特化型BtoBマッチングサービス立ち上げ
29. 利用者中心の議論 あ、この流れなら いらないな 最初のセリフ 最後に言わせたいセリフまで間を埋める フローを俯瞰する大事さ（ミクロとマクロ） BtoBマッチング 新サービス立ち上げ 機能中心の議論 この機能が 絶対必要なんだ！ どうやって作るか… 見積と納期が… 本当に必要なのか よくわからない…💦 壁に残したまま数ヶ月 依頼主の顧客解像度が劇的に向上 システム会社の打ち合わせに同席 ワイヤフレームのたたき台を元に打ち合わせ 業務理解は誰もできていない状態 30分後
30. あっちの画面で処理してたら、 ここで参照できるから、 この前後にあの結果を… 問い）なぜ依頼主の顧客解像度が劇的に向上したのか？ 個人的仮説と考察） 情報を壁に貼り出すことで、事業全体を空間として捉えられた？ 業務フロー、画面構成、利用者のセリフが一つの空間に並ぶことで、 全体の流れや関係性を身体性を伴って立体的に理解できた？ 結果、顧客や業務理解が一気に深まった？ ユーザーがこの心理だから ここで行動を促せば、あっちへ の動線がより自然になるか？
31. 人間はまだ、 デジタル情報を 立体的に俯瞰できるほど、 生物的に進化できてない？ 画⾯数が多くなればなるほど、 アナログの⽅が⽴体的に情報理解できる？ 動線OKだな 本当にそうか…？ ここにもデータ 表示させたら？ せいぜい 2画面程度 問い
32. 時間あと何分？ まとめます
33. 打ち合わせの 場のデザイン 合意形成/仮説検証の場のデザイン
34. 　とある打ち合わせ風景 BtoB業界特化EC卸・販売 物理で殴る＝デザイナーの強み アナログ
36. まとめ UIデザイナーは一次情報が欲しい。 顧客･ユーザー解像度が上がるほど、 精度の高いUIを提案できる。 結果、使われるサービスを世に出す手助けができる。 一次情報を取得したり再現するような打ち合わせ場が 依頼主含めた開発メンバー全員にとって 業務理解やゴール理解のすり合わせの場となることが多くあった デザインで ビジネスを助ける
37. なりきり大事 身体知を高めよう
38. 明⽇から試せる⼀歩 ① 渡された資料を読んだ後、 　 顧客やユーザーになりきって 　 利用シーンを演じてみる ② 関係者にロールプレイを頼む ③ 全画面を印刷して壁に貼る ④ 画面にユーザーの台詞を付ける 道具も予算もいらない。受託でもインハウスでも同じ。認識合わせの場のデザイン。
39. お仕事のご相談 お待ちしてます • UIデザインチームの育成にお困りの方 • 外部の意見を取り入れたい方 • デザインシステムのAI活用検討中の方 • 仕様策定からデザイナーに参加してほしい方 ご清聴ありがとうございました 懇親会 楽しみ
40. ⼤事にしてる合い⾔葉 仮説検証できるものを 仮説の検証を 次の仮説を⽴てるために 早く作って 早く試して 早く失敗する 遅く考える 顧客理解や課題に対して