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.ai / ChatGPTで壁打ち(中身ブラッシュアップ) ★] ↓ [フォームに入力] ↓ [6/3「講師へ提出」ボタン → フォーム順で送信] ↓ [当日「Claude Code用コピー」ボタン → 売れる構成順 + 前置きプロンプト] ↓ [Claude Code に貼り付け → LP生成]

3つの改善内容

1

フォームのボタンを2種類に分ける(提出用 / Claude Code用)

フォーム末尾のボタンを 「講師へ提出」(フォームの並び順で送信/講師の事前確認用)と 「Claude Code用コピー」(売れる構成順に並び替え+前置きプロンプト付きでクリップボードへ)の 2種類に分割。当日は後者を押してCCに貼るだけで売れる構成のLPが生成される設計です。

2

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

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

3

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

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

04 — Improvement #1

改善①:ボタンを2分割+Claude Code用は売れる構成順に並び替え

仕様

フォーム末尾のボタンを以下の2つに分けます。フォームのHTML構造・項目・デザインは触らず、ボタン部分のJSだけ追加・変更します。

ボタン 用途 出力内容
講師へ提出 6/3までに送信。講師の事前確認用 フォームの並び順そのまま(既存挙動)
Claude Code用コピー 当日CCに貼り付ける 売れる構成順に並び替え前置きプロンプト付きでクリップボードへ

並び替えのマッピング

フォーム項目を以下の「黄金構成順」に並び替えてCCに渡します:

  1. ファーストビュー(ターゲット・サービス名・申込みリンク)
  2. 共感セクション(お悩み)
  3. 未来提示セクション(ベネフィット)
  4. サービス内容(カリキュラム・特徴)
  5. 信頼セクション(お客様の声 + 講師自己紹介)
  6. オファー(価格 + 特典)
  7. 不安解消(FAQ)
  8. クロージング(背中押し + 最終CTA)

前置きプロンプト本体(コピー時に先頭に自動付加)

PROMPTあなたは売れるLPを作るデザイナー兼コピーライターです。 以下の「LP構成案」をもとに、HTMLとCSSでランディングページを作ってください。 構成案の順序はそのまま使ってください(並び替えしないでください)。 【コピーライティングの最低ルール】 - 主語は常に「あなた」(読者視点) - 抽象語は禁止:「自信がつく」「変われる」「素敵な」など → 具体的な行動・数字・変化に置き換える - キャッチコピーは「ターゲット × 悩み × ベネフィット」の3要素を内包させる - 各セクションの見出しは読者視点で書く(例:「○○できるようになる」「○○が手に入る」) - 業界用語は素人に伝わる言葉に置き換える - USP(独自性)が情報に薄ければ、講師ストーリーから抽出して明示する 【デザインの方針】 - モデリングLPの世界観を尊重しつつ、可読性とCTAの目立たせを優先する - ヒーローカラー1色 + ニュートラル + アクセント1色の3色構成 - セクション間のspacingは120px以上、要素間は意味的グループで締める - モバイルファースト(ブレークポイント:768px / 1200px) 【出力フォーマット】 - HTMLファイル1枚で完結(CSSはstyle内に記述、JSは最小限) - セクションごとにコメントで区切る - altテキスト必須、画像はWebP想定 --- # LP構成案 (以下、売れる構成順に並んだセクションが続く)

↑ 前置きプロンプトに続いて、売れる構成順に並び替えられたフォーム入力内容がMarkdown形式で続きます。

実装コード例(Claude Code用コピーボタン)

「Claude Code用コピー」ボタンのハンドラに、以下のようにフォーム項目を売れる構成順に並び替え+前置きプロンプトを前置するロジックを入れます。 関数名・収集ロジックは現行コードに合わせて読み替えてください。

JAVASCRIPT// 「Claude Code用コピー」ボタンのハンドラ const PROMPT_PREFIX = `あなたは売れるLPを作るデザイナー兼コピーライターです。 以下の「LP構成案」をもとに、HTMLとCSSでランディングページを作ってください。 構成案の順序はそのまま使ってください(並び替えしないでください)。 【コピールール】 - 主語は「あなた」、抽象語禁止 → 具体化 - キャッチコピーは「ターゲット × 悩み × ベネフィット」を内包 - 各セクション見出しは読者視点 - 業界用語は素人語に置換 - USPが薄ければ講師ストーリーから抽出 【デザイン方針】 - ヒーロー1色 + ニュートラル + アクセント1色 - セクション間120px+、モバイルファースト 【出力フォーマット】 - HTML 1枚完結、CSSはstyle内、altテキスト必須 --- # LP構成案 `; function copyForClaudeCode() { const d = collectAllFormInputs(); // 現行の収集関数 // 売れる構成順に並び替え const reordered = ` ## 1. ファーストビュー - ターゲット: ${d.target} - サービス名: ${d.serviceName} - サービス概要: ${d.serviceDescription} - 申込みリンク: ${d.applyLink} ${d.instagramUrl ? `- Instagram: ${d.instagramUrl}` : ''} ## 2. 共感セクション「こんなお悩みありませんか?」 ${d.woes.map(w => `- ${w}`).join('\n')} ## 3. 未来提示「このサービスを受けると」 ${d.benefits.map(b => `- ${b}`).join('\n')} ## 4. サービス内容 ${d.serviceContent} ${d.timetable ? `\nタイムテーブル:\n${d.timetable}` : ''} ## 5. 信頼セクション ### お客様の声 ${d.testimonials.map(t => `- ${t.name}(${t.title}): ${t.comment}`).join('\n')} ### 講師自己紹介 ${d.teacherProfile} ## 6. オファー - 価格: ${d.price} ${d.bonus ? `- 特典: ${d.bonus}` : ''} ## 7. FAQ ${d.faqs.map(f => `Q: ${f.q}\nA: ${f.a}`).join('\n\n')} ## 8. クロージング - 背中押し: ${d.closing} - 最終CTA → ${d.applyLink} --- # モデリング参考 構成参考LP: ${d.structureRefs.map((r, i) => `${i+1}. ${r.url} ${r.memo ? `- ${r.memo}` : ''}`).join('\n')} デザイン参考LP: ${d.designRefs.map((r, i) => `${i+1}. ${r.url} ${r.memo ? `- ${r.memo}` : ''}`).join('\n')} `; const fullText = PROMPT_PREFIX + reordered; navigator.clipboard.writeText(fullText).then(() => { alert('Claude Code用にコピーしました(売れる構成順)'); }); } // 「講師へ提出」ボタンは既存の挙動のまま(フォーム順で送信)

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

  1. フォームに仮の入力(テストデータでOK)
  2. 「Claude Code用コピー」を押す
  3. テキストエディタに貼って、先頭にプロンプト → その下に売れる構成順で項目が並んでいるか確認
  4. Claude Codeに貼って、生成されるLPがその順序通りか確認
  5. 「講師へ提出」も従来通り動くか確認(フォーム順データで送信)
05 — Improvement #2

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

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

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

PROMPT (受講者がClaude.ai / ChatGPTにコピペ)あなたはランディングページ制作専門のマーケティングディレクター兼コピーライターです。 これから、ある講座(サービス)のLPを作るための情報整理を一緒に進めます。 以下の【フォーム項目】について、あなたから1項目ずつ順番に質問してください。 私が答えたら、その回答を深掘り・添削して、ブラッシュアップ後の文面を提案してください。 【フォーム項目(この順で進める)】 ■ 1 基本情報 - (a) お名前 — LP上で表示する名前・ニックネーム - (b) インスタグラムURL(任意)— LP下部にSNSリンクを入れる場合 - (c) ターゲット — 「どんな人に届けたいか」を具体的に。1人に絞るほどLPが刺さる - (d) サービス名・内容 — 何をするサービスか、一言でわかるように - (e) 価格 — 税込み表記・分割対応の有無 - (f) 申込みリンク(遷移先URL)— MOSHのURL・LINEのリンク・お問い合わせフォームなど ■ 2 導入・ベネフィット - (a) こんなお悩みありませんか? — 3〜5個。ターゲットが実際に口に出す言葉 - (b) このサービスを受けると、どんな未来が待っているか? — 3〜5個。具体的な数字・行動・変化 ■ 3 詳細・信頼性 - (a) サービスの具体的な内容・カリキュラム - (b) 受講生・お客様の声 — 名前・肩書き・コメントの3点セット(任意・あれば強力) - (c) よくある質問(FAQ) — 3〜5個。申込み直前の不安解消(任意) - (d) タイムテーブル・スケジュール — 単発講座・セミナー系に重要(任意) - (e) 講師の自己紹介・経歴 — 資格・実績より「共感できるストーリー」が効く ■ 4 クロージング - (a) 最後に背中を押す文言 — 残り枠数、締め切り、「迷っているあなたへ」など(任意) - (b) 登録プレゼント・特典(任意) ■ 5 モデリング - 構成・中身のモデリング(最低1つ) — セクション順・流れ・コピーの参考 - デザインのモデリング(最低1つ) — 配色・フォント・ビジュアルの参考 【あなたの役割】 - 上記項目を1つずつ順番に質問する(一度に全部聞かない) - 抽象的すぎる回答には「具体的に何ですか?数字や行動で言うと?」と聞き返す - 文字数が多すぎる回答には「3つに絞るとどれですか?」と整理を促す - USP(なぜ他社じゃなくこのサービスか)が薄ければ追加質問する - 業界用語が出てきたら「素人にも伝わる言葉で言うと?」と聞き返す 【深掘りの観点】 - ターゲットは1人に絞れているか(年齢・職業・悩みのフェーズまで具体的か) - お悩みは「ターゲットが実際に口に出す言葉」になっているか - ベネフィットは「数字・行動・変化」が入っているか - USP(独自性)が明示されているか - お客様の声は「変化のストーリー」が見えるか - 価格設定の根拠・特典の魅力は伝わるか 【会話の進め方】 1. (a)お名前 から1項目ずつ質問 2. 私が答えたら、深掘り質問 or 改善提案を返す 3. 必要なら何往復かして1項目を確定 → 次の項目へ 4. 全項目が終わったら「ブラッシュアップ後の全項目まとめ(フォームに貼れる形)」を出力 【禁止事項】 - 私の代わりに「それっぽい答え」を作って終わらせない - 私の入力をそのまま褒めるだけにしない - 抽象語のまま通さない 準備ができたら「準備OKです、最初の項目(a)お名前から進めましょう。LP上で表示する名前・ニックネームを教えてください」と返してください。

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

  • 受講者が抽象的な答えで済ませようとしても、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. フォームの「Claude Code用コピー」ボタンを押す(売れる構成順 + 前置きプロンプトが自動でクリップボードへ)
  2. Claude Codeのチャット欄に貼り付け → Enter
  3. 「売れる構成順」でLPのたたき台が完成
  4. ブラッシュアップを始めてください。講師3人があなたの世界観に合うように、回りながらアドバイスします

注意

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

07 — Schedule

スケジュール

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

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

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

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

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

結論:今回は見送り

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

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