v0（ブイゼロ）は、Vercel（バーセル）が提供するAI UIジェネレーターです。自然言語の指示からReact / Next.js / shadcn/uiベースのUIコンポーネントや画面断片を生成し、プレビュー確認のうえコードとして取り出せます。本記事は全機能の網羅ではなく、試験で押さえる位置づけ（デザイン-to-コード・Vercelエコシステム）とBolt.new・Replit・Cursorとの違い、「v0＝Vercelホスティング」という誤解の整理に絞って書いています。料金や生成枠は2026年6月時点の情報です。利用前は料金プランと公式の最新情報を確認してください。
試験で問われる見方
生成AIパスポートやG検定では、AIコーディング支援や業務利用の注意点が問われることがあります。v0は「テキストからUIコードを生成するWebツール」として、Cursor（エディタ一体型）やChatGPT（汎用チャット）と並べて整理すると覚えやすいです。試験では製品名そのものより、機密情報の入力禁止や生成物のレビュー義務を問う設問の方が多い点に注意してください。
よくある誤解は3つあります。「v0＝Vercelのホスティングサービス」と同一視すること（v0はUI生成ツール、Vercel本体はデプロイ・ホスティング基盤です）。「v0でフルスタックアプリが完成する」と期待すること（主にフロントエンドのUIコンポーネント生成が中心です）。そして「AIが書いたUIはそのまま本番に出してよい」と考えること（アクセシビリティ・セキュリティ・デザインガイドの確認が必須です）。
このサイトの演習で確認する
生成AIパスポート：一問一答 TF-0150（AIコーディング支援）、TF-0348（商用利用と利用規約）、実践演習 HQ-0318（業務利用のケース）
v0とは
v0は2023年頃から公開された、Vercel社のAI UIジェネレーターです。デザイナーやエンジニアが「ログインフォーム」「ダッシュボードのサイドバー」などを日本語・英語で指示すると、Reactコンポーネントのコードとライブプレビューが返ってきます。出力はNext.jsやshadcn/ui（Tailwind CSSベースのUI部品）と相性がよく、Vercelが推すフロントエンドスタックと一体で語られることが多いです。
製品の本質はデザイン-to-コード（デザイン案をコードに変換する）ツールです。Figmaのモックをそのままインポートする専用デザインツールではありませんが、プロンプトと反復修正（「ボタンを大きく」「ダークモード対応」など）でUIのたたき台を素早く作れます。試験では「Vercelが提供するUI生成AI」と覚えると、ホスティングサービスとの混同を避けられます。
v0はブラウザ上のWebアプリとして動作し、ローカルにエディタをインストールする必要はありません。生成したコードはクリップボードにコピーして既存のNext.jsプロジェクトへ貼り付けるか、Vercelアカウントと連携してデプロイする流れが一般的です。Cursorのようにリポジトリ全体をAIが編集するタイプとは、UI部品の生成に特化している点が大きな違いです。
できること（主な機能）
UI生成に関わる主な機能を整理します。
テキストからUI生成
自然言語の指示からReactコンポーネントを生成。ランディングページのヒーロー、カード一覧、設定画面などを試作できます。
ライブプレビュー
生成結果をブラウザ上で即座に確認。指示を追加・修正してUIを反復改善できます。
shadcn/ui・Tailwind CSS
モダンなReact UIスタック（shadcn/ui、Tailwind CSS）を前提としたコード出力。Next.jsプロジェクトへの組み込みがしやすい設計です。
コードのエクスポート
生成コードをコピーして自分のプロジェクトに取り込めます。コンポーネント単位で再利用する想定です。
Vercelエコシステム連携
同じVercelアカウントで生成物をデプロイしたり、Next.jsホスティングと組み合わせやすい導線があります（詳細は公式確認）。
画像・参照UIからの生成
スクリーンショットや参考デザインを添付して、近いUIを生成する機能も提供されています（時期により仕様は変動）。
フルスタック生成ツールとの位置づけ
Bolt.newやReplit Agentはアプリ全体（実行環境・バックエンド含む）をブラウザ上で組み立てる方向性が強いです。v0はUIコンポーネントとフロントの見た目にフォーカスします。API設計、認証基盤、データベーススキーマまで一括で任せたい場合は別ツールの方が向いていることが多く、v0は「画面のたたき台を速く作る」用途で選ばれます。いずれも生成AIを開発フローに組み込む例ですが、生成範囲（UI部品かアプリ全体か）で覚え分けると試験・選定の両方で役立ちます。
料金プランの考え方
v0は無料枠から試せますが、継続利用では有料プランが前提になることが多いです（2026年6月時点）。
無料枠
¥0
月あたりの生成回数に上限
v0 Premium
$20/月前後
個人の本格利用向け
Team / Enterprise
要確認
チーム・組織向け
| プラン | 料金の考え方 | 向いている人 |
|---|---|---|
| 無料枠 | 一定回数までUI生成を試せる。上限到達後は有料プランへ。 | お試し・学習・たまにUI案を作る人 |
| v0 Premium | 月額課金で生成枠・機能が拡大。個人開発の定番プラン。 | 定期的にUIプロトタイプを作るエンジニア・デザイナー |
| Team / Enterprise | チーム共有・組織向け機能（詳細は公式確認）。 | 会社での標準ツール検討 |
| Vercelホスティング | 別サービス。Next.js等のデプロイ・CDN・サーバーレス実行。 | 生成したアプリを公開・運用したい人 |
商用・クライアント案件では、生成UIの利用規約とVercelのポリシー、社内のセキュリティガイドラインを必ず確認してください。顧客データや未公開デザインを無料個人アカウントに入力するのは避けるべきです。
はじめ方・基本的な使い方
ブラウザからv0.devにアクセスし、Vercelアカウントでサインインするだけで始められます。
- v0.dev にアクセス Vercelアカウント（GitHub等連携可）でログインします。初回は無料枠で試せます。
- UIの指示を入力 例：「SaaS向けの料金表コンポーネント。3プラン、月額/年額切替付き」
- プレビューで確認・修正 生成結果を見ながら「モバイル対応にして」「プライマリカラーを青に」など追加指示します。
- コードをコピー 満足したらReact/TSXコードをコピーし、既存のNext.jsプロジェクトに貼り付けます。
- 人がレビューしてから本番反映 依存関係・スタイル・a11yを確認し、テスト後にデプロイします。
ビジネスでの活用例
社内ガイドラインと利用規約の確認が前提です。
フロントエンド開発
- ダッシュボード・管理画面のUIたたき台
- ランディングページのセクション生成
- shadcn/uiベースのフォーム・モーダル
デザイン・プロダクト
- 企画段階のUIモックをコード付きで共有
- A/Bテスト用の画面バリエーション試作
- デザインシステムに沿った部品の素案
教育・資格学習
- AI UI生成の体験教材
- 生成AIパスポートのケース演習の補助
- React/Next.js学習の入り口
メリット・デメリット
| メリット | デメリット |
|---|---|
| React/Next.js/shadcn/uiに最適化された出力 | バックエンド・DBまでは生成しない |
| ブラウザだけで始められインストール不要 | 無料枠では生成回数に制限がある |
| Vercelエコシステムへスムーズに展開しやすい | 生成UIの品質は一定ではなくレビュー必須 |
| UIプロトタイプを短時間で試せる | React/Next.js以外のスタックには向きにくい |
Bolt.new・Replit・Cursorとの比較
AIコーディング・生成で名前が並びやすい4つを整理します。
| 項目 | v0 | Bolt.new | Replit | Cursor |
|---|---|---|---|---|
| 提供元 | Vercel | StackBlitz | Replit | Anysphere |
| 製品の形 | Web上のUIジェネレーター | ブラウザIDE＋AIアプリ生成 | クラウドIDE＋AI Agent | AIネイティブのデスクトップエディタ |
| 主な生成対象 | React UIコンポーネント | フルスタックアプリ全体 | アプリ・スクリプト全体 | 既存リポジトリのコード編集 |
| 実行環境 | プレビューのみ（コードはエクスポート） | ブラウザ内で即実行 | クラウド上で実行・ホスティング | ローカルプロジェクトを編集 |
| 試験での覚え方 | Vercel製・UI生成特化 | 丸ごとアプリ生成の例 | クラウドIDE＋AIの例 | Anysphere製・エディタ一体型 |
UI部品のたたき台ならv0、ブラウザで動くアプリ全体を素早く試すならBolt.newやReplit、既存コードベースをAIに編集させるならCursor、コード片の相談や非エンジニア向けならChatGPT、という使い分けが現実的です。いずれも出力の検証は人が行う点は共通です。
こんな人におすすめ
- Next.js / shadcn/ui でUIプロトタイプを速く作りたいフロントエンドエンジニア
- 生成AIパスポートでAI UI生成の具体例を知りたい受験生
- v0とVercelホスティングの違いを整理したい人
- デザイン案をReactコードに変換するデザイン-to-コードツールを探している人
あえて向いていないのは、API・DB込みのフルスタックを一発生成したい場合（Bolt.newやReplitの方が近い）や、Vue・Angular等React以外が中心の場合（出力スタックがReact前提）です。
よくある質問
v0は無料で使えますか？
はい。無料枠があり、一定量のUI生成を試せます。ただし生成回数や高度な機能には上限があり、継続利用では有料プラン（v0 Premium等）が必要になることが多いです。最新の枠と料金はv0公式（v0.dev）で確認してください。
v0とVercelホスティングの違いは？
VercelはNext.js等のWebアプリをデプロイ・ホスティングするクラウドプラットフォームです。v0は同じVercel社が提供する別製品で、テキストからReact UIコンポーネントのコードを生成するデザイン-to-コードツールです。v0＝ホスティングそのもの、という理解は誤りです。生成したUIをVercelにデプロイできる連携はありますが、製品の役割は異なります。
v0とBolt.newの違いは？
v0は主にReact/Next.js/shadcn/uiのUIコンポーネントや画面断片の生成に特化しています。Bolt.newはブラウザ上でフルスタックアプリ全体（フロント・バックエンド・実行環境）をAIで組み立てる方向性が強いです。UI部品のたたき台ならv0、丸ごと動くアプリの試作ならBolt.new、という使い分けが現実的です。
v0は何が生成できますか？
v0は主にReactベースのUIコンポーネント、ダッシュボード、フォーム、ランディングページのセクションなどフロントエンドの見た目とコードを生成します。APIやデータベースを含むバックエンド全体の構築は主目的ではありません。生成コードはコピーして既存プロジェクトに組み込むか、Vercelエコシステムへ展開する形が一般的です。
v0は誰が提供していますか？
Vercel（バーセル）が提供しています。Next.jsの開発・ホスティングで知られる同社のAI製品で、試験では「Vercel製のUI生成ツール」として整理するとよいです。CursorやBolt.newとは別会社・別製品です。