ランディングページのモック作成に丸1日かかっていたのが、v0.devを使い始めてから30分で終わるようになりました。デザイナーに依頼する前のプロトタイプ、社内ツールのUI、クライアントへの提案用モックアップ。これらの作業でv0.devは圧倒的な時間短縮をもたらします。

この記事では、v0.devの基本的な使い方から、効果的なプロンプトの書き方、生成コードの特徴、既存プロジェクトへの統合方法、競合ツールとの比較、そして実務での活用パターンまで、実践的な視点で解説します。

v0.devとは

v0.dev（https://v0.dev/）は、Vercelが開発・提供するAI駆動のUIコンポーネント生成ツールです。チャット形式で自然言語のプロンプトを入力すると、React / Next.js向けのUIコンポーネントコードを自動生成します。

生成されるコードはshadcn/uiベースのコンポーネントで構成され、Tailwind CSSでスタイリングされ、TypeScriptで型安全に書かれています。つまり、生成されたコードをそのまま実務のNext.jsプロジェクトにコピーして使えるのが最大の特徴です。

v0.devが解決する3つの課題

1. UIプロトタイピングの速度 従来、UIのモックアップを作るにはFigmaでワイヤーフレームを描き、それをコードに落とし込む2段階のプロセスが必要でした。v0.devはこの工程を「プロンプト入力 → 即座にコード生成」に短縮します。

2. デザインとコードの乖離 デザインカンプからコードに起こす際、微妙な余白やレスポンシブ対応が抜け落ちることがあります。v0.devはshadcn/uiのトークンシステムに沿ったコードを出力するため、一貫したデザインが保たれます。

3. コンポーネント設計の学習コスト shadcn/uiやRadix UIを使い始めたばかりの開発者にとって、コンポーネントの構成方法やアクセシビリティ対応の書き方を学ぶ教材としても機能します。

使い方：3ステップで完結

ステップ1：プロンプトを入力する

v0.dev（https://v0.dev/）にアクセスし、GitHubまたはGoogleアカウントでログインします。チャット画面が表示されたら、作りたいUIを自然言語で記述します。

SaaS管理ダッシュボードを作成してください。
左にサイドバーナビゲーション、上部にヘッダー。
メインエリアには月間売上・ユーザー数・コンバージョン率の
統計カードを3つ横並びに配置。
その下にRechartsを使った折れ線グラフで過去12ヶ月の売上推移を表示。
ダークモード対応、レスポンシブ対応。

日本語でも英語でもプロンプトを受け付けますが、技術的な固有名詞（Recharts、Tailwind、shadcnなど）は英語のまま書いた方が精度が上がります。

ステップ2：プレビューで確認・修正する

v0.devはプロンプトを解釈してリアルタイムにプレビューを描画します。ブラウザ上でデスクトップ表示とモバイル表示を切り替えて確認できます。

修正したい場合は、追加のプロンプトを送ります。

統計カードにアイコンを追加して、前月比の増減を矢印で表示してください。
グラフのカラーをブルー系に統一してください。

v0.devは会話のコンテキストを保持するため、前のプロンプトの内容を踏まえた上で修正を反映します。

ステップ3：コードをエクスポートする

満足のいくUIが完成したら、「Code」タブでソースコードを確認します。右上の「Copy」ボタンでクリップボードにコピーするか、「Add to Codebase」でCLI経由で直接プロジェクトに取り込めます。

npx v0 add <生成されたコードのURL>

このコマンドを実行すると、必要なshadcn/uiコンポーネントとともにファイルが自動配置されます。

効果的なプロンプトの書き方：5つの具体例

v0.devで高品質なUIを生成するには、プロンプトの書き方が結果を大きく左右します。以下の5パターンは、実際にプロジェクトで使用して効果が高かったプロンプトです。

例1：管理ダッシュボード

管理ダッシュボードを作成。

レイアウト:
- 左サイドバー: ロゴ、ナビゲーションメニュー（Home, Analytics, Users, Settings）
- サイドバーは折りたたみ可能（アイコンのみモード）
- 上部ヘッダー: パンくずリスト、通知ベル、ユーザーアバター+ドロップダウン

メインエリア:
- 上部に4つのKPIカード（Total Users, Revenue, Active Sessions, Conversion Rate）
- 各カードにアイコン、数値、前月比の増減率（緑/赤のバッジ）
- 下部にRechartsの折れ線グラフ（6ヶ月推移）と円グラフ（トラフィックソース）を横並び

スタイル: ダークモード対応、カード影は控えめ、Inter フォント
レスポンシブ: モバイルでサイドバーはハンバーガーメニュー化

ポイントは、レイアウトの構造（左・上・メイン）、具体的なデータ項目（Total Users等）、スタイルの指定を分けて記述すること。v0.devは構造化されたプロンプトを正確に解釈します。

例2：ランディングページ

SaaSプロダクトのランディングページ。

セクション構成:
1. Hero: 大きな見出し + サブタイトル + CTA2つ（Get Started / Watch Demo）
   背景にグラデーション（紫→青）
2. Features: 3カラムのアイコン+説明カード
3. Pricing: 3プランの価格テーブル（Free / Pro / Enterprise）
   Proプランにおすすめバッジ
4. Testimonials: 3つのユーザーレビューカード（アバター、名前、会社名、コメント）
5. CTA: メールアドレス入力フォーム + Subscribe ボタン
6. Footer: 4カラムリンク集 + コピーライト

全セクション間に十分な余白。スクロールスナップは不要。
モバイルで1カラムに自動切り替え。

LPのプロンプトでは、セクション構成を番号付きリストで明示するのが効果的です。各セクション内の要素も具体的に列挙すると、v0.devが意図通りのレイアウトを生成します。

例3：問い合わせフォーム

お問い合わせフォームを作成。

フィールド:
- 名前（必須、テキスト入力）
- メールアドレス（必須、email形式バリデーション）
- 件名（必須、セレクトボックス: 一般的な質問 / 技術サポート / 料金について / その他）
- メッセージ本文（必須、テキストエリア、最大500文字、残り文字数表示）
- ファイル添付（任意、ドラッグ&ドロップエリア）

UX:
- 各フィールドにラベルとプレースホルダー
- 未入力のまま送信するとフィールド下に赤字でエラーメッセージ
- 送信中はボタンにスピナー表示、二重送信防止
- 送信成功時にトースト通知「お問い合わせを受け付けました」
- フォーム全体にカードコンテナ、角丸8px

フォームのプロンプトでは「フィールド定義」と「UX仕様」を分離して記述すると、バリデーション表示やローディング状態まで正確に生成されます。

例4：データテーブル

ユーザー管理テーブルを作成。

カラム:
- チェックボックス（行選択用）
- アバター + ユーザー名
- メールアドレス
- ロール（Admin / Editor / Viewer のバッジ、色分け）
- ステータス（Active=緑 / Inactive=グレー のドット付きバッジ）
- 登録日（YYYY/MM/DD形式）
- 操作（Editアイコン、Deleteアイコン）

機能:
- ヘッダークリックでソート（ASC/DESC トグル、矢印アイコン表示）
- テーブル上部に検索ボックス + ロールフィルター（ドロップダウン）
- ページネーション（1ページ10件、前へ/次へ/ページ番号）
- 一括選択時にテーブル上部にアクションバー（Delete Selected）

shadcn/ui Tableコンポーネントを使用。TypeScriptで型定義。

テーブルは列定義と機能定義を明確に分けることが重要です。「shadcn/ui Tableコンポーネントを使用」と明示すると、Radix UIベースのアクセシブルなテーブルが生成されます。

例5：ナビゲーション

レスポンシブなヘッダーナビゲーションを作成。

デスクトップ（1024px以上）:
- ロゴ（左端）
- メインナビ: Products（メガメニュー）, Solutions, Pricing, Blog, Docs
- Productsメガメニュー: 3カラムレイアウト、各項目にアイコン+タイトル+説明1行
- 右端: Search アイコン、Sign In ボタン（アウトライン）、Get Started ボタン（塗りつぶし）

モバイル（1023px以下）:
- ロゴ（左）、ハンバーガーアイコン（右）
- タップでフルスクリーンのスライドインメニュー
- アコーディオンでサブメニュー展開

アクセシビリティ: aria-expanded、aria-haspopup、focus-visible、Escキーでメニュー閉じ

ナビゲーションはデスクトップとモバイルの表示を明示的に分けて書くと、ブレークポイント周りの生成精度が上がります。アクセシビリティ要件もプロンプトに含めると、WAI-ARIA属性が適切に付与されます。

生成コードの特徴

v0.devが出力するコードには一貫した技術スタックが使われています。

shadcn/uiコンポーネント

v0.devが生成するコードは、shadcn/uiのコンポーネントを@/components/ui/からインポートする形式です。

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"

shadcn/uiは「ライブラリ」ではなく「コードコレクション」です。npmでインストールするのではなく、CLIでコンポーネントのソースコードをプロジェクトにコピーする仕組みです。そのため、生成されたコードは完全にカスタマイズ可能です。

Tailwind CSSスタイリング

スタイリングはすべてTailwind CSSのユーティリティクラスで記述されます。

<div className="flex items-center justify-between p-6 bg-card rounded-lg border shadow-sm">
  <div className="space-y-1">
    <p className="text-sm font-medium text-muted-foreground">Total Revenue</p>
    <p className="text-2xl font-bold">$45,231.89</p>
  </div>
  <div className="p-3 bg-primary/10 rounded-full">
    <DollarSign className="h-6 w-6 text-primary" />
  </div>
</div>

text-muted-foregroundやbg-cardのようなshadcn/uiのセマンティックトークンが使われるため、ダークモード切り替えやテーマ変更が自動的に反映されます。

TypeScript型定義

生成されるコンポーネントはTypeScriptで型付けされています。Propsの型定義やイベントハンドラの型が明示的に書かれるため、IDEの補完が効き、型エラーによるバグを防止できます。

interface StatsCardProps {
  title: string
  value: string
  change: number
  icon: React.ComponentType<{ className?: string }>
}

export function StatsCard({ title, value, change, icon: Icon }: StatsCardProps) {
  return (
    <Card>
      <CardContent className="p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-muted-foreground">{title}</p>
            <p className="text-2xl font-bold">{value}</p>
          </div>
          <Icon className="h-8 w-8 text-muted-foreground" />
        </div>
        <div className="mt-2 flex items-center text-sm">
          {change > 0 ? (
            <ArrowUpIcon className="h-4 w-4 text-green-500" />
          ) : (
            <ArrowDownIcon className="h-4 w-4 text-red-500" />
          )}
          <span className={change > 0 ? "text-green-500" : "text-red-500"}>
            {Math.abs(change)}%
          </span>
          <span className="ml-1 text-muted-foreground">from last month</span>
        </div>
      </CardContent>
    </Card>
  )
}

Lucide Reactアイコン

アイコンにはLucide React（lucide-react）が使用されます。v0.devはコンテキストに応じて適切なアイコンを自動選択します。

import { BarChart3, Users, DollarSign, TrendingUp } from "lucide-react"

既存プロジェクトへの統合方法

v0.devで生成したコードを既存のNext.jsプロジェクトに統合する手順を説明します。

前提条件

プロジェクトにshadcn/uiがセットアップ済みであることが必要です。未セットアップの場合は以下を実行します。

npx shadcn@latest init

初期化時にスタイル（default / new-york）、ベースカラー、CSS変数の使用を選択します。v0.devはデフォルトでnew-yorkスタイルを使用するため、合わせておくとコードの互換性が最大になります。

統合手順

方法1：CLIで直接追加（推奨）

v0.devの生成結果ページに表示されるCLIコマンドを実行します。

npx v0 add <URL>

このコマンドは、生成されたコンポーネントファイルと、依存するshadcn/uiコンポーネントを自動でインストールします。

方法2：手動コピー

1. v0.devの「Code」タブからコードをコピー
2. プロジェクトのcomponents/ディレクトリに新規ファイルとして保存
3. 不足しているshadcn/uiコンポーネントをCLIで追加

# v0.devのコードがButton, Card, Badgeを使っている場合
npx shadcn@latest add button card badge

4. 必要なnpmパッケージをインストール

# Rechartsやdate-fnsなど、v0.devが使用した外部ライブラリ
npm install recharts date-fns

統合時の注意点

パスエイリアスの確認 v0.devは@/components/ui/というパスを使います。tsconfig.jsonで@がプロジェクトルートを指すよう設定されているか確認してください。

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Tailwind設定の統合 v0.devが生成するコードで使われるカスタムカラー（--primary、--mutedなど）は、globals.cssのCSS変数として定義されている必要があります。shadcn/uiの初期化時に自動設定されますが、既存プロジェクトでカスタムテーマを使っている場合は衝突しないか確認してください。

v0.dev vs Bolt.new vs ChatGPT Canvas：比較

AIでUIを生成できるツールは複数あります。それぞれの特徴と使い分けを整理します。

v0.dev

項目	内容
提供元	Vercel
出力形式	React / Next.js（shadcn/ui + Tailwind CSS）
強み	shadcn/uiエコシステムとの完全統合、Vercelデプロイとのシームレスな連携
弱み	React/Next.js以外のフレームワーク（Vue, Svelte等）は非対応
最適な用途	Next.jsプロジェクトのUIプロトタイピング、コンポーネント生成

Bolt.new

項目	内容
提供元	StackBlitz
出力形式	React, Vue, Svelte, Astroなど多フレームワーク対応
強み	ブラウザ上でフルスタックアプリを構築・実行可能（WebContainers技術）
弱み	生成コードの品質がv0.devほど洗練されていない場合がある
最適な用途	マルチフレームワーク対応のプロトタイプ、フルスタックアプリの雛形作成

ChatGPT Canvas

項目	内容
提供元	OpenAI
出力形式	汎用コード生成（HTML/CSS/JS、React等）
強み	汎用性が高い、コード以外の文章生成も同一画面で可能
弱み	UI特化ではないため、プレビューやデザインの精度はv0.devに劣る
最適な用途	簡単なHTMLページ、コード片の生成、UI以外の作業も含む場合

使い分けの指針

Next.js + shadcn/uiのプロジェクトなら → v0.dev一択 生成コードの品質、エコシステムとの統合度、プレビューの正確さでv0.devが圧倒的に優れています。

Vue/Svelteプロジェクト、またはフルスタックの雛形が必要なら → Bolt.new フレームワーク選択の自由度が高く、バックエンドを含めた構成を一括で生成できます。

単発のUI生成ではなく、コードの説明や修正を対話的に行いたいなら → ChatGPT Canvas コードの意味を理解しながら段階的に修正する用途では、汎用LLMの強みが活きます。

料金プラン

v0.devは無料プランと有料プランを提供しています（2026年3月時点）。

Free

• メッセージ数: 200回/月
• 生成モデル: 標準モデル
• 利用可能機能: プロンプト生成、プレビュー、コードコピー
• 制限: 1日あたりの生成回数に上限あり

日常的なプロトタイピングや学習目的であれば、Freeプランで十分に使えます。1回のプロンプトで複数回の修正を重ねるワークフローなら、月200回でも多くのコンポーネントを生成できます。

Premium（月額$20）

• メッセージ数: 大幅に増加（上限緩和）
• 生成モデル: 高性能モデルへのアクセス
• 優先処理: 混雑時も優先的に処理
• 追加機能: プライベートプロジェクト、チーム共有

チームで日常的にv0.devを使う場合や、クライアントワークで短期間に大量のUI生成が必要な場合はPremiumプランが有効です。

Ultra（月額$50）

• 最上位の生成モデル
• 最大のメッセージ枠
• 最優先処理

個人開発者には過剰ですが、エージェンシーやフリーランスで複数プロジェクトを並行する場合に検討する価値があります。

制限事項と注意点

v0.devを使う上で把握しておくべき制限があります。

UIに特化している

v0.devはUI（見た目と構造）の生成に特化しています。以下は生成されません。

• API通信のロジック（fetch、axios等の実装）
• データベーススキーマやバックエンドコード
• 認証・認可のフロー
• 複雑なステート管理（Zustand、Redux等のストア設計）

生成されたUIコンポーネントに対して、これらのロジックは開発者が別途実装する必要があります。

React/Next.js以外は非対応

2026年3月時点で、v0.devの生成対象はReact/Next.jsに限定されています。Vue.js、Svelte、Angular向けのコードは生成できません。他フレームワークを使用する場合はBolt.newなどを検討してください。

生成コードの品質はレビュー必須

v0.devが生成するコードは高品質ですが、以下の点は開発者が確認・修正する必要があります。

• パフォーマンス: 不要な再レンダリングやメモ化の欠如
• エッジケース: 空データ、長い文字列、大量データ時の表示崩れ
• アクセシビリティ: スクリーンリーダーでの読み上げ順序、フォーカス管理
• セキュリティ: ユーザー入力のサニタイズ（v0.devは考慮しない）

デザインの一貫性

複数のコンポーネントを別々のプロンプトで生成すると、色調やスペーシングに微妙な差異が生じることがあります。プロジェクト全体でデザインの一貫性を保つには、以下の対策が有効です。

• プロンプトの冒頭にデザインシステムの仕様を毎回記述する
• 生成後にTailwindの設定ファイルでカラートークンを統一する
• shadcn/uiのテーマ設定（globals.cssのCSS変数）を事前に固めておく

実務での活用パターン

v0.devが実務で最も効果を発揮する3つのパターンを紹介します。

パターン1：プロトタイプの高速作成

クライアントへの提案やチーム内でのUI議論で、「とりあえず動くものを見せたい」場面は頻繁にあります。v0.devなら以下のワークフローで30分以内にプロトタイプを用意できます。

1. 要件をプロンプトとして整理（5分）
2. v0.devで生成・修正を2-3回繰り返す（15分）
3. 生成コードをNext.jsプロジェクトにコピーしてVercelにデプロイ（10分）

結果として、URLを共有するだけでステークホルダーに動くUIを見せられます。Figmaのモックアップと違い、実際にクリックやスクロールができるため、フィードバックの質も上がります。

パターン2：デザインシステムの構築

社内ツールやプロダクトのデザインシステムを新規に構築する際、v0.devでベースコンポーネントを生成し、それをカスタマイズする方法が効率的です。

以下のコンポーネントを作成してください。
カラーパレット: Primary=#2563EB, Secondary=#7C3AED, Success=#16A34A, Error=#DC2626
角丸: 6px統一
フォント: Inter

1. Button（4バリアント: primary, secondary, outline, ghost、3サイズ: sm, md, lg）
2. Input（ラベル付き、エラー表示、ヘルパーテキスト）
3. Card（ヘッダー、コンテンツ、フッターの3ゾーン）
4. Badge（status: success, warning, error, info）

このように仕様を明確にしたプロンプトで基本コンポーネントを生成し、それをcomponents/ui/に配置してプロジェクト固有のデザインシステムとして運用します。

パターン3：技術学習のアクセラレーター

shadcn/uiやTailwind CSSを学習中の開発者にとって、v0.devは優れた教材です。

• 「こういうUIを作りたい」→ v0.devで生成 → 生成コードを読んで実装方法を学ぶ
• Tailwindのユーティリティクラスの組み合わせ方を実例で理解できる
• Radix UIプリミティブ（Dialog、Popover、DropdownMenu等）の使い方を学べる
• アクセシビリティ対応のコード（aria属性、focus管理）の書き方を参考にできる

単にドキュメントを読むだけでは理解しにくい「コンポーネント設計のベストプラクティス」を、動くコードとして学べるのがv0.devの隠れた価値です。

まとめ

v0.devは、React/Next.jsプロジェクトにおけるUI開発の生産性を根本から変えるツールです。

使うべき場面:

• Next.js + shadcn/uiプロジェクトのUIプロトタイピング
• クライアント提案用のモックアップ作成
• 社内ツール・管理画面のUI構築
• デザインシステムのベースコンポーネント生成
• shadcn/ui / Tailwind CSSの学習

使い方のコツ:

• プロンプトは構造化して書く（レイアウト、データ項目、スタイル、レスポンシブを分離）
• 一度に完璧を求めず、2-3回の修正で仕上げる
• 生成コードは必ずレビューし、ロジックとアクセシビリティは手動で補完する
• npx v0 addコマンドで依存関係ごと一括統合するのが最も効率的

Freeプランの月200回で十分に実用的です。まずは自分のプロジェクトで1つコンポーネントを生成してみることをおすすめします。プロンプトの書き方に慣れれば、UI開発に費やす時間が劇的に短縮されるはずです。

関連記事

• プログラミングスクール比較2026年版【現役エンジニアが選ぶ厳選8校】
• Coloso評判・口コミ2026｜利用者の本音と徹底レビュー
• エンジニア転職完全ガイド2026【未経験・経験者別ロードマップ】