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年7月時点】
同じv0でも、指示の仕方と使うプランで体験が大きく変わります。狙ったUIを出すプロンプトのコツと、無料枠・有料プランの考え方を整理します。
狙ったUIを一発で出すプロンプトのコツ
精度を上げる指示には共通点があります。次の3つを意識するだけで、作り直しの回数が目に見えて減ります。
- shadcn/uiの部品を名指しする：「モバイルナビはSheetで」「検索はCommandで」のように具体的な部品名を指定すると、意図どおりの実装になりやすい。
- レスポンシブを明示する：v0は常にレスポンシブで作るとは限らないため、「モバイルは縦積み、デスクトップはグリッド」と条件を書く。
- 状態を書き出す：ローディング・空・エラーなど、UIの状態も指示に含めると実務で使える完成度になる。
無料枠でできる範囲
2026年7月時点で、無料プランには毎月$5分のクレジットが付き、毎月リセットされます。加えて1日あたりのメッセージ数に上限（おおむね7メッセージ前後）が設けられています。課金体系は従来の「固定メッセージ数」ではなく、入力・出力のトークン量に応じてクレジットを消費する方式に変わっており、短い指示ほど消費が少なく済みます。まずは無料枠で、単発のコンポーネント生成から試すのがおすすめです。出典: v0 Plans and Pricing（公式）
有料プランとクレジットの考え方
本格的に使うなら、Premium（月$20）以上でクレジットと利用できるモデルの幅が広がります。上位にはTeam（1ユーザー月$30）、Business（1ユーザー月$100）、個別見積もりのEnterpriseがあります。無料枠を超えた分は追加クレジットを購入でき、購入分は1年で失効、Team以上ではチームで共有できます。個人の学習・検証は無料〜Premium、複数人での開発はTeam以上、という目安で選ぶと無駄がありません。出典: Updated v0 pricing（Vercel公式ブログ）
よくあるエラー・つまずきと対処法
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が最適）で、あくまで用途適性の目安です。
用途別・適性の採点表
| 用途 | v0 | Bolt.new | Lovable | Cursor |
|---|---|---|---|---|
| UIコンポーネント単体 | 5 | 3 | 3 | 3 |
| フルWebアプリのたたき台 | 2 | 5 | 5 | 3 |
| バックエンド・DB連携 | 1 | 4 | 4 | 4 |
| 既存コードへの組み込み | 4 | 2 | 2 | 5 |
| 学習コストの低さ | 5 | 4 | 4 | 2 |
あなたに向くのはどれか
採点から言える編集部の結論はシンプルです。「きれいな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つ、無料枠で生成するところから始めてみてください。
