未分類

v0でLPを一晩で作った全手順(実物URL・プロンプト全公開)

フック

夜23時にプロンプトを書き始めた。翌朝7時、LPが本番に出ていた。

デザイン力ゼロ・コード書けない・Figmaも触ったことがない。それでもv0なら出せた。
プロンプトの実物・修正の流れ・引っかかったポイントを、コピペできる粒度で全公開する。


結論3箇条

  • v0は”完成LP”ではなく”草案”を出すツール。1発で完成は期待しない
  • 指示の質 = 出力の質。LP構成を先に言語化してから渡す
  • 5往復で本番品質。1発1時間 → 5往復5時間で完成

この記事を書く理由

「v0が便利」という記事は溢れている。でも「実際にLPを1本作るために、何をどう指示したか」を時系列で公開している記事は少ない。

僕がv0で苦戦したポイント、出力を修正させたプロンプト、本番反映までの工程を、そのまま再現できる粒度で書く。

LPを作る予定があるソロ起業家・副業者が、自分の案件で即使えるテンプレを得られる構成にした。


本文:5時間×5プロンプトの軌跡

案件背景

  • 新規サービス「ソロ起業家の事業棚卸しコンサル」のLP(仮)
  • 目的:問い合わせフォーム送信
  • ターゲット:年収500〜1000万のフリーランス・副業者

Prompt 1(23:00):構成だけ生成

ソロ起業家向けの「事業棚卸しコンサル」サービスのランディングページを作成してください。

要件:
- ヒーローセクション:見出し、サブコピー、CTA
- 課題提起:3項目(数字付き)
- 解決策:自社サービスの説明
- 実績:月商600万のソロ起業家が運営、3事業並走経験
- お客様の声:3件(ダミーOK)
- 料金:3プラン(¥30,000 / ¥80,000 / ¥150,000)
- FAQ:5問
- 申込フォーム

デザイン方針:
- ミニマル・モノクロ+ゴールド差し色
- 数字を大きく見せる
- 余白を多めに

技術:
- Next.js + Tailwind + shadcn/ui
- レスポンシブ対応

結果:30秒で出力。ヒーロー〜FAQまで全セクション揃った。
ただし「ぽい感じ」のダミーテキストしか入っていない。期待通り。

Prompt 2(23:30):ヘッドラインを差し替え

最初の出力は「事業を加速する」みたいな弱いコピーだった。差し替え指示:

ヒーローセクションのヘッドラインを以下に差し替えてください。

メイン:「3事業同時に回す方法、僕が見せます。」
サブ:「月収600万のソロ起業家が、あなたの事業ポートフォリオを3時間で棚卸しします」
CTA:「無料相談を申し込む」(30件先着)

サブの「3時間」と「3事業」と「600万」の数字を、視覚的に大きく目立たせてください。
数字だけ別フォント色で。

結果:数字が金色で大きくなった。いかにも「ぽい」感じが消えて、僕のサービスっぽくなった

Prompt 3(00:30):課題提起の数字化

最初は「集客に困っている」「収益が伸びない」みたいな抽象的な課題が並んでいた。差し替え:

課題提起セクションの3項目を以下に差し替えてください。

1. 「3スキル × 3事業 ≠ 月収300万。組み合わせ方を間違うと逆効果」
2. 「平均週稼働62時間。なのに月収は伸びない」
3. 「ツールに月¥80,000払って、稼働は月10時間しか減っていない」

各項目にアイコンと、それぞれを補強する1段落(80字程度)を追加してください。

結果:抽象→具体に変換された瞬間、LP全体の説得力が3段くらい上がった。
抽象論に終わらせないことが、LPコピーの鉄則だと再認識。

Prompt 4(01:30):FAQをよくある懸念に差し替え

ダミーFAQを実用FAQに:

FAQ 5問を以下に差し替えてください:

Q1. 副業者でも対象ですか?
Q2. オンラインのみですか?
Q3. 3時間で本当に棚卸しできますか?
Q4. 業界・職種に特化していますか?
Q5. キャンセル・返金は可能ですか?

それぞれ150字以内で、率直に答えてください。
売り込みの匂いはゼロで。事実だけ。

結果:素直なFAQが揃った。「売り込みの匂いをゼロに」と明示することで、AIが過剰な営業文体を避ける。

Prompt 5(02:30):モバイル最適化+本番出力

全体をモバイルで見た時の以下を最適化してください:
- 数字の大きさ(モバイルで読みやすく)
- ボタンの配置(サムタッチで押しやすく)
- スクロール深さ(モバイルだと長すぎないように)

最終的にVercelにデプロイ可能な状態のコードを出力してください。

結果:レスポンシブが整った。コピペでVercel公開できる状態。

本番反映(03:30)

GitHubに push、Vercelで自動ビルド、3分で本番反映。
独自ドメイン(既存のkiyoubinbou-san.comのサブパス)に紐付けて、朝7時には公開状態。

所要:5プロンプト × 平均1時間/往復 = 約5時間


データ:v0で出来ること/出来ないこと

✅ 一晩で出来た

  • LP構造設計(ヒーロー〜FAQ〜フォーム)
  • レスポンシブ対応
  • shadcn/uiコンポーネント統合
  • Vercel自動デプロイ

⚠ 苦戦した

  • ヘッドラインのコピー(人間の言語化が必須)
  • 課題提起の具体性(抽象禁止プロンプトで対処)
  • 過剰な営業文体(「売り込みゼロ」明示で対処)

❌ できなかった

  • ブランド固有のビジュアル(ロゴ・写真)
  • 法務(特商法表記・プライバシーポリシー)
  • 決済組み込み(Stripeは別途)
  • A/Bテスト・解析タグ埋め込み

今日からできるv0実装3ステップ

  • [ ] Step 1:自分のサービスのLP構成を箇条書きで先に書く(30分)
  • [ ] Step 2:v0に「構成→ヘッドライン→課題提起→FAQ」の順で5プロンプトを投げる(5時間)
  • [ ] Step 3:1度で完成を諦め、5往復前提で進める

1発完成は絶対に期待しない。これがv0で疲れずに進める最大のコツ。


まとめ

v0でLPを作る本質は、「指示を言語化できる人間」が必要だということ。

  • 構成を箇条書きで先に書ける
  • 課題を具体数字で言える
  • 売り込み臭を意識的に排除できる

これができる人間にとって、v0は最強のツール。
できない人間にとっては、いくら使っても完成しないツール。

v0で完成しない」のはv0の限界ではなく、自分の言語化の限界だった。これが今回最大の学び。

来週は、v0で作ったLPの初動データ(公開後7日のCV率)を公開する。プロンプト品質と成約率の相関も検証して書く。