DESIGN.md — 赤×黄の元気なキッズスポーツ教室 LP（Bold Red Kids Sports School Campaign LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型、スポーティ
• キーワード: 真紅のベタ面・黄色の締切帯・半透明の英字番号・白カード・実写の子ども写真・キャンペーン訴求
• 地の質感: グラデーションは最小限にしたフラットなベタ塗り。キャンペーン帯だけ上下に少し濃淡をつけた赤
• 形: 角丸が小さめの白カードと矩形ボタン。番号は半円バッジ。左に赤い縦線を置く見出し
• 温度感: 高温。赤と黄で熱量と緊急感を出す

Colors

• 白地のセクションと赤のベタ面のセクションを交互に並べ、リズムをつける
• キャンペーン帯は濃い赤（secondary）にし、文字は白と黄色の 2 色だけで組む
• 締切日は黄色の帯に赤文字で載せ、常に一番上に置く
• 主 CTA はオレンジに限定する。赤地の上でも目立つ補色寄りの色にする
• 赤地の上ではカードを白にし、カード内の文字は黒にする
• 白地では強調語と小見出しだけを赤文字にする
• button-primary は文字 #FFFFFF × 背景 #FEA601 のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A36A01、4.55:1）を使う。

Typography

• 見出しは太字のゴシック体で中央揃え。本文も短ければ中央揃えにする
• キャンペーン名は大小のサイズを混ぜ、強調語だけを大きく組む
• セクション番号は大きな英字の太字にし、半透明で見出しの左上に重ねる
• 特典の文言は黄色の太字にし、黄色の下線マーカーで強調する
• 本文は行間を広め（1.8〜1.9）にとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC はカードを 3 列・2 列に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 18px で固定する
• セクションの頭に半透明の英字番号を左寄せで置き、その下に見出しを中央揃えで置く
• プログラムカードは縦に積み、カード同士の間を 16px あける
• キャンペーン帯はページの上部と下部の 2 回くり返す
• フォームは赤地の上に白パネルで置く

Elevation & Depth

• 影はほとんど使わず、色面の差で階層を表す
• 白カードには細いピンクの枠線をつけて浮かせる
• フォームパネルは角丸の白い面にし、影はつけない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの横長の矩形。コーチ写真は縦長の矩形
• セクション境界: 直線で色を切り替える。斜線や波線は使わない
• 番号バッジは下側が丸い半円型のピンクにする
• CTA ボタンは角丸なしか小さめの矩形にし、横幅いっぱいに置く
• 締切帯は角丸 8px の黄色い帯にする
• 小見出しは左に 4px の赤い縦線をつける

Components

• 締切日の帯（deadline-bar）: キャンペーン帯の上端に置く黄色い角丸帯。日付だけを大きくした赤文字で組む
• 予約ボタン（button-primary）: オレンジの横長ボタン。小さな前置きの 1 行と、大きな行動の 1 行を 2 段で組む
• 紹介特典ボックス（referral-box）: 紫の見出しと白い本体の 2 段構成。本体は薄紫のラベル帯と特典名を交互に並べる
• プログラムカード（program-card）: 赤地に置く白カード。上辺にピンクの番号バッジ、見出し、写真、2 行の説明を順に並べる
• 英字番号見出し（section-number）: 大きな英字の番号を半透明で置き、セクションの左上からはみ出させる
• 左線つき項目（left-bar-heading）: 赤い縦線と赤字の小見出しを置き、下に 1 行の説明を添えて縦に並べる
• コーチ紹介（coach-profile）: 縦長写真の下に、ふりがな・氏名・赤字の肩書き・左寄せの紹介文を順に置く
• 料金表（price-table）: 見出しセルを薄ピンク、データセルを薄グレーにし、白い隙間で区切る表
• 申込フォーム（entry-form）: 赤地の上の白パネル。項目ラベルを薄グレーの帯にし、その下に入力欄を置く

Do's and Don'ts

Do - 赤と白のセクションを交互に置き、勢いを保つ - キャンペーン情報は締切→特典→条件→CTA の順に積む - 強調語は黄色やマーカーで目立たせ、ひと目で読めるようにする - 写真は子どもが赤いユニフォームで動いている場面を使う - CTA はキャンペーン帯ごとに必ず 1 つ置く

Don't - パステル調や落ち着いた中間色を主役にしない - 赤地の上に黒い文字を置かない - CTA をオレンジ以外の色にしない - 影の強いカードや装飾的なグラデーションを多用しない - 見出しを細い書体や明朝体で組まない

Page Structure

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

1. ファーストビュー（キャンペーン名と期間を即座に伝える）: 白地にロゴ、極太のキャンペーン名（赤と黒）、赤い期間表示、欧文ロゴ、理念の 2 行、マンガ風の 3 コマを並べる
2. キャンペーン特典（入会特典と締切を訴求する）: 濃い赤の帯に黄色の締切帯、白と黄色の特典文字、商品写真、オレンジの CTA、紫の紹介特典ボックスを置く
3. 問題提起・年齢の重要性（対象年齢での運動体験の価値を説く）: 白地に中央揃えの問いかけ見出しを置き、キーワードを赤にする。本文と横長写真を続ける
4. プログラム紹介（3 つのレッスン内容を見せる）: 赤のベタ面に英字番号と動画埋め込みを置き、白のプログラムカード 3 枚を縦に並べる
5. 礼儀・マナー（人間力の育成を伝える）: 白地に英字番号と赤見出しを置き、左線つき項目を 4 つ並べる
6. 発展プログラム（追加サポートを示す）: 赤地に白い小カードを 2 枚横に並べ、赤字の見出しと黒字の説明を入れる
7. コーチ紹介（指導者の信頼感を出す）: 白地に縦長写真、氏名、赤字の肩書き、紹介文を 2 人分続ける
8. 再キャンペーン（下部でもう一度訴求する）: 上部と同じ構成の赤い帯をくり返す
9. 申込フォーム（体験レッスンの申込みを受け付ける）: 赤地の上の白パネルに、太字の見出しとグレーのラベル帯つき入力項目を並べる
10. 基本情報（対象・料金・持ち物・会場を示す）: 欧文の大見出しの下に、下線つき小見出し、料金表、箇条書き、地図埋め込みを置く
11. フッター（ブランドと系列校を示す）: 赤地に大きなロゴと 4 校の名前を並べ、最下部に黒帯のコピーライトを置く

Imagery

• 室内体育館で、揃いの赤いユニフォームの子どもが走る・投げる・踊る瞬間を写す
• 明るく均一な照明で撮り、動きのある自然な表情を捉える
• コーチは無地の明るい背景の前で腕組みしたバストアップにする
• マンガ風のコマ割りイラストで、教室の雰囲気を親しみやすく説明する
• 特典の商品写真は背景を切り抜いて赤地に載せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューの左右に斜めに配置した写真コラージュを置き、中央にテキストを置く
• PC のキャンペーン帯は締切・タイトル・特典を横一列に並べる
• PC のプログラムカードは 3 列、マナー項目は 2 列にする
• PC の問題提起はテキストと写真の 2 カラムにする
• PC の基本情報は会場住所と地図を横に並べる
• コンテンツ幅は PC で約 900px に抑え、中央に寄せる

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 行書くと起動時に読み込まれる。