Vercel v0 - AIでUIを生成するツール

v0とは

v0は、Vercelが開発したAI駆動のUI生成ツールです。テキストプロンプトからReactコンポーネントを生成し、shadcn/uiとTailwind CSSを使用した本番品質のUIを即座に作成できます。

特徴

✓ テキストからUI生成
✓ shadcn/ui対応
✓ Tailwind CSSスタイリング
✓ コードのエクスポート
✓ 反復的な改善
✓ レスポンシブデザイン

基本的な使い方

プロンプトの例

シンプルなプロンプト:
"A login form with email and password fields"

詳細なプロンプト:
"A pricing page with 3 tiers (Basic, Pro, Enterprise).
Each tier should have:
- Name and price
- List of features with checkmarks
- A call-to-action button
Use a dark theme with purple accent colors."

生成されるコード

// v0が生成するコンポーネント例
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Check } from "lucide-react"

export default function PricingPage() {
  return (
    <div className="container mx-auto py-16">
      <h1 className="text-4xl font-bold text-center mb-12">
        Choose Your Plan
      </h1>
      <div className="grid md:grid-cols-3 gap-8">
        {/* Basic */}
        <Card>
          <CardHeader>
            <CardTitle>Basic</CardTitle>
            <CardDescription>For individuals</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-4xl font-bold mb-4">$9/mo</div>
            <ul className="space-y-2">
              <li className="flex items-center gap-2">
                <Check className="h-5 w-5 text-green-500" />
                5 projects
              </li>
              {/* ... */}
            </ul>
          </CardContent>
          <CardFooter>
            <Button className="w-full">Get Started</Button>
          </CardFooter>
        </Card>
        {/* Pro, Enterprise... */}
      </div>
    </div>
  )
}

効果的なプロンプト

構造を指定

"Create a dashboard layout with:
- A sidebar on the left with navigation links
- A header with search bar and user avatar
- Main content area with a grid of stat cards
- Use a clean, modern design"

スタイルを指定

"A product card component with:
- Image at the top (16:9 ratio)
- Product name and description
- Price with strikethrough for discounts
- Add to cart button
- Subtle shadow on hover
- Glassmorphism effect"

インタラクションを指定

"A multi-step form wizard with:
- Step indicator at the top
- Previous/Next buttons
- Form validation
- Success state on completion
- Smooth transitions between steps"

コードのエクスポート

CLIでのインポート

npx v0 add <component-url>

手動コピー

// v0からコピーしたコード
// 必要なshadcn/uiコンポーネントをインストール
npx shadcn-ui@latest add button card

反復的な改善

初回プロンプト:
"A user profile card"

改善プロンプト:
"Make the avatar larger and add a cover image at the top"

さらに改善:
"Add social media links as icons below the bio"

shadcn/uiとの連携

プロジェクトのセットアップ

# Next.jsプロジェクトを作成
npx create-next-app@latest my-app --typescript --tailwind

# shadcn/uiをセットアップ
npx shadcn-ui@latest init

# v0で生成したコンポーネントに必要なものをインストール
npx shadcn-ui@latest add button card dialog

ディレクトリ構造

src/
├── components/
│   ├── ui/              # shadcn/uiコンポーネント
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── ...
│   └── generated/       # v0で生成したコンポーネント
│       ├── pricing-page.tsx
│       └── ...
└── app/
    └── page.tsx

ユースケース

プロトタイピング

"A landing page for a SaaS product with:
- Hero section with headline and CTA
- Features grid with icons
- Testimonials carousel
- Pricing section
- FAQ accordion
- Footer with links"

コンポーネントライブラリ

"Create a set of form components:
1. Text input with label and error state
2. Select dropdown with search
3. Date picker
4. File upload with drag and drop"

レイアウト作成

"An admin dashboard layout with:
- Collapsible sidebar
- Breadcrumb navigation
- Data table with sorting and filtering
- Pagination"

制限事項

注意点:
- 複雑なロジックは手動で追加が必要
- データフェッチングは含まれない
- 状態管理は基本的なもののみ
- アニメーションは限定的

類似ツール

まとめ

v0は、AIを活用してUIを高速に生成できるツールです。shadcn/uiとTailwind CSSをベースにした本番品質のコードを生成し、プロトタイピングやコンポーネント作成を大幅に効率化します。