v0 by Vercel入門：プロンプトからUIを生成するAIフロントエンド開発

v0とは

v0は、Vercelが提供するAIベースのUIジェネレーターです。自然言語のプロンプトを入力するだけで、React + Tailwind CSS + shadcn/uiのコンポーネントコードを生成します。

生成されるコードはそのままNext.jsプロジェクトにコピー＆ペーストで使用可能。デザインモックアップから実装コードへの橋渡しとして、フロントエンド開発のワークフローを大きく変える可能性を持っています。

v0でできること

UIコンポーネント生成：ボタン、フォーム、カード、テーブルなど
ページレイアウト：ダッシュボード、ランディングページ、管理画面
レスポンシブ対応：モバイル〜デスクトップのレスポンシブUIを自動生成
ダークモード対応：テーマ切り替えに対応したコンポーネント
画像からの生成：スクリーンショットやデザインカンプからUIを再現

始め方

1. v0にアクセス

v0のサイトにアクセスし、Vercelアカウントでログインします。

2. プロンプトを入力

テキストボックスにUIの説明を入力します。

SaaSのダッシュボード。左サイドバーにナビゲーション、
右側にメトリクスカード4つとチャート2つ。
ダークモード対応。

3. 結果を確認・調整

数秒でUIのプレビューが表示されます。気に入らない部分は追加のプロンプトで修正できます。

「メトリクスカードにアイコンを追加して」
「チャートを棒グラフから折れ線グラフに変更して」

プロンプト設計のコツ

構造を明確に伝える

✗ 「かっこいいページを作って」

✓ 「ブログ記事の一覧ページ。
   ・ヘッダー：サイト名とナビゲーション（ホーム、ブログ、About）
   ・メイン：記事カードのグリッド（3列）、各カードにサムネイル・タイトル・日付・タグ
   ・サイドバー：カテゴリ一覧、人気記事トップ5
   ・フッター：コピーライト、SNSリンク」

デザインの方向性を指定

「ミニマルで余白を多めに。Google Material Designに寄せたスタイル。
 プライマリカラーは青（#2563EB）。角丸は大きめ。」

既存のデザインを参考にする

画像をアップロードして「このデザインを再現して」と指示することも可能です。FigmaのスクリーンショットやWebサイトのキャプチャを活用できます。

生成されるコードの構造

v0が生成するコードは以下の技術スタックに準拠しています。

// 例：ダッシュボードのメトリクスカード
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Users, DollarSign, ShoppingCart, TrendingUp } from "lucide-react"

export default function MetricsCards() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-sm font-medium">
            Total Revenue
          </CardTitle>
          <DollarSign className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">$45,231.89</div>
          <p className="text-xs text-muted-foreground">
            +20.1% from last month
          </p>
        </CardContent>
      </Card>
      {/* ... */}
    </div>
  )
}

特徴：

shadcn/uiのコンポーネントを活用
Tailwind CSSでスタイリング
Lucide Reactアイコン
TypeScript対応

Next.jsプロジェクトへの統合

1. shadcn/uiのセットアップ

v0が生成するコードはshadcn/uiに依存するため、プロジェクトに導入が必要です。

npx shadcn-ui@latest init

2. 必要なコンポーネントの追加

v0のコードが使用しているコンポーネントをインストールします。

npx shadcn-ui@latest add card button input

3. コードの配置

v0のCodeタブからコードをコピーし、プロジェクトに配置します。

src/
  components/
    dashboard/
      MetricsCards.tsx  ← v0で生成
      SalesChart.tsx    ← v0で生成
      RecentOrders.tsx  ← v0で生成
  app/
    dashboard/
      page.tsx          ← 各コンポーネントを組み合わせ

4. データの接続

v0が生成するコードはダミーデータを含んでいるため、実際のAPIやデータソースに接続する必要があります。

// v0生成のダミーデータ
const revenue = "$45,231.89"

// 実際のデータに置き換え
const { data } = useQuery({
  queryKey: ['revenue'],
  queryFn: () => fetch('/api/metrics/revenue').then(r => r.json())
})

v0 vs Lovable vs Bolt

| 特徴 | v0 | Lovable | Bolt.new | |------|-----|---------|----------| | 出力 | コンポーネントコード | フルアプリ | フルアプリ | | フレームワーク | React | React + Vite | 複数対応 | | バックエンド | なし | Supabase | 複数対応 | | デプロイ | 手動 | ワンクリック | ワンクリック | | カスタマイズ性 | 高（コード直接編集） | 中 | 中 | | 対象 | フロントエンド開発者 | 非エンジニア〜 | 非エンジニア〜 |

v0を選ぶべきケース

既存プロジェクトにUIコンポーネントを追加したい
コード品質を重視し、生成後に手動で調整したい
shadcn/ui + Tailwind CSSのエコシステムを使っている
デザイナーが作ったモックアップを素早くコード化したい

料金プラン

| プラン | 月額 | クレジット | |--------|------|-----------| | Free | $0 | 200メッセージ/月 | | Premium | $20 | 5,000メッセージ/月 | | Team | $30/人 | 無制限 |

無料プランでも十分に試せます。

実践Tips

1. 段階的に生成する

一度に完成形を求めず、パーツごとに生成して組み合わせるのが効率的です。

1回目：「ダッシュボードのサイドバー」
2回目：「メトリクスカードのグリッド」
3回目：「売上チャート」
→ 最後に手動で統合

2. コンポーネントライブラリを構築

v0で生成したコンポーネントをプロジェクト内のライブラリとして蓄積していくと、開発速度がさらに上がります。

3. Figmaとの連携

FigmaのデザインをスクリーンショットでV0に渡すと、デザインに近いコードを生成できます。デザイナーとエンジニアの連携がスムーズになります。

まとめ

v0は、フロントエンド開発者のための「UIコード生成AI」です。

プロンプトからshadcn/ui + Tailwindのコンポーネントを即生成
プロダクション品質のコードがそのまま使える
既存プロジェクトへの統合が容易
画像からの再現でデザイン→実装を高速化

Lovableが「アプリ全体を作る」ツールなら、v0は「UIパーツを作る」ツール。使い分けることで、フロントエンド開発の効率が大きく向上します。