Vercel v0入門ガイド

v0は、Vercelが提供するAI UIジェネレーターです。プロンプトを入力するだけで、美しいReactコンポーネントが生成されます。

v0とは

特徴

項目	内容
開発元	Vercel
特化分野	UI/コンポーネント
技術	React, shadcn/ui, Tailwind
料金	無料〜$20/月
出力	コピペ可能なコード

他ツールとの違い

ツール	特徴
v0	UI特化、高品質デザイン
Bolt.new	フルスタック、デプロイまで
Cursor	汎用エディタ

始め方

ステップ1: アクセス

1. v0.devにアクセス
2. Vercelアカウントでログイン

ステップ2: プロンプト入力

例: 「モダンなダッシュボードのサイドバーを作って」

ステップ3: 生成を待つ

• 数秒〜数十秒で生成
• 複数のバリエーションが提示

ステップ4: コードをコピー

• 気に入ったデザインを選択
• 「Copy Code」でコピー
• プロジェクトに貼り付け

基本的な使い方

1. コンポーネント生成

良いプロンプト例:
- 「ダークモード対応のナビゲーションバー」
- 「カード型の料金表、3プラン」
- 「モーダルダイアログ、フォーム付き」

2. 修正・調整

追加指示例:
- 「もっとシンプルにして」
- 「色を青ベースに変えて」
- 「アニメーションを追加して」

3. コードの利用

生成されるコード:

• React + TypeScript
• Tailwind CSS
• shadcn/uiコンポーネント

プロンプトのコツ

良いプロンプト

✅ 「ダッシュボードの統計カード。
    売上、ユーザー数、コンバージョン率を表示。
    アイコン付き、上昇/下降の矢印も」

改善が必要なプロンプト

❌ 「かっこいいカード」
→ 具体的に何を表示するか書く

料金プラン

プラン	料金	内容
Free	$0	月200生成
Premium	$20/月	無制限

無料でも十分使えます。

活用例

例1: ダッシュボード

プロンプト:
「SaaS管理画面のダッシュボード。
左にサイドバー、右上にユーザーアイコン、
メインに4つの統計カードとグラフ」

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

プロンプト:
「AI SaaSのヒーローセクション。
大きなヘッドライン、サブテキスト、
CTAボタン2つ、右にダッシュボードのモックアップ画像」

例3: フォーム

プロンプト:
「お問い合わせフォーム。
名前、メール、件名、メッセージ、
送信ボタンはグラデーション」

他ツールとの連携

Cursor + v0 の組み合わせ

1. v0でUIを生成
2. コードをコピー
3. Cursorに貼り付け
4. Cursorで機能を追加

Next.js + v0

v0のコードはNext.jsと相性抜群:

# shadcn/uiを初期化
npx shadcn-ui@latest init

# v0のコードを貼り付け

よくある質問

Q. 商用利用できる？

はい、問題ありません。

Q. 生成されたコードの著作権は？

あなたのものです。自由に使えます。

Q. 日本語プロンプトは？

使えますが、英語の方が精度が高い場合も。

Q. フルページは作れる？

コンポーネント単位が得意。ページ全体はBolt.newがおすすめ。

まとめ

• UI/コンポーネント生成に特化
• shadcn/ui + Tailwindで高品質
• 無料で月200生成
• Cursor等と組み合わせて使うのがおすすめ

次のステップ

• Bolt.new入門ガイド
• AIコーディングツール比較2024