Vibe Coding PM デザイナーズガイド：コードを書かずに製品プロトタイプを作成する
2025年には、アンドレイ・カルパシー氏のVibe Codingコンセプトにより、エンジニアリングのバックグラウンドを持たない1万人以上のプロダクトマネージャーやデザイナーが、1ヶ月以内にインタラクティブな製品プロトタイプを完成させることが可能になった。これは理論ではなく、まさに今、現実のものとなっている。
Vibe Codingは、プロダクトマネージャーの働き方を根本から変革しました。以前は、デザイナーがクリック可能なウェブページをエンジニアリングチームに見せるまで3ヶ月も待たなければならないこともありましたが、今ではCursorやClaude Codeを使えば、Figmaのデザインを週末のうちに実際のReactコンポーネントに変換できます。プロダクトマネージャーはもはや静的なFigmaページに縛られることなく、48時間以内にユーザーテストに対応したインタラクティブなプロトタイプを作成できるようになったのです。
しかし、この機能のコストはどれくらいなのでしょうか？なぜ、最初の成功した製品の維持管理が悪夢になってしまう人がいるのでしょうか？この記事では、Vibe Codingがいかに「素晴らしい」かを語るのではなく、プロダクトマネージャーやデザイナーが知っておくべき3つのこと、つまり、ツール選択の真のコスト、実際に行き詰まる可能性のある具体的なポイント、そして機能Aを作成したからといって機能Bを作成できるとは限らない理由について掘り下げていきます。
Vibe Codingは、プロジェクトマネージャーやデザイナーにとってどのような変化をもたらすのでしょうか？
Vibe Codingは、プロジェクトマネージャーやデザイナーにとってどのような変化をもたらすのでしょうか？
Vibe Codingは、従来の製品開発の枠組みを打ち破ります。従来、プロダクトマネージャーやデザイナーの仕事は、エンジニアへの納品で終了していました。しかし今では、インタラクティブなプロトタイプの実装に直接参加できるようになりました。
この変化は、以下の3つの主要な変更をもたらします。
まず、検証速度が向上します。アイデアからテスト可能なインタラクティブなプロトタイプの作成までの時間が、数週間から数日に短縮されます。
第二に、フィードバックループが短縮されます。設計者はエンジニアからのフィードバックを待つ必要がなくなり、自分の設計がコードにどのように反映されているかを即座に確認できるようになります。
第三に、チーム内のコミュニケーションコストが削減されます。静的なFigmaデザインは誤解を招きやすいですが、インタラクティブなプロトタイプであれば、全員が同じものを見ることができます。
3つの主要ツール（Claude Code、Cursor、v0.dev）の比較 - 実際の違い
間違ったツールを選ぶと、最初の2～3週間で何度も同じ落とし穴にはまることになります。Claude Code、Cursor、v0.devはどれもコードを生成するように見えますが、ワークフロー、学習曲線、適用シナリオは全く異なります。
クロード・コード：人々と話すための最も近い入り口
Claude Codeは、Anthropic社が提供するCLIツールで、手続き型コードを書いたことがない人でも使えるように設計されています。ターミナルで自然言語を使ってやりたいことを説明するだけで、Claudeが直接ファイルを生成したり、コードを修正したり、実行したりしてくれます。例えば、デザイナーが「Tailwind CSSを使ったダークテーマのログインページが欲しい」と言えば、Claude Codeは30秒以内にブラウザでクリック可能なHTMLファイルを生成します。
利点：学習曲線がゼロ、最も直感的な自然言語インターフェース。
デメリット：コードの詳細を正確に制御することが難しく、大規模プロジェクトでは制御不能になりやすい。
カーソル：より詳細な制御を求めるデザイナー向け
CursorはVS Codeをベースに開発されており、AIによる自動補完機能と部分編集機能を内蔵しています。ファイル全体を再生成するのではなく、特定のコードスニペットのみを修正することも可能です。細部まで調整したい、ある程度の技術スキルを持つデザイナーに最適です。
v0.dev: Vercel の高速 UI コンポーネント ジェネレーター
v0.devはReact UIコンポーネントの生成に特化して設計されており、ビジュアルプロトタイプを迅速に作成する必要のあるプロダクトマネージャーに最適です。共通のデザインシステムが組み込まれており、最高品質のコードを生成します。
要件定義から製品プロトタイプ作成まで：プロダクトマネージャーとデザイナーのための実践的なワークフロー
製品開発担当者とデザイナーは、実用的な製品プロトタイプを作成するために、構造化された要件定義書と視覚的な参考資料を用いて事前準備を行うべきである。
あるデザイナーがClaude Codeに50語程度の曖昧な説明を与えたところ、使い物にならないコードが生成された。しかし、同じデザイナーが構造化された要件定義書と視覚的な参考資料を用いることで、クリック可能なReactコンポーネントを作成した。この違いは、事前の準備というたった一つの点にある。
ステップ1：要件定義書は「AIが実行できる内容」という形式で記述する必要があります。
プロダクトマネージャー（PM）は、エンジニアが読むための要件定義書を作成することに慣れています。しかし、そのような文書はVibe Codingには曖昧すぎます。
従来の要件：「ユーザーは商品をショッピングカートに追加できる。」
Vibeコーディング要件：「『カートに追加』ボタンをクリックすると、ページ右上隅のショッピングカートアイコンの数字が0から1に変わり、『カートに追加されました』という緑色の確認メッセージがポップアップ表示され、3秒後に自動的に消えます。ショッピングカートアイコンには、Heroiconsのショッピングカートアイコン（色#10B981）を使用します。」
ステップ2：言葉による説明ではなく、視覚的な参考資料を提供する。
AIモデルは、視覚的な参照情報を扱う際に優れた性能を発揮します。「モダンなダークテーマ」と言葉で説明するよりも、FigmaデザインのスクリーンショットやDribbbleのリンクをアップロードする方が効果的です。
ステップ3：段階的に進め、一度にすべての機能を要求しないでください。
まず、ログインフォームの基本バージョンを作成し、次に検証ロジックを追加し、最後にコミュニティログイン機能を追加します。各ステップは、AIに明確な目標を与えます。
成果を上げた後で誰も教えてくれない3つの落とし穴
成功を収めた後に陥りやすい3つの落とし穴：機能の複雑化、指示の難易度の上昇、そしてチームが錯覚に陥ること。
最初のインタラクティブなプロトタイプを公開した後、チームは誤解に陥るかもしれません。機能AがClaude Codeで実装できるのだから、機能Bも同様に実装できるはずだ、と。しかし、現実は厳しいものです。2つ目の機能は、多くの場合、1つ目の機能の2.5倍も複雑です。しかも、すでに最もシンプルなプロンプトしか使っていないのです。
落とし穴１：機能の複雑さは指数関数的に増加するが、ツールの効率は直線的に低下する。
デザイナーはv0.devを使って20分かけてログインフォームを作成した。その結果を見たチームは、すぐに「ソーシャルログイン、二段階認証、パスワードリセット機能」の追加を要求した。
同じツールでも、今では4時間に加えて15回のプロンプト反復が必要になります。これはツールの性能が低下したからではなく、指数関数的な複雑さの領域に突入したためです。シンプルなUI要素はAIで素早く生成できますが、状態管理、API統合、エラー処理といった機能になると、AIの効率は劇的に低下します。
落とし穴その2：プロンプトプロジェクトが新たなボトルネックになる
最初の課題は「ログインページを作成してください」というシンプルなものですが、10番目の機能を作成する頃には、エッジケース、エラーメッセージ、アニメーションの詳細などを含めた、500語程度の詳細な課題を作成する必要があります。
この段階で実際に行っていることは、「コードを書いていない」ということではなく、別の形式のコードを書いているということです。ただ、それが自然言語で書かれているだけです。
落とし穴３：隠れた技術的負債の蓄積
生成されるコードは、モジュール設計が欠けていることが多い。最初の関数は問題なくても、5つ目の関数になると、プロジェクト全体が相互依存のコードの塊になり、1つの部分を変更すると他の3つが壊れてしまう。
コスト分析：バイブコーディングは本当にコスト削減につながるのか？
あるデザイナーはCursorを使ってインタラクティブなプロトタイプを作成するのに8時間を費やし、エンジニアを雇う場合の週給4万ドルを節約できたように見える。しかし、ツールのサブスクリプション料金、時間投資、技術的負債などを考慮に入れると、その数字は崩れ去る。
Vibe Codingの真のコストは、コードそのものにあるのではなく、隠れたメンテナンスの負担にある。
ツールの購読料
Claude Codeは月額20ドル、Cursorも月額20ドル、v0.devは無料ですが利用制限があります。これらのツールを使用する3人チーム（プロジェクトマネージャー、デザイナー、パートタイムエンジニア1名）の場合、月額約40ドルの費用がかかります。
これは安価に見えますが、より多くのAPI割り当て量が必要な場合や、プロフェッショナル版が必要な場合は、費用は倍になります。
隠れた技術的負債
プロトタイプを3か月以内に製品版コードに変換する必要がある場合、パートタイムのエンジニアはアーキテクチャ全体を再検討しなければなりません。その結果、モジュール設計、テストカバレッジ、ドキュメントが不足したコードが作成されることがよくあります。
リファクタリングは、多くの場合、ゼロから書き直すよりもコストがかかる。
実際の時間投資額の計算
デザイナーはCursorを使って8時間かけてプロトタイプを作成し、一見すると40時間分のエンジニアリング時間を節約したように見える。しかし実際は：
- デザイナー向け学習ツール：5時間
- デザイナーのデバッグと反復作業：12時間
- エンジニアによるレビューとリファクタリング：20時間
- 合計時間：37時間（実際はそれ以上）
真のコスト削減は、「本格的な開発」段階ではなく、「迅速な検証」段階で実現する。
よくある質問
これら3つのツールはそれぞれ異なる用途があります。
クロード・コードは初心者向けです。
プログラミング経験が全くない方でも、Claude Codeは分かりやすい自然言語インターフェースを提供します。日常的な言葉で要件を説明するだけで、あとはClaudeがすべて処理してくれます。
カーソルは、より詳細な制御を求めるデザイナーに適しています。
CursorはVS Codeをベースに開発されており、AIによる自動補完機能と部分編集機能を内蔵しています。ファイル全体を再生成するのではなく、特定のコードスニペットを微調整したい場合は、Cursorの方が適しています。
v0.devは、UIコンポーネントを迅速に生成するのに適しています。
Vercelが提供するv0.devは、React UIコンポーネントの生成に特化して設計されています。視覚的なプロトタイプを素早く作成するだけで、複雑なロジックを必要としない場合は、v0.devが最も効率的です。
選考における重要な要素
選択の鍵は、ツール自体を習得するためにどれだけの時間を費やす覚悟があるかです。時間があまりない場合はClaude Codeを、より細かい調整の余地を求める場合はCursorを、UIコンポーネントだけが必要な場合はv0.devを選択してください。
結論
Vibe Codingは、プロダクトマネージャーやデザイナーの仕事の境界を変えました。しかし、エンジニアの代替となるものでも、技術的な思考を省略できる近道でもありません。
Claude Code、Cursor、v0.devはそれぞれ独自の強みを持っています。最適なツールを選ぶには、プロトタイプの複雑さとチームのスキルレベルを考慮する必要があります。
要件定義から製品検証に至るまでの全プロセスにおいて、最もよくある落とし穴は、ツールそのものではなく、生成されたコードの品質を過大評価すること、保守コストを過小評価すること、そして開発チームとのコミュニケーション不足にある。
コスト削減は確かに可能です。ただし、早期検証を加速するためにVibe Codingをいつ使用すべきか、そしていつ作業を中止して専門のエンジニアに引き継ぐべきかを理解していればの話です。
このガイドの価値は、自動化を約束するのではなく、意思決定のための枠組みを提供する点にある。
要点整理
- Vibe Codingは、プロダクトマネージャーやデザイナーの能力を拡張するものであり、開発作業の代替となるものではありません。アイデアを迅速に検証するために使用されるものであり、長期的な製品保守のために使用されるものではありません。
- Claude Codeはロジック集約型のバックエンドプロトタイピングに適しており、Cursorはフロントエンドインターフェースの反復開発に最適で、v0.devはシステムコンポーネントの生成に特化して設計されています。ツールは評判ではなく、タスクの種類に基づいて選択してください。
- 要件定義から実用的なプロトタイプ作成までのワークフローにおいて、コミュニケーションコストはしばしば見落とされがちである。非技術系の担当者がコード生成の限界を理解できるよう、時間を確保する必要がある。
- 品質の過大評価、保守コストの過小評価、混乱した引き継ぎという3つの大きな落とし穴は、明確な受け入れ基準と開発チームとの事前の合意によって回避できる。
- コスト分析は包括的な視点で行う必要がある。明確なプロトタイプの境界がない限り、節約できた開発時間はデバッグ、リファクタリング、ドキュメント作成に費やされてしまう可能性がある。
- 意思決定の鍵は、ツールの性能の高さではなく、検証対象をどれだけ明確に理解しているか、いつ反復作業を終了すべきか、そしていつエンジニアに引き継ぐべきかをどれだけ明確に理解しているかにある。
さあ、あなたが取り組んでいる製品要件を一つ選び、この記事で提供されているツールを使って一度評価し、その実験結果を@hogan.techで共有してください。
参考資料
- Vibe Codingは、金融取引、医療データ、金融システム、企業機密情報、顧客個人データ、パスワード、または大規模な公式システムに関わるプロジェクトには推奨されません。 — frankchiu.io
- Claude Codeは、Vibe Codingの初心者におすすめのAnthropic CLIツールです。 — ウルトララボ・トゥワ
- バイブコーディングの定義：開発者が自然言語で望ましい結果をAIに説明し、AIがコードを生成およびデバッグする。開発者は結果が「しっくりくる」まで方向性を指示する。' — poneyplanet.com
