このガイドのゴール
読み終えると、v0でLPの実コード（Next.js + Tailwind）を生成し、Vercelで公開する直前までを自分の手で再現できます。題材は作り方ガイドと同じ架空カフェ「陽だまり珈琲」のLP。所要時間の目安：1〜2時間。コードは書けなくてOKです。情報は2026年6月時点のものです。
前提（無料で始められます）：メールアドレス（or GitHubアカウント）だけ。Figma取り込みを使う章のみ有料プランが要ります（後述）。この記事は 1日で作るLP制作（作り方の全体像） のSTEP3「v0で見た目を作る」を、v0だけ深掘りした個別ガイドです。
目次
- v0とは（結論：誰向け・何ができる・いくら）
- 料金プラン（無料枠とPremiumの違い）
- STEP 1｜アカウント作成＆無料で触る
- STEP 2｜プロンプトから生成する（実プロンプト）
- STEP 3｜反復で直す（部分指定の直し方）
- STEP 4｜Figmaを取り込む（精度を上げる）
- STEP 5｜仕上げと公開（Claude Code → Vercel）
- v0で稼ぐ（受託での使いどころ・単価）
- つまずきと注意点
- 完成チェックリスト
- FAQ
v0とは（結論：誰向け・何ができる・いくら）
v0（Vercel）は、文章の指示（プロンプト）やデザインから、React/Next.js + Tailwind の実コードを生成し、そのまま公開できる生成UIツールです。デザインカンプではなく動く実装が出てくるのが特徴で、LP/HPのたたき台を数十秒で形にできます。
- 誰向け：コードが書けない/苦手だけど、LP・HPを早く形にしたい人。受託の初動を速くしたい人。
- 何ができる：プロンプト生成／Figma取り込み／部分修正／コード書き出し／Vercelへワンクリック公開。
- いくら：無料枠あり。本格運用やFigma取り込みは有料（次章）。
立ち位置：v0で土台 → 細部はClaude Code/Antigravityで仕上げ → Vercelで公開、が「作って納品」の王道です。
料金プラン（無料枠とPremiumの違い）
v0はクレジット制（生成のたびに消費）。無料枠で使用感は十分つかめますが、毎日使う/Figma取り込みを使うなら有料が現実的です。金額・クレジット量・機能境界は改定が早いので、必ず公式の料金ページで最新を確認してください（下表は2026年6月時点の概算）。
| プラン | 目安 | 主な範囲 | 向き |
|---|---|---|---|
| Free | ¥0 | 毎月の限定クレジットでプロンプト生成・公開を試せる | お試し・学習 |
| Premium | 月$20前後 | クレジット増量。Figma取り込みなどが使える | 受託で日常的に使う人 |
| Team | ユーザー単位課金 | 共同作業・管理機能 | 複数人運用 |
※ 価格・クレジット・各機能がどのプランからかは公式で要確認。本記事は誇大表現をしません（無料枠だけで案件を量産、等は約束できません）。
STEP 1｜アカウント作成＆無料で触る
- v0.dev を開き、メール or GitHubでサインイン。
- 中央の入力欄（プロンプトボックス）が作業の起点。ここに「作りたいもの」を文章で書きます。
- 生成物は右側にプレビュー、コードはCodeタブで確認できます。まずは無料枠で1回生成してみて、消費クレジットの感覚をつかみましょう。
準備のコツ：先に ワイヤーフレーム（設計図） と本物の文章（見出し・メニュー名・価格）を決めておくと、生成の質が一気に上がります。ダミー文章で生成しないこと。
STEP 2｜プロンプトから生成する（実プロンプト）
プロンプトは「誰の・何のページか＋トーン＋構成＋制約」を一息で伝えます。陽だまり珈琲のLPならこう：
コピペするプロンプト：
カフェ「陽だまり珈琲」の縦長LPを作って。温かみのあるアイボリー基調、アクセントは深い茶。フォントはNoto Sans JP。ファーストビューに見出し「日常に、ひと息の陽だまりを。」とサブコピー、［席を予約する］ボタン。セクションは 上から ヒーロー / こだわり3点 / メニュー3点（写真枠＋価格）/ お客様の声 / アクセス（地図枠）/ 再CTA / フッター。スマホ優先のレスポンシブで。Next.js + Tailwindで。
出てくるもの：上記の構成どおりに並んだLPのプレビューと、その実コード。画像はプレースホルダ（灰色枠）で入ります。ここから文言と写真を本物に差し替えていきます。
プロンプトの型（使い回し）：［店名/サービス名］の［縦長LP/HP］。トーンは［色・雰囲気］、フォントは［指定］。FVに［見出し＋CTA］。セクションは［上から列挙］。［スマホ優先/Next.js+Tailwind］で。
STEP 3｜反復で直す（部分指定の直し方）
一発で完璧は狙いません。直したい箇所を名指しして、小さく繰り返します（Draft→Review→Tweak→Re-generate）。
- 配置：
ヒーローの見出しをもっと大きく、ボタンは見出しのすぐ下に。余白を全体的に広げて。 - トーン：
全体をもう少し上品に。角丸を小さく、影は弱く、写真は大きめに。 - 部分追加：
メニューセクションに「本日のおすすめ」タグを各カードの右上に付けて。 - レスポンシブ：
スマホ表示でファーストビューが1画面に収まるように調整して。
コツ：1回の指示は1〜2個の変更まで。盛り込みすぎると意図とズレやすく、クレジットも無駄になります。気に入った状態はこまめにバージョンを残すと戻れます。
STEP 4｜Figmaを取り込む（精度を上げる）
見た目をFigmaで固めてある場合、スクショより「Figmaリンク添付」の方が高精度です。v0が視覚レイアウトとデザイントークン（色・余白）の両方を解析するためです（Figma取り込みは有料プランの機能。要・公式確認）。
- 添付アイコンからFigmaのリンクを貼る。
- 1フレーム＝1 UIセクションに分けておく（navbar / hero / menu など）。開発者へのハンドオフと同じ要領。
- 大きすぎる1フレームに全部詰め込まない。公式も「1フレームに内容を詰め込みすぎると生成品質が落ちる」と明記。
- パーツごとに生成 → 個別に微調整 → プロンプトで結合・配置、と反復構築する。
出典：v0 Docs: Figma（公式） / Vercel Blog（公式）。
STEP 5｜仕上げと公開（Claude Code → Vercel）
v0は土台づくりが得意。細かい要件・独自ロジック・微妙な余白調整は、コードを引き取って仕上げると速いです。
- v0からコードを書き出す（Codeタブ／GitHubに連携）。
- 細部は Claude Code や Antigravity に「
このLPのスマホ表示で見出しが詰まる。余白とフォントサイズを整えて」のように指示して仕上げる。 - 公開はVercelへ。v0からそのままデプロイ、または GitHub→Vercel「Import」で数十秒。手順は 作り方ガイドのSTEP5 に。
これで「v0で土台 → AIで仕上げ → Vercelで公開」の一本道が通ります。
v0で稼ぐ（受託での使いどころ・単価）
v0単体を売るのではなく、「LP/HPを作って納品」する制作の時短エンジンとして使います。
- 初動が速い：ヒアリング当日にたたき台を見せられる＝受注率と信頼が上がる。
- 相場：LP1枚の制作はおおむね3万〜10万円（内容・規模による）。＋月額保守で継続収益。詳細は 受注ガイド。
- 差がつく所：生成物そのままでなく、構成・コピー・ブランド寄せで仕上げること（そこが対価）。
受注〜納品〜保守のテンプレ一式は 実践パッケージ にまとめています。
つまずきと注意点
- 1フレーム/1プロンプトに詰め込みすぎ→ 品質低下。セクション単位に分割する。
- クレジットの浪費→ 大きな作り直しより小さな部分指定。気に入った版は保存。
- 無料枠の境界が読めない→ 料金ページで最新確認。日常運用はPremium前提で見積もる。
- 生成コードは手直し前提→ そのまま納品せず、表示崩れ・リンク・フォーム・速度を必ず確認。
- 独自性・商用→ 画像/フォント/素材のライセンスは自分で確認。他者デザインの丸写しは不可（参考に留める）。
完成チェックリスト（公開前）
- ☐ ファーストビューに見出し＋CTAが収まっている（PC/スマホ両方）
- ☐ 本物の文言・写真に差し替え済み（ダミーが残っていない）
- ☐ ボタン・リンクが正しく動く（予約/問い合わせの導線）
- ☐ スマホ375pxで崩れない（F12の開発者ツールで確認）
- ☐ フォント2種まで／色はメイン1色＋無彩色＋差し色のCTA
- ☐ 表示速度に致命的な重さがない（巨大画像を圧縮）
FAQ
無料だけでLPは作れる？
学習・お試しは無料枠で可能です。ただしFigma取り込みや日常的な制作はクレジット的に有料が現実的。まず無料で1枚作って判断しましょう。
v0だけで納品まで完結する？
たたき台は完結できますが、仕上げ（細部調整）と公開設定はClaude Code/Antigravity＋Vercelと組むと安定します。
Figmaは必須？
必須ではありません。プロンプトだけでも作れます。Figmaがあると意図どおりの精度が出やすい、という位置づけです。
生成したコードの著作権は？
あなたの成果物として扱えますが、使用した画像・フォント・素材のライセンスは別途確認が必要です。他者デザインの丸写しは避けてください。
情報はいつのもの？
2026年6月時点です。v0のUI・料金・無料枠は変わるので、公開前に公式で最新を確認してください。
まとめ：次の一歩
v0は「土台を一気に作る」道具。構成とコピーを自分で固め、仕上げと公開まで通せば、それが立派な作例になります。全体の流れは 1日で作るLP制作、受注は 受注ガイド、テンプレ一式は 実践パッケージ と LP/HP制作プラン へ。作った作例は 作例ギャラリー のように見せると受注につながります。情報は2026年6月時点のものです。