ドラッグ＆ドロップを超えて ― 「言葉で書く開発

ChatGPT で HTML を修正したり、Lovable でウェブサイトを作った経験はあっても、Cursor や Windsurf が何者かは分からない——。<br>
本稿はそんな読者へ向けて、Vibe Coding の背景・仕組み・ツール選定・実践手順までを 日本語 で徹底的にまとめました。

1｜Vibe Coding とは何か？

定義
 Vibe Coding（vibecoding）とは、自然言語プロンプト を大型言語モデル（LLM）へ投げかけるだけで、AI が丸ごとソースコードを生成・改修し、人間はテストと意思決定に専念する開発スタイルです。提唱者は元 OpenAI 研究ディレクターの Andrej Karpathy。彼は 2025 年2 月 X の投稿で「新しいコーディング、それが vibe coding だ」と語りました。X (formerly Twitter)Ars Technica

従来手法との違い

手法主な操作自由度位置づけ
ノーコード／ローコードビジュアルで部品を拖拉UI の範囲で制限テンプレ量産に最適
Vibe Coding“文章で要件を書く”LLM が生コード生成プロトタイピング〜本番

IBM はこの潮流を「Intent is the new syntax――意図から直接実行可能コードへ」と評しています。IBM

2｜2025 年にブレイクした 3 つの理由

  1. キーマンの命名
     Karpathy の tweet が瞬時にバズり、TikTok や Hacker News で議論が拡散。Hacker News
  2. 巨額 M&A
     2025 年5 月、OpenAI は AI IDE「Windsurf（旧 Codeium）」を約 30 億ドルで買収することで合意。Vibe Coding 市場に火を付けました。Axios
  3. 実運用の成功例
     オーストラリア国民銀行（NAB）は Amazon Q Developer のコード提案を 50 % 採用と公表し、企業導入への追い風に。AU About Amazon

3｜ワークフローを分解して理解する

フェーズあなたの行動AI の役割コツ
Prompt日本語や英語で要件を書く目的を解析し設計を立案大きな要件は小分けに
Generate結果を待つUI／API／テストコードを生成言語・FW を明示
Review実行・単体テスト質問に回答・再生成Git でスナップショット
Iterate追加機能・性能改善複数ファイルを再構成各ラウンドで自動テスト

まるで “超高速ペアプロ”——あなたが仕様を語り、AI が即座にコードを書く。

4｜ツール早見表 — ChatGPT だけじゃない

名前種別ひとことで学習難度★代表価格
ChatGPTチャット型 LLMもっとも一般的な AI★無料／Plus $20/月
Claudeチャット型 LLM20 万以上の長文脈★無料／Pro $18/月 Anthropic
Gemini Advancedマルチモーダル LLMDocs/Gmail に統合★$19.99/月 Google One
Lovable.aiAI サイト生成器“Idea→サイト” 数十秒★★Pro $25/月〜 docs.lovable.dev
CursorAI IDEVS Code 派生・リファクタ特化★★★Pro $20/月cursor.com
Windsurfクラウド AI IDEOpenAI が買収、チーム協調★★★Pro $15/月Axios

（★が多いほどプログラミング前提知識を要する）

5｜実践ステップ：母の日 LP を 1 → 4 段階で仕上げる

Lovable で MVP

「母の日ランディングページをピンク基調で。カウントダウンとリードフォーム付き」

30 秒でホスティング済みのページが完成。

ChatGPT でコピー修正

 「“早割” を “24 時間限定” に、CTA ボタンを #B94A6F に」

Cursor で深掘り
git clone <repo>

cursor .

 HeroSection.tsx を選択 →
「背景をガラスモーフィズムの暗色に、FAQ セクションを追加」

Windsurf でチーム開発へ
 PR 画面で入力：
「重複 CSS を Card.css に抽出し、Jest スナップショットを生成」

6｜プロンプトエンジニアリング 4 つの鉄則

  1. 階層化：ビジネス目標 → UI → ファイル単位の順で。
  2. Few-Shot：理想のアウトプット例を添付。
  3. Chain-of-Thought：
    1)「手順を設計して」→ 2)「手順1を実装して」…と段階指示。
  4. テストも生成：


    「上記コードに対応する Jest テストと、各アサーションの意図を説明して」

7｜リスクとガバナンス

リスク具体例対策
ライセンス混入GPL コード断片SPDX スキャン＋レビュー
脆弱性XSS・SQLiSAST/DAST＋e2e テスト
コスト肥大GPT-4o トークン消費クォータ＋キャッシュ
可読性低下コメント不足AI にドキュメント生成を要求

8｜キャリア／市場動向

  • NAB は AI 提案コード採用率 50 % を公式発表。AU About Amazon
  • 注目職種
    1. Prompt Engineer / AI Pair-Programming Lead
    2. AI Governance Engineer（セキュリティ・ライセンス管理）
  • 必須スキル
    1. 問題分解力
    2. UX を意識した製品感覚
    3. テスト & セキュリティ知識

9｜30 日スプリント学習プラン

週目標チェックリスト
Week 1プロンプト基礎ChatGPT で Python スクリプト ×3
Week 2MVP 公開Lovable で LP 作成、10 件リード取得
Week 3IDE 運用Cursor で UI リファクタ＋自動テスト
Week 4協調開発Windsurf で CI/CD、コードレビュー実践

10｜まとめ

Vibe Coding により、開発は「キーボード操作」から「対話による創作」へ進化しています。
ChatGPT でプロンプト力を磨き、Lovable で高速プロトタイピング、そして Cursor / Windsurf で本格的なリファクタとコラボを行えば、アイデア → 製品 のサイクルを劇的に短縮できます。勝負を分けるのは「タイピング速度」ではなく、課題を正しく言語化し AI を導く能力 です。