Shuichiro Ogawa

Notes ・ updated 2026-06-27

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

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-engineering-taxonomy-design（vibe coding から harness engineering までの分類とデザイン関与）／design-agent-tools-landscape-2026（デザインツールのエージェント化）／mcp-design-agent-integration（MCP 統合）／genai-industry-topics-design-impact-2026（産業トピック序列で 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。

design-pricing-vs-ai-commoditization で論じた「成果物を物として定義した瞬間に価格は 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) ↩

← Notes 一覧 ・ ホーム