v0 ランディングページビルダー

概要

v0 by Vercel は、プロダクション品質のランディングページを最速で構築する方法です。ページの内容を自然言語で説明するだけで、v0 が React/Next.js/Tailwind のコードを生成します。会話形式で反復改善し、エクスポートしてデプロイできます。これまでデザイナーと開発者で1～2週間かかっていた作業が、ファウンダーやマーケターなら2～4時間で完了します。このスキルは、あらゆるタイプのGTMランディングページをv0で構築するためのステップバイステップのプレイブックです。

権威ある基盤

v0 by Vercel — 生成UIプラットフォーム（Guillermo Rauch）
shadcn/ui — v0を支えるコンポーネントライブラリ
Tailwind CSS — ユーティリティファーストCSSフレームワーク
Next.js — プロダクション向けReactフレームワーク

使用タイミング

トリガーフレーズ: "v0でランディングページを構築", "v0チュートリアル", "v0 ランディングページプロンプト", "v0 by Vercel マーケティング", "AIランディングページビルダー", "v0でランディングページ生成", "v0 価格ページ", "v0 ウェイトリスト"

v0の基本

v0とは: v0.dev — Vercelの生成UIプラットフォーム。あなたが入力すると、shadcn/ui + Tailwind CSSを使用したReactコンポーネントを生成します。以下のことが可能です:

単一のプロンプトからページ全体を生成
特定のセクションを反復改善（「ヒーローの見出しを変更」）
個別コンポーネントの生成（「アバター付きの testimonial カード」）
Next.jsプロジェクトへのコードエクスポート
Vercelに直接デプロイ

料金: 無料枠（月200回生成）。Pro（月20ドル）で無制限。

ステップバイステップのプロセス

フェーズ1: 準備（v0を開く前）

最初のプロンプトの前に5つのことを定義する:

ページタイプ: ランディングページ、価格ページ、ウェイトリストページ、イベントページ、機能発表、マイクロサイト？
オーディエンス: 誰ですか？何を重視していますか？
アクション: 訪問者に何をさせたいですか？（トライアル開始、デモ予約、ウェイトリスト参加、今すぐ購入）
ブランド: カラー（プライマリ/セカンダリ/ニュートラル）、フォント（Interは安全）、トーン（プロフェッショナル、遊び心、テクニカル、プレミアム）
リファレンス: どの既存サイトのような雰囲気にしたいですか？「Stripeのようにクリーン」または「Vercelのようにテクニカル」または「Linearのように大胆」

ブランドコンテキストドキュメント（最初のv0プロンプトに貼り付ける）:

ブランドコンテキスト:
- 会社: [名前]
- 製品: [一言説明]
- プライマリカラー: #0066FF
- セカンダリ: #FF6600
- フォント: Inter
- トーン: 直接的、データに基づく、自信に満ちた
- リファレンス: Stripe（クリーン、ミニマル）+ Linear（ダーク、テクニカル）
- 使用禁止: グラデーション、絵文字、ストックフォト、汎用的なSaaSの決まり文句

フェーズ2: ページを生成する（プロンプトエンジニアリング）

マスタープロンプトテンプレート:

[会社/製品]向けの[ページタイプ]を構築してください。

オーディエンス: [ICP]。彼らは[トップ3の関心事]を気にしています。

セクション（順番通り）:
1. ナビ: [会社ロゴ左、リンク中央、CTA右 — 「無料トライアルを開始」]
2. ヒーロー: 見出し[メリット重視、10語以内]。サブ見出し[1文で拡張]。プライマリCTA「無料トライアルを開始」。セカンダリCTA「仕組みを見る」。ヒーロー画像/ビデオプレースホルダー。
3. ソーシャルプルーフ: 6つの顧客ロゴを横並びに。「2,000以上のチームに信頼されています」
4. バリュープロップ: 3列。各列: アイコン、見出し、1文。機能ではなく、OUTCOMES（成果）に焦点を当てる。
5. 使い方: 3ステップ。各ステップ: ステップ番号、見出し、1文。ビジュアル: スクリーンショット/GIFプレースホルダー。
6. 機能: 2列グリッド。6つの機能。各機能: 機能名 + 1文。
7. お客様の声: 3つの引用カード。各カード: 引用（1～2文）、名前、役職、会社、顔写真プレースホルダー。
8. 価格（価格ページの場合）: 3ティア。月額/年額トグル。おすすめのティアをハイライト。各ティア: 価格、説明、5つの機能、CTA。
9. FAQ: 6つの質問と展開可能な回答。価格、設定、セキュリティ、サポート、キャンセル、比較をカバー。
10. 最終CTA: ヒーローCTAと同じ。「無料トライアルを開始」。クレジットカード不要。
11. フッター: ロゴ、リンク、著作権、ソーシャルアイコン。

スタイル:
- ダークテーマ（またはライト — どちらかを選ぶ）
- カラーパレット: プライマリ #0066FF、セカンダリ #FF6600、背景 #0A0A0A、テキスト #FFFFFF、ミュート #9CA3AF
- タイポグラフィ: Inter、見出しは太字、本文は標準
- スペーシング: 余裕を持って。セクション間は80～120px
- カード: 微妙なボーダー、8pxの角丸、ホバーで浮き上がる効果
- ボタン: プライマリ（塗りつぶし、白文字）、セカンダリ（アウトライン、プライマリカラー）
- 最大幅: 1200px、中央揃え

技術:
- モバイルレスポンシブ: モバイルではセクションを縦に積み重ねる
- タッチターゲット: モバイルでは44px以上
- アニメーション: スクロール時に微妙なフェードイン（Intersection Observer）
- 重いアニメーションは禁止。prefers-reduced-motion に従う。

このプロンプトが機能する理由:

すべてのセクションを順番に指定している（v0は上から下に構築する）
ビジュアルスタイルを含む（色、タイポグラフィ、スペーシング）
技術要件を含む（レスポンシブ、アクセシブル）
具体的な例を示している（「CTAここ」ではなく「無料トライアルを開始」）

フェーズ3: セクションごとに反復改善する

すべてを1つのプロンプトで修正しようとしないでください。セクションごとに反復改善します:

反復シーケンス（15～30分）:

1. 「ヒーローの見出しが一般的すぎます。具体的にしてください: '[会社名]は[ICP]が[期間]で[ことを]できるようにします'」
2. 「バリュープロップが機能に焦点を当てています。成果として書き直してください: 'AI搭載キャンペーンビルダー'ではなく'キャンペーンを2時間で出稿、2週間ではない'」
3. 「お客様の声が長すぎます。各引用は最大1～2文にしてください」
4. 「FAQの上に比較表を追加してください。5行: [機能]、私たち、競合A、競合B。私たちにはチェックマーク。競合が不足しているところは'—'を使用」
5. 「価格カードにホバー状態が必要です。おすすめのティアに、ホバー時に微妙な scale(1.02) + 影を追加」
6. 「ヒーロー画像のプレースホルダーをスクリーンショットコンポーネントに置き換えてください。暗い背景、角丸、微妙なボーダー」
7. 「CTAボタンが小さく感じられます。パディング16px、フォント16pxに拡大」
8. 「モバイルでは、ナビをハンバーガーメニューに折りたたんでください。モバイル版を見せてください」
9. 「ヒーローをスクロールした後に表示される固定CTAバーを追加してください。'無料トライアルを開始'ボタン、白背景、微妙な影」
10. 「ページ全体をレスポンシブにしてください。375px、768px、1024px、1440pxでテスト」

フェーズ4: 個別コンポーネントを生成する

ページ全体は良いが、1つのセクションにもっと作業が必要な場合:

「お客様の声セクションだけを生成してください。3つのカードを横並びに。各カード:
- 背景: ページ背景よりわずかに明るく
- ボーダー: 1px、微妙
- パディング: 32px
- 上部に引用: 大きく、斜体
- 下部に著者: アバター（円形、48px）+ 名前 + 役職 + 会社ロゴ
- ホバー: 微妙なボーダーアクセント、浮き上がりなし」

v0はそのコンポーネントだけを再生成します。改善されたバージョンで既存のセクションを置き換えてください。

フェーズ5: プロダクション向けに磨き上げる

デプロイする前に、以下を反復改善する:

コピー: すべてのダミーテキストを実際のコピーに置き換える。「v0はプレースホルダーテキストを生成します — あなたはそれを必ず置き換えなければなりません。」実際の見出し、実際のバリュープロップ、実際のお客様の声を書く。
画像: プレースホルダーを実際の画像に置き換える:
- ヒーロー: プロダクトスクリーンショット（Cmd+Shift+4、v0にアップロード）
- 顧客ロゴ: 実際の顧客ロゴ（アップロード）
- お客様の声の顔写真: 実際の顧客写真
リンク: すべてのボタンとリンクを接続する:
- 「無料トライアルを開始」→ サインアップURL
- 「デモを予約」→ Calendlyリンク
- 「価格を見る」→ 価格セクションのアンカー
- フッターリンク → 実際のページ
フォーム: ページにフォームがある場合（ウェイトリスト、お問い合わせ、デモリクエスト）:
- フォームバックエンドに接続（ConvertKit、HubSpot、Googleフォーム、またはAPI）
- バリデーションを追加（メール形式、必須フィールド）
- 成功メッセージを追加（「ありがとうございます。ご連絡をお待ちください。」）
- エラーハンドリングを追加

分析: デプロイ前に追加する:

<!-- headに追加 -->
<script defer data-domain="yourdomain.com"
 src="https://plausible.io/js/script.js"></script>

またはGoogleアナリティクス、PostHogなど。

フェーズ6: エクスポートしてデプロイする

オプションA: v0から直接デプロイ（最速）

v0で「デプロイ」をクリック
Vercelアカウントを接続
Vercel設定でカスタムドメインを追加
完了 — 5分以内に公開

オプションB: Next.jsプロジェクトにエクスポート（より制御可能）

npx shadcn@latest add [コンポーネントURL] — v0コンポーネントを既存のNext.jsプロジェクトに追加
または: v0からコードを手動でコピー → プロジェクトに貼り付け
git push → Vercelがプッシュ時に自動デプロイ

オプションC: 静的HTMLとしてエクスポート（最もシンプル）

生成されたHTML/CSSをコピー
新しいファイルに貼り付け
任意の静的ホストにデプロイ（Netlify、Cloudflare Pages、GitHub Pages）

フェーズ7: ローンチ後の反復改善

ローンチ後、データに基づいて反復改善する:

分析駆動型プロンプト:

1. 「ヒーローのCTAのクリック率は2.1%です。A/Bテスト用に、異なる見出しとCTAを持つ3つのヒーローバリアントを生成してください」
2. 「モバイルの直帰率は68%です。モバイル版を監査し、レイアウトの問題を修正してください。すべてのセクションを縦に積み重ね、タッチターゲットを44px以上に確保」
3. 「価格ページのコンバージョン率は1.2%です。3つの価格ページバリアントを生成してください: 年額デフォルト、月額デフォルト、中央のティアに「最も人気」バッジがあるもの」
4. 「ページの読み込み時間は4.2秒です。最適化: スクロールしないと見えない画像を遅延読み込み、未使用のCSSを削除、重要でないスクリプトを遅延」

特定のページタイプ向けv0プロンプト

SaaSランディングページ

「[製品]のSaaSランディングページを構築してください。ダークテーマ。セクション: ヒーロー、ソーシャルプルーフ（ロゴ）、3つのバリュープロップ（成果）、使い方（3ステップ）、お客様の声（3）、価格（3ティア、年額デフォルト、Growth推奨）、FAQ（6）、最終CTA、フッター。スタイル: Stripeのようにクリーン、Linearのようにダーク。プライマリ: #0066FF。フォント: Inter。」

価格ページ

「[製品]の価格ページを構築してください。3ティア: Starter $49/月、Growth $199/月（推奨）、Enterprise（お問い合わせ）。月額/年額トグル、年額デフォルト。ティアの下に機能比較表。FAQセクション（8質問）。Enterpriseには価格の代わりに「電話を予約」CTAを含める。」

ウェイトリストページ

「[月]にローンチ予定の[製品]のウェイトリストページを構築してください。ヒーロー: 製品名、一言のバリュープロップ、メール入力 + 「ウェイトリストに参加」ボタン。以下: 得られる3つのこと（早期アクセス、ファウンダー価格、優先サポート）。ソーシャルプルーフ: '2,000人以上がウェイトリストに参加。' 登録数を表示するカウンター。」

イベント/ウェビナーページ

「[日付]の[イベント名]の登録ページを構築してください。ヒーロー: イベント名、日時、一言の説明。以下: 参加すべき3つの理由。顔写真、名前、役職、講演タイトルを含むスピーカーセクション。アジェンダ/タイムライン。登録フォーム: 名前、メール、会社。「席を確保」CTA。」

出力フォーマット

v0 ランディングページ構築 — [ページ名]

v0プロジェクトURL: [v0.devリンク]
デプロイURL: [本番URL]

使用したプロンプト:
[マスタープロンプトテキスト]

反復ログ:
1. v1を生成 — [うまくいったこと、変更が必要だったこと]
2. [「ヒーローを変更」] — [結果]
3. [「お客様の声セクションを追加」] — [結果]
...

エクスポート方法: [直接デプロイ / shadcn add / 手動コピー]

ローンチ後:
- 分析: [Plausible / GA / PostHog 接続済み]
- コンバージョン率: X%（目標: Y%）
- 次の反復: [日付 / トリガー]

実装チェックリスト

品質チェック

納品前に、以下を確認する:

出力がユーザーの明示されたリクエストと一致している
名前が挙がったフレームワークや情報源が推奨に反映されている
成果物がエージェントが実行するのに十分具体的である
前提条件、リスク、依存関係が明示されている
根拠のない主張、捏造された事実、プライベート/内部参照が含まれていない

よくある落とし穴

ワンショットプロンプト。 1つのプロンプトで「SaaSウェブサイトを構築」= 汎用的で、ブランドがなく、凡庸な出力。修正: セクションごとに構築する。ヒーローを最初に。反復。次に価格。反復。
ブランドコンテキストなしの汎用的な出力。 ブランドカラー、フォント、リファレンスがないと、v0は汎用的なTailwindを生成する。修正: 最初のプロンプトにブランドコンテキストを貼り付ける。スタイルの参考として既知のサイトを参照する。
プレースホルダーコンテンツを本番環境にリリース。 v0は「Lorem ipsum」とプレースホルダー画像を生成する。これをそのまま公開する = 素人。修正: デプロイ前にすべてのプレースホルダーコンテンツを置き換える。
モバイルで反復改善しない。 v0はデフォルトでデスクトップファーストで生成する。モバイルレイアウトはしばしば崩れる。修正: 専用の反復ステップとして「モバイル版を見せて」を使用する。
フォーム接続なし。 「#」にリンクする「無料トライアルを開始」ボタンは、壊れた約束。修正: デプロイ前にフォームとCTAを接続する。
セクションが多すぎる。 v0は依頼すれば喜んで15セクション生成する。セクションが多い = 認知負荷が高い = コンバージョン低下。修正: 最大6～8セクション。コンバージョン目標を直接サポートしないものはすべて削除する。

エキスパートリファレンス

Guillermo Rauch (@rauchg) — v0作成者、Vercel CEO。v0のアップデート、プロンプトテクニック、生成UIの哲学についてフォロー。
v0ドキュメント: v0.dev/docs — プロンプトガイド、コンポーネントライブラリ、エクスポート/デプロイ手順
shadcn/ui: ui.shadcn.com — v0が生成するコンポーネントライブラリ。これを学ぶとv0が何を構築しているか理解できる。

実行成果物

references/framework-notes.md — 名前付きフレームワークと参照表
templates/output-template.md — エージェント出力用の成果物シェル
scripts/check-output.py — 軽量成果物バリデーター

LeadMagic/gtm-skills

gtm-skills とは？

お気に入りのAIに質問する

ドキュメント