v0（Vercel）の使い方｜AIでWebアプリのUIを10分で生成する方法

Next.jsの開発元Vercelが2023年10月にリリースした「v0」は、テキストプロンプトからWebアプリのUIコンポーネントを生成するAIツールです。数秒で実装レベルのReact/Next.jsコードが得られ、プロトタイピングや開発の初速向上に革命をもたらしました。

2024年12月にはチャット形式での修正機能、shadcn/ui完全対応など、実用性が大幅に向上。開発者だけでなく、デザイナーやノンエンジニアのプロトタイプ作成にも活用されています。

本記事では、v0の使い方、料金プラン、活用事例、そしてCursorやBoltとの違いまで、実用的な情報を解説します。

v0とは
v0の主な特徴
v0の使い方
v0の料金プラン
v0の活用事例
Cursor / Boltとの比較
v0の制限事項
プロンプトのコツ
よくある質問
関連記事
おすすめ書籍
出典

v0とは

v0は、Vercelが開発したAI駆動のUIジェネレーターです。テキストプロンプトまたは画像（デザインモックアップ）から、React/Next.jsのコンポーネントコードを自動生成します。

Vercel自身がNext.jsやReactの開発に深く関わっているため、生成されるコードは公式のベストプラクティスに準拠しており、そのまま本番環境で使える品質です。

特徴的なのは、shadcn/uiやTailwind CSSをネイティブサポートしている点です。生成されたコードは、モダンなUIライブラリと完全に統合されています。

v0の主な特徴

1. テキスト→UIコード生成

プロンプトを入力すると、数秒でReactコンポーネントが生成されます。

例：

ダッシュボード画面。左にサイドバー、右上に通知アイコン、
中央に売上グラフと最近の注文リスト。ダークモード対応。

2. 画像→UIコード生成

Figmaやスケッチのスクリーンショットをアップロードすると、それを再現するコードを生成します。

3. 反復的な修正

生成後、チャット形式で「ボタンの色を青に変更」「レスポンシブ対応を追加」といった指示で、リアルタイムに修正できます。

4. プレビュー＆デプロイ

リアルタイムプレビュー: ブラウザ内でUIを確認
コードコピー: React/Next.jsコードをワンクリックでコピー
Vercelデプロイ: 直接Vercelにデプロイ可能

5. shadcn/ui完全対応

生成されるコンポーネントは、shadcn/uiの再利用可能なコンポーネントとして構成されており、プロジェクトに簡単に統合できます。

v0の使い方

Step 1: アクセスとログイン

v0.devにアクセス
GitHubまたはVercelアカウントでログイン
無料枠（月200クレジット）が自動付与

Step 2: プロンプト入力

画面中央の入力欄に、作りたいUIの説明を入力します。

プロンプト例：

ランディングページ。ヒーローセクションに「AIツールで業務効率化」という
見出しと、CTAボタン。その下に3つの特徴カード。フッターにSNSリンク。

Step 3: 生成結果の確認

数秒で、3つのバリエーションが生成されます。

プレビュー: ブラウザ上で動作確認
コードタブ: React/TypeScriptコードを確認
評価: 気に入ったバリエーションを選択

Step 4: 修正（イテレーション）

チャット形式で修正指示を追加できます。

例：

CTAボタンを緑色に変更して、テキストを「今すぐ始める」にしてください

修正後、再度プレビューとコードが更新されます。

Step 5: コードのコピー＆統合

“Copy Code”をクリック
プロジェクトのcomponents/ディレクトリに貼り付け
必要に応じてカスタマイズ

生成されるファイル構成例：

components/
  landing-page.tsx
  ui/
    button.tsx
    card.tsx

Step 6: Vercelデプロイ（オプション）

“Deploy to Vercel”をクリックすると、自動的にVercelプロジェクトが作成され、数分でライブ公開されます。

v0の料金プラン

プラン	月額	クレジット	用途
Free	$0	200	個人学習、プロトタイプ
Premium	$20	無制限	業務利用、頻繁な生成

クレジット消費量：
– 1回の生成（3バリエーション）: 10クレジット
– 修正（イテレーション）: 5クレジット

Freeプランで、月に約20回の生成＋修正が可能です。

v0の活用事例

1. プロトタイピング

アイデアを数分でUIに変換し、クライアントや社内で共有できます。コーディングなしでコンセプトを検証できるため、開発前の意思決定が早くなります。

2. ランディングページ作成

マーケティングキャンペーン用のLPを、デザイナーやエンジニアなしで作成できます。A/Bテスト用の複数バリエーションも簡単に生成できます。

3. 社内ツール開発

ダッシュボード、管理画面、フォームなど、よくあるUIパターンを瞬時に生成し、業務ツールの開発時間を短縮できます。

4. 学習・教育

React/Next.jsを学ぶ際、v0で生成されたコードを読むことで、ベストプラクティスを学べます。

Cursor / Boltとの比較

ツール	用途	生成範囲	料金	特徴
v0	UIコンポーネント	フロントエンドのみ	$0〜$20/月	React/Next.js特化、shadcn/ui
Cursor	コード補完・生成	フルスタック	$0〜$20/月	VSCode統合、AI Composer
Bolt	フルスタックアプリ	フロント＋バック	$0〜$30/月	ブラウザ内開発環境

推奨用途：
– v0: UIプロトタイピング、Next.jsプロジェクトのコンポーネント生成
– Cursor: 既存プロジェクトへのAI統合、複雑なロジック実装
– Bolt: サーバーサイド含むフルスタックアプリの爆速開発

v0とCursorを組み合わせる（v0でUI生成→CursorでAPI連携実装）と、最も効率的です。

v0の制限事項

1. フロントエンドのみ

バックエンドロジック（API、データベース操作）は生成されません。Cursorや手動実装で補完する必要があります。

2. カスタマイズ性

生成されたコードはベストプラクティスに基づいていますが、複雑な独自ロジックは手動で追加する必要があります。

3. プロンプトの精度

曖昧な指示では意図通りのUIが生成されないことがあります。具体的な説明（色、配置、機能）が重要です。

プロンプトのコツ

基本構成

[ページタイプ] + [レイアウト] + [主要要素] + [スタイル]

例：

ECサイトの商品一覧ページ。グリッドレイアウトで商品カード12個。
各カードに画像、タイトル、価格、カートボタン。モダンで明るい配色。

具体的な指示

色: 「青いボタン」ではなく「primary色のボタン」
配置: 「左にサイドバー、右にコンテンツエリア」
機能: 「検索バー、フィルター機能、ページネーション」

参考画像の活用

デザインモックアップや、既存サイトのスクリーンショットをアップロードすると、精度が向上します。

よくある質問

Q1. v0は無料で使えますか？

月200クレジット（約20回の生成）まで無料です。それ以上使う場合は、月額$20のPremiumプランが必要です。

Q2. 生成されたコードの商用利用は可能ですか？

可能です。生成されたコードの著作権はユーザーに帰属します。自由に商用プロジェクトで利用できます。

Q3. Next.js以外のフレームワークに対応していますか？

現時点では、React/Next.js専用です。Vue、Svelte、Angularには対応していません。ただし、生成されたJSXをVueのテンプレート形式に変換することは可能です。

Q4. デザインシステムに対応していますか？

shadcn/uiとTailwind CSSにネイティブ対応しています。Material-UIやChakra UIなどには対応していませんが、生成後に手動で置き換えることは可能です。

出典

v0公式サイト: https://v0.dev
Vercel Blog（v0発表）: https://vercel.com/blog/announcing-v0-generative-ui
shadcn/ui公式ドキュメント: https://ui.shadcn.com
Next.js公式ドキュメント: https://nextjs.org/docs