Claude Designで”筋の良い”プロトタイプを生成つくる

今日の仕事でClaude Designを使って、一発（＝Claude Codeとの1回のラリー）でかなり良い感じのプロトタイプをつくることができたのでそのやり方を書き残しておく。

Claude Designとは
Claude Designで”筋の良い”プロトタイプを生成つくった方法

Claude Designとは

すでに業務やプライベートでClaude Designを使っているひとはそれなりにいるかもしれないが、自分のためにもあらためてClaude Designについて載せておく。Claude DesignなのでClaudeに聞いたことをそのまま載せる。

一言で言うと テキストで説明するだけでプロトタイプやスライド、ランディングページなどのビジュアルを作れるAIデザインツール。

できること

UIプロトタイプ・ワイヤーフレーム作成

スライド・ワンページャー・LP制作

生成後にチャットで細かく修正

誰向け？ デザイン経験のない創業者・PM・マーケターが、アイデアをビジュアルで伝えるための製品として設計されています。

最大の特徴 デザインが完成したらClaude Codeに渡してそのまま実装コードに変換できる「アイデア → デザイン → コード」の一気通貫フロー。

使える条件 Claude Pro / Max / Team / Enterpriseプランのみ（2026年4月〜リサーチプレビュー中）
Claudeで調べてもらった

類似ツールでいうと、v0やFigma Make、Stitchなどだろう。

Claude Designで”筋の良い”プロトタイプを生成つくった方法

僕はBtoB SaaSの企業で働いているので、BtoBのプロダクト開発をイメージして欲しい。

プロトタイプのスコープになる企業の業務をClaudeに頑張ってもらって超具体的に言語化する
- 「Claudeに」と書いてあるが、生成AIツールであればChatGPTでもGeminiでも問題ない
- 「超具体的に言語化する」というのがミソであり、架空の会社（会社名、業種、従業員数など。ペルソナをつくるみたいな考え方に近い）を考えてもらい、対象業務の一連のプロセスを具体的な数値込みで言語化してもらった（もちろん数値は全てダミー）。
  - 例えば、「◯◯◯◯をしたら、◯◯部門は◯◯部門に◯◯◯◯の依頼をする」「◯◯◯◯が終わると、◯◯部門は◯◯◯◯円の◯◯が◯◯する」みたいな感じ
（これは生成AIを使う場合は当たり前の所作ではあるが）AIのアウトプットで意味わからないところとか、補足したいところは数ラリー壁打ちして詳細に、腹落ちできるレベルまで持っていく
- ここまで言語化できれば一旦は抜け漏れなさそうと思ったら生成AIにmd形式でアウトプットしてもらう。なぜmd形式にするかはそっちの方がツールが変わっても情報を理解しやすいのかな？というくらい。
- 上記の「抜け漏れ」については個人の感覚でOK。Claude Designなどのプロトタイピングツールで形にしてもらってみると新しい考慮ポイントや気づけてなかった抜け漏れが出てくるかもしれないが、むしろ形にしないと気づけなかったことだとも言えるのでプロトタイプをつくるまでは時間をかけすぎないようにするのが良さそう
Claude Designでプロトタイプをつくる
- Claude Codeにインプットするコンテキストは手順2で生成したmd形式のテキストのみ
  - 「この内容をもとにこの業務の課題を解決するプロトタイプをつくって」みたいな感じで依頼する
- デザインシステムを設定すればプロトタイプのUIがかなり自社プロダクトナイズドされて良い
- あとはチームに共有できる状態にするために細かいところはClaude Designに依頼して修正なりをしてもらえば良い（個人的にはプロダクトのイメージでありこれの通りに実装することを想定していないという前提をちゃんと伝えれば良いと思うので、あまり作り込まなくて良いと思っている派）

これまで、特定業務（スポット）での課題やペルソナを事細かくインプットしてv0とかでプロトタイプをつくったことはあったけど課題ベースではなく業務ベースでプロトタイプをつくるアプローチも意外とよかった。まあ、プロダクトのフェーズにもよると思うけど。

今回やりたかったのはチームメンバーと議論するための動くアウトプットが欲しかったのでサクッとつくったけど、「課題ベースではなく業務ベースで」ではなく「業務ベースで+課題ベース」だとさらに高精度なプロトタイプがつくれると思った。それは当たり前か。

ChatGPTが出てきたばかりのときはAIツールの性能の問題により、それを使う人の力量が大きな変数だった（だから「プロンプトエンジニアリングという言葉があった）が、近年のAIツールの性能の強化によって、変数の大きさに変化が起こっていると感じる。現時点ではまだ雑に依頼すると想定していたものと違った、みたいなケースはあるにはあるが、Claude Designに限らずに雑なインプットに対しては自分が理解するために「この辺教えてください」と質問してきてくれるので、AIツールと人間のコンテキストの差は埋まっていくんだろうなと思った。

このブログで書いたHowも今後は意味のない、時間の無駄でしかないプロセスになるのかもしれない。