Claude Design で LP を作る完全ガイド【2026年版】プロンプト例25個 + コンバージョン率を上げる構成術

「LP1本にデザイナー外注で5〜10万円」「修正のたびに2週間待ち」——この常識が Claude Design で塗り替わります。本記事では、マーケター・ディレクター・経営層 が今日から使える実践テクニックを、編集部の検証所感とともに解説します。

結論：4ステップでLP完成

Step 1. 訴求軸を5案で発散（10分）
Step 2. ヒーローセクションを生成（10分）
Step 3. 全体構成を組む（20分）
Step 4. コードに書き出してデプロイ（10〜20分）

所要60分以内で公開可能なLPが1本完成します。

なぜ Claude Design が LP に向いているのか

強み1：マーケティングコピーとデザインの統合理解

Claude は元々ライティングが圧倒的に強い。コピー文 → デザインへの落とし込みが他ツールより自然。

強み2：Tailwind CSS との相性

Claude Design はデフォルトで Tailwind ベースで出力。エンジニアへの引き継ぎがスムーズ。

強み3：A/Bテスト用の量産が容易

1つのプロンプトから5〜10バリエーションを一気に生成。CV比較がしやすい。

弱み1：ブランディングの一貫性

独自フォント・ブランドカラーの厳密適用は人間の調整必要。

弱み2：複雑なインタラクション

スクロール連動アニメ・WebGL は Claude Design では難しく、別ツール（GSAP / Three.js）と組み合わせる。

実践プロンプト25選

A. ヒーローセクション（5パターン）

1. 訴求軸：時短ベネフィット

SaaSサービスの LP ヒーローを作って。条件：
- ベネフィット：週5時間の作業を週30分に短縮
- ターゲット：中小企業の管理職
- トーン：信頼感、ビジネスライク
- CTA：「無料で始める」
- 構成：H1（30文字以内）、説明文（80文字以内）、CTA、信頼指標（導入企業数）

2. 訴求軸：金額ベネフィット

EC運営ツールの LP ヒーロー。条件：
- ベネフィット：月¥3,000で月10万円の売上UP
- 数字を強調：「3,000」「10万」を視覚的に大きく
- A/B用に3パターン作って

3. 訴求軸：失敗回避

業務SaaSの LP ヒーロー。条件：
- 訴求：「97%が陥る失敗を回避」
- 不安喚起 → 解決提示の流れ
- 装飾的すぎず、説得力重視

4. 訴求軸：ソーシャルプルーフ

B2B SaaSの LP ヒーロー。条件：
- 「100社が選んだ」を中心に
- ロゴ並べる枠を用意
- CTA は「30日無料トライアル」

5. 訴求軸：希少性・緊急性

キャンペーン LP ヒーロー。条件：
- 「先着100名」「5月末まで」を強調
- カウントダウンタイマー枠
- 過剰に煽らない上品な表現

B. ベネフィットセクション（5パターン）

6. 3カラムレイアウト

SaaS LP のベネフィット 3カラム。条件：
- 機能ではなく「ユーザーが得る結果」で書く
- 各カラムにアイコン + H3 + 説明 + 数値証拠
- 中央のカラムが視覚的に少し強調されるデザイン

7. ビフォー・アフター

LP のビフォー・アフター比較セクション。条件：
- 左：従来の悩み（赤系）
- 右：解決後の状態（緑系）
- 各5項目、対応する番号で並列表示

8. タイムライン形式

SaaS導入の効果タイムライン。条件：
- Day1, Week1, Month1, Month3 の4段階
- 各ステップで何が変わるか具体的に
- 縦並びで進行感を視覚化

9. 数字カード

ベネフィットを大きな数字で示すセクション。条件：
- 「+47%」「-72時間」など、3つの大きな数字
- カウントアップアニメーション風（静的でOK）
- 各数字の下に1行説明

10. ストーリーテリング

LP の「お客様の1日」セクション。条件：
- 朝〜夜の時系列
- 各時間帯でサービスがどう役立つか
- イラスト風アイコンで視覚化

C. 価格セクション（5パターン）

11. 3プラン横並び（基本形）

SaaS の3プラン価格表。条件：
- Free / Pro / Enterprise
- 中央の Pro プランが「人気」バッジ付き
- 各プランに 7項目の比較リスト
- CTA は各プランに個別配置

12. 月額 / 年額切替

価格表に月額・年額タブ切替を追加。条件：
- タブで月額表示と年額表示が切り替わる
- 年額は「2ヶ月分お得」の表示
- Tailwind + Alpine.js または React で動作

13. 個人 / 法人プラン分離

価格表を「個人」「法人」の2タブに分離。条件：
- 個人タブ：Free / Plus / Pro
- 法人タブ：Team / Business / Enterprise
- タブごとにレイアウト最適化

14. ROI 計算機付き

価格表の上に ROI 計算機を配置。条件：
- 入力：従業員数、月の業務時間
- 出力：節約できる時間と金額
- リアルタイム計算（数値入力で即更新）

15. 比較表（自社優位）

競合と価格 + 機能比較表。条件：
- 左：自社（緑チェック多）
- 右：競合A、競合B（×多）
- 過剰に貶めず、事実ベースで

D. 信頼セクション（5パターン）

16. ロゴウォール

導入企業ロゴウォール。条件：
- 5×4 のグリッドで20社分
- グレースケールで上品に
- ホバーで原色に変化

17. 顧客の声カルーセル

お客様の声カルーセル。条件：
- 顔写真 + 名前 + 役職 + 引用文
- 5人分、横スクロール
- 自動再生せず、手動操作のみ

18. ケーススタディ抜粋

ケーススタディ3社の抜粋。条件：
- 各社：業界 / 導入前の課題 / 導入後の数値
- 「詳細を読む」リンクは各社の個別ページへ
- カード型レイアウト

19. メディア掲載実績

メディア掲載実績セクション。条件：
- 「日経新聞」「TechCrunch」など掲載先のロゴ
- 各メディアの記事へのリンク
- 中央寄せ、シンプル

20. 数字で示す信頼

「数字で示す信頼」統計セクション。条件：
- 4つの大きな数字：導入企業数、ユーザー数、稼働率、サポート対応速度
- 各数字に出典（自社調査 or 第三者）

E. CTA・問い合わせセクション（5パターン）

21. ファイナルCTA

LP最下部のファイナル CTA。条件：
- 「迷ったらまず無料」のメッセージ
- 大きなボタン
- 不安解消（「いつでも解約」「カード不要」）

22. 問い合わせフォーム

B2B 向け問い合わせフォーム。条件：
- 必須：会社名、氏名、メール、電話
- 任意：従業員数、想定利用シーン
- 送信後のサンキューメッセージ

23. 資料ダウンロード

資料ダウンロード CTA セクション。条件：
- 資料の表紙画像
- ダウンロード内容の3項目要約
- メール入力 → ダウンロードリンク送信

24. デモ予約

デモ予約セクション。条件：
- カレンダー埋め込み枠
- 「30分のデモで〜が分かる」3項目
- Calendly または HubSpot Meeting 互換

25. 営業 vs セルフサービス分岐

ファイナルCTA：2つの選択肢。条件：
- 左：「自分で試す」（無料登録ボタン）
- 右：「営業に相談」（問い合わせフォーム）
- 視覚的に対等な扱い

CV を上げる構成の鉄則5つ

1. ファーストビューで結論

スクロール前の3秒で「何のサービスで」「何が得られるか」が伝わる必要があります。Claude Design で生成したヒーローは必ずスマホ表示で確認。

2. CTA は5つ以上配置

1ページに CTA は 5〜7箇所が定石。ヒーロー・各セクション末・ファイナルなど。

3. 不安解消文を CTA 直下に

「カード情報不要」「いつでも解約」「30日返金保証」など。CV率が10〜30%上がります。

4. 数字を3つ以上散りばめる

「97%」「+47%」「-72時間」など、具体的な数字は信頼を生む。Claude Design に「数字を3つ入れて」と指示。

5. モバイル前提で設計

日本のSaaS LPアクセスの60%以上はモバイル。Claude Design は Tailwind ベースなのでレスポンシブは自動だが、要素の優先順位はモバイル基準で。

書き出し → デプロイの実例

Step A：Claude Design で完成

プロンプトに従い、生成・微調整・確認を繰り返し（30〜60分）

Step B：HTML/CSS をエクスポート

「コードを書き出して」で React + Tailwind コードが出力

Step C：GitHub に push

git init
git add .
git commit -m "feat: LP v1"
git remote add origin <repo>
git push -u origin main

Step D：Cloudflare Pages or Vercel に接続

• Cloudflare Pages：無料、日本最速のCDN
• Vercel：Next.js 連携が完璧

Step E：独自ドメイン設定

DNS の A レコード or CNAME を設定 → 数分で公開

Step A〜E まで合計 90〜120分でLP公開完了します。

やってはいけない3つのこと

NG1：1案で決定

Claude Design の真価はA/B テストで効くまで何度も生成できること。1案で「これでいいや」は機会損失。

NG2：コピーまで AI 任せ

ヘッドライン・CTA文言は最終的に人間の判断で。AIが提案する5案から選び、磨くのが正解。

NG3：デザイナーの全否定

Claude Design はディレクション業務を高速化するツールであって、デザイナー不要論ではない。ブランディング・複雑な動きはプロに任せる。

まとめ

• Claude Design ならLP 1本60〜120分で公開可能
• A/Bテスト用に月10案を生成 → CV 改善が現実的
• Pro プラン（月¥3,000）で月数十本作れる
• 外注比でコスト1/10、スピード10倍

「LP 改善が後回しになっていた」状態から、毎週1本テスト が当たり前になる。Claude Design はマーケターの武器です。

あわせて読みたい

• Claude Design 料金プラン徹底比較 — Pro / Max どっちを選ぶ
• Claude Design の制限と対処法 — 詰まったときの参考
• Claude Design 実例集 — 25個の実績例
• Claude Design vs v0 vs Figma AI — ツール選定の決定版