v0.dev
提供元：Vercel 編集部確認済みUI生成
v0.devはプロンプトやスクリーンショットからReact + Tailwindの本番投入可能コードを生成するツール。shadcn/uiコンポーネントを出力するため、既存プロジェクトへの取り込みがスムーズ。アイデアから動くUIまでの距離を最短にする。
- 商用可
- 日本語
- 料金
- $20/月
- ベスト用途
- React / Next.js
- 注目度（編集部主観）
- 4.7 / 5.0
- 対応
- Web
v0.dev で React + Tailwind + shadcn を最速プロト — Free 200gen から Pro 月 $20 まで
v0.dev を本気で触って1ヶ月。結論から言うと、デザイナーとエンジニアの間にあった「素案→実装可能な形」までの距離が、ここまで縮むとは思わなかった。Figmaで3時間かけて組んでいた画面が、ハマれば10分で動くReactコードまで行き着く。
特に強いのは、shadcn/ui をベースに生成してくれる点。多くのチームがすでに採用しているUIライブラリなので、吐き出されたコードが既存プロジェクトに溶け込みやすい。Tailwind CSS + TypeScript の標準スタックなので、Next.js リポジトリに `npx v0 add` で直接取り込める。「AIが生成したから整合性が取れていない」というよくある問題がかなり軽減される。
料金プランは Free（月 200 クレジット・公開チャットのみ）/ Pro $20/月（プライベート + 1,000 クレジット）/ Team $30/シート / Enterprise（SSO・監査ログ）の4段階。Free 無料枠は個人の試作・プロト確認には十分で、業務利用は Pro から。Vercel デプロイがワンクリックで通る点もコスト感に効く。
弱点もある。細かいマイクロインタラクションや、ブランド独自の視覚言語を通すのはまだ苦手。生成されたものは「破綻のない、当たり障りのない良さ」にとどまるので、最後のひと押しは人間の手が必要。ただし、そこに辿り着くまでの時間は確実に縮む。
編集部の結論：React / Tailwind / shadcn のスタックを使うチームの「最初の70%を爆速で消化する」道具として2026年ベスト。Free 無料枠で触感を掴み、業務利用は Pro $20/月から。最終デザインを委ねる相手ではないが、プロトタイピングとスキャフォルディングの初速は他のAIコード生成ツールと比べても抜けている。
AI Tools Hub 編集部
公開情報の集約と編集部の判断による独立レビュー · 更新 2026.05
数字・運営者・無料枠 — ごまかさずに開示
「無料枠あり」「日本語対応」だけでは判断できません。公式ドキュメント・運営会社の登記情報・公開された無料枠条件を整理して掲載します。編集部の検証データが取得できたツールから個別に追記していきます。
日本語精度（編集部スコア）
6/10
日本語プロンプトで生成自体は通るが、UI内のテキストは英語で返ってくる頻度が高い。コピーは差し替え前提で運用するのが現実的。
運営会社
Vercel, Inc.
- 本社
- アメリカ（カリフォルニア州サンフランシスコ）
- 創業
- 2015年（Next.js の開発元）
- 資金
- 累計 $563M（Accel・GV・Notable Capital 等。直近Series E評価額 $3.25B）
無料枠の具体的な数
Free プランで月 200 クレジット（おおよそ画面5〜8パターン）
リセット周期：毎月初にリセット
公開チャットのみ。プライベートチャット・添付画像生成は Pro 以上が必要。
編集部の検証
応答速度・コストの編集部検証は準備中です。揃い次第、検証月とあわせて掲載します。
※ 数値の出典は公式ドキュメント・公開された料金表・運営会社の登記情報です。編集部の検証データは取得完了次第、検証時期とあわせて記載します。料金体系・モデル更新により変動するため定期的に再確認しています。
このツールでできること
公式機能と現場の活用事例から、実務で効く機能を編集部が整理。
本物の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 フレームワークを使っているプロジェクトでは、生成されたコードを移植する作業が発生します。