総評
この記事の料金・機能は公式サイトの記載を2026年11月3日に確認したものです。当サイトで実際に使った検証はしていません。
v0はVercelが提供するAIツールで、テキストプロンプトや画像・ワイヤーフレーム・Figmaのデザインを手がかりに、React/Next.jsのUIを生成できます。公式ドキュメントでは現在、v0を「実際のコードとフルスタックのアプリやエージェントを作るAIエージェント」と説明しており、UIだけでなくバックエンドの処理も作れるとしています。使われる技術は Next.js・React・TypeScript・Tailwind CSS・shadcn/ui です。もともとUI生成から始まったツールなので、デザインからコードへの橋渡しを速くする使い方とは特に相性がよいと言えます。
得意なこと
- プロンプトや参考画像・Figmaのデザインから、Tailwind CSSでスタイリングされたReactのUIを生成
- チャット形式でのやり取りにより、レイアウトや配色などを対話しながら反復的に調整できる
- 生成されたコードは書き出して手元で編集でき、GitHubとの双方向の同期(作業用ブランチとプルリクエストを作る方式)にも対応している
- ランディングページやダッシュボードなど、よくあるUIパターンの叩き台作りに向く
- 公式FAQでは、プロンプトは好きな言語で書け、v0は同じ言語で返答するとされている(日本語の個別の記載は、確認したページにはありません)
過信は禁物な点
- 既存のシステムとのAPI接続や状態管理など、自分のプロジェクトへの統合作業は別途必要になることが多い
- アクセシビリティ(a11y)やレスポンシブ対応は生成された時点では不十分なことがあり、人間による確認が欠かせない
- 公式FAQで挙げられている技術は Next.js・React・TypeScript・Tailwind CSS・shadcn/ui で、他のフレームワークを前提にした開発には向かない
- バックエンドの処理も生成できるとされていますが、複雑な業務ロジックや設計の妥当性、セキュリティは開発者が確認する前提で使う
- 公式FAQでは、v0はユーザーのプロンプトや生成内容をモデルの改善に使うことがあるとされています。学習への利用を止めたい場合は、Vercelの設定でのオプトアウトか、学習からの除外が既定になっている Business 以上のプランが必要です
向いている人
- React/Next.jsでの実装を前提に、UI部分だけ素早く叩き台を作りたいフロントエンドエンジニア
- コードを書かずにアイデアを画面イメージとして形にし、エンジニアへ引き継ぎたいデザイナーやPM
- 新規機能のプロトタイピングを高速化したいチームで、UI層の初稿作成に使いたい人
使い方のコツ
- 最初から完璧を求めず、まず大まかな構成を生成してからチャットで細部を詰めていく
- 生成後のコードは必ず自分のプロジェクトの規約やアクセシビリティ基準に照らして手直しする
- UI確認用のモックとして使う場合と、実装にそのまま組み込む場合で、レビューの厳しさを使い分ける
料金(2026年11月3日確認)
v0 の公式料金ページ(v0.app/pricing)の表示です。ドル建てで、税は含みません。
| プラン | 料金 | 主な内容 |
|---|---|---|
| Free | 0ドル | 1日7メッセージまで、Vercelへの公開、Design Modeでの見た目の編集、GitHubとの同期 |
| Plus | 1人あたり月30ドル | すべてのモデル、1人あたり月30ドル分のクレジット、ログインごとに1日2ドル分の無料クレジット、チームでのチャット共有 |
| Business | 1人あたり月100ドル | Plusの内容に加えて、学習への利用からの除外が既定 |
| Enterprise | 個別見積もり | データを学習に使わない、SAML SSO、権限管理、サポートのSLA |
新規ユーザーには1回限りの5ドル分のクレジットが付くと表示されています。料金プランや機能の詳細は変更される可能性があるため、公式サイト(v0.app)で最新情報を確認してください。
公開と独自ドメイン
v0 で作ったプロジェクトは、チャット画面の Publish から Vercel に公開でき、Settings → Domains から独自ドメインを追加できます。ただし公開先の Vercel の無料プラン(Hobby)は、公式のガイドラインで個人・非商用に限るとされています(広告やアフィリエイトが主目的のサイトも商用に含まれます)。手順と費用はAIで作ったサイトを公開する方法にまとめました。
よくある質問
Q. Reactを知らなくても使えますか。 v0の中で作ってVercelに公開するところまではコードを書かずに進められますが、生成されたコードを読んで直したり、自分のプロジェクトに組み込んだりする段階では知識が要ります。見せるためのサイトならFramer AI、ブラウザの中でアプリを作って公開まで進めたいならBolt.newも候補です。
Q. 生成されたコードはそのまま使えますか。 見た目は整っていますが、アクセシビリティや状態管理は自分で詰める必要があります。「デザインの初稿」として受け取り、実装は自分の設計に合わせる前提が現実的です。
Q. Vercel以外の環境でも動きますか。 公式FAQでは、コードを書き出して手元で作業できるとされ、生成されたコードの所有権はVercelにはないと説明されています。使われるのは Next.js・React・Tailwind CSS などの一般的な技術ですが、Vercel固有の機能を使っている部分は、移す先の環境に合わせた置き換えが必要です。
PR｜生成したUIを実サイトに載せるとき
v0が出すのはコンポーネント単位のコードで、そこから先は自分のプロジェクトに組み込んで公開する工程になります。公開先として、国内のレンタルサーバー・VPSの選択肢に お名前.com レンタルサーバー があります。
※当サイトでは未検証です。料金・対応環境・最新の条件は公式サイトでご確認ください。
お名前.com レンタルサーバー