v0とは
v0は、Vercel社が提供するAI搭載のUI生成ツールです。自然言語でUIの説明を入力すると、React/Next.jsベースのコンポーネントコードを自動生成します。
デザインカンプやワイヤーフレームを用意しなくても、「ログインフォームを作って」「ダッシュボードのレイアウトを作って」のように指示するだけで、すぐに動くUIが手に入ります。
v0の始め方
- v0.devにアクセス: ブラウザで
v0.devにアクセス - アカウント作成: GitHubアカウント等でサインアップ
- プロンプト入力: テキスト入力欄にUIの説明を入力して送信
- プレビュー確認: 生成されたUIがリアルタイムでプレビュー表示される
- コードを取得: 気に入ったらコードをコピーしてプロジェクトに組み込む
ブラウザだけで完結するため、環境構築は不要です。
v0の基本的な使い方
テキストでUIを指示する
v0のプロンプトは、作りたいUIを自然言語で説明するだけです。
- 「シンプルなログインフォーム。メールアドレスとパスワードの入力欄、ログインボタン」
- 「3カラムの料金比較テーブル。Free、Pro、Enterpriseプラン」
- 「ダークモード対応のナビゲーションバー。ロゴ、メニュー、CTA ボタン」
画像からUIを生成する
v0はスクリーンショットやワイヤーフレームの画像をアップロードして、それに近いUIを生成することもできます。
- 手書きのラフスケッチを撮影してアップロード
- 参考にしたいサイトのスクリーンショットを入力
- Figmaのデザインカンプを画像として入力
実践: v0でランディングページを作る
- ヒーローセクション: 「SaaSのランディングページのヒーローセクション。大きな見出し、サブテキスト、CTAボタン2つ、右側にダッシュボードのスクリーンショット」
- 機能紹介セクション: 「上で作ったページに、3つの機能を紹介するカードセクションを追加して。アイコン、タイトル、説明文の構成で」
- 料金テーブル: 「料金プラン比較セクションを追加。3プラン、月額/年額の切り替えトグル付き」
- CTA + フッター: 「最後にCTAセクションとフッターを追加して」
このように、セクションごとに対話的に指示を追加していくことで、完成度の高いランディングページが作れます。
v0を使いこなすコツ
- 具体的に指示する: 「かっこいいUI」ではなく「白背景、青のアクセントカラー、カードレイアウト、影あり」のように具体的に
- 段階的に作る: 一度にページ全体を作るより、セクション単位で生成して組み合わせる方が精度が高い
- 既存のUIライブラリを指定する: 「shadcn/uiのスタイルで」のように、使いたいUIライブラリを明示すると統一感が出る
- レスポンシブ対応を指示する: 「モバイル対応で」と追記すると、レスポンシブデザインを考慮したコードが生成される
- 修正は会話で行う: 生成結果に不満がある場合は「ボタンをもっと大きく」「色をグリーンに変えて」のように追加指示で修正
v0の出力をプロジェクトに組み込む
v0で生成されたコードは、主にReact/Next.jsプロジェクトで使うことを想定しています。
- 生成されたコードをコピーして、自分のプロジェクトのコンポーネントファイルに貼り付け
- 必要に応じて、依存ライブラリ（shadcn/ui等）をインストール
- スタイルやロジックをプロジェクトの要件に合わせて調整
v0はプロトタイプの高速作成に特に強いツールです。最終的な本番コードとして使う場合は、パフォーマンスやアクセシビリティの観点でレビューを行いましょう。
料金について
v0には無料プランと有料プランがあります。無料プランでも基本的なUI生成は可能です。料金の詳細は変更される場合があるため、v0.devの公式サイトでご確認ください。
まとめ
v0は、自然言語からUIコンポーネントを即座に生成できるツールです。デザインのアイデア出し、プロトタイプの高速作成、UIの学習素材として幅広く活用できます。まずはv0.devにアクセスして「シンプルなダッシュボードを作って」と入力してみてください。数秒で動くUIが手に入る体験は、AIコーディングの可能性を実感させてくれます。