DESIGN.md — 緑グラデとミントの爽快スポーツスクールLP（Fresh Green Gradient Sports School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、スポーティ、ポップ・元気、情報量多め・訴求型
• キーワード: 爽快・グラデーション帯・斜めカット・ミント地・方眼カード・イタリック見出し
• 地の質感: 白地にミントや薄グレーの面。方眼柄・斜めストライプ柄の地紋を薄く敷く
• 形: ピル型ボタン、影付き矩形の見出し帯に下向き吹き出し三角、斜めに切った写真
• 温度感: 明るく涼しい。黄色マーカーと橙文字で温度を少し上げる

Colors

• セクション見出し帯は青緑→緑の横グラデーションに、黒の細枠をずらして重ねる
• 地は白・ミント・薄グレー・濃グレーを交互に使ってセクションを区切る
• 主CTAは黄緑のベタで、白抜き文字と白丸の再生アイコンを入れる
• サブCTAは白地に黄緑の枠線と黄緑の文字にする
• 特長3要素は橙・水色・マゼンタで固定して色分けする
• 黄色は暗い地の上での強調文字と下線マーカーだけに使う
• button-primary は文字 #F9FEF7 × 背景 #6ECD2C のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#45811C、4.66:1）を使う。
• button-secondary は文字 #6ECD2C × 背景 #FFFFFF のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#45811C、4.58:1）を使う。
• heading-gradient-band は文字 #F4F4E9 × 背景 #05B14D のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#047F37、4.63:1）を使う。
• pillar-accordion は文字 #F4F4E9 × 背景 #F4B12C のコントラスト比が 1.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#966608、4.51:1）を使う。
• label-box-heading は文字 #F4F4E9 × 背景 #24969E のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#1D7A81、4.57:1）を使う。
• plan-band は文字 #F4F4E9 × 背景 #2BB4C4 のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1D7A85、4.54:1）を使う。

Typography

• 大見出しは極太ゴシックの斜体でスピード感を出す
• 見出し帯の文字は白で字間を広くとる
• 強調語は黄色マーカーか橙色の文字で示す
• 見出しの前置きは左右の斜線（＼ ／）ではさむ
• 英字ラベルは大きな斜体の大文字にし、写真の上に半透明で縦組みにする
• 価格の0円などの数字は特大の極太にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは2列グリッド、声はスライダー
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出し帯は中央に置き、幅は75%程度
• 設備紹介は写真を全幅で見せ、その下に左寄せのテキスト
• チェックカードは縦に積み、間隔は12px
• セクションの終わりは下向きの三角でつなぐ
• CTAボタンは幅90%で中央に置く

Elevation & Depth

• 見出し帯には黒の細枠をずらして重ね、影のように見せる
• 主CTAの下に濃い緑のベタ影を4px入れる
• 温浴写真は白フチを付け、薄いドロップシャドウをかける
• MOREボタンは白地に弱い影

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は矩形のまま使い、色面と斜めに切り分ける。人物イラストは円形に収める
• セクション境界: 直線で区切るか、下向き三角（V字）でつなぐ
• ボタンはすべてピル型
• 見出し帯は角丸なしの矩形に吹き出し三角を付ける
• チェックカードは角丸なしで方眼柄の地
• 斜めの色帯で写真の端を切る

Components

• 主CTAボタン（button-primary）: 黄緑のピル型。右端に白丸の再生アイコン、下に濃い影
• サブCTAボタン（button-secondary）: 白地に黄緑の枠線のピル型。アイコン付き
• グラデ見出し帯（heading-gradient-band）: 青緑から緑へのグラデ矩形に黒枠をずらして重ね、下に吹き出し三角を付ける
• 悩みチェックリスト（worry-list）: 濃グレー地に丸チェックアイコンと白文字。2行目は黄色の文字に下線マーカー
• 特長3色アコーディオン（pillar-accordion）: 橙・水色・マゼンタの帯に、小さなコピーと斜体の英字大見出し。右端に＋を置く
• 方眼チェックカード（check-card）: ミント地の上に方眼柄の白カード。左に緑の四角チェック、右に2行の文
• ラベル付きベタ見出し（label-box-heading）: 白地に黒枠の小ラベルを置き、その下に濃い青緑ベタの白抜き大見出しを2段で積む
• プラン開閉帯（plan-band）: 全幅のグラデ帯に白い角丸ラベルと白文字、右端に＋
• お客様の声スライダー（testimonial-card）: 斜めストライプのミント地に橙の見出し、円形の人物イラスト、本文中の橙強調、属性を右寄せで置く。左右に矢印

Do's and Don'ts

Do - 見出し帯はすべて同じグラデーションと枠のずらしで統一する - 悩み・ポイントは短い2行文にし、後半を強調する - 設備写真には大きな英字ラベルを縦に重ねる - セクションごとに地色を変え、リズムを作る - CTAはFV直下とページ終盤に配置する

Don't - 暖色系やくすんだ色を地色に使わない - ボタンを角張った形にしない - 特長の3色を他の用途に転用しない - 明朝体や手書き書体を見出しに使わない - 長文の本文を強調なしで続けない

Page Structure

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

1. ファーストビュー（キャンペーンと対象者を一目で伝える）: 経験者と初心者の写真を左右に並べ、斜体の極太コピーと英字ラベルを重ねる。下に濃緑の価格帯と黄色の期間バッジを置く
2. CTA（体験予約と入会へ誘導する）: 黄緑のピル型主ボタンと、白地に枠線のサブボタンを縦に並べる
3. 悩みの提起（対象者の不安に共感する）: 濃グレーのグラデ地に、チェック付きの悩みを4つ並べる。下に写真3枚を横並び
4. 解決策・設備紹介（上達できる仕組みを示す）: 全幅写真を緑・青緑の斜め色帯で切り、縦の英字を重ねる。下に斜体の見出しと説明文
5. メソッド紹介（独自の方式を図で説明する）: 3色の三角図に円アイコンを置き、3色の開閉帯を続ける
6. 初心者向け安心ポイント（未経験者の不安を解消する）: ミント地にラベル付きのベタ見出しを置き、方眼チェックカード4枚と下向きV字で締める
7. おすすめプラン（対象別のプランを案内する）: 斜線ではさんだ黄色マーカーの文と、グラデのプラン開閉帯
8. お客様の声（体験談で信頼を高める）: 斜めストライプのミント地に、イラストのスライダーカード
9. 付帯施設（付加価値を伝える）: 薄グレー地に、白フチ付きの写真を2×2で並べる。見出しの下に緑の斜線ライン
10. 動画（体験の様子を見せる）: グラデ見出し帯の下に埋め込み動画を縦に並べる
11. 導線ボタン・紹介特典（流れの確認と店舗検索、紹介制度へ誘導する）: グラデのピルボタンと白枠のピルボタン、黒枠のバナー
12. 関連コンテンツ（回遊を促す）: 薄い斜線柄の地のカードに、バナー画像・説明文・白のMOREボタン

Imagery

• 屋外の芝生や屋内の練習場で、明るい笑顔の人物を撮る
• コーチが指導している場面を実写で見せる
• 人物は細い線のシンプルなイラストにし、円形の背景に収める
• アイコンは単色の円に白抜きで描く
• 方眼柄・斜めストライプ・斜線を装飾の地紋に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで幅約900px
• 悩みとチェックカードは2列にする
• 設備紹介は写真と色面を左右に並べ、斜めに切り分ける
• お客様の声はスライダーをやめ、3列のカードで並べる
• 動画と関連コンテンツは2列にする
• FVは人物を右に寄せ、コピーを左に置く

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