v0とは何か
v0はVercelが開発したAI UIジェネレータだ。テキストのプロンプトを入力すると、ReactとTailwind CSS、shadcn/uiを使ったUIコンポーネントを自動生成してくれる。
「プロンプトからコードを生成する」という説明だけ聞くと「ChatGPTと同じでは？」と思うかもしれないが、v0はUIの生成に特化しており、生成されたコンポーネントがそのままNext.jsプロジェクトに組み込める品質で出てくる点が違う。
実際の操作感
v0.dev にアクセスして、プロンプトを入力するだけで始められる。
ダッシュボード画面を作って。左にサイドバー、右にKPIカードが3つ並ぶレイアウトで、売上・訪問数・コンバージョン率を表示する
こう入力すると10秒前後でコンポーネントが生成される。右側のプレビューで見た目を確認しながら、気に入らない部分はチャットで修正を指示できる。
「サイドバーをダークにして」「カードに先月比のパーセンテージ表示を追加して」と会話形式で改善していける。
生成されるコードの品質
v0が生成するコードはshadcn/uiのコンポーネントを使い、Tailwind CSSでスタイリングされる。アクセシビリティ属性（aria-label等）も基本的に含まれており、手動でゼロから書いたコードと遜色のない品質が出てくる。
生成後、「Next.jsに追加」ボタンを押すとnpx shadcn@latest add形式のコマンドが表示されて、既存プロジェクトへの統合が容易だ。
プロンプトのコツ
良い結果を引き出すためにいくつかのコツがある。
レイアウトを言葉で説明する
「左右2カラムで、左に入力フォーム、右にプレビュー」のように、空間的な配置を言葉で明示するとレイアウトが意図通りに出やすい。
参考にしたいUIを伝える
「LinearのようなシンプルなKanbanボード」「Notionのサイドバーに似た構造」といった形で既存サービスを参考として伝えると、UIのトーンが合わせやすい。
データ構造を先に伝える
「ユーザー一覧テーブル。カラムはname, email, role, createdAt」のようにデータ構造を具体的に伝えると、フォームやテーブルの項目が合った状態で生成される。
実務での使いどころ
プロトタイプの素早い作成
デザイナーとエンジニアで「このレイアウトで合っているか」を確認する際、Figmaより速くv0でモックを作るというチームが増えている。会話ベースで修正できるため、デザインレビューの前工程として使いやすい。
既存デザインシステムへの統合
shadcn/uiを採用しているプロジェクトならそのまま貼れるコンポーネントが出てくる。スタイルガイドに合ったUIを速く作りたい場面で特に効果が高い。
マーケチームの素材作成
サブスク動画サービスのマーケチームがランディングページのセクションを量産する用途でも使われている。コピー文言を差し替えるだけで複数パターンのUIが出てくるため、A/Bテスト用の素材作成が速くなる。
できないこと
v0が苦手とする領域もある。
- 複雑なステート管理ロジック（ReduxやZustandの実装）
- APIとのデータフェッチ処理
- 認証フローの実装
- 独自デザインシステムへの細かな適応
UIの見た目を作るのに特化したツールであり、ロジックまで生成させようとすると品質が落ちる。あくまでUIコンポーネントに集中させて使うのが正しい活用方法だ。
料金
無料プランでも月200リクエスト使えるため、試すには十分だ。Proプランは月20ドルで、リクエスト数が大幅に増える。チームで使う場合はTeamプランが必要になる。
まとめ
v0はUIを速く形にするための特化型ツールだ。shadcn/uiを使ったプロジェクトとの相性が良く、プロトタイプから本番コンポーネントの生成まで幅広く使える。Claude Codeで開発しているプロジェクトでも、UIコンポーネントの初期生成にv0を使い、仕上げと統合をClaude Codeに任せるという組み合わせは実用的だ。
