--- version: alpha name: Pop Green & Pink Kids Sports School Campaign LP description: 鮮やかな緑地に、ピンクの帯と黄色の特典カードを重ねたキャンペーン訴求型の LP。極太ゴシックの価格表示、手書き風の見出し、緑と赤の立体ボタンを何度も繰り返して体験予約へ誘導する。コースごとに地色を緑系・赤系で切り替える。 colors: primary: '#3EC384' secondary: '#018884' accent-1: '#EB6491' tint-1: '#FEE565' cta: '#65A335' on-cta: '#FEE85D' accent-2: '#E8473F' accent-3: '#930303' background: '#FEFEFE' background-alt: '#F9F9F9' tint-2: '#D4E8DD' dark-section: '#E2BBBC' text: '#373135' surface: '#434343' cta-accessible: '#477325' accent-2-accessible: '#CA2118' secondary-accessible: '#01837F' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-md: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Yusei Magic fontSize: 20px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 800 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 4px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 80px button-tel: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 140px benefit-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 220px badge-number: backgroundColor: '{colors.accent-2}' textColor: '{colors.background}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px ribbon-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.background}' typography: '{typography.headline-sm}' height: 40px course-card: backgroundColor: '{colors.secondary}' textColor: '{colors.background}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 260px handwritten-lead: textColor: '{colors.text}' typography: '{typography.accent}' height: 36px accordion-bar: backgroundColor: '{colors.surface}' textColor: '{colors.background}' typography: '{typography.headline-sm}' height: 56px --- # DESIGN.md — 緑×ピンク×黄のポップな子どもスポーツ教室 LP（Pop Green & Pink Kids Sports School Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、力強い・インパクト、親しみ・手作り感 - **キーワード**: キャンペーン訴求・極太数字・手書き見出し・立体ボタン・子どもの笑顔写真・コース別配色 - **地の質感**: ほぼフラットな面に、ドット・斜線・波線の小さな装飾パターンを散らす。ピンクの帯は少し水彩のようなムラがある - **形**: 角丸カード、ピル型の立体ボタン、斜めにカットした写真帯、下向き三角のセクション境界 - **温度感**: 明るく暖かい。緑で爽やかさを、ピンク・黄・赤で元気とお得感を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3EC384` | キャンペーン地の緑 | 12% | 画素の実測 | | `secondary` | `#018884` | 子どもコースのティール | 6% | 画素の実測 | | `accent-1` | `#EB6491` | キャンペーン帯のピンク | 4% | 画素の実測 | | `tint-1` | `#FEE565` | 特典カードの黄 | 6% | 画素の実測 | | `cta` | `#65A335` | WEB予約ボタンの緑 | 2% | 画素の実測 | | `on-cta` | `#FEE85D` | ボタン上の黄色文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#E8473F` | 電話ボタン・価格の赤 | 3% | 推定 | | `accent-3` | `#930303` | 運動コースの濃い赤 | 2% | 画素の実測 | | `background` | `#FEFEFE` | 本文の地色 | 20% | 画素の実測 | | `background-alt` | `#F9F9F9` | 薄いグレーの地 | 15% | 画素の実測 | | `tint-2` | `#D4E8DD` | 子ども向けキャンペーンの水色地 | 8% | 画素の主要色に補正 | | `dark-section` | `#E2BBBC` | 運動コース向けキャンペーンのくすみピンク地 | 8% | 画素の実測 | | `text` | `#373135` | 見出し・本文の文字 | 3% | 画素の主要色に補正 | | `surface` | `#434343` | アコーディオンの濃グレー | 1% | 画素の実測 | | `cta-accessible` | `#477325` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#CA2118` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#01837F` | AA を満たす補正値（計算） | | 計算 | - キャンペーン部分は緑・水色・くすみピンクの地に、白いパネルと黄色の特典カードを重ねる - 価格と「無料」の文字だけを赤の極太文字にする - 子ども向けコースはティール系、運動系コースは赤系で、見出し・帯・カードの色を揃える - 主ボタンは緑の地に黄色文字、サブボタンは赤〜朱のグラデーションに黄色＋白文字 - 説明セクションは白と薄いグレーの地で落ち着かせる - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大きな漢字・キャンペーン名 | 装飾・ディスプレイ | Dela Gothic One | 900 | 64px | 1.1 | 0.0em | | `headline-lg` | 価格・「無料」などの数字訴求 | ゴシック | Noto Sans JP | 900 | 44px | 1.1 | 0.0em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `accent` | 手書き風の導入コピー・写真上の帯コピー | 手書き・筆 | Yusei Magic | 400 | 20px | 1.4 | 0.05em | | `headline-sm` | 特典名・カード見出し | ゴシック | Noto Sans JP | 800 | 20px | 1.4 | 0.0em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.0em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 900 | 22px | 1.3 | 0.02em | - 数字は本文よりかなり大きくし、「円」「税込」は小さく添える - 見出しは極太ゴシック、導入の一言は手書き風フォントにして強弱をつける - 大見出しには白い縁取りや影をつけ、地色の上でも目立たせる - 理由セクションでは、写真の左上に大きな欧文の白抜き数字を置く - 写真上のコピーは、ななめに配置した色帯の上に白い手書き風文字で載せる - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-3403d8b8`（元 LP の URL から採番） - **元 LP**: https://www.bigtree-net.jp/campaign/tennisgk/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。