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

- 著者：小川 修一郎（デザイン研究者／デザインコンサルタント）https://jamjet-iqbal.com/
- 初出：2026-06-26、更新：2026-06-27
- 正規の URL（HTML）：https://jamjet-iqbal.com/notes/vibe-coding-design-production/
- 英語版：https://jamjet-iqbal.com/en/notes/vibe-coding-design-production/（Markdown：https://jamjet-iqbal.com/en/notes/vibe-coding-design-production.md）
- 言語：ja
- キーワード：AI, vibe-coding, UI-agent, v0, Bolt, Lovable, Replit, Karpathy, Simon-Willison, design-production, agentic-coding, 2026

> Karpathy が2025年2月に投げた 'vibe coding' の一言が1年で産業用語になった。v0 / Bolt / Lovable / Replit Agent 等のUI生成エージェントがその基盤を担うが、Willison の 'vibe engineering'、Osmani の 'AI-assisted engineering' との区別が制作品質の分水嶺になる。プロトタイプは時間単位に短縮された一方、本番品質には設計判断・テスト・レビューの人間的工程が残り、ボトルネックが「作る」から「判断する」に移行した。デザイン制作では、生成された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."[^karpathy-original]

[^karpathy-original]: x.com/karpathy/status/1886192184808149383 (2025-02-02)

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

[^karpathy-retro]: x.com/karpathy/status/2019137879310836075 (2026-02-04)

関連: [生成AI活用エンジニアリングの系譜とデザイン評価](https://jamjet-iqbal.com/notes/ai-engineering-taxonomy-design/)（vibe coding から harness engineering までの分類とデザイン関与）／[デザインエージェントツール 2026：自律制作の現在地](https://jamjet-iqbal.com/notes/design-agent-tools-landscape-2026/)（デザインツールのエージェント化）／[MCP とデザインシステム：エージェント統合の基盤層](https://jamjet-iqbal.com/notes/mcp-design-agent-integration/)（MCP 統合）／[生成AI 産業界トピック10選 × デザイン職能・キャリアへのインパクト序列（2026年6月）](https://jamjet-iqbal.com/notes/genai-industry-topics-design-impact-2026/)（産業トピック序列で vibe coding は上位）。

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

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

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

[^v0-new]: vercel.com/blog/introducing-the-new-v0 (2026-02-03)

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

[^bolt-v2]: support.bolt.new/release-notes

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

[^lovable-price]: lovable.dev/pricing (2026-06 確認)

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

[^replit-pro]: blog.replit.com/pro-plan / docs.replit.com/billing/ai-billing

## Vibe Coding の分水嶺

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

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

[^willison-vibe]: x.com/simonw/status/1975570458683834729
[^willison-vibe-eng]: simonwillison.net/2025/Oct/7/vibe-engineering/

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

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

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

[^willison-lenny]: simonwillison.net/2026/Apr/2/lennys-podcast/

## デザイン制作への含意

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

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

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

[^field-ceiling]: figma.com/blog/config-2026-recap/ (Config 2026 keynote)

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

## 参照文献

- Andrej Karpathy. "vibe coding" 投稿. 2025-02-02. https://x.com/karpathy/status/1886192184808149383
- Andrej Karpathy. 1周年振り返り. 2026-02-04. https://x.com/karpathy/status/2019137879310836075
- Simon Willison. "Vibe engineering." simonwillison.net. 2025-10-07. https://simonwillison.net/2025/Oct/7/vibe-engineering/
- Simon Willison. "Highlights from Lenny's Podcast." 2026-04-02. https://simonwillison.net/2026/Apr/2/lennys-podcast/
- Addy Osmani. "Vibe Coding Is Not the Same as AI-Assisted Engineering." Medium. 2025-11-30. https://medium.com/@addyosmani/vibe-coding-is-not-the-same-as-ai-assisted-engineering-3f81088d5b98
- Vercel. "Introducing the new v0." 2026-02-03. https://vercel.com/blog/introducing-the-new-v0
- StackBlitz. Bolt.new Release Notes. https://support.bolt.new/release-notes
- Lovable. Pricing. https://lovable.dev/pricing
- Replit. "Replit Pro Is Here." https://blog.replit.com/pro-plan