Shuichiro Ogawa
English

ノート · updated 2026-06-27

Vibe Coding とUIエージェント：自然言語による制作とその境界

Karpathy が2025年2月に投げた 'vibe coding' の一言が1年で産業用語になった。v0 / Bolt / Lovable / Replit Agent 等のUI生成エージェントがその基盤を担うが、Willison の 'vibe engineering'、Osmani の 'AI-assisted engineering' との区別が制作品質の分水嶺になる。

目次（4）
  1. UI生成エージェントの現況
  2. Vibe Coding の分水嶺
  3. デザイン制作への含意
  4. Footnotes

2025年2月、Andrej Karpathy が X に投稿した一文が新しい用語を生んだ。

“There’s a new kind of coding I call ‘vibe coding’, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.”1

1年後の2026年2月、Karpathy 自身が振り返っている。 「シャワー中の思いつきを投げただけの tweet が $10B 以上の産業を生んだ」と2。 この間に v0、Bolt.new、Lovable、Replit Agent といったUI生成エージェントが急速に普及し、自然言語からアプリケーションを生成する行為が日常化した。

関連: 生成AI活用エンジニアリングの系譜とデザイン評価（vibe coding から harness engineering までの分類とデザイン関与）／デザインエージェントツール 2026：自律制作の現在地（デザインツールのエージェント化）／MCP とデザインシステム：エージェント統合の基盤層（MCP 統合）／生成AI 産業界トピック10選 × デザイン職能・キャリアへのインパクト序列（2026年6月）（産業トピック序列で vibe coding は上位）。

UI生成エージェントの現況

自然言語からUIやアプリケーションを生成するエージェントツールは、2026年6月時点で次の4つが主要なプレイヤーである。

v0（Vercel）は、UI コンポーネント、ランディングページ、ダッシュボードの生成を主な強みとする。 2026年2月に GitHub リポジトリインポートと Git パネルを追加し、非エンジニアでも本番コードを push できる設計に転換した3。 Team プラン $30/ユーザー/月でトークン課金制を採用している。 公式が認める制約として、バックエンドや認証ロジックは外部ツール依存であり、複雑なアプリ生成は月次クレジットを短期に消費する。

Bolt.new（StackBlitz）は、ブラウザ内サンドボックスでフルスタックアプリケーションを生成する。 2025年10月の v2 で認証、エッジ関数、ファイルストレージを統合した4。 Pro $25/月で月10Mトークン、未使用分の翌月繰り越しが可能。 バックエンドは Node.js/Express のみ対応という制約がある。

Lovable は React + Supabase のスタックでアプリケーションを生成する。 タスク複雑度に応じてクレジット消費が変動する従量制（ボタン変更 0.50 クレジット、認証追加 1.20 クレジット）を採用している5。 ユーザーがコード所有権を保持する点を設計原則としている。

Replit Agent は50以上の言語に対応し、自律的なデバッグ、ユニットテスト生成、データベース管理、デプロイまでを実行する6。 2025年中頃からタスク複雑度に応じた従量課金（Effort-Based Pricing）を導入し、Economy / Power / Turbo の3モードを提供している。 Pro $95/月（年払い）で並行エージェント10台まで動作する。

Vibe Coding の分水嶺

これらのツールの普及に伴い、「vibe coding」の語義が拡散した。 Simon Willison はこの拡散に対して明確な区別を提案している。

Willison の定義では、vibe coding は「AI の提案をレビューせずに受け入れ、サイコロを振るように無責任にソフトウェアを作る行為」である7。 一方、経験豊富なエンジニアが AI で加速する行為を vibe engineering と呼び、区別した。 vibe engineering の要件として自動テスト、設計文書、コードレビュー、手動 QA、バージョン管理の熟達を挙げている8。

Addy Osmani（元 Google Chrome DevTools Engineering Manager）も同様の区分を示した。 「vibe coding は AI の提案を深いレビューなしに受け入れる行為であり、AI-assisted engineering では人間のエンジニアが確固として制御を握る」と述べ、2025年の CTO 調査で18人中16人が「AI 生成コードによる本番障害を経験した」と報告している9。

Willison は Lenny’s Podcast で、この区分の実務的な含意をさらに展開している。 「自分だけが使うもので、バグの被害者が自分だけなら、好きにやればいい。本番コードには別の基準が要る」10。 プロトタイプが「週単位から時間単位」に短縮された一方、ボトルネックはテストと検証に移行したという指摘は、UI 生成エージェントの現在の構造を正確に記述している。

デザイン制作への含意

これらの区分はデザイン制作にそのまま適用できる。

v0 や Bolt でランディングページやダッシュボードを生成する行為は、プロトタイプの速度を劇的に上げた。 しかしプロトタイプから本番品質の制作物に至るには、タイポグラフィの階層、余白のリズム、インタラクションの一貫性、アクセシビリティといった設計判断が必要になる。 この設計判断を下せるかどうかが、vibe coding とvibe engineering の境界にあたる。

Dylan Field の言う「AI はフロアを下げたがシーリングを上げていない」は、この構造の別の表現である。 生成の敷居が下がった分、品質の差は「生成できるかどうか」ではなく「生成されたものの品質を判断し修正できるかどうか」で決まる11。

デザイン課金モデルの AI コモディティ化耐性 — 成果物課金は最も脆く、運用常駐の複製困難性は高粗利を意味しない で論じた「成果物を物として定義した瞬間に価格は AI の限界費用へ滑る」問題は、UI 生成エージェントの普及によって加速している。 生成可能な制作物の範囲が広がるほど、「生成できること」自体の経済的価値は低下し、「何を生成すべきか」「生成されたものの何が問題か」を判断する能力に価値が集中する。

参照文献

Footnotes

  1. x.com/karpathy/status/1886192184808149383 (2025-02-02) ↩

  2. x.com/karpathy/status/2019137879310836075 (2026-02-04) ↩

  3. vercel.com/blog/introducing-the-new-v0 (2026-02-03) ↩

  4. support.bolt.new/release-notes ↩

  5. lovable.dev/pricing (2026-06 確認) ↩

  6. blog.replit.com/pro-plan / docs.replit.com/billing/ai-billing ↩

  7. x.com/simonw/status/1975570458683834729 ↩

  8. simonwillison.net/2025/Oct/7/vibe-engineering/ ↩

  9. medium.com/@addyosmani/vibe-coding-is-not-the-same-as-ai-assisted-engineering-3f81088d5b98 (2025-11-30)。CTO 調査の原典は 要一次検証。 ↩

  10. simonwillison.net/2026/Apr/2/lennys-podcast/ ↩

  11. figma.com/blog/config-2026-recap/ (Config 2026 keynote) ↩

書いた人：小川 修一郎（Design Researcher / Consultant） 経歴を見る →