v0.dev
提供元：Vercel 認証済みUI生成
v0.devはプロンプトやスクリーンショットからReact + Tailwindの本番投入可能コードを生成するツール。shadcn/uiコンポーネントを出力するため、既存プロジェクトへの取り込みがスムーズ。アイデアから動くUIまでの距離を最短にする。
- 料金
- $20/月
- ベスト用途
- React / Next.js
- 編集部評価
- 4.7 / 5.0
- 対応
- Web
prompt> SaaSダッシュボードを作って。KPI カード3つ、折れ線グラフ、最近のアクティビティ。
MRR
$48.2K
Users
1,280
Churn
2.1%
デザイナーのラフから、そのまま動くReactコードへ — プロトタイピング最速
v0を本気で触って1ヶ月。結論から言うと、デザイナーとエンジニアの間にあった「素案→実装可能な形」までの距離が、ここまで縮むとは思わなかった。Figmaで3時間かけて組んでいた画面が、ハマれば10分で動くReactコードまで行き着く。
特に強いのは、shadcn/ui をベースに生成してくれる点。多くのチームがすでに採用しているUIライブラリなので、吐き出されたコードが既存プロジェクトに溶け込みやすい。「AIが生成したから整合性が取れていない」というよくある問題がかなり軽減される。
弱点もある。細かいマイクロインタラクションや、ブランド独自の視覚言語を通すのはまだ苦手。生成されたものは「破綻のない、当たり障りのない良さ」にとどまるので、最後のひと押しは人間の手が必要。ただし、そこに辿り着くまでの時間は確実に縮む。
編集部の結論：プロトタイピングとスキャフォルディングの道具としては今年ベスト。最終デザインを委ねる相手ではないが、最初の70%を爆速で消化できる。React / Tailwind 前提のチームなら導入の価値あり。
AI Tools Hub 編集部
独立した編集方針による実測レビュー · 更新日 2026.04.12
数字・運営者・無料枠 — ごまかさずに開示
「無料枠あり」「日本語対応」だけでは判断できません。編集部が実機で測った数値、運営会社の本籍、無料枠の具体的な回数まで開示します。
日本語精度（編集部スコア）
6/10
日本語プロンプトで生成自体は通るが、UI内のテキストは英語で返ってくる頻度が高い。コピーは差し替え前提で運用するのが現実的。
運営会社
Vercel, Inc.
- 本社
- アメリカ（カリフォルニア州サンフランシスコ）
- 創業
- 2015年（Next.js の開発元）
- 資金
- 累計 $563M（Accel・GV・Notable Capital 等。直近Series E評価額 $3.25B）
無料枠の具体的な数
Free プランで月 200 クレジット（おおよそ画面5〜8パターン）
リセット周期：毎月初にリセット
公開チャットのみ。プライベートチャット・添付画像生成は Pro 以上が必要。
編集部の実測
測定 2026-04- 応答速度
- プロンプト送信から最初の表示まで 約8〜15秒（標準的なLPコンポーネント）
- 1,000リクエストあたり
- Pro プランの $20 で月1,000クレジット。1生成あたり ≒ ¥3〜30（プロンプト複雑度で変動）
※ 数値は編集部が実環境で計測した参考値、または公式ドキュメントを編集部が再確認した時点の値です。料金体系・モデル更新により変動するため、定期的に再計測しています。
画面プレビュー
v0.dev の主要な画面と使用イメージ。
このツールでできること
編集部が実案件で使って「これは効く」と感じた機能だけを厳選。
本物のReactコード
TypeScript + Tailwind + shadcn/ui。Next.jsリポジトリへそのまま貼れる。
ワンクリックエクスポート
スタンドアロンNext.jsプロジェクトをダウンロード、または shadcn CLI 経由で導入。
ライブ反復
フォローアップのプロンプトで調整。全生成のバージョン履歴を保持。
コンポーネントプリセット
ダッシュボード、設定、認証、価格ページ等のキュレーション済みテンプレート。
Figmaインポート
Figma URLを貼り付けると既存デザイントークンを元に生成開始。
レスポンシブ既定
モバイル・タブレット・デスクトップのブレイクポイントを同時生成。
良い点・弱点
ガチで試した上での、いいところと気になるところ。
◉ 良いところ
- 出力はそのまま本番で使える品質
- shadcn/uiベースで標準的にアクセシブル
- Vercelへのワンクリックデプロイ
- バリアントのフォークが安価
◉ 気になるところ
- React / Tailwindに限定
- デザインシステムの再現はプロンプト工夫が必要
- コードファーストなのでデザイン探索には不向き
実際の使用例 · プロンプト例
そのままコピペして試せる、編集部のおすすめプロンプト。
SaaS のアナリティクス画面を作って。MRR / アクティブユーザー / チャーン率の KPI カード 3 つを上部に、下に折れ線グラフ（30 日間）、右側に最近のイベントのリストを表示。shadcn/ui で、ダークモード対応。
新規ユーザー向けの 3 ステップ オンボーディング。プロフィール → チーム作成 → 最初のプロジェクト。ステップインジケータは上部、各ステップに「スキップ」「戻る」ボタン。モバイル対応。
アカウント設定ページ。左にセクション ナビ（プロフィール / 通知 / 請求 / API キー）、右にアクティブなセクションの詳細フォーム。変更は自動保存風のトースト表示。
料金プラン比較
v0.dev の 3 プラン。まずは Free で試すのがおすすめ。
ユーザーの声（準備中）
このツールの実ユーザーレビューを募集中です。使用感・コスト・導入事例など、現場での利用経験をぜひ共有してください。
よくある質問
日本語プロンプトでも使えますか？
はい、日本語プロンプトに対応しています。ただし生成されるUI内のコピーは英語で返ってくることが多いので、コピーは別途書き換える前提で使うのがおすすめです。
既存プロジェクトへの取り込みはどうやりますか？
v0 が生成したコードは `npx v0 add [component-id]` で直接プロジェクトに追加できます。shadcn/ui を使っている場合はそのまま動作します。
無料プランだけで実務に使えますか？
月 200 クレジットなので、個人の試行・小規模なプロト作成には十分です。チーム運用・本番案件で継続的に使うなら、Premium（$20/月）以上を推奨します。
商用利用は可能ですか？
可能です。生成されたコードの著作権は利用者に帰属します。詳細は公式の利用規約をご確認ください。
Chakra UI や Material UI でも使えますか？
現状、出力は shadcn/ui + Tailwind を前提としています。他の UI フレームワークを使っているプロジェクトでは、生成されたコードを移植する作業が発生します。