Claude Codeとv0の違い — 画面を作る場と、コードベースで働く場の分かれ目

v0は「プロトタイプだけの道具」ではなくなっている

v0は、Vercelが提供するAIエージェントです。自然言語の指示から実際に動くコードとフルスタックのアプリを作り、ワンクリックでデプロイするか、プルリクエストとして出します。

Claude Codeは、手元のコードベースを読み、ファイルを編集し、コマンドを実行するコーディングエージェントです。ターミナル、IDE、デスクトップ、ブラウザのどこからでも使えます。

ひと昔前なら「v0は画面の下書き、Claude Codeは本番コード」と切り分けられました。いまのv0はそう単純ではありません。既存のGitHubリポジトリを取り込み、専用ブランチで作業し、プルリクエストまで出します。境界線は「プロトタイプか本番か」ではなく、別の場所にあります。

入力の違い — Figmaを渡すか、画像を貼るか

v0が得意なのは、見た目の素材から動く画面を起こすことです。入力は三種類あります。

• スクリーンショットやモックアップ: 画像を取り込むと、レイアウト、色、コンポーネントを読み取って同じ見た目のコードを生成します。見えているUI要素から、ありそうな挙動も推測します
• Figmaのリンク: ファイルかフレームのリンクを貼ります。ページとフレーム、変数やスタイルのトークン、オートレイアウト、文字、アセットを読み、複数の画面を一つのアプリとして組み上げます。Figmaのプラグインやデスクトップアプリはv0側では要りません
• 説明文: 日本語を含む好きな言語で書けます

Figma連携は有料プランの機能です。FigmaのAPIにはFigma側のレート制限があり、上限に当たるとv0は読めた範囲で続行します。大きなファイルでは、ページやフレームの名前をプロンプトに書くと読み取り回数を減らせます。

Claude Codeにも画像入力はあります。画像をウィンドウにドラッグするか、Ctrl+Vで貼るか、パスを文で渡します。エラー画面、UIのデザイン、図を渡して原因を尋ねる使い方が想定されています。Figmaのファイルを読んで画面を起こす専用の入口は、Claude Code自体にはありません。デザインの扱いは次のように分かれます。

• Figmaの設計を読ませたいときは、MCPでFigmaなどの外部ツールにつなぐ使い方が候補になります
• 作ったUIを見た目で確かめたいときは、Chrome連携でブラウザを開かせ、モックとの一致を検証させます

Figmaとの付き合い方そのものはClaude DesignとFigmaの違いに整理があります。Figmaプラグインを作る側の話ならClaude CodeでFigmaプラグインを開発する手順です。

作業の足場 — チャットごとのサンドボックスと、手元のリポジトリ

v0のチャットは、Vercel Sandboxと呼ばれる分離された仮想マシンの上で動きます。プロジェクトのファイル、ライブプレビュー、コマンド実行がこの中にあります。

• Node.jsが入っており、pnpm・npm・yarn・bunが使えます
• Next.js、Vite、一般的なNode.jsプロジェクトを見分けて、開発サーバーを起動します
• 状態はチャット単位で閉じており、別のチャットにファイルや環境変数は漏れません
• 稼働中のサンドボックスは自動で延長されますが、作成から最大24時間が上限です

Claude Codeの足場は、自分のマシンのファイルとシェルです。Webで使う場合のクラウド環境は別の仕組みで、Claude Code Webのクラウド環境に仕組みがあります。シェルコマンドの届く範囲を絞りたいときは、組み込みのBashサンドボックスを有効にします。ただしこのサンドボックスはシェルコマンドだけが対象で、ファイルツールやMCPサーバー、hookは外側で動きます。

足場の違いは、状態がどこに残るかに効きます。v0では、チャットのファイルシステムはセッションをまたいで保たれますが、新しいチャットは新しいサンドボックスです。Claude Codeでは、状態はあなたのリポジトリそのものです。

既存リポジトリの扱い — v0もブランチとプルリクエストで進める

ここで両者の距離が縮まります。v0は公開・非公開のGitHubリポジトリを取り込めます。

1. チャットの+メニューから「Import from GitHub」を選びます
2. リポジトリを選び、ベースブランチとモノレポのルートディレクトリを指定します
3. 最初のコード変更で、v0が専用の作業ブランチを切ります
4. 生成した変更は自動でコミット・プッシュされます。ベースブランチへ直接は押しません
5. 作業ブランチごとにVercelのプレビューデプロイが作られます

公開時はPublishを押すと、プルリクエストを作る(または既存のものを使う)ところから、ベースブランチへのマージ、本番デプロイの完了待ちまでを進めます。必須レビューやブランチ保護などのGitHubのルールに従って動き、人間のレビューが要る場合はプルリクエストが開いたまま残ります。CIの失敗やマージコンフリクトには、「Fix CI」「Fix Conflicts」の操作でv0に直させられます。

v0は既存リポジトリの取り込みと、作業ブランチへの書き出しの両方に対応します。同じ種類のツールとの違いはClaude CodeとLovableの違いと読み比べると見えてきます。

では、既存リポジトリでもv0に任せればよいのでしょうか。分かれ目は二つあります。

• 作業の入口: v0はチャット単位で、Vercelプロジェクトとの接続を前提にします。リポジトリに接続されたVercelプロジェクトがあれば、環境変数や連携が引き継がれます
• 作業の中身: v0の取り込みは、フレームワークの検出、開発サーバー、Vercelのデプロイ経路を軸にしています。ビルドやテストが独自のリポジトリでは、自分の環境のシェルで走らせられるClaude Codeのほうが素直です

権限の持たせ方 — 既定がAutoのv0と、読み取りだけのClaude Code

どちらもシェルコマンドを実行できるエージェントなので、勝手に走らせる範囲の設計が要ります。

v0には三つの権限モードがあり、既定はAutoです。

Autoの許可リストには、ls・cat・grep、ローカルのgit status・git diff、読み取り専用のghとvercelのサブコマンドなどが入っています。設定画面のAgent Permissionsで、User・Teamの範囲ごとにallow・ask・denyを書けます。

Claude Codeの既定のモードは、読み取りだけが確認なしです。ファイル編集まで通すならacceptEdits、確認を最小にするならauto、隔離環境専用のbypassPermissionsなどがあります。モードの選び方は--permission-modeで起動モードを指定するにまとめています。

どちらにも、モードの上にルールを重ねる作りがあります。書き方は似ていますが、細部は違います。

{
  "permissions": {
    "allow": ["Bash(npm run *)"],
    "ask": ["Bash(git push *)"],
    "deny": ["Bash(git push origin main *)"]
  }
}

上はClaude Codeのsettings.jsonの例です(Bash(git push *)の形は公式の書式に沿っています)。v0側のルールはBash(pnpm test:*)のように、末尾に:*を付けます。同じ意図でも書き方は揃わないので、両方を使う場合はそれぞれの書式で書いてください。

出力の違い — デプロイまで一続きか、既存の経路に乗せるか

v0はVercelに直結しています。Publishを押すと、初回はプロジェクト作成、公開範囲、ドメインの確認を経て本番デプロイに進みます。作業ブランチにはプレビューのURLが付き、ビルドが落ちたときは「Fix with v0」がログを読んで直します。

Claude Codeに公開の仕組みは付いていません。公開はあなたのgitとCIの経路に乗ります。リポジトリ側でGitHub Actionsを組めば、IssueやPRのコメントで@claudeと呼び、変更の実装やコミットのプッシュをさせることもできます。ワークフローの作り方はGitHub Actionsのワークフロー作成をClaude Codeで進める手順にあります。

つまり、公開までの距離が違います。画面を作ってすぐ見せたいなら、v0の一続きの流れが短い。すでにCI/CDがあるチームなら、Claude Codeはそれを壊さずに使えます。

料金の数え方 — クレジットか、利用枠かトークンか

v0のプランは次のとおりです。

• Free: 0ドル。1日7メッセージまで。無料クレジットの内容はアカウントによって変わる
• Plus: 1ユーザー月30ドル。チーム機能と共有クレジットプールが付く
• Business: 1ユーザー月100ドル。データのオプトアウトなどが付く
• Premium: 月20ドルですが、段階的に終了していて、新規には提供されていません
• Enterprise: 個別見積もり。SAML SSOやRBACなど

Free以外はクレジット制で、使い切ると生成が止まります。クレジットは前払い残高のように働き、月次の付与分は繰り越されて65日で失効し、購入分は購入から1年で失効します。トークン消費はモデルごとに違い、チャット履歴やソースファイルなどの文脈も入力として数えられます。ChatGPTのPlusやProの契約を接続して、対応するOpenAIモデルの応答分をそちらで賄う手もあります。

Claude Codeは、APIのトークン消費に応じて課金される仕組みで、ProやMaxの契約者は使用量がサブスクリプションに含まれます。実際の支出は、モデルの選択、コードベースの大きさ、複数インスタンスや自動化の有無で大きく変わります。確認の場所は契約形態で違い、ProやMaxならclaude.aiの利用状況ページです。

課金の「単位」が違うので、金額の単純比較は噛み合いません。v0は生成の回数に応じてクレジットが減り、Claude Codeは契約の利用枠かトークンです。試すときは、同じ大きさのタスクを一つ決めて、それぞれの利用状況画面で消費を見比べるのが確実です。

併用するなら — v0で画面を起こし、Claude Codeで育てる

v0とClaude Codeは排他ではありません。v0でGitHubに接続したプロジェクトは、コードがリポジトリに入ります。そのリポジトリをClaude Codeで開いて、テスト、リファクタリング、CIの調整を任せる流れが現実的です。

その際、リポジトリのCLAUDE.mdに、v0由来の変更をどう扱うかを書いておくと迷いが減ります。例えば次のような形です。

# v0との併用ルール
- `v0/`で始まるブランチは、v0が自動で作った作業ブランチ。直接コミットを重ねず、
  差分を読んでから別ブランチで直す
- UIの見た目の調整はv0のDesign modeに任せ、ここではロジックとテストを直す
- shadcn/uiのコンポーネントは既存のものを再利用し、新規の部品を増やす前に相談する

v0側の作業ブランチ名は、例としてv0/main-abc123の形が示されています。プロジェクトで違う命名なら書き換えてください。

併用時の分担の目安は、次のとおりです。

Design modeは、プレビュー上の要素を選び、パネルや文章で変更を重ね、Applyで新しいバージョンとして反映する機能です。最新版のチャットだけで使え、モバイル表示では使えません。

エディタ型のエージェントとの比べ方はClaude CodeとCursorの違いが参考になります。デプロイ側のAIツールをつなぐならVercel MCPサーバーの使い方があります。

まとめ

v0は、見た目の素材から動くアプリを起こし、Vercelへ出すまでが短い道具です。既存リポジトリの取り込みとプルリクエストにも対応しているので、「新規専用」とは言えなくなりました。Claude Codeは、独自のビルドや規約を持つコードベースの中で、読んで直して検証する作業に強みがあります。

選ぶ軸は、入力がFigmaや画像か、公開をVercelで完結させたいか、既存のCIや規約に合わせる必要があるか、の三つです。迷うときは、画面はv0、中身はClaude Codeと分けて試すと、費用と手間の差が自分の環境で見えます。