ClaudeとMiro AIを試してみたら、ユーザーフロー作成の工数が激減した話
先日、事業側から「新たにトライしたい施策があるから相談したい」との連絡を受けて、ミーティングが設定されました。
話を聞くと「有料会員を増やすために、まずは無料会員（チャット相談のみ可能なステータス）を作り、そこから有料プランへ移行を促したい」という構想とのこと。
「なるほど、それ自体は面白いアイデアだな…」と思いながら詳しくヒアリングしていくと、依頼内容は
「チャット会員に登録するためのページを作ってほしい」
という具体的な実装（How）の話だけで止まっていました。
これは 「あとで色々大変になりそう…」という予感が…
やっぱり施策全体の要件を整理しないまま、いきなり実装に突入すると、後から「こんなはずじゃなかった」が頻発するケースが多いんですよね。
「あ、ユーザーフローが必要だ」
そこで改めて施策の背景や目的、想定するユーザーの行動を整理してみると、事業側は 「各会員ステータスごとにマーケティング施策を打ちたい」 と考えていることがわかりました。（整理してよかった…）
具体的には、
無料チャット会員から有料会員へアップセル
各ステータスに応じたメルマガやキャンペーン告知
などを展開していきたいようです。
この時点で「ユーザーがどんなフローでステータスを移行し、そのタイミングでどんな施策を打つのか？」を全体像として描かないと混乱しそうだな、と思いユーザーフローを作ることにしました。
AIでフロー図を作れないか試してみる
従来ならFigmaやMiroを使って手作業でフローを描いていたのですが、ちょうどAI活用を始めたばかりだったので
「せっかくだし、AIでフロー図を自動生成できないかな？」とひらめきました。
以前から「Mermaid記法」というテキストベースでフローチャートを生成できる仕組みがあるのは知っていましたし、Notionでも対応しているので 「これをうまくAIに書かせればフロー作成が楽になるのでは？」 と思ったのです。
ChatGPTを使った最初の挑戦
まずは慣れ親しんだChatGPTで実験開始。考えているユーザーストーリーをサクッと説明し、
「チャット会員→有料会員への移行フローを書いて」
「Mermaid記法で生成してほしい」
とお願いしてみたところ、すぐにそれっぽいフローコードが出てきました。Notionに貼り付けてみると確かに可視化されます。「おお、意外といける！」 とちょっと感動したんですが、いざ細かい修正をしたくなると、再度ChatGPTに文章で指示を出したり、コードを手動で直したりする必要があってちょっと手間でした。
Claudeのプレビュー機能が思いのほか便利だった
そこで次に試したのが Claude。
こちらは Mermaid記法を入力するとプレビューできる機能 があり、生成されたフローをすぐに視覚的に確認できます。たとえば「ここのステータスをもう少し詳しく描いて」とか「有料会員登録時の遷移を矢印で追加して」といった指示をしながらのでめちゃくちゃラクでした。
結果、ChatGPTで細かく修正指示を出していたときに比べると、かなりスムーズにユーザーフローが完成。
自分で書いてたらどんだけ時間かかってたことか…！！
「こりゃ便利…！！」 と手応えを感じたんですけど、ここで1つの問題にぶち当たりました。
Mermaid図が大きくなりすぎる問題
実際に描いてみると、会員ステータスが増えるわ、マーケ施策が複数走るわで、フロー図がかなりボリューミーになってしまったんです。Mermaid図は拡大・縮小できないので、文字がどんどん小さくなってしまい、細部が見にくくなるというデメリットが…。
「一応Notionで表示はできるけど、これだと全体像が掴みにくいなあ」 と困ってしまいました。
Miro AIで解決なるか？ 試行錯誤してみた
「だったらMiroやFigJamのような、キャンバスを自由に拡大・縮小できるツールへ移せばいいんじゃないか」と思い、さっそく実験することに。
まず試した方法
Claudeにフローを自然言語で説明させて、それをAIに読み込ませる → ダメでした…（うまく再現してくれない）
次に試した方法
Mermaid記法のコードをそのままMiro AIに渡してみる → これが成功！
Miro上でほぼ同じフローが自動生成されたんです。しっかりと拡大・縮小できるから、全体像も細部も確認しやすい。
現状では色の指定はできないようなので、コードからclass指定などは削除してmiro AIに読み込ませてください。
本当はFigjamでできたらよかったのですが…。FigJamではまだうまくいかず。今後アップデートで対応してくれることを期待しています。
まとめ：AI×Mermaid記法でフロー作成はかなり快適になった
今回の施策は、最初に事業側か「チャット会員用のページを作ってほしい」というHowレベルの依頼が来たのですが、実際には 全体のユーザーフロー を整理する必要がありました。
そして、そのフローを AI×Mermaid記法 で作ることで、従来の手動作成より手間が大幅に減り、修正もしやすいと実感。
Miroなどのツールと組み合わせれば、表示の問題もほぼ解決できることが分かりました。
「ユーザーフローを整理したいけど面倒だな…」と感じていた方にはぜひ試してみる価値があると思います。