バイブコーディング入門 — AIに「雰囲気」で指示してアプリを作る新手法
約8分で読めます
バイブコーディング入門
「バイブコーディング」とは、従来の仕様書ベースの開発ではなく、AIに雰囲気（バイブ）で指示してコードを生成する新しい開発手法だ。
バイブコーディングとは
「こんな感じのダッシュボードが欲しい」「Appleっぽいデザインで」「ダークモードで洗練された感じ」— このような曖昧な指示からAIがコードを生成する。
従来の開発との違い:
| 従来の開発 | バイブコーディング |
|---|---|
| 詳細な仕様書を作成 | 雰囲気で指示 |
| 設計→実装→テスト | 指示→生成→調整 |
| 数時間〜数日 | 数分〜数十分 |
| プログラミング知識必須 | デザインセンスが重要 |
3つのツールの使い分け
Claude Code — 本格的なアプリケーション
ターミナルベースのエージェント型コーディングツール。ファイルの読み書き、テスト実行、git操作まで自律的に行う。
適している場面:
- フルスタックアプリケーション
- 既存コードベースの改修
- CI/CDパイプラインの構築
Cursor — リアルタイムコーディング
VSCode拡張としてのAIコーディングアシスタント。コードを書きながらリアルタイムで提案を受けられる。
適している場面:
- 新規ファイルの作成
- コードの部分的な修正
- デバッグ
v0 — UIプロトタイピング
ブラウザベースのUI生成ツール。テキスト指示からReact/Next.jsコンポーネントを即座に生成。
適している場面:
- UIのプロトタイプ作成
- コンポーネントの試作
- デザインの方向性確認
バイブコーディングのワークフロー
1. v0 でUIのプロトタイプを生成（方向性の確認）
2. Figma Make でデザインを作り込む
3. Claude Code + Figma MCP で実装
4. Cursor で微調整注意点
- AIが生成したコードは必ずレビューする
- セキュリティ（SQLインジェクション、XSS等）はAI任せにしない
- 「雰囲気」で指示するが、成功条件は明確に定義する
関連記事
A
Agentive 編集部
AIエージェントを実際に使い倒す個人開発者。サイト制作の自動化を実践しながら、その知見を発信しています。