For ワークショップチーム
Proposal — 2026.05.24

LP制作WSの「中身」
担保する仕組みづくり

コミュニティの先生から「見た目は綺麗だが、売れるLPの構成になっていない」と指摘を受けた件への対応提案です。 6/6大阪WSに向けて、5/27キックオフまでに仕組みを完成させる前提でまとめました。

DATE2026-05-24 TARGET6/6 大阪WS DEADLINE5/27 キックオフ
01 — Background

背景:何が起きているか

コミュニティの先生から、過去のWS参加者が作成したLPを見て 「見た目や導線、構成の流れが、売れるLPの形になっていない」 と厳しく指摘されました。

先生の指摘(要約)

いくら外側だけを綺麗に整える方法を教えても、中身が売れる構成になっていなければ意味がない。

これまでの対応

にも関わらず指摘が出たのは、仕組みのどこかに穴があるということ。 まずはその穴を診断するところから始めました。

02 — Diagnosis

診断:問題はフォームではない

事前準備フォームの項目を「売れるLPに必要な11要素」と照合した結果:

売れるLPに必要な要素 フォームの項目 状態
商品・サービス名/概要1(d)
ターゲット顧客像1(c)
ターゲットの悩み(Before)2(a)
商品の特徴・カリキュラム3(a)
ベネフィット(After)2(b)
競合との違い・独自性(USP)抜け
お客様の声・社会的証明3(b)
オファー(価格・特典)1(e) + 4(b)
CTA/申込フロー1(f)
ストーリー・世界観3(e)
FAQ3(c)
クロージング4(a)

結論:フォーム自体は非常によくできている。USPだけが抜けているが、それ一つで「売れない構成」になる理由にはなりません。

本当の問題はここ

[フォーム入力] ↓ [まとめてコピー=記入内容のみ] ← ここがブラックボックス ↓ [Claude Codeに貼り付け] ↓ [CCが「自由に」LPを組む] ← 構成順がCC任せ

フォーム末尾の「まとめてコピー」ボタンを押すと、 フォームの記入内容だけが、なんの指示プロンプトもなくコピーされます。 これをClaude Codeに貼っても、CC側は「どんな順番で、どんなトーンで、どんなコピールールで組むべきか」を知りません。

結果、Claude Codeは以下のいずれかになります:

もう一つの問題:「記入の質」

ユミの観察によれば、フォームに「網羅的に」書けている人でも、文字数が多すぎたり、抽象的すぎたりするケースが多い。 フォームの項目を埋めるだけでは「売れる中身」にはならず、記入内容そのものをブラッシュアップする工程が必要。

つまり、必要な改善は2つ:

  1. Claude Codeに「売れる構成順」を確実に指示する(前置きプロンプト)
  2. 受講者が記入内容をブラッシュアップする工程を挟む(壁打ちプロンプト)
03 — Solution

解決策の全体像

現在のフローを以下のように変更します。

現在のフロー

[フォーム入力] → [まとめてコピー(記入内容のみ)] → [CCに貼付] → [LP生成]

改善後のフロー

[★ Claudeで壁打ち専用プロンプトを使って事前ブラッシュアップ ★] ↓ [フォーム入力(ブラッシュアップ済み内容)] ↓ [6/3 講師へ提出] ↓ [当日:まとめてコピー(前置きプロンプト + 記入内容)] ↓ [CCに貼付] → [LP生成]

3つの改善内容

1

前置きプロンプトをフォームに仕込む

「まとめてコピー」ボタンのコピー内容に、構成順とコピールールを指示する前置きプロンプトを自動で前に付ける。 これでCCは毎回「黄金構成順」でLPを組む。フォーム本体は触らない、ボタンの挙動だけ変更。

2

壁打ち専用プロンプトを受講者に配布(事前学習用)

キックオフで受講者に「事前にClaude.ai / ChatGPTでこのプロンプトを使って自分のサービスを壁打ちしてから、フォームに入力してください」と案内する。 このプロンプトは抽象語を具体化させ、長すぎる文章を圧縮させ、USPを引き出す設計にする。

3

受講者向け手順書をキックオフで配布

「壁打ち→フォーム入力→提出→当日」の流れを1枚にまとめたガイド。 キックオフMTGで画面共有しながら説明し、後で見返せるように配布する。

04 — Improvement #1

改善①:前置きプロンプト(フォーム改修)

仕様

フォーム末尾の「入力内容をまとめてコピー」ボタンの挙動を変更し、 コピーされる文字列の先頭に、以下の前置きプロンプトを自動で付加する。

変更範囲

「まとめてコピー」ボタンのJSハンドラ1箇所のみ。フォームのHTML構造・項目・デザインは一切変更不要。

前置きプロンプト本体(コピペ用)

PROMPTあなたは売れるLPを設計するマーケティングディレクター兼コピーライターです。 以下の「入力情報」を使って、ランディングページのHTMLとコピーを作ってください。 必ず下記のルールを守ってください。 【セクション構成(必ずこの順序で)】 1. ファーストビュー - キャッチコピー(ターゲット × 悩み × ベネフィットを内包) - サブコピー(共感を呼ぶ一文) - メインビジュアル(業種にふさわしい雰囲気) - CTAボタン(申込みリンクへ) 2. 共感セクション - 「こんなお悩みありませんか?」を見出しに - 入力情報の【お悩み】を使う - 各項目は読者の生の言葉で書く 3. 未来提示セクション - 「このサービスを受けると、あなたはこうなれる」を伝える - 入力情報の【ベネフィット】を使う - 具体的な数字・行動・変化を入れる 4. サービス内容セクション - カリキュラム・含まれる内容を明示 - 入力情報の【サービスの詳細】を使う 5. 信頼セクション - お客様の声(実名・肩書き・コメントの3点セット) - 講師の自己紹介(共感ストーリー重視) 6. オファーセクション - 価格・支払い方法・特典をわかりやすく - 「今申し込む理由」を添える 7. 不安解消セクション - FAQを3〜5個 - 申込み直前の不安を取り除く 8. クロージングセクション - 背中を押す文言 - 最終CTAボタン(大きく目立たせる) 【コピーライティングの最低ルール】 - 主語は常に「あなた」(読者視点) - 抽象語は禁止:「自信がつく」「変われる」「素敵な」など → 具体的な行動・数字・変化に置き換える - キャッチコピーは「ターゲット × 悩み × ベネフィット」の3要素を内包させる - 各セクションの見出しは読者視点で書く(例:「○○できるようになる」「○○が手に入る」) - 業界用語は素人に伝わる言葉に置き換える - USP(独自性)が情報に薄ければ、講師ストーリーから抽出して明示する 【デザインの方針】 - モデリングLPの世界観を尊重しつつ、可読性とCTAの目立たせを優先する - ヒーローカラー1色 + ニュートラル + アクセント1色の3色構成 - セクション間のspacingは120px以上、要素間は意味的グループで締める - モバイルファースト(ブレークポイント:768px / 1200px) 【出力フォーマット】 - HTMLファイル1枚で完結(CSSはstyle内に記述、JSは最小限) - セクションごとにコメントで区切る - altテキスト必須、画像はWebP想定 【入力情報】

↑ このプロンプトのあとに、現在「まとめてコピー」でコピーされている記入内容がそのまま続く形になります。

実装コード例

現状の「まとめてコピー」ボタンのハンドラに、以下のようにPROMPT_PREFIXを前置するだけです。 関数名・収集ロジックは現行コードに合わせて読み替えてください。

JAVASCRIPT// 既存の「まとめてコピー」ハンドラに以下を追加 const PROMPT_PREFIX = `あなたは売れるLPを設計するマーケティングディレクター兼コピーライターです。 以下の「入力情報」を使って、ランディングページのHTMLとコピーを作ってください。 必ず下記のルールを守ってください。 【セクション構成(必ずこの順序で)】 1. ファーストビュー - キャッチコピー(ターゲット × 悩み × ベネフィットを内包) - サブコピー(共感を呼ぶ一文) - メインビジュアル - CTAボタン 2. 共感セクション(こんなお悩みありませんか?) 3. 未来提示セクション(こうなれる) 4. サービス内容セクション 5. 信頼セクション(お客様の声 + 講師紹介) 6. オファーセクション(価格 + 特典) 7. 不安解消セクション(FAQ) 8. クロージングセクション(背中押し + 最終CTA) 【コピーライティングの最低ルール】 - 主語は常に「あなた」 - 抽象語禁止:「自信がつく」「変われる」「素敵な」など → 具体化 - キャッチコピーは「ターゲット × 悩み × ベネフィット」を内包 - 各セクション見出しは読者視点で書く - 業界用語は素人語に置換 - USPが薄ければ講師ストーリーから抽出 【デザイン方針】 - ヒーロー1色 + ニュートラル + アクセント1色 - セクション間120px+、モバイルファースト 【出力フォーマット】 - HTML 1枚完結、CSSはstyle内、altテキスト必須 【入力情報】 `; function copyAllInputs() { const formData = collectAllFormInputs(); // 現行の収集関数 const fullText = PROMPT_PREFIX + formData; navigator.clipboard.writeText(fullText).then(() => { alert('プロンプト + 入力内容をコピーしました'); }); }

テスト方法(リリース前に必ず)

  1. フォームに仮の入力(テストデータでOK)
  2. 「まとめてコピー」を押す
  3. テキストエディタに貼って、先頭にプロンプトが付いているか確認
  4. Claude Codeに貼って、生成されるLPが構成順通りになっているか確認
05 — Improvement #2

改善②:壁打ち専用プロンプト(受講者配布)

受講者には事前に、Claude.ai や ChatGPTでこのプロンプトを使って自分のサービスを壁打ちしてもらってからフォームに入力してもらいます。 これにより「記入の質」「文字数過多」「抽象的すぎる」問題を解消します。

配布する壁打ち専用プロンプト本体

PROMPT (受講者がClaude.ai / ChatGPTにコピペ)あなたはランディングページ制作専門のマーケティングディレクター兼コピーライターです。 私はこれから、ある講座(サービス)のLPを作るための情報整理をします。 以下のルールで、私の入力を深掘り・添削してください。 【あなたの役割】 - 1項目ずつ深掘り質問を返す - 抽象的すぎる表現には「具体的に何ですか?数字や行動で言うと?」と聞き返す - 文字数が多すぎる項目には「3つに絞るとどれですか?」と整理を促す - USP(なぜ他社じゃなくこのサービスか)が薄ければ追加質問する - 業界用語が出てきたら「素人にも伝わる言葉で言うと?」と聞き返す 【深掘りすべき観点】 1. ターゲットは1人に絞れているか?(年齢・職業・悩みのフェーズまで具体的か) 2. お悩みは「ターゲットが実際に口に出す言葉」になっているか 3. ベネフィットは「数字・行動・変化」が入っているか 4. USP(独自性)が明示されているか 5. お客様の声は「変化のストーリー」が見えるか 6. 価格設定の根拠・特典の魅力は伝わるか 【会話の進め方】 1. 私から各項目の現在の入力内容を貼ります 2. あなたは1項目ずつ深掘り質問または改善提案を返してください 3. 私の回答を踏まえてブラッシュアップ版を提案してください 4. 最後に「ブラッシュアップ後の全項目まとめ(フォームに貼れる形)」を出してください 【禁止事項】 - 私の代わりに「それっぽい答え」を作って終わらせない - 私の入力をそのまま褒めるだけにしない - 抽象語のまま通さない 準備ができたら「準備OKです。まず項目(a)お名前から入力内容を貼ってください」と返してください。

この壁打ちプロンプトの効果

  • 受講者が抽象的な答えで済ませようとしても、Claudeが具体化を要求する
  • 文字数過多の場合は要点圧縮を促す
  • USPの抜けを自動でケアする
  • 受講者自身が「自分のサービスの言語化」を深める学習体験になる
06 — Improvement #3

改善③:受講者向け手順書(キックオフ用)

キックオフMTG(5/27)で受講者に説明する内容です。後で見返せるよう、Slack や 別ページで配布します。

受講者へのメッセージ(そのまま使える文面)

件名:6/6大阪WSに向けた事前準備のお願い

みなさん、こんにちは。6/6の大阪WSに向けて、当日に最大限「自分の世界観に合う売れるLP」を作れるよう、事前準備の手順をお伝えします。

以下の3ステップを、6/3(火)までに完了させてください。

1

STEP 1:Claudeで「壁打ち」(所要時間 30〜60分)

まずClaude.ai または ChatGPTを開いて、配布する「壁打ち専用プロンプト」をコピペしてください。 その後、自分のサービスについて、Claudeの質問に答えながら情報整理を進めます。

抽象的な答えは禁止です。「自信がつく」「変われる」のような言葉が出てきたら、 Claudeが「具体的に何ですか?」と聞き返してくれるので、必ず具体的な行動・数字・変化で答えてください。

最後に「ブラッシュアップ後の全項目まとめ」を出力してもらえます。これをフォームに転記します。

2

STEP 2:フォームに入力(所要時間 20〜30分)

LPに載せる情報を整理する」フォームを開いて、STEP 1でブラッシュアップした内容を各項目に転記します。

さらに「モデリング」セクションで、参考にしたいLPのURLを最低1つ(構成用・デザイン用それぞれ)貼ってください。

3

STEP 3:6/3までに「講師へ提出」ボタンを押す

フォーム末尾の「講師へ提出する」ボタンを押してください。 講師チーム3名が事前に内容を確認し、当日に向けたアドバイスの準備をします。

当日の流れ

WS当日は、提出いただいた内容をもとに:

  1. フォームの「入力内容をまとめてコピー」ボタンを押す(前置きプロンプトも自動で付きます)
  2. Claude Codeのチャット欄に貼り付け → Enter
  3. 「売れる構成順」でLPのたたき台が完成
  4. ブラッシュアップを始めてください。講師3人があなたの世界観に合うように、回りながらアドバイスします

注意

STEP 1の壁打ちを飛ばしてフォームに直接入力すると、当日の生成物が抽象的・冗長になり、ブラッシュアップ時間が削られます。STEP 1は必ず行ってください。

07 — Schedule

スケジュール

5/24(日)
本日:設計完了(このページ) 本ページをチーム内で共有・レビュー
5/25(月)
フォーム改修実装 / 説明資料準備 「まとめてコピー」ボタンに前置きプロンプトを仕込む(小工数)/ 受講者向け手順書の清書 / キックオフ説明資料の準備
5/26(火)
3名で動作テスト 壁打ちプロンプトで実際にClaudeと対話 → フォーム入力 → 「まとめてコピー」→ CCでLP生成、まで通しでテスト。生成LPが構成順通りか確認
5/27(火)
キックオフMTG(オンライン) 受講者に「事前準備3ステップ」を説明 / Claude Codeセットアップ案内 / 質疑応答
5/28〜6/2
受講者:事前準備期間 壁打ち → フォーム入力 → 講師へ提出
6/3(火)
フォーム提出締切 講師3名で各受講者の内容を確認 / 当日アドバイス準備
6/6(土)
大阪WS本番 まとめてコピー → CCでLP生成 → 世界観ブラッシュアップ
08 — Considered & Deferred

今後の検討事項:フォーム壁打ち機能の検討と見送り

当初、フォーム自体にClaudeとのチャット機能を組み込む案も検討しました (フォーム入力 → そのままチャットUIで壁打ち → 講師へ履歴含めて送信)。 受講者の体験が一貫し、講師は思考プロセスごと見られる、というメリットがありました。

検討の結果、見送りに至った理由

技術検討の結果、以下の運用負荷が見合わないと判断しました。

結論:今回は見送り

受講者にはClaude.ai / ChatGPTを別途立ち上げて壁打ちしてもらう方式(改善②)で進めます。 この方式でも「記入の質を上げる」「USPの抜けをケアする」という目的は十分達成できます。

将来の選択肢としては引き続き残しますが、当面は外部チャットツール(Claude.ai / ChatGPT)を活用する方針です。 もし将来的に「受講者が外部ツールを開く手間を減らしたい」「講師が思考プロセスを見たい」というニーズが強まれば再検討します。