v0の使い方｜VercelのAIでUIを生成する手順とつまずき対処2026

v0（Vercel）の使い方は、作りたい画面を日本語で説明するだけで、そのままReactコンポーネントを生成できる点にあります。ChatGPTのような会話で「価格表を作って」「サイドバーを付けて」と指示すると、live previewとコードが同時に出てきて、気に入ればコピーして自分のNext.jsプロジェクトへ貼るだけです。本記事では、アカウント登録から生成・修正・コードの取り出しまでの基本手順に加え、2026年時点の料金と無料枠、よくあるエラーの対処法、そしてBolt.newやLovableとの使い分けを、実際に触ってわかった観点でまとめます。

v0とは？VercelのAI UI生成ツール

v0は、Next.jsをホスティングするVercelが提供するAI UI生成ツールです。汎用のAIコーディング支援とは狙いが違い、「見た目のあるUIを速く形にする」ことに特化しています。まずは何ができて何ができないのかを押さえると、あとの手順で迷いません。

v0でできること・できないこと

v0が得意なのは、ボタンや価格カード、ナビゲーション、ダッシュボードといったUIコンポーネントや画面レイアウトの生成です。一方で、v0はUIを作るツールであって、その裏側で動くバックエンドは作りません。具体的には次のような線引きになります。

• できる： React／Next.js向けのUIコンポーネント、ページ全体のレイアウト、複数画面のたたき台
• できない： APIルート、データベース接続、ログイン認証などのサーバー側ロジック

そのため「UIはv0で速く作り、データ処理は自分で書く（または別ツールを使う）」という分担が現実的です。この割り切りを知らずに「アプリ全部を作ってほしい」と期待すると、あとで肩透かしを食らいます。

出力はReact＋shadcn/ui＋Tailwind

v0が生成するコードは、shadcn/uiのコンポーネントをTailwind CSSでスタイリングしたReactが基本です。shadcn/uiとTailwindは実務でも広く使われている組み合わせなので、出力がそのまま本番コードに近く、テーマの統一や後からの調整がしやすいのが利点です。逆に、shadcn/uiやTailwindを一切使っていないプロジェクトへ貼ると、依存関係の準備が必要になります。

v0の使い方｜UIを生成する基本手順

ここからが本題の使い方です。登録から最初の生成、画像を使った生成、修正とコードの取り出しまでを順番に見ていきます。難しい設定はなく、Webブラウザだけで完結します。

アカウント登録と最初のプロンプト

v0.app（旧v0.dev）にアクセスし、Vercelアカウントでサインインすれば、無料枠ですぐに生成を始められます。最初は欲張らず、1コンポーネント単位で指示すると精度が安定します。たとえば「月額・年額を切り替えられる料金表を3プランで作って」のように、要素・数・切り替えの有無まで具体的に書くのがコツです。生成されると右側にプレビュー、上部の「Code」ボタンからReactコードを確認できます。

画像・スクリーンショットから生成する

v0はテキストだけでなく、スクリーンショットやワイヤーフレーム、手描きラフを読み込ませて再現するimage-to-codeにも対応しています。頭の中のイメージを文章で説明しきれないときは、参考画像を1枚添えるほうが、狙いに近いUIが出やすいです。既存サービスの画面を参考にする場合は、著作権やブランド要素の扱いに注意し、あくまで構成の参考にとどめましょう。

生成後のリファインとコードの取り出し

一発で完璧を狙うより、対話で仕上げるのがv0の使い方の基本です。「サイドバーを折りたためるようにして」「ボタンをアウトライン表示に」「読み込み中のスケルトンを追加して」と、1メッセージずつ修正を重ねます。仕上がったら「Code」からReactコードをコピーし、components/PricingSection.tsxのようなファイルに貼れば、そのままプロジェクトに取り込めます。

プロンプトのコツと料金プラン【2026年8月時点】

同じv0でも、指示の仕方と使うプランで体験が大きく変わります。狙ったUIを出すプロンプトのコツと、無料枠・有料プランの考え方を整理します。

狙ったUIを一発で出すプロンプトのコツ

精度を上げる指示には共通点があります。次の3つを意識するだけで、作り直しの回数が目に見えて減ります。

• shadcn/uiの部品を名指しする：「モバイルナビはSheetで」「検索はCommandで」のように具体的な部品名を指定すると、意図どおりの実装になりやすい。
• レスポンシブを明示する：v0は常にレスポンシブで作るとは限らないため、「モバイルは縦積み、デスクトップはグリッド」と条件を書く。
• 状態を書き出す：ローディング・空・エラーなど、UIの状態も指示に含めると実務で使える完成度になる。

無料枠でできる範囲

2026年8月21日に公式の料金ページを取得して確認したところ、無料プランには毎月$5分のクレジットが付き、1日あたり7メッセージの上限が明記されています。無料プランでもVercelへのデプロイ、Design Modeでのビジュアル編集、GitHub連携までは使えます。課金体系は固定メッセージ数ではなく、入力・出力のトークン量に応じてクレジットを消費する方式のため、短い指示ほど消費が少なく済みます。まずは無料枠で、単発のコンポーネント生成から試すのがおすすめです。出典: v0 Plans and Pricing（公式）

有料プランとクレジットの考え方【2026年8月21日に公式ページで再確認】

v0のプラン構成は改定されており、以前あった「Premium 月$20」「Team 1ユーザー月$30」という区分は現在の公式ページには存在しません。2026年8月21日時点の実際の構成は次のとおりです。古い料金を前提に見積もると倍近くずれるため、ここは必ず最新を確認してください。

費用対効果を判断するうえで重要なのは、クレジットが選んだモデルのトークン単価で減っていく点です。公式が公開している単価は次のとおりで、モデル次第で同じ$5分でも進められる量が20倍以上変わります。

ここから独自に試算すると、無料の月$5分をv0 Miniの出力だけで使い切る場合は約400万トークン相当ですが、同じ$5分をv0 Max Fastの出力に充てると10万トークン相当にしかなりません。UIの試作段階でいきなり最上位モデルを指定すると、無料枠は数回のやり取りで尽きます。編集部としては、骨組みはMiniかProで作り、詰めの1回だけMaxに切り替える使い方をおすすめします。個人の学習・検証はFree〜Plus、複数人での開発や学習オプトアウトが要件ならBusiness以上、という目安で選ぶと無駄がありません。出典: v0 Plans and Pricing（公式）

よくあるエラー・つまずきと対処法

v0でつまずくポイントはある程度パターン化できます。実際に触って遭遇しやすい3つを、原因と対処のセットで解説します。

生成が途中で止まる・クレジット切れ

生成が急に止まる・進まないときは、まずクレジット残量と1日のメッセージ上限を確認します。無料枠は日次上限があるため、複雑な指示を短時間に連発すると頭打ちになります。対処は、指示を分割して1コンポーネントずつ生成する、翌日にリセットを待つ、必要ならPremiumへ切り替える、の3択です。長い要件を一度に投げるほどトークン消費も増えるため、分割はコスト面でも有効です。

生成コードが動かない・依存関係エラー

コピーしたコードが自分のプロジェクトで動かない原因の多くは、shadcn/uiやTailwindの未導入です。v0の出力はこれらを前提にしているため、貼り付け先に同じ土台がないとimportエラーになります。対処は、プロジェクトにshadcn/uiとTailwindをセットアップしてから貼る、または不足コンポーネントを個別に追加することです。バックエンド前提のコード（API呼び出し等）が含まれる場合は、その部分は自分で実装する必要があります。

日本語プロンプトで精度が落ちるとき

日本語で指示するとラベルが英語で出たり、意図とずれることがあります。これは指示が抽象的なときに起きやすい症状です。対処として、前述のとおりshadcn/uiの部品名（英語）を混ぜて名指しし、必要なラベル文言を「」で明示すると安定します。どうしても揺れる場合は、英語で骨組みを作ってから日本語ラベルに差し替えると、レイアウトの崩れを避けられます。

v0とBolt・Lovable・Cursorの使い分け

「結局どれを使えばいい？」に答えるため、UI寄りのv0と、アプリ全体を作るツール、エディタ型を独自に採点しました。5点満点（5が最適）で、あくまで用途適性の目安です。

用途別・適性の採点表

あなたに向くのはどれか

採点から言える編集部の結論はシンプルです。「きれいなUIを部品単位で速く出す」ならv0が最適で、Reactプロジェクトに組み込む前提とも相性が良好です。画面だけでなく動くWebアプリを丸ごと試作したいならBolt.newやLovableが向きます。詳しくはBolt.newの使い方と実際の限界やReplit Agentでアプリを完成させる手順も参考になります。既存コードを触りながら開発するなら、エディタ統合型のCursorが強く、複数ツールの位置づけはAIコーディング補助ツール比較で整理しています。多くの人は「UIはv0、組み込みはCursor」の二枚看板が使いやすいはずです。

まとめ｜v0はUIの初速を最大化するツール

v0の使い方は、日本語で説明→プレビューで確認→対話で修正→Codeをコピーという流れが基本です。出力はReact＋shadcn/ui＋Tailwindで実務に近く、無料枠（月$5分のクレジット・日次上限あり）で十分に試せます。つまずきやすいのは、クレジット切れ・依存関係の未導入・抽象的な日本語プロンプトの3点で、いずれも「指示を分割し、部品名を名指しする」ことで避けられます。アプリ全体の試作は別ツールに任せ、v0はUIの初速を上げる道具と割り切ると、費用対効果が最も高くなります。まずは作りたい画面を1つ、無料枠で生成するところから始めてみてください。