v0の使い方｜作った画面をコードで持ち出し、自分のサイトに置くまで

結論: まずFreeプランで1画面作り、置き場所に合わせて持ち出し方を選んでください。

• サイト全体を管理したいなら → GitHub連携で非公開リポジトリへ送る
• 既存サイトに部品を1つ足したいなら → ファイルごとにコピーする
• レンタルサーバーに置きたいなら → output: 'export' で静的HTMLにする

v0でLPのヒーローまでは、すぐできた。で、「これ、うちのサーバーにどう置くの？」で手が止まる。ここ、迷いますよね。

v0の解説は「作る」で終わるものがほとんどです。この記事では、その先の「持ち出す・動かす・直す」を公式ドキュメントをもとにまとめました。

この記事の目次

1. v0の使い方の流れは？作る→持ち出す→動かす→直す
2. v0は無料でどこまで使える？2026年10月時点の料金
3. v0のコードをダウンロード・持ち出しする方法は？
4. v0で作ったサイトをVercel以外のサーバーに置ける？
5. 書き出した後、どこを直せばいい？手直しチェックリスト
6. 受託案件をVercelの無料プランで公開していい？
7. よくある質問
8. この記事のまとめ

v0の使い方の流れは？作る→持ち出す→動かす→直す

画面ができた時点で、まだ半分です。

v0はVercelのAIツールです。文章で指示すると、Next.js・React・Tailwind CSS・shadcn/ui（画面部品のセット）のコードを返してくれます。以前の名前はv0.devで、2025年8月にv0.appへ変わりました。

最初の1画面までは、公式のクイックスタートどおりに進めます。

1. v0.appにサインインする
2. 新しいチャットを始める
3. 作りたい画面を説明する（日本語でOK。返事も日本語です）
4. できた画面を見て、指示を足して直す

色や余白だけ直したいなら、プレビュー上部の「Design」タブが早いです。文字色・背景色・余白・角丸を、画面を見ながら変えられます。

v0は無料でどこまで使える？2026年10月時点の料金

1画面を試して持ち出すところまでなら、Freeで足ります。

← 表は横にスクロールできます →

選び方の基準：公式の料金ページ（2026-10-09更新）だけを見ています。価格は米ドルなので、円で払う額は為替で変わります。

個人的にうれしいのは、FreeでもVercelへの公開とGitHub syncが使える点です。持ち出しの練習に課金は要りません。

古い記事に出てくる「月200クレジット」や「Premium $20」は、今の体系とは別物です。

• Premiumは新規の申し込みを受け付けていない
• 使わなかった毎月のクレジットは繰り越せるが、65日で消える

v0のコードをダウンロード・持ち出しする方法は？

迷ったらGitHub連携。部品1つだけならコピーで十分です。

← 表は横にスクロールできます →

GitHub連携で作られるのは非公開のリポジトリです。しかもv0は、mainブランチ（本番用の幹）へ直接書き込みません。

• チャットごとに作業用ブランチを作る
• 「Publish」のときに、プルリクエスト（変更を取り込む申請）経由で統合する
• 手元で直したコードも、ベースのブランチに入れれば「Pull Changes」でv0側に取り込める

これ、地味に安心できるところです。v0と手作業を行き来できるので、最初からGitHub連携にしておくのが一番迷わないと思います。

v0で作ったサイトをVercel以外のサーバーに置ける？

置けます。公式FAQにも「export code and deploy elsewhere」とあります。

レンタルサーバーなら、Next.jsの静的書き出し（サーバーなしで動くファイルにすること）を使います。next.config.js に1行足して next build するだけです。

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

out フォルダにHTML・CSS・JSができるので、中身をFTPなどでアップロードすれば終わりです。古い記事にある next export コマンドは、Next.js 14で廃止されています。

WordPressやSTUDIOへv0のコードを直接取り込む公式の方法は、ドキュメントに見当たりません。v0が出すのはReactのコードです。書き出したHTMLとCSSを見本に、テーマやエディタ側で組み直すのが現実的です。

書き出した後、どこを直せばいい？手直しチェックリスト

静的書き出しでは「サーバーで動く機能」が使えません。直すのはそこが中心です。

← 表は横にスクロールできます →

一番見落としやすいのはフォームです。

v0のプレビューでは送信できたのに、書き出したら動かない。仕組みを知れば当然ですが、ここで詰まる人は多いだろうと感じました。

仮の画像やフォント指定は、生成のたびに中身が変わります。表は「よくある例」なので、自分のコードと照らし合わせてください。

受託案件をVercelの無料プランで公開していい？

報酬をもらって作るサイトなら、Pro以上が条件です。

VercelのHobbyプランは「個人の非商用」に限られます。商用の例として挙がっているのは、次のようなサイトです。

• サイトの制作・更新・ホスティングで報酬を受けている
• 商品やサービスの販売を宣伝している
• AdSenseなどの広告を載せている

受託案件は、ほぼ当てはまります。Proは開発者1人あたり月$20です（2026年10月時点）。

v0の「Publish」は手軽なので、確認せずに押しがちです。公開前に一度、プランを見ておくと安心です。

よくある質問

Q. v0で作ったコードを納品物に使っていい？ A. 公式FAQには「Vercelは生成されたコードの所有権を持たない」とあります。ただ、ほかの利用者の出力と似る場合もあります。中身の確認は使う側の責任です。

Q. 色や余白の手直しにもメッセージを使う？ A. Design Modeなら画面上で直接変えられます。クレジットの扱いは公式に書かれていません。気になるなら利用状況の画面で確かめてください。

Q. 既存のGitHubリポジトリをv0で開ける？ A. 開けます。新しいチャットの「+」→ Import from… → Import from GitHub です。VercelのGitHub Appにアクセス権が必要です。

この記事のまとめ

• v0は「作る→持ち出す→動かす→直す」の4段階で考える
• 持ち出し方は、コピー・GitHub連携・APIの3つ。迷ったらGitHub連携
• レンタルサーバーには output: 'export' で静的HTMLにして置ける
• 書き出し後は、フォーム・リダイレクト・画像まわりを直す
• 仕事のサイトをVercelで公開するならPro以上

次にやること：Freeプランで1画面作り、GitHub連携で非公開リポジトリへ送ってください。手元で npm run dev して表示できれば、自分のサイトへ持ち込む準備は完了です。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。