DESIGN.md — 緑×ピンク×黄のポップな子どもスポーツ教室 LP（Pop Green & Pink Kids Sports School Campaign LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、情報量多め・訴求型、力強い・インパクト、親しみ・手作り感
• キーワード: キャンペーン訴求・極太数字・手書き見出し・立体ボタン・子どもの笑顔写真・コース別配色
• 地の質感: ほぼフラットな面に、ドット・斜線・波線の小さな装飾パターンを散らす。ピンクの帯は少し水彩のようなムラがある
• 形: 角丸カード、ピル型の立体ボタン、斜めにカットした写真帯、下向き三角のセクション境界
• 温度感: 明るく暖かい。緑で爽やかさを、ピンク・黄・赤で元気とお得感を出す

Colors

• キャンペーン部分は緑・水色・くすみピンクの地に、白いパネルと黄色の特典カードを重ねる
• 価格と「無料」の文字だけを赤の極太文字にする
• 子ども向けコースはティール系、運動系コースは赤系で、見出し・帯・カードの色を揃える
• 主ボタンは緑の地に黄色文字、サブボタンは赤〜朱のグラデーションに黄色＋白文字
• 説明セクションは白と薄いグレーの地で落ち着かせる
• button-primary は文字 #FEE85D × 背景 #65A335 のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#477325、4.51:1）を使う。
• button-tel は文字 #FEE85D × 背景 #E8473F のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CA2118、4.52:1）を使う。
• badge-number は文字 #FEFEFE × 背景 #E8473F のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CA2118、4.5:1）を使う。
• ribbon-heading は文字 #FEFEFE × 背景 #018884 のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#01837F、4.57:1）を使う。
• course-card は文字 #FEFEFE × 背景 #018884 のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#01837F、4.57:1）を使う。

Typography

• 数字は本文よりかなり大きくし、「円」「税込」は小さく添える
• 見出しは極太ゴシック、導入の一言は手書き風フォントにして強弱をつける
• 大見出しには白い縁取りや影をつけ、地色の上でも目立たせる
• 理由セクションでは、写真の左上に大きな欧文の白抜き数字を置く
• 写真上のコピーは、ななめに配置した色帯の上に白い手書き風文字で載せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。コース紹介は 2 列カード
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• キャンペーンのブロックは、色地の上に白いパネルを置き、左右に約 16px の余白をとる
• CTA（WEB予約と電話予約）は、2〜3 セクションごとに縦 2 段で繰り返す
• 理由セクションは、写真を左右にずらして段違いに並べる
• 特典カードは左上に丸い番号バッジを重ねる
• 1 つの塊の中に、価格・特典・注釈を詰めて見せる

Elevation & Depth

• CTA ボタンは下に濃い色の厚みと影をつけ、押せる立体に見せる
• 特典カードは影なしのフラットな黄色の面にする
• コースカードは色の太い枠と軽い影をつける

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸のカード、または片側をななめに切った横長の帯で見せる。人物は切り抜きで枠からはみ出させる
• セクション境界: 下向きの三角でセクションを区切る。ななめにカットした帯も使う
• CTA はピル型に近い大きな角丸にする
• 見出しのリボンは両端を切り欠いた形にする
• 番号バッジはギザギザの丸にする

Components

• WEB予約ボタン（button-primary）: 緑のピル型の立体ボタン。左に白丸のチェックアイコン、右に三角の矢印を置く
• 電話予約ボタン（button-tel）: 赤のグラデーションの角丸ボタン。電話アイコン・電話番号・受付時間の表を内側に持つ
• 特典カード（benefit-card）: 黄色の角丸パネル。番号バッジ・特典名・赤い大きな価格を並べ、項目は点線で区切る
• 特典番号バッジ（badge-number）: ピンク〜赤のギザギザの丸。中に「特典」と番号を白文字で入れる
• リボン見出し（ribbon-heading）: 緑・ティール・赤の帯に白文字を載せた、両端を切り欠いた見出し
• コースカード（course-card）: 写真の上に「こんな子におすすめ」のチェックリストを重ね、下にコース名と下向き三角の帯を置く
• 手書き導入コピー（handwritten-lead）: 左右に斜線のアクセントを付けた、手書き風の一言
• 料金アコーディオン（accordion-bar）: 濃いグレーの帯に白文字と丸いプラスアイコンを置く

Do's and Don'ts

Do - 価格は赤の極太数字で大きく見せる - CTA は同じ組み合わせ（WEB予約と電話予約）でページ内に何度も置く - コースごとに、地色と帯の色をテーマ色で統一する - 写真には子どもの笑顔と動きのある場面を使う - ドット・斜線などの小さな装飾を余白に散らす

Don't - くすんだ暗い配色にしない - 細い明朝体を見出しに使わない - 価格を本文と同じ大きさで書かない - CTA を 1 か所だけにしない - 余白を広くとりすぎて、静かすぎる印象にしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（楽しく成長できることと、キャンペーンの期間を伝える）: 緑の地に黄色の円、切り抜いた子どもの写真、極太の漢字、ピンクのキャンペーン帯、期間を並べる
2. キャンペーン価格の要約（お得さをひと目で伝える）: ピンクの帯の中に黄色の大きな価格と「無料」を置き、下を三角で区切る
3. CTA（体験予約へ誘導する）: 手書きの導入コピーの下に、緑と赤のボタンを横並び、または縦 2 段で置く
4. コース紹介（コースを選んでもらう）: 色違いのカードを 2 列で並べ、大人向けは横長のバナーにする
5. キャンペーン詳細（特典の内容を説明する）: 緑の地に、黄色の特典カードを 2 枚、番号バッジ付きで並べる
6. グループ割（家族や友達と一緒の参加を促す）: 白いパネルに人物のイラストと吹き出しラベルを置き、料金は枠で囲む
7. 3つのポイント（教室の強みを要約する）: 黄色の地に、POINT の番号付きの丸を 3 つ並べる
8. コース詳細（理由）（コースがおすすめな理由を伝える）: 斜めに切った写真の帯、白抜きの大きな Point 番号、色帯付きのコピー、本文の順に、段違いに並べる
9. プログラム紹介（具体的な内容を示す）: 写真とテキストを横並びにした淡いピンクのカードを、縦に 3 つ並べる
10. コース別のクロージング（最後に申し込みを後押しする）: コースの色の地に、キャンペーンの再掲、CTA、料金アコーディオン、カレンダーボタンを置く

Imagery

• 室内コートで、子どもが笑顔で動いている明るい写真
• 人物を切り抜いて、枠からはみ出させる
• グループ割の説明には、太い線のフラットな人物イラストを使う
• ドット・斜線・波線の小さなパターンを角に散らす
• 写真の上に、半透明の色帯と手書き風のコピーを重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 750px の SP 幅のカラムを置き、左右は地色で埋める想定にする
• PC では CTA を 2 つ横に並べてもよい
• PC ではコースカードを 3 列にし、理由セクションは写真と本文を横並びにする

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。