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をベースにした本番品質のコードを生成し、プロトタイピングやコンポーネント作成を大幅に効率化します。

参考リソース

• v0 公式サイト
• v0 ドキュメント
• Vercel 公式ブログ