共通イメージなしに会話を進めるな：AI×Mermaid×FigmaでPdMとの仕様策定を変えた話

Zennの記事で公開用

Transcript

1. 共通イメージなしに 会話を進めるな AI × Mermaid × Figma で PdMとの仕様策定を変えた話 1
2. こんな経験、ありませんか？ 長々と説明したのに「つまり、どういうことですか？」と聞き返される 合意したはずなのに、後から認識のズレが発覚する Slackで何往復もして、結局会議を設定し直す これを「空中戦」と呼んでいます 2
3. 空中戦の本質 「図がない」ことが問題ではない 「会話の参加者が、 頭の中で違うものをイメージしたまま 話を進めていること」が問題 3
4. 図解が効くと気づいたきっかけ 海外メンバーとの仕様策定 英語でのテキストベースのやり取りではニュアンスが伝わりきらない → 図を一枚出したら一発で理解してもらえた 図には翻訳が要らない 事業側ステークホルダーとの仕様策定 何度やり取りしても進まなかった議論が → 図を一枚用意したことで一度の会議で合意 4
5. よくある認識ズレの例 「AページからBページに遷移する」 エンジニアのイメージ URLが変わるページ遷移 ブラウザバックで戻れる PdMのイメージ 一覧を残したまま モーダルで詳細表示 → 実装完了後に発覚すると手戻りが大きい 5
6. 図があると「赤入れ」ができる 人は「何もない状態から意見を出す」のは苦手 でも「目の前にあるものに対してツッコミを入れる」のは得意 「どんな画面にしたいですか？」→ 答えにくい 「この図、ここが違います」→ できる 図の完成度は問わない。ラフで十分。 大事なのは**「相手が反応できる何かを用意すること」** 6
7. 課題：図を作るのが面倒 Figmaで一から作ると時間がかかる 仕様変更のたびに図を更新するのが億劫 会議の前に間に合わせようとすると深夜作業になる AIを活用してこの問題を解消する 7
8. 解決策：3ステップ 1. 仕様書テキストをAIにそのまま渡す 2. 生成されたMermaidをFigmaにペースト 3. 付箋で図の上から議論・合意 修正が必要なら「AIに再指示 → 貼り直し」だけ 8
9. Step 1：プロンプトはこれだけ 以下の仕様をMermaid形式のフローチャートで 図にしてください。 専門用語が出てくる場合は、注釈を加えるか、 わかりやすい言い回しに置き換えてください。 --- （仕様書テキストをそのままペースト） 特別なプロンプトエンジニアリングは不要 9
10. Step 2：FigmaにコピペするだけでOK 1. 生成されたMermaidコードをコピー 2. Figmaのキャンバスにペースト 3. 完了 2026年3月時点、プラグイン不要 10
11. Step 3：付箋で図の上から議論 Figmaの付箋機能を使って、図の上で直接やり取り 「ここの処理、もう少し詳しく」 「この条件分岐、パターンが抜けてない？」 「この矢印の意味がわからない（PdMより） 」 テキストの議論ではなく、図を起点に議論する 11
12. 図解 = Mermaidだけじゃない 目的は「共通イメージを持てる形で出すこと」 状況 使うもの フローや条件分岐を見せたい Mermaid（フローチャート） APIの通信の流れを伝えたい Mermaid（シーケンス図） 状態の組み合わせを整理したい Markdownの表 内容をチームに共有したい Marpでスライド化 12
13. 落とし穴と正直な話 1. 生成に少し時間がかかる 会議直前ではなく、前日までに用意しておくのが現実的 2. Mermaidの修正が難しい 手で直接編集せず、日本語で指示してAIに再生成させる 3. 図のバージョン管理は未解決 現時点では「最新版だけFigma上に残す」運用でなんとかしている 13
14. まとめ 課題 解決策 口頭だけでは伝わらない 図で「見せる」 図を作る時間がない AIにMermaidを生成させる Figmaへの移植が面倒 コピペだけでOK 言語の壁がある 図は言語を問わない 認識のズレを議論しにくい Figmaの付箋で図上でやり取り 「共通イメージを持たないまま、会話を進めるのをやめる」 14
15. 図の完成度は問わない 「この理解で合ってますか？」と 図を一枚出すだけで、 議論の土台ができます。 プロセスやツールよりも個人と対話を — アジャイルソフトウェア開発宣言 15