v0.devとは何か — Vercelが作ったAI UIビルダーの全貌
v0.dev（現在は v0.app）は、Vercelが2023年に公開したAI駆動のUIコード生成サービスです。日本語を含む自然言語プロンプトを入力すると、React + Tailwind CSS + shadcn/ui ベースの本番品質コンポーネントが数秒で生成されます。
「デザインしてからコードに変換する」のではなく、「コードを最初から正確に生成する」アプローチが特徴です。生成されたコードはTypeScriptで型付けされ、シニアエンジニアのコードレビューに通るレベルの品質を持ちます。2026年現在、Next.js 15 / App Router 対応・Figmaインポート・Git連携・サンドボックス実行環境を備えた統合開発プラットフォームに進化しています。
# v0.app にブラウザでアクセス（登録不要・無料プランあり）
# https://v0.app/
# v0 CLIでコンポーネントをローカルプロジェクトに追加
npx v0 add [component-id]
# Next.js 15で依存関係の衝突が起きる場合
npx --legacy-peer-deps v0 add [component-id]
利用プラン — 無料から Enterprise まで
2026年2月以降、v0はクレジット制からトークン制に移行しました。生成の複雑さによって消費トークンが変動します。
| プラン | 月額 | 主な機能 | 用途 |
|---|---|---|---|
| Free | $0（$5クレジット付） | 基本UI生成、コードコピー | 個人学習・試用 |
| Premium | $20/月 | Figmaインポート、API アクセス、月$20クレジット | 個人開発者 |
| Team | $30/ユーザー/月 | 共有クレジット、チームワークスペース | スタートアップ |
| Business | $100/ユーザー/月 | 高度なDB統合、優先サポート | 中規模チーム |
| Enterprise | 要問い合わせ | カスタムモデル、SLA、SSO | 大企業 |
無料プランは月$5クレジットが毎月リセットされます。シンプルなボタンコンポーネントはわずか数セントで生成できますが、複雑なダッシュボードは数ドル消費することもあります。定期的にv0を使う場合はPremium（$20/月）がコスパ最良です。
基本的な使い方 — プロンプトからコードまで5分
v0の操作は非常にシンプルです。ブラウザで v0.app を開き、テキストボックスにUIの要件を書くだけです。
プロンプトの書き方
【基本プロンプト例】
shadcn/ui を使ったユーザープロフィールカードを作成してください。
- アバター画像（左側）
- 名前・役職・メールアドレスを右に表示
- フォローボタン（ティール色）
- レスポンシブ対応
【より具体的なプロンプト例】
Next.js 15 App Router に組み込める管理者ダッシュボードのサイドバーを作成。
- Tailwind CSS + shadcn/ui の Sidebar コンポーネント使用
- ナビゲーション項目: ホーム、ユーザー管理、設定
- アクティブ状態をハイライト
- ダークモード対応
- TypeScript で型定義付き
生成されたコードのコピー方法
# 方法1: ブラウザでコードブロックをコピー
# v0の「Code」タブに切り替えてコピーボタンをクリック
# 方法2: v0 CLI でローカルに追加（推奨）
# 生成された UI の URL から component ID を取得
# 例: https://v0.app/chat/abc123 → ID は abc123
npx v0 add abc123
# → components/ui/ 配下に自動追加される
# 方法3: GitHub 連携でブランチに直接 push
# v0 の Git パネル → 「Create Branch」→ 「Create PR」
shadcn/ui コンポーネント活用パターン
v0が生成するコードは shadcn/ui をベースにしています。shadcn/ui はコンポーネントライブラリではなく「コードを直接プロジェクトにコピーする」アプローチのため、v0との相性が抜群です。
# shadcn/ui の初期セットアップ（Next.js 15）
npx shadcn@latest init
# 必要なコンポーネントを個別インストール
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add form
npx shadcn@latest add table
# v0 で生成したコンポーネントを追加
npx v0 add [component-id]
v0が生成するコードは、shadcn/ui の cn() ユーティリティ、cva() によるバリアント定義、Radix UI プリミティブを正しく使用しています。追加設定なしで既存プロジェクトに組み込めます。
// v0 が生成する典型的なコンポーネント例
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
interface StatsCardProps {
title: string
value: string
change: number
className?: string
}
export function StatsCard({ title, value, change, className }: StatsCardProps) {
return (
<Card className={cn("w-full", className)}>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">
{title}
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{value}</div>
<p className={cn(
"text-xs mt-1",
change > 0 ? "text-green-600" : "text-red-600"
)}>
{change > 0 ? "+" : ""}{change}% 先月比
</p>
</CardContent>
</Card>
)
}
インクリメンタル編集 — 差分修正で品質を上げる
v0の強みの一つは、生成後の差分修正（インクリメンタル編集）です。「ここだけ変えたい」という指示に対して、コンポーネント全体を再生成するのではなく、必要な箇所だけを更新します。
【インクリメンタル編集のプロンプト例】
最初の生成後:
→「ボタンのカラーをティールからグレーに変更」
→「モバイルでカードが縦並びになるよう修正」
→「フォームにバリデーションメッセージを追加」
→「ダークモード時のコントラストを改善」
→「アニメーションを framer-motion で追加」
修正ごとに差分が積み重なり、最終的に
プロダクション品質のコンポーネントが完成する。
v0のチャット履歴はセッション単位で保持されるため、前の会話の文脈を維持しながら段階的にUIを完成させられます。
Figma → v0 ワークフロー（Premiumプラン以上）
Premiumプラン以上では、FigmaデザインをそのままURLまたはファイルで取り込み、コードに変換できます。
【Figma → v0 のステップ】
1. Figma でフレームを選択し「Copy Link」でURLを取得
2. v0.app のチャットに Figma URL を貼り付け
3. 「このデザインをNext.js + shadcn/ui で実装してください」と入力
4. v0 が Figma レイヤーを解析しコード生成
5. 差分修正で細部を調整
【活用のコツ】
- Figma コンポーネントのAuto Layout を設定しておくと変換精度が上がる
- デザイントークン（色・タイポ）をFigmaで定義しておくと Tailwind config に反映しやすい
- フレームを単一コンポーネント単位で渡すと精度が高い
Next.js 15 / App Router 対応
v0が生成するコードはNext.js 15のApp Routerに最適化されています。Server ComponentとClient Componentの境界を適切に設定し、'use client'ディレクティブが必要な箇所のみに付与します。
// v0 が生成する App Router 対応コンポーネント
// Server Component として動作（'use client' なし）
import { Suspense } from "react"
import { UserList } from "@/components/user-list"
import { UserListSkeleton } from "@/components/user-list-skeleton"
export default function UsersPage() {
return (
<main className="container mx-auto py-10">
<h1 className="text-3xl font-bold mb-8">ユーザー管理</h1>
<Suspense fallback={<UserListSkeleton />}>
<UserList />
</Suspense>
</main>
)
}
// インタラクティブなコンポーネントは Client Component
'use client'
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
export function SearchBar({ onSearch }: { onSearch: (q: string) => void }) {
const [query, setQuery] = useState("")
return (
<div className="flex gap-2">
<Input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="ユーザーを検索..."
className="max-w-sm"
/>
<Button onClick={() => onSearch(query)}>検索</Button>
</div>
)
}
Vercel デプロイ統合
v0はVercel製品のため、Vercelへのデプロイが最もスムーズです。v0のGitパネルからブランチを作成し、Vercel Projects と連携するだけで自動デプロイパイプラインが構築できます。
# v0 から Vercel デプロイまでの流れ
# 1. v0 で UI 生成 → Git パネルで「Create Branch」
# 2. GitHub にブランチが作成される
# 3. Vercel Project に GitHub リポジトリを連携済みであれば
# ブランチの Push で自動的に Preview Deployment が起動
# CLI でのデプロイ（ローカル開発後）
npm install -g vercel
vercel login
vercel --prod
# 環境変数の設定（Vercel ダッシュボードまたは CLI）
vercel env add DATABASE_URL production
v0 vs Bolt.new vs Lovable 比較表【2026年】
フロントエンド開発者が迷いやすい3ツールを整理します。
| 比較軸 | v0.dev（Vercel） | Bolt.new（StackBlitz） | Lovable |
|---|---|---|---|
| 主なアウトプット | UI コンポーネント | フルスタックアプリ | フルスタックアプリ |
| 技術スタック | React + Tailwind + shadcn | Node.js + 任意フレームワーク | React + Supabase |
| バックエンド生成 | 限定的（2026年に強化） | あり（Node.js） | あり（Supabase自動連携） |
| 既存プロジェクト統合 | ◎（CLI で追加可） | △（新規前提） | △（新規前提） |
| コード品質 | ◎（本番品質） | ○ | ○ |
| Figmaインポート | ◎（Premium以上） | なし | あり（限定的） |
| 無料枠 | $5クレジット/月 | 1日10MB転送まで | 5プロジェクトまで |
| Vercelデプロイ統合 | ◎（ネイティブ） | ○（対応） | ○（対応） |
| リアルタイムコラボ | なし | あり | ◎（マルチユーザー） |
| 向いている場面 | Next.js既存PJへのUI追加 | フルアプリ高速プロトタイプ | SaaS MVP・ノーコード志向 |
判断基準: 既存の Next.js プロジェクトに高品質なUIコンポーネントを素早く追加したいなら v0。ゼロからフルスタックアプリをプロトタイプするなら Bolt.new。バックエンド込みのSaaSをノーコード寄りで作るなら Lovable。3ツールを組み合わせて使うケースも増えています。
なお、AI UIビルダー全体の比較は Claude Design vs v0 vs Bolt 比較【2026年】も参照してください。
v0 + Cursor / Claude Code 連携パターン
v0は「UI生成」に特化しているため、ロジック実装やバグ修正はCursorやClaude Codeと組み合わせると最大の効果を発揮します。
【推奨ワークフロー: v0 + Claude Code】
Step 1: v0 で UI スケルトンを生成
→ プロンプト: 「管理画面の注文一覧テーブルを生成。
フィルター・ソート・ページネーション付き」
Step 2: 生成コードをローカルに取得
→ npx v0 add [id]
→ または Git パネルから branch を作成
Step 3: Claude Code でビジネスロジックを実装
→ 「この OrderTable コンポーネントに
REST API からデータをフェッチする処理を追加して。
useSWR を使い、エラーハンドリングも含めて」
Step 4: v0 に戻って UI を細かく調整
→ 「ローディング中のスケルトンを追加して」
Step 5: Vercel に deploy
→ git push → Vercel が自動デプロイ
【推奨ワークフロー: v0 + Cursor】
Cursor の Composer で:
「@components/order-table.tsx を参考に、
ユーザー管理テーブルの同様のコンポーネントを作成。
v0 が生成したパターンと一致するスタイルで」
→ Cursor が v0 のコーディングパターンを学習し、
一貫したスタイルのコンポーネントを追加生成できる
Claude Code や AIコーディングツールとの連携については Claude Code vs v0｜違いと選び方を徹底比較【2026年】も参考にしてください。
実用パターン10選
- ランディングページのヒーロー生成: 「SaaS向けヒーローセクション、グラデーション背景、CTA2つ、モバイル対応」
- 認証フォーム: 「ログイン/サインアップフォーム、react-hook-form + zod バリデーション、shadcn/ui Form コンポーネント使用」
- データテーブル: 「TanStack Table v8 を使ったソート・フィルター・ページネーション付きテーブル」
- ダッシュボードレイアウト: 「管理画面のレイアウト、サイドバー・ヘッダー・コンテンツエリアの基本構造、App Router 対応」
- モーダル/ダイアログ: 「確認ダイアログ、shadcn/ui AlertDialog、削除操作のユーザー確認フロー」
- カードグリッド: 「商品カード、4列グリッド、ホバーアニメーション、価格・評価・画像表示」
- ステップフォーム: 「3ステップのウィザードフォーム、プログレスインジケーター、前後ナビゲーション」
- チャートダッシュボード: 「recharts を使った折れ線グラフ・棒グラフのダッシュボード、レスポンシブ対応」
- コマンドパレット: 「Cmd+K で開くコマンドパレット、shadcn/ui Command コンポーネント使用、検索可能」
- 通知センター: 「ベルアイコン + ドロップダウン、既読/未読管理、Framer Motion でスライドイン」
失敗パターン4選と対策
失敗1: プロンプトが曖昧すぎる
「かっこいいUIを作って」では期待通りの結果が出ません。
NG: 「ダッシュボードを作って」
OK: 「Next.js 15 App Router、shadcn/ui Card・Chart コンポーネントを使った
KPIダッシュボード。月間売上・新規ユーザー数・チャーン率の3指標。
recharts の LineChart を使い、過去12ヶ月の推移を表示。
ダークモード対応、TypeScript 必須。」
失敗2: 複雑なバックエンドロジックをv0に求める
v0はUIに特化しています。データフェッチ・認証・DB操作は Claude Code や Cursor で補完しましょう。v0はUI層、Claude Codeはロジック層と役割分担が鍵です。
失敗3: 無料枠でフルアプリを作ろうとする
$5クレジットは複雑なコンポーネント数枚で消費します。大規模利用はPremium（$20/月）が現実的です。トークン消費を抑えるには、一度に大きなプロンプトを送るより、コンポーネント単位で分割してリクエストする方が効率的です。
失敗4: shadcn/ui の未インストール状態でコードを貼り付ける
v0が生成するコードはshadcn/uiを前提とします。npx shadcn@latest initで初期化してから追加しないと、インポートエラーが大量に発生します。
# v0 コンポーネントを使う前に必ずセットアップ
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app
npx shadcn@latest init
# → components.json が生成され、shadcn/ui が使える状態になる
Tailwind / TypeScript 出力カスタマイズ
v0のチャットでカスタマイズ指定を先頭に書くと、生成コード全体のスタイルを統制できます。
【カスタマイズ指定プロンプト】
以下の制約でUIを生成してください:
- Tailwind CSS v4 を使用
- カラーパレット: primary #0066CC, secondary #0052A3, accent #40A8E0
- フォント: Inter（日本語フォールバック: Noto Sans JP）
- ブレークポイント: sm(640) / md(768) / lg(1024) / xl(1280)
- shadcn/ui の「new-york」スタイルを使用
- 全コンポーネントに aria-label を付与（アクセシビリティ対応）
この制約で: [UIの説明]
まとめ — v0.devを使うべき場面
v0.devは「Next.js + shadcn/ui スタックで開発している人」にとっての必携ツールです。UIスケルトンを5分で作り、Claude CodeやCursorでロジックを肉付けし、Vercelにデプロイする。このサイクルが最速のフロントエンド開発フローになりつつあります。
無料枠（$5/月）から始めて、使用頻度が上がったらPremium（$20/月）へ。Figmaインポートや API アクセスが解放されることで、デザイン→コードの自動化が本格的に機能します。
Vercel AI SDK との連携については Vercel AI SDK・Inngest・Mastra 比較も合わせて読むと、フロントエンドからバックエンドエージェントまでの全体像が掴めます。また shadcn/ui のより深い活用は shadcn/ui v4 完全ガイドを参照してください。
この記事を読んでAIツール導入を検討し始めた方へ
UravationではAIエージェント・開発ツール活用の研修・コンサルを行っています。v0.devやClaude Codeを使った開発内製化支援もお気軽にご相談ください。
同カテゴリの関連記事: Bolt.new完全ガイド2026｜StackBlitz製AIフルスタックビルダー（フルスタック対応・WebContainer実行環境搭載）
あわせて読みたい（3大AIアプリビルダー比較シリーズ）:
- Lovable完全ガイド2026 — AIフルスタックNo-Codeアプリビルダー
