v0とは？使い方・料金と、作った画面を自社サイトに持ち出す方法（v0.app・Vercel）

v0はVercelのサービスで、チャットの指示から画面やWebアプリのコードを作成できます。

Vercelは2025年8月11日に、v0.devからv0.appへの変更を公式に発表しました。

作った画面はダウンロード・GitHub・Vercelへの公開で持ち出せます。ただしNext.jsなどの構成なので、そのままHTMLとして使うには書き出しの手順が必要です。

料金は、無料のFreeが1日7メッセージまで（新規は$5分のクレジットを一度だけ）、有料のPlusは1人月$30からです（調査時点）。Vercelでサイトを公開・運用する費用は別にかかり、Vercel Proは月$20からです。

v0とは？v0 AI・v0 by Vercelの意味

v0とは、作りたいものを文章で伝え、画面とその動作をコードにするAI開発サービスです。

提供元は、Webサイトやアプリの公開基盤を提供するVercelです。「v0 by Vercel」は提供元を示す表現で、別の製品名ではありません。「v0 AI」で探している場合も、本記事が扱うのはこのサービスです。

公式FAQでは、コードの経験がなくても利用できるとしています。データ保存などの裏側の処理も作れることは、公式ガイドのフルスタックのアプリの説明にあります。ただし、不具合がないことや自社の用途への適合性までは保証されません。v0公式FAQ

既存サイト内のLPか独立したアプリかを決め、制作後の引き継ぎまで考えましょう。

v0でできること

v0では、会社紹介や商品LPから、データ保存を伴うWebアプリまで制作できます。

公式の制作例を、事業者向けに整理すると次のようになります。v0公式概要

主な技術は次のとおりで、フルスタック開発ではNext.jsが標準です。

EC用途ではShopify連携もありますが、開発用ストアのままでは実注文を受けられません。本番にはストアの引き取りとプラン選択が必要で、商品画面と受注運用を分けて確認します。Shopify連携の公式説明

v0の使い方の流れ

v0の使い方は、登録して指示を送り、プレビューを修正し、公開する流れが基本です。

公式入門ガイドを踏まえ、会社のサイトでは次の順で進めます。公式入門ガイド

1. 登録・サインインする：チャットやプロジェクトを作り、会社での管理者も決めます。
2. 指示する：読者、目的、掲載内容、見た目の条件を伝え、価格や実績の資料を渡します。
3. 修正する：チャットやDesign Modeで調整し、パソコンとスマートフォンの表示を確認します。
4. 公開する：Vercel公開かコードの持ち出しを選び、本番の表示やフォーム送信を確かめます。

公式のプロンプトガイドも、背景を具体的に伝え、複雑な制作を小さく分ける方法を勧めています。次は、商品撮影サービスのLPを想定した、本記事独自の指示例です。Text Prompting

中小EC事業者のWeb担当者に向けた、商品撮影サービスのLPを作ってください。目的は撮影相談の問い合わせで、文章と回答は日本語にしてください。 特徴、撮影事例、依頼の流れ、FAQ、問い合わせボタンを配置してください。価格や実績は渡した資料だけを使い、不足する情報は質問してください。 白を基調にし、スマートフォンでも見出しとボタンを読みやすくしてください。まずページの骨組みを示し、確認後に見た目を調整してください。

修正では「良くして」ではなく、対象、変更内容、残す部分を具体的に伝えましょう。

v0の料金

v0の料金は、月額プランと生成・修正に使うクレジットを分けて確認します。

以下は調査時点の2026年10月27日の公式記載で、金額は米ドルです。適用される税金は別途加算されるため、最新の料金と契約条件は公式で確認してください。公式料金表・料金ドキュメント

旧Teamは2026年7月21日にPlusへ名称変更され、以前の契約条件とは区別が必要です。当時のTeamは月$30／利用者、含まれるクレジットも月$30／利用者でした。公式変更履歴

Plusの料金表には、$30と取り消し線付きの$90が併記されています。申し込み画面で適用額を確認してください。割引の終了日や将来の適用価格は、公開情報では確認できません。

Freeの付与条件とクレジットの期限

新規Freeの$5は毎月補充されず、自分の請求設定で適用条件を確認する必要があります。

クレジットの消費は、入力と出力のトークン量や、選ぶモデルによって変わります。トークンは文章やコードを処理する単位で、入力にはチャット履歴やソースファイルも含まれます。そのため、短い修正指示でも、指示文の長さだけで費用を判断できません。料金ドキュメント

画面の一部だけを直す方法

文字・色・余白などを部分的に直す場合は、対象を選択できるDesign Modeが使えます。

公式資料では、プレビュー上の要素を選び、次のように変更する手順を説明しています。Design Mode公式資料

1. プレビューのツールバーからDesign Modeを開き、直したい要素を選択します。
2. 文字、背景色、余白、枠線、角の丸みなどを、パネルで調整します。
3. 構成の変更は入力欄で依頼し、選択した場所に対する指示を追加します。
4. 変更前後を比べ、問題がなければApplyでソースコードへ反映します。

自然言語の指示には、選択した要素のスクリーンショットも自動で添付されます。

過去の版は確認・復元でき、復元するとそのコードを使った新しい最新版が作られます。手動編集は扱いが異なるため、すべての操作が同じ履歴を残すとは限りません。Versions公式資料

作った画面を自社サイトに持ち出す方法

v0のコードは、ダウンロードやGitHub連携などで取り出し、別の環境で利用できます。

ZIPと個別ファイルのダウンロード

公式変更履歴で案内されるZIP取得は、プロジェクトメニューのDownload ZIPから進めます。

個別ファイルはCode viewerのCopy file contentsやDownload fileで取得します。未保存の編集も反映されるため、確認済みの内容を保存してから渡しましょう。Code viewer公式資料

GitHubに保存して修正を続ける

GitHub連携の公式手順では、次の操作で非公開リポジトリを作成できます。GitHub連携公式資料

1. Project menuのSettingsからGitHubを開き、Connectを選びます。
2. Git Scopeで保存先のアカウントまたは組織を選び、リポジトリ名を入力します。
3. Create Repositoryを選び、現在のコードが保存先へ送られたことを確認します。

連携後は作業用ブランチに変更を保存し、公開時にレビューやチェックを経て進めます。GitHub側の保護ルールが適用されるため、連携するだけで本番へ即時反映されるとは限りません。リポジトリがコードの基準となる保存先であり、削除すると復旧できない可能性もあります。

GitHubのDownload ZIPはその時点の写しを、クローンは履歴も含めて取得します。

shadcn CLIで画面部品を取り込む

shadcn CLIは、コマンドで部品と依存関係を追加する、制作担当者向けの道具です。公式資料のaddコマンドはURLなどを指定でき、形式例は次のようになります。shadcn CLI公式資料

npx shadcn@latest add "取り込み用URL"

通常の共有URLと取り込み用URLは区別し、取得できなければZIPやGitHubを検討します。

引き継ぎではコードに加え、画像、フォント、環境変数、データ保存先、ドメイン管理も確認します。外部サービスの保存データや契約は、コードとは別の引き継ぎ項目として整理しましょう。

v0の画面を静的なHTMLとして使う方法

Next.jsの静的書き出しを使えば、対応する構成をHTML・CSS・JavaScriptとして出力できます。

コード取得後、次の設定例を参考に、既存の設定を維持して出力方法を調整します。Next.jsの静的書き出し

const nextConfig = {
  output: 'export',
}
module.exports = nextConfig

続いて、開発環境で次のビルドコマンドを実行します。

next build

通常はoutフォルダーにHTML・CSS・JavaScriptなどが生成され、ファイル一式を配置します。古い記事にあるnext exportは削除済みなので、そのまま使わないようにしてください。

公式資料では、Server Actionsや、リクエストに依存する処理などは非対応です。フォームの画面を書き出せても、その送信や保存まで静的ファイルだけで動くとは限りません。

標準の画像最適化もそのままでは非対応で、カスタムローダーやunoptimizedの設定を確認します。Imageの設定

納品時は「静的ファイル一式」と「元のコード・更新手順」を指定し、再ビルドの担当も決めます。

v0からVercelに公開する方法と費用

VercelへはPublishから公開できますが、会社の販促サイトでは商用利用の契約確認も必要です。

公式手順では次の順で公開・更新します。公開手順の公式資料

1. チャット上部のPublishを開き、Vercelのプロジェクト名を確認します。
2. 公開範囲とドメインを確認し、本番へのデプロイを開始します。
3. 修正後は再びPublishを開き、Publish Changesで本番に反映します。
4. 本番URLを開き、プレビューで確認した内容が反映されたかを確かめます。

GitHub連携時はプルリクエストやマージと連動し、未連携なら現在のコードを直接公開します。

Vercelの無料Hobbyは、非商用の個人利用に限定されています。公式の商用利用例には商品・サービスの販売の宣伝も含まれ、商用にはProまたはEnterpriseが必要です。この定義に照らすと、決済のない企業の販促LPでも、商用として検討する必要があります。Fair Use Guidelines

Vercel料金も2026年10月の調査時点で、最新は公式で確認してください。v0の制作費と公開先の利用料を分けて見積もりましょう。Vercel Pro公式説明

公開時にはvercel.appのURLが用意され、HTTPSが自動設定されます。自社の独自ドメインも使えますが、ネームサーバーを変える場合はメール用のMXレコードなども引き継ぎます。ドメイン追加手順

有料Proには対象ドメイン1件の初年度無料特典があり、指定の末尾のみ対象の期間限定です。プレミアムドメインや試用中は対象外で、次年度は通常料金となり、標準で自動更新されます。ドメイン特典の条件

利用規約と会社のサイトで使うときの見方

会社で使う際は、生成物の権利、入力データの扱い、公開後の管理体制を分けて確認します。

AI Product Termsは2026年3月17日更新、3月31日発効と記載されています。知的財産の条項で、利用者とVercelの間の扱いを定めています。AI Product Terms

shadcn/uiはMIT Licenseで、著作権表示と許諾表示の保持が条件となります。写真や購入フォントも、素材側の契約を別に確認します。shadcn/ui公式ライセンス

入力データの学習利用は、契約プランと実際の設定をAI Policyと照らして確認します。料金表ではBusinessは学習利用からの除外が初期設定、Enterpriseは学習不使用とされています。Vercel AI Policy

v0が向いている場面と準備が必要な場面

制作範囲と持ち出し条件を踏まえた、本記事の判断目安です。

当社の場合は、v0を自社制作では使わず、Claude CodeやCodexにHTMLとCSSを書かせています。文章・部品と組み立てるプログラムを「生成元」、公開するHTMLを「生成物」に分けています。生成元を直して組み立て直し、前の版を保存し、確認用ページと公開後の実物を確認します。v0との比較では、生成形式と更新方法の違いとして捉えています。

持ち出したページは共通CSSの影響も確かめ、フォームは「送れる・届く・完了表示」の3点を確認します。

よくある質問（FAQ）

v0の導入では、無料枠、日本語の指示、旧名称、既存サイトへの組み込みを確認しましょう。

v0は無料でどこまで使えますか？

Freeは月額$0で、メッセージ上限は日7件と案内されています。Design Mode、GitHub同期、Vercel公開も掲載されていますが、無制限という意味ではありません。新規の$5は一度限りで、既存Freeの月$5と区別してください。

v0には日本語で指示できますか？

公式FAQは、英語は必須ではなく、好みの言語で指示でき、同じ言語で応答すると説明しています。資料には日本語を名指しした対応範囲や精度保証はなく、文章の確認が必要です。

v0.devとv0.appの違いは何ですか？

2025年8月11日にVercelが変更を発表し、バックエンドや処理ロジックも含む制作を説明しました。古い記事の料金や操作画面は、現行の公式資料と照らして確認してください。Vercel公式発表

WordPressなど既存のサイトに入れられますか？

公式FAQは外部への公開を説明していますが、WordPressへ貼り付ける公式手順は資料にありません。生成コードの構成、静的書き出しの可否、既存のCSSやフォームとの関係を確認します。

Lovableとの違いは何ですか？

Lovableも、チャットの指示でサイトやアプリを作るサービスです。この記事はv0の公式情報だけで書いているため、優劣は断定しません。比べるときは、両方の公式ページで同じ時点の料金と機能をそろえて確かめてください。Lovableの使い方と料金は『Lovableとは？使い方・料金と、公開前に確かめること』で整理しています。