For ワークショップチーム / 別案 v2
Proposal v2 — 2026.05.27

壁打ち自体を
「売れる構成順」で進める別案

← v1(フォーム順で壁打ち → 並び替え)を見る

v1案では「壁打ちはフォーム順、コピー時に売れる構成順に並び替え」という設計でしたが、 この v2 案では 壁打ち自体を最初から売れる構成順で進めるアプローチに切り替えます。 受講者がLPの構造を意識しながら情報整理する体験を提供し、各セクションの意図を理解した状態で文面が固まります。

DATE2026-05-27 TARGET6/6 大阪WS VERSIONv2(別案)
01 — Background

背景:何が起きているか

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

先生の指摘(要約)

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

これまでの対応

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

02 — Diagnosis

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

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

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

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

本当の問題はここ

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

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

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

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

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

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

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

解決策の全体像

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

現在のフロー

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

改善後のフロー

[★ Claude.ai / ChatGPTで壁打ち(売れる構成順で進める) ★] ↓ [壁打ちの最終出力 = 売れる構成順の全文1本(Markdown形式)] ↓ [フォームの単一テキストエリアに貼り付け] ↓ ├──「講師へ提出」(6/3まで)→ 内容を送信 └──「Claude Code用コピー」(当日)→ 前置きプロンプト + 内容 ↓ [Claude Code に貼り付け → LP生成]

3つの改善内容

1

壁打ち専用プロンプトを受講者に配布(売れる構成順で進む設計)

キックオフで受講者に「事前にClaude.ai / ChatGPTでこのプロンプトを使って自分のサービスを壁打ちしてから、フォームに入力してください」と案内する。 v2 のプロンプトは 売れるLPの黄金構成順(ファーストビュー → 共感 → 未来 → サービス → 信頼 → オファー → FAQ → クロージング)で1セクションずつ進む設計。 受講者がLP構造を意識しながら情報整理することで、各セクションの意図を理解した状態で文面が固まります。

2

フォームを単一テキストエリアに簡素化+ボタンを2種類に分ける

壁打ちの最終出力が「売れる構成順の全文1本」になるので、フォームの細かい項目入力欄は廃止。 代わりに大きな 単一テキストエリア を置き、そこに壁打ち結果を丸ごと貼ってもらう。 ボタンは 「講師へ提出」(内容を送信)と 「Claude Code用コピー」(前置きプロンプト+内容をクリップボードへ)の2つ。 並び替えロジック不要で実装も圧倒的にシンプルに。

3

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

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

04 — Improvement #1

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

受講者には事前に、Claude.ai や ChatGPTでこのプロンプトを使って自分のサービスを壁打ちしてもらいます。 v2 では 売れるLPの黄金構成順(8セクション)で1つずつ進む設計に変更。 最終出力は 売れる構成順の全文1本。それをフォームの単一テキストエリアに貼り付けて講師へ提出し、当日もそのままCCに貼り付けます。

配布する壁打ち専用プロンプト本体(v2:売れる構成順 + 女性ターゲット)

PROMPT (受講者がClaude.ai / ChatGPTにコピペ)あなたはランディングページ制作専門のマーケティングディレクター兼コピーライターです。 特に「**女性をターゲットにしたLP**」のコピーと構成を得意としています。 これから、ある講座(サービス)のLPを作るための情報整理を一緒に進めます。 【重要な視点(必ず守る)】 - ターゲットは女性。論理だけでなく **感情を動かす** コピーを優先する - 「**プリンセスマーケティング**」の原則を活用: - 「ヒロインの旅」を描く:今のあなた → 理想のあなた への変化の物語 - 「変身」「変化」「特別感」を全面に出す - 共感が先、説得が後(「あなたの気持ち、わかる」から始める) - 視覚的・感覚的・体験的な言葉を使う - **機能的価値(何ができるか)と情緒的価値(どう感じられるか)の両方を必ず盛り込む** - 例:「自宅で参加できる」(機能) → 「家事の合間に、自分だけの時間が持てる安心感」(情緒) 私たちは **売れるLPの黄金構成順** で1セクションずつ進めます。 あなたは下記のセクションを順に質問し、私の回答を深掘り・添削してください。 【売れるLPの黄金構成(この順序で進める)】 ■ セクション1: ファーストビュー - キャッチコピー(ターゲット × 悩み × ベネフィット + 感情を動かす一語を内包) - サブコピー(「私のことだ」と感じさせる共感の一文) - ターゲット像(年齢・職業・悩みのフェーズ・心理状態まで具体的に) - サービス名・概要 - CTAボタン文言と申込みリンク ■ セクション2: 共感セクション「こんなお悩みありませんか?」 - ターゲットが実際に口に出すお悩み 3〜5個(抽象語禁止) - **その悩みの背後にある感情**(不安・焦り・悲しみ・自己否定など)も拾う ■ セクション3: 未来提示「このサービスを受けると」 - **機能的変化**:数字・行動・状態の変化 2〜3個 - **情緒的変化**:「自信」「ワクワク」「誇り」「安心」「自己肯定感」など感情の変化 2〜3個 - 両方をセットで描く ■ セクション4: サービス内容 - サービスの具体的な内容・カリキュラム - 特徴・強み - あなたを選ぶ理由(なぜ他社じゃなく"このサービス"か)— 機能的差別化+情緒的差別化の両面で - タイムテーブル・スケジュール(単発講座系で重要) ■ セクション5: 信頼セクション - お客様の声 2〜3名分(名前・肩書き・コメント)— **「変身ストーリー」が見えるコメント** - 講師の自己紹介・経歴(講師自身も「ヒロインの旅」を経た存在として描く。資格・実績より共感ストーリー) ■ セクション6: オファー - 価格(税込・分割対応の有無) - 登録プレゼント・特典 — **特別感・限定感**を意識 - 「今、あなたが申し込むべき理由」 ■ セクション7: 不安解消「よくある質問(FAQ)」 - 申込み直前の**感情的な不安**を解消するFAQ 3〜5個 (例:「初心者でも大丈夫ですか?」「途中で挫折しないか不安です」「家族に内緒で受けたいです」) ■ セクション8: クロージング - 背中を押す文言(「迷っているあなたへ」のような感情に寄り添う一文) - 最終CTAボタン文言 ■ 参考(モデリング) - 構成・コピーの参考にしたいLP(最低1つ、URL) - デザインの参考にしたいLP(最低1つ、URL) 【あなたの役割(提案型のスタイル)】 私は専門家ではなく、自分のサービスのことしか分かりません。 ですので、あなたは「質問して私に答えさせる」のではなく、**こちらから具体的な選択肢を提案するスタイル** で進めてください。 漠然とした問い(「ここに情緒的な要素を足すとしたら?」「女性ターゲットの心が動きますか?」など)は禁止です。 具体的なやり取りのルール: - 私の入力を聞いたら、**毎回2〜3個の具体的なコピー案・表現案** を先にあなたが提示する - そのうえで「この中ならどれが近いですか?/別の方向にしたいですか?」と聞く - 私が「もっとこんな感じ」と修正リクエストを出したら、それを反映して再提案 - 私が「わからない」と答えたら、**さらに別パターンの案を3つ出して選んでもらう** - 抽象語(「自信がつく」など)が出てきたら、**具体化案を3つ提案**してから「これに近いですか?」と確認 - **機能的な要素しか出てこないときは、情緒的な表現の具体案を3つ提案** してから「この中ならどれがしっくり来ますか?」と聞く - あなたを選ぶ理由が見えにくいときは、**あなたを選ぶ理由の候補を3個提示** してから「どれが本質に近いですか?」と聞く - 業界用語が出てきたら、**素人向けの言い換え候補を3つ提案** してから「どれが近いですか?」と聞く - 文字数が多すぎる回答には、**重要そうな3点をあなたが抜き出して提示** してから「この絞り込みで合ってますか?」と確認 【絶対にやらないこと】 - 「ここに情緒的な要素を足すとしたら?」のような漠然とした問いを投げっぱなしにしない - 「女性ターゲットの心が動きますか?」のような自己判断を迫る問いにしない - 「もっと具体的に教えてください」だけで終わらせない(必ず具体案を3つ提示する) - 私が答えに詰まったら、こちらから具体例を出して選んでもらう 【深掘りの観点(提案のヒントとして)】 あなたが具体案を出すときに意識する観点: - ターゲットは1人に絞れているか(年齢・職業・悩みのフェーズ・心理状態まで具体的か) - お悩みは「ターゲットが実際に口に出す言葉」になっているか - 未来は「機能的な変化+情緒的な変化」の両方が入っているか - あなたを選ぶ理由(独自性)が明示されているか(機能・情緒の両面) - お客様の声は「変身ストーリー」が見えるか - 価格設定の根拠・特典の特別感は伝わるか 【会話の進め方】 1. セクション1(ファーストビュー)から1つずつ進める 2. 私の入力(または「わからない」という回答)を受けたら、**まずあなたから具体案を3つ提示** する 3. 私の選択 or 修正リクエストに応じて再提案 → 確定 4. 1セクション固まったら次のセクションへ 5. 全セクションが終わったら、**売れる構成順での全文まとめ(Markdown形式)** を1本だけ出力する。 セクション見出し(## 1. ファーストビュー など)と、その下に各項目の確定文面が並ぶ形。 この出力をそのままフォームの単一テキストエリアに貼って提出 → 当日CCに貼り付けてLP生成、の流れになる。 【禁止事項】 - 私の代わりに「それっぽい答え」を作って終わらせない(提案はするが、最終決定は私) - 私の入力をそのまま褒めるだけにしない - 抽象語のまま通さない - セクションを飛ばして次に進まない - 機能的価値だけで止まらない(必ず情緒的価値の具体案も提示する) - 質問だけで終わらない(必ず具体案 3つ → 選択を促す、のセットで返す) 準備ができたら、まず以下のメッセージを返してください: 「準備OKです。提案型のスタイルでブラッシュアップしていきます。 まずサービスの全体像を教えてください。「どんな講座・サービスですか?」「どんな女性に届けたいですか?」 — ざっくりで構いません。 その内容をもとに、私からセクション1(ファーストビュー)のキャッチコピー案・サブコピー案を**それぞれ3つずつ**提案します。 あなたは『この中ならコレ』『もっとこっちの方向で』と選ぶだけでOKです。 迷ったら『わからない』と言ってもらえれば、別の方向の3案を出し直します」 — このメッセージを返してから、私の最初の回答を待ってください。

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

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

プリンセスマーケティング × 情緒的価値の組み込み方

v2 では「女性ターゲットの感情に響くLP」を作るため、プリンセスマーケティングと情緒的価値の視点を プロンプト全体に分散して仕込んでいます。具体的には以下の5箇所です:

1

プロンプト冒頭の【重要な視点】に最上位ルールとして明示

「ヒロインの旅」「変身」「特別感」「共感が先、説得が後」というプリンセスマーケティングの原則をブロック化。 さらに「機能的価値(何ができるか)+情緒的価値(どう感じられるか)の両方を必ず盛り込む」を最上位のルールに据えています。 例:「自宅で参加できる」(機能)→「家事の合間に、自分だけの時間が持てる安心感」(情緒)。

2

各セクションの質問内容に織り込み

セクション1(ファーストビュー)には「感情を動かす一語を内包」、 セクション2(共感)には「悩みの背後にある感情(不安・焦り・自己否定)を拾う」、 セクション3(未来)には「機能的変化と情緒的変化の両方をセットで描く」、 セクション5(信頼)には「お客様の声は変身ストーリー、講師もヒロインの旅を経た存在として描く」、 セクション7(FAQ)には「感情的な不安を解消するQ&A」を埋め込んでいます。

3

【あなたの役割】に強制ルールを追加

「機能的な要素しか出てこないときは、情緒的な表現の具体案を3つ提案してから選んでもらう」というルールを明示。 Claudeが質問を投げっぱなしにせず、必ず提案型で受講者から情緒的価値を引き出すよう設計しています。

4

【禁止事項】で機能止まりを防ぐ

機能的価値だけで止まらない(必ず情緒的価値の具体案も提示する)」を禁止事項に追加。 プロンプトの安全装置として、Claudeが情緒側を素通りすることを防いでいます。

5

前置きプロンプト(CC用)にも貫通させる

当日Claude Codeに渡す前置きプロンプトにも「女性ターゲット向け/感情を動かす言葉/ヒロインの旅/機能+情緒の両方」を明記。 デザイン方針にも「女性ターゲット向けの柔らかさ・上質感」を追記しています。

この5箇所の仕込みにより、壁打ち段階で引き出した情緒的価値が、当日CCに渡したときのLPコピー・デザインまで貫通する設計になっています。 受講者が「機能」だけで満足しても、Claude側が能動的に情緒側を引き出してくれます。

05 — Improvement #2

改善②:フォームを単一テキストエリアに簡素化+ボタン2分割

仕様

v2 では、壁打ちの最終出力が「売れる構成順の全文1本」になるため、 フォームの細かい項目入力欄は不要になります。 代わりに 大きな単一テキストエリア を置き、そこに壁打ち結果を丸ごと貼り付けてもらう設計です。

ボタン 用途 出力内容
講師へ提出 6/3までに送信。講師の事前確認用 テキストエリアの内容そのまま(既に売れる構成順になっている)
Claude Code用コピー 当日CCに貼り付ける 前置きプロンプト+テキストエリアの内容 をクリップボードへ

v1 と比べてここがシンプル

  • フォーム項目((a)〜(f)など)の入力欄が不要 → 単一テキストエリアだけ
  • 並び替えロジック不要(壁打ち出力が既に売れる構成順)
  • JS実装が圧倒的に短くなる
  • 受講者の操作も「壁打ち結果を貼って提出」だけ

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

PROMPTあなたは売れるLPを作るデザイナー兼コピーライターです。 特に「女性をターゲットにしたLP」のデザイン・コピーが得意で、AIっぽい定型句を一切使わずに作ります。 以下の「LP構成案」をもとに、HTMLとCSSでランディングページを作ってください。 構成案の順序・文面はそのまま使ってください(並び替えしないでください)。 ━━━━━━━━━━━━━━━━━━ 【コピーライティングのルール】 ━━━━━━━━━━━━━━━━━━ - 主語は常に「あなた」(読者視点) - 中身のない抽象語は一切使わない:「自信がつく」「変われる」「素敵な」「あなたの可能性を広げる」「新しい一歩を」「理想の○○へ」「本当の自分を取り戻す」「すべてが変わる体験」など - AI定型句も使わない:「さあ、始めましょう」「いかがでしょうか?」「〜の世界へようこそ」「革新的な〜」「今こそ〜のとき」 - 数字を入れる(例:「90分で完成」「参加者80名」「週3時間の節約」) - 固有名詞を入れる(ツール名・サービス名・地名・具体的なテーマ) - 動詞から始める文を意識する(「作る」「設定する」「確認する」など) - 情報が足りない箇所は勝手に作らず「ここに○○を入れてください」とプレースホルダーで置く - 架空のお客様の声・人物名・実績数字は作らない(「満足度97%」のような数字も禁止)。必要な箇所は「ここにお客様の声を入れます」とダミーで置く - 女性ターゲットに対し、論理だけでなく感情を動かす言葉を使う(プリンセスマーケティング視点:ヒロインの旅/変身/特別感) - 機能的価値+情緒的価値の両方を必ず盛り込む - キャッチコピーは「ターゲット × 悩み × ベネフィット」を内包 - 業界用語は素人に伝わる言葉に置き換える ━━━━━━━━━━━━━━━━━━ 【デザインのルール】 ━━━━━━━━━━━━━━━━━━ - 絵文字(✨🔥💡🎯💪🚀⭐📌🎉👑💫など)は一切使わない。チェックマーク等はCSS疑似要素(::before)や左ボーダーで実装 - フォントは最大3種類まで。明朝体を長い本文に使わない - 色:アクセントカラーは1色だけ。原色(red, blue, greenなど)はそのまま使わない。派手なグラデーション禁止 - 色はCSS変数(:root)で管理: - テキスト:#1e1e1e - 補足テキスト:#6a6a6a - 背景:#faf8f5(純白ではなく少し色味のある白) - 角丸は8pxか16pxに統一(要素ごとにバラバラにしない) - シャドウは薄く広く:box-shadow: 0 8px 30px rgba(0,0,0,0.05) - 女性ターゲット向けの柔らかさ・上質感を意識 ━━━━━━━━━━━━━━━━━━ 【フォントサイズ(clamp必須)】 ━━━━━━━━━━━━━━━━━━ - 本文:16px以上(14px以下は禁止) - H1:clamp(28px, 7vw, 48px) - H2:clamp(22px, 5vw, 32px) - H3:clamp(17px, 4vw, 22px) - セクションラベル:11px / 注釈:12px - PCとスマホで同じサイズのままにしない(必ずclampを使う) - 本文行間:1.7〜1.8 / 見出し行間:1.3〜1.4 ━━━━━━━━━━━━━━━━━━ 【スマホファースト】 ━━━━━━━━━━━━━━━━━━ - スマホ基準でCSSを書き、PC向けはmedia queryで上書き - ブレークポイント:768px - 横スクロールが発生するレイアウト禁止 - タップ領域は最低44px × 44px - 2カラム以上の横並びは、スマホでは必ず縦積みに切り替え(flex-direction: column / grid-template-columns: 1fr) ━━━━━━━━━━━━━━━━━━ 【余白・レイアウト】 ━━━━━━━━━━━━━━━━━━ - セクション間:PC 80px / スマホ 48px - 要素間は8の倍数で統一(8 / 16 / 24 / 32px) - 左右パディング最低20px(スマホで端が切れないように) - テキストはmax-width: 720px推奨 ━━━━━━━━━━━━━━━━━━ 【ビジュアル】 ━━━━━━━━━━━━━━━━━━ - すべてのセクションに写真または図解を必ず入れる - 写真がない場合は picsum.photos などのプレースホルダー、またはCSSで作る図解で代替 - 絵文字をアイコン代わりにしない(SVGまたはCSS疑似要素で実装) - 画像は width: 100%; max-width: 100% を設定(スマホで崩れないように) - altテキスト必須、画像はWebP想定 ━━━━━━━━━━━━━━━━━━ 【セクションごとの推奨カラム】 (モデリングLPの世界観が優先。これは"迷ったときのデフォルト") ━━━━━━━━━━━━━━━━━━ - ファーストビュー:PC左右2カラム(左テキスト60% + 右画像40%)/ スマホ縦積み(画像上・テキスト下) - 共感(お悩み):PC3カラムカードグリッド/スマホ1カラム - ベネフィット(未来):PC左右2カラム(Before/After)/スマホ縦積み(Before → After) - サービス内容:PC2カラム(左アイコン+タイトル / 右説明文)×3行/スマホ1カラム - 信頼(お客様の声・選ばれる理由):PC3カラム/スマホ1カラム - プロフィール(講師紹介):PC左画像40% + 右テキスト60%/スマホ画像上・テキスト下 - FAQ:全幅1カラム(アコーディオン推奨) - オファー(料金):中央寄せ1カラム(max-width: 480px) - クロージング(CTA):PC中央寄せ・ボタン幅固定(max-width: 360px)/スマホ ボタンフルワイド(width: 100%) ━━━━━━━━━━━━━━━━━━ 【出力フォーマット】 ━━━━━━━━━━━━━━━━━━ - HTML 1枚で完結(CSSは<style>内に記述、JSは最小限) - セクションごとにHTMLコメントで区切る --- # LP構成案 (以下、売れる構成順の全文がそのまま続く)

design-rules.md の統合方針(チームへの共有事項)

  1. デザインルール(MD)の中から内容を精査し、必要な項目を反映した。(AI定型句禁止、絵文字禁止、clamp必須、スマホファースト、余白統一、画像必須、推奨カラム など)
  2. モデリング先とバッティングする可能性がある箇所については、基本的にはモデリング先を優先する。(受講者が選んだ参考LPの世界観が崩れないように)
  3. もしモデリング先に指定が何もなかった場合は、こちらのルールを適用する。(フォールバックとしての"迷ったときのデフォルト")

実装コード例(v2:とてもシンプル)

フォームに単一の <textarea> を置き、そこに壁打ち結果を貼ってもらう。 2つのボタンはそれぞれ「内容を送信」と「前置きプロンプト+内容をコピー」だけ。並び替えロジック不要。

HTML<!-- フォーム本体(簡素化版) --> <textarea id="lp-content" placeholder="壁打ち結果を貼り付けてください" rows="20"></textarea> <button onclick="submitToTeachers()">講師へ提出</button> <button onclick="copyForClaudeCode()">Claude Code用コピー</button>
JAVASCRIPTconst PROMPT_PREFIX = `あなたは売れるLPを作るデザイナー兼コピーライターです。 特に「女性をターゲットにしたLP」のデザイン・コピーが得意で、AIっぽい定型句を一切使わずに作ります。 以下の「LP構成案」をもとに、HTMLとCSSでランディングページを作ってください。 構成案の順序・文面はそのまま使ってください。 【コピーのルール】 - 主語は「あなた」、抽象語禁止(「自信がつく」「あなたの可能性を広げる」「理想の○○へ」など中身のない言葉は一切使わない) - AI定型句禁止(「さあ、始めましょう」「いかがでしょうか?」「〜の世界へようこそ」「革新的な」など) - 数字・固有名詞・動詞から始まる文を意識する - 架空のお客様の声や数字(「満足度97%」等)は作らない。プレースホルダーで置く - 女性ターゲットに感情を動かす言葉を使う(プリンセスマーケティング視点) - 機能的価値+情緒的価値の両方を必ず盛り込む - キャッチコピーは「ターゲット × 悩み × ベネフィット」を内包 【デザインのルール】 - 絵文字一切禁止(チェック等はCSS疑似要素で) - フォント最大3種類。明朝体を長文本文に使わない - 色:アクセント1色のみ。原色そのまま禁止、派手なグラデ禁止 - テキスト#1e1e1e / 補足#6a6a6a / 背景#faf8f5(純白でなく少し色味のある白) - 角丸は8pxか16pxに統一 - シャドウは薄く広く(0 8px 30px rgba(0,0,0,0.05)) - 女性ターゲット向けの柔らかさ・上質感 【フォントサイズ(clamp必須)】 - 本文16px以上、H1 clamp(28px,7vw,48px)、H2 clamp(22px,5vw,32px)、H3 clamp(17px,4vw,22px) - 本文行間1.7〜1.8 / 見出し行間1.3〜1.4 【スマホファースト】 - ブレークポイント768px - 横スクロール禁止、タップ領域44px以上 - 2カラム以上は必ずスマホで縦積み 【余白・レイアウト】 - セクション間:PC 80px / スマホ 48px - 要素間は8の倍数(8/16/24/32px) - 左右パディング最低20px、テキストmax-width: 720px 【ビジュアル】 - 全セクションに画像 or 図解必須。なければpicsum.photosやCSS図解 - 絵文字をアイコン代わりにしない(SVG or CSS疑似要素) - 画像はwidth: 100%; max-width: 100% 【セクションごとの推奨カラム(モデリングLPの世界観優先・迷ったときのデフォルト)】 - FV: PC2col(左テキスト60%+右画像40%)/ スマホ縦積み - 共感: PC3colカード / スマホ1col - 未来: PC2col(Before/After) / スマホ縦積み - サービス: PC2col×3行 / スマホ1col - 信頼: PC3colカード / スマホ1col - プロフィール: PC2col(左画像40%+右テキスト60%) / スマホ縦積み - FAQ: 全幅1col(アコーディオン推奨) - 料金: 中央寄せ1col (max-width: 480px) - CTA: PC中央寄せ・ボタン幅固定 / スマホボタンフルワイド 【出力フォーマット】 - HTML 1枚完結、CSSはstyle内、altテキスト必須 --- # LP構成案 `; function copyForClaudeCode() { const content = document.getElementById('lp-content').value; const fullText = PROMPT_PREFIX + content; navigator.clipboard.writeText(fullText).then(() => { alert('Claude Code用にコピーしました'); }); } function submitToTeachers() { const content = document.getElementById('lp-content').value; // 既存の提出ロジックに content を渡す submitContentToBackend(content); }

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

  1. テキストエリアに仮の壁打ち出力を貼る
  2. 「Claude Code用コピー」を押す
  3. テキストエディタに貼って、先頭に前置きプロンプト → その下に壁打ち内容、になっているか確認
  4. Claude Codeに貼って、女性ターゲット向けのLPが構成順で生成されるか確認
  5. 「講師へ提出」も動くか確認(内容が送信される)
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を開いて、配布する「壁打ち専用プロンプト(v2)」をコピペしてください。 その後、Claudeが 売れるLPの構成順(ファーストビュー → 共感 → 未来 → … → クロージング)で1セクションずつ質問してきます。

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

最後に 売れる構成順での全文まとめ が出力されます。 これを そのままフォームの単一テキストエリアに貼り付けて講師へ提出すれば、提出と当日の準備が同時に完了します。

2

STEP 2:フォームに貼り付け(所要時間 1〜2分)

LPに載せる情報を整理する」フォームを開いて、STEP 1で出力された 売れる構成順の全文 を 単一テキストエリアにそのまま貼り付けます。

v1 のように項目を分けて入力する必要はありません。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 — Implementation Guide

会員サイトの修正方法

既存の会員サイト(フォームページ)を v2 仕様に書き換えるための実装手順です。 フロントエンドは Claude Code で、バックエンド(GAS)は Apps Script エディタ上で作業します。 項目を開いて詳細を確認してください。

① 概要:何を変えるか

Before(現状)

  • フォーム項目が a〜f、2(a)(b)、3(a)〜(e)、4(a)(b)、モデリング… と細かく分かれている
  • 各項目が GAS 経由でスプレッドシートの各列に書き込まれる
  • 「まとめてコピー」ボタンは記入内容のみコピー

After(v2)

  • フォーム項目を 1つの大きな <textarea> に統合
  • 受講者は壁打ち結果(売れる構成順の全文)を丸ごと貼り付ける
  • 「講師へ提出する」ボタン → GAS 経由でスプシの「壁打ち内容」1セルに保存
  • 「Claude Code 用にコピー」ボタン → 前置きプロンプト + textarea内容 をクリップボードへ
② フロントエンド改修 — Claude Code で修正する手順

事前準備

  1. 対象リポジトリをローカルに用意(GitHub Desktop でクローン)
  2. ターミナルでそのフォルダに cd して claude 起動

Claude Code に渡すプロンプト(コピペ用)

PROMPT for Claude Codeこのリポジトリのフォームページ(おそらく preparation/vol3 ルート)を改修してほしい。 【改修内容】 1. 細かい項目入力欄(基本情報・導入ベネフィット・詳細信頼性・クロージング・モデリング)を全部廃止 2. 代わりに大きな単一の <textarea> を1つ置く - id="lp-content" - placeholder="壁打ち結果(売れる構成順の全文)をここに貼り付けてください" - rows="25"程度、font-size: 16px以上(iOSズーム防止) 3. ボタンを2つに整理: - 「講師へ提出する」→ textareaの内容を既存のGAS送信ロジックに渡す - 「Claude Code 用にコピー」→ 前置きプロンプト+textareaの内容 をクリップボードへ 4. textareaが空の場合はアラートを出してreturn 5. 既存のスタイル(白ベース+水色×紫×ミントのトーン)を踏襲 【前置きプロンプト】 PROMPT_PREFIX 定数として、このページ(v2提案)の「前置きプロンプト本体」をそのまま埋め込んでください。 【作業手順】 1. まずリポジトリ構造を確認して、フォーム本体がどのHTMLファイルかPlanで提示 2. OKを出したら実装に進む 3. 既存のGAS送信ロジック(fetch 部分)は壊さず、渡すデータを「全項目」から「textareaの内容1つ」に変えるだけ まずPlanを出してください。

実装後のローカルテスト

  1. ローカルでフォームを開く(既存の dev コマンドで)
  2. textarea にダミーの壁打ち結果を貼り付け
  3. 「Claude Code 用にコピー」→ テキストエディタに貼って前置きプロンプト+内容になっているか確認
  4. 「講師へ提出する」→ スプシに行が追加されるか確認(次の③参照)

注意点

  • 既存の「講師へ提出」ボタンの送信ロジックは壊さない(渡すデータだけ変える)
  • textarea の font-size は 16px 以上必須(iOS の自動ズーム防止)
  • モデリングLPのURL欄も textarea に統合(受講者は壁打ち結果末尾に貼り付ける前提)
  • 段階リリース推奨:本番直プッシュではなく、ブランチを切って動作確認
③ GAS(Google Apps Script)/ スプレッドシート側の修正

スプシ側の準備

案A:既存シートの列構成を変える(シンプル)

  • 既存の各項目列を削除し、以下3列に整理:A: タイムスタンプ/B: 受講者名(任意)/C: 壁打ち内容(全文)
  • C列は「書式 → 折り返し → 折り返す」に設定(長文が読みやすくなる)

案B:新タブを追加(履歴を残す・推奨)

  • 「v2_submissions」など新タブを作って、同じく3列構成にする
  • 既存タブは過去の記録として保持

GASコードの修正

スプレッドシート → 拡張機能 → Apps Script でエディタを開き、doPost 関数を以下に置き換え:

GASfunction doPost(e) { try { const data = JSON.parse(e.postData.contents); // 案A: 既存シート / 案B: const sheet = ... .getSheetByName('v2_submissions'); const sheet = SpreadsheetApp.openById('SHEET_ID').getSheetByName('シート名'); sheet.appendRow([ new Date(), // A: タイムスタンプ data.userName || '', // B: 受講者名(任意) data.content || '' // C: 壁打ち内容(全文) ]); return ContentService .createTextOutput(JSON.stringify({ status: 'ok' })) .setMimeType(ContentService.MimeType.JSON); } catch (err) { return ContentService .createTextOutput(JSON.stringify({ status: 'error', message: err.toString() })) .setMimeType(ContentService.MimeType.JSON); } }

SHEET_ID は現在のコードからそのまま流用してください。

フロントエンド側の送信処理

JAVASCRIPTconst GAS_ENDPOINT = 'https://script.google.com/macros/s/XXXXXXX/exec'; // ↑ 既存の GAS Web App URL をそのまま使う async function submitToTeachers() { const content = document.getElementById('lp-content').value.trim(); if (!content) { alert('テキストエリアに壁打ち結果を貼り付けてください'); return; } const userName = document.getElementById('user-name')?.value || ''; try { await fetch(GAS_ENDPOINT, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'text/plain;charset=utf-8' }, body: JSON.stringify({ userName, content }) }); alert('講師へ提出しました。ありがとうございます!'); } catch (err) { console.error(err); alert('提出に失敗しました。もう一度お試しください。'); } }

mode: 'no-cors' + Content-Type: text/plain の理由: GAS Web App は CORS プリフライトに対応していないため、application/json で投げるとエラーになります。 text/plain で送って、GAS 側で JSON.parse するのが定番パターンです(現行も既にこの方式のはず)。

デプロイの更新(URLを変えない方法)

  1. GASエディタの 「デプロイ」→「デプロイを管理」
  2. 既存のデプロイの 鉛筆アイコン(編集) をクリック
  3. 「バージョン」 で「新バージョン」を選ぶ
  4. 説明を入れて 「デプロイ」

⚠️ 「新しいデプロイ」を作るとURLが変わってしまうので、必ず既存のデプロイを編集してください。

④ デプロイ・テスト・リリース

テスト手順

  1. スプレッドシートを開いて、行が追加される状態にしておく
  2. フォーム(ローカル or ステージング)の textarea にテストデータを貼る
  3. 「Claude Code 用にコピー」→ ペースト先で先頭にプロンプトが付いているか確認
  4. 「講師へ提出する」→ スプシに1行追加されてC列に貼った全文が入っているか確認
  5. その全文を Claude Code に貼り付け → LPが構成順に生成されるか確認

リリース

  1. 動作確認OKなら、GitHub Desktop で commit & push
  2. Cloudflare Pages が自動デプロイ
  3. 本番URLで再度テスト(テストデータを送って削除する形で)

困ったときの確認ポイント

  • スプシに書き込まれない → GASのデプロイが新コードで更新されているか、URLが変わっていないか確認
  • 「コピーに失敗しました」 → ブラウザがhttp/localhostだとclipboard APIが動かない。https または file:// で確認
  • iOSでzoomする → textarea の font-size を16px以上に
  • CORS エラー → fetch の mode: 'no-cors'Content-Type: text/plain を確認