--- version: alpha name: Bright Tennis Green Yellow Kids School LP description: テニスコートの緑とボールの黄色を軸にした、明るくスポーティな子ども向けスクールのLP。細い幾何学の欧文見出しを大きく置き、黄色い枠のカード、ボール色で塗り分けたクラスカードで情報を整理している。 colors: primary: '#A3D269' secondary: '#FAED22' cta: '#52C3AA' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#FBFBFB' dark-section: '#F8CC35' accent-1: '#EE1D23' accent-2: '#F6911F' accent-3: '#DADF23' marker: '#DAB368' tint-1: '#FAD8D7' tint-2: '#DDD8DE' text: '#222222' text-muted: '#888888' cta-accessible: '#2E8471' text-muted-accessible: '#767676' accent-1-accessible: '#F24F53' typography: display: fontFamily: Noto Sans JP fontSize: 72px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Josefin Sans fontSize: 52px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0.12em headline-md: fontFamily: Josefin Sans fontSize: 32px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.15em accent: fontFamily: Montserrat fontSize: 96px fontWeight: 800 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 4px md: 14px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 80px 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: 52px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.body-md}' height: 36px recommend-card: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 340px class-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 230px coach-profile: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 260px voice-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px faq-row: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' height: 24px marker-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 28px --- # DESIGN.md — 芝緑×ボール黄の子ども向けテニススクールLP（Bright Tennis Green Yellow Kids School LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、スポーティ、清潔・爽やか - **キーワード**: テニスコート・ボールの黄色・細い幾何学欧文・三角パターン地・水彩グラデ・子ども - **地の質感**: 白地に薄い三角形パターン、水彩風の黄緑グラデ、ローポリ図形の装飾 - **形**: 角丸カード、ピル型CTA、六角形に切り抜いた写真、コートラインの斜線 - **温度感**: 明るく暖かい。黄・黄緑の高彩度に白の余白で抜け感を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A3D269` | コート色の黄緑。導入セクション地 | 7% | 画素の実測 | | `secondary` | `#FAED22` | ボールの黄色。カード枠・見出し帯 | 6% | 画素の実測 | | `cta` | `#52C3AA` | 主CTAボタンのエメラルド | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 39% | 画素の実測 | | `background-alt` | `#FBFBFB` | 三角パターンの淡灰地 | 17% | 画素の実測 | | `dark-section` | `#F8CC35` | クラス紹介の山吹グラデ地 | 9% | 画素の実測 | | `accent-1` | `#EE1D23` | キッズクラスの赤 | 2% | 画素の実測 | | `accent-2` | `#F6911F` | ジュニアクラスの橙 | 1% | 画素の実測 | | `accent-3` | `#DADF23` | 上位クラスのライム | 1% | 画素の実測 | | `marker` | `#DAB368` | 欧文見出し・数字のオレンジイエロー | 0% | 画素の実測 | | `tint-1` | `#FAD8D7` | お客様の声ラベルの淡ピンク | 1% | 画素の実測 | | `tint-2` | `#DDD8DE` | 申込フォーム見出し・FAQのグレージュ | 2% | 画素の実測 | | `text` | `#222222` | 見出し・本文の黒 | 1% | 推定 | | `text-muted` | `#888888` | サブ見出しのグレー | 0% | 推定 | | `cta-accessible` | `#2E8471` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#767676` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#F24F53` | AA を満たす補正値（計算） | | 計算 | - 白と淡灰の三角パターン地を基本に、黄緑と山吹のセクションで場面転換する - 黄色はカード枠・見出し帯・下線マーカーに使い、テニスボールを想起させる - 主CTAだけエメラルドを使い、他の色と競合させない - クラスカードは赤→橙→ライムとボールの段階色で塗り分ける - 欧文大見出しは黒か黄・オレンジの細字にして重くしない - 淡ピンク・グレージュは声や申込などの静かな帯に限定する - `button-primary` は文字 `#FFFFFF` × 背景 `#52C3AA` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#2E8471`、4.51:1）を使う。 - `button-outline` は文字 `#888888` × 背景 `#FFFFFF` のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#767676`、4.54:1）を使う。 - `class-card` は文字 `#222222` × 背景 `#EE1D23` のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#F24F53`、4.56:1）を使う。 - `voice-label` は文字 `#888888` × 背景 `#FAD8D7` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#767676`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大きなキャッチ | ゴシック | Noto Sans JP | 900 | 72px | 1.1 | 0.0em | | `headline-lg` | セクションの欧文大見出し | 欧文サンセリフ | Josefin Sans | 300 | 52px | 1.1 | 0.12em | | `headline-md` | 講師名の欧文表記 | 欧文サンセリフ | Josefin Sans | 400 | 32px | 1.15 | 0.08em | | `headline-sm` | カードの和文見出し | ゴシック | Noto Sans JP | 500 | 19px | 1.5 | 0.06em | | `body-md` | カード本文・説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `note` | 欧文見出し下の和文ラベル・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.15em | | `accent` | 実績の大きな数字 | 欧文サンセリフ | Montserrat | 800 | 96px | 1.0 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.08em | - セクション見出しは細い幾何学欧文を大きく置き、下に小さな和文ラベルを添える - 欧文は字間を広く取り、軽く見せる - 実績の数字は極太で、下に細い欧文を組み合わせる - 本文は小さめで行間を広く取る - 和文の小見出しは黄色の帯マーカーで強調する - 番号は円の中に置き、上に弧を描く欧文を添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。講師紹介は写真左・名前右の2分割 - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 欧文見出しは中央揃えか、画面幅いっぱいに大きく置く - カードは画面の約80%幅で中央に縦に並べる - 講師紹介は写真38%・テキスト55%の2分割 - FAQは淡灰の帯を細い間隔で積む - セクション間は広めに空け、装飾図形を余白に置く ## Elevation & Depth - 影はほぼ使わず、色面と枠線で区切る - カードは黄・赤などの太めの色枠で浮かせる - 装飾は半透明のローポリ図形を背面に置く ## Shapes - **角丸**: 小 4px ／ 中 14px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: FVは全面写真、導入は六角形の不定形切り抜き、講師は縦長の角写真 - **セクション境界**: FV下は緩い曲線、導入はコートラインの斜線、他は直線切替 - 主CTAはピル型の塗りボタン - サブボタンは角丸なしの細枠ボタン - カードは角丸14px前後、上部を色帯にする - 番号は白丸に黄色の太い縁取り - 申込見出しは右側だけ大きく角丸にした帯にする ## Components - **主CTAボタン**（`button-primary`）: エメラルドのピル型。上段に白太字、下段に小さな黄色の補足を入れる - **細枠サブボタン**（`button-outline`）: 白地にグレーの細枠、字間を広くした文字。右に矢印線を伸ばす - **おすすめ番号カード**（`recommend-card`）: 黄色い枠と見出し帯、下段は白の本文。上に番号入り白丸が重なる - **クラス料金カード**（`class-card`）: 上部はボール色の帯に細い欧文クラス名と太い数字、下段は白で対象・時間・価格を並べ、右にボールの図を置く - **講師プロフィール**（`coach-profile`）: 縦長写真の右に細い欧文の名前2行、和文名、資格や一言を並べる - **声の属性ラベル**（`voice-label`）: 淡ピンクのピル帯に学年・続柄を中央揃えで置き、下に本文を続ける - **FAQ行**（`faq-row`）: 淡灰の帯の左にグレージュ四角のQ、右端に＋を置くアコーディオン - **黄帯マーカー見出し**（`marker-heading`）: 和文の小見出しの下半分に黄色の帯を敷く ## Do's and Don'ts **Do** - 黄緑と黄をテニスコートとボールの色として一貫して使う - セクション見出しは細い欧文で大きく、和文ラベルを小さく添える - 子どもが笑顔でラケットを持つ明るい写真を使う - クラスはボールの段階色でカードを塗り分ける - 白地には三角パターンやローポリ図形で軽い動きを出す **Don't** - 暗い背景や重い影を使わない - 欧文見出しに太いセリフ体を使わない - 主CTA以外にエメラルドを使わない - カードを角ばった四角にしない - 本文を大きく太くしすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（スクール名と体験受付を伝える）: 子どもの全面写真に、緑の施設名と大きな黄緑の極太キャッチを左に重ねる 2. **導入・コンセプト**（立地と特別な時間を伝え体験へ誘う）: 黄緑のコート地に白い斜線。六角形写真を散らし、黄の細い欧文と黄帯見出し、主CTAを置く 3. **実績**（運営年数で信頼を示す）: 白地に極太の黒数字と細い黄の欧文。周囲に大きなテニスボールの図を配置 4. **特長**（空間と時間の価値を示す）: 三角パターン地に重ねた写真2枚、丸記号付きの緑文字リスト 5. **おすすめ対象**（悩みに共感し不安を解消する）: 番号丸付きの黄枠カードを3つ縦に並べる 6. **講師紹介**（コーチの人柄と資格を示す）: 黄緑の水彩地。縦長写真と細い欧文名を交互に5人並べる 7. **お客様の声**（保護者の実感を伝える）: 白〜淡灰の斜面地に、淡ピンクのラベルと短い本文を3件 8. **クラス・料金**（年齢別クラスと価格を示す）: 山吹グラデ地にボール色のカード4枚、下に細枠ボタン 9. **よくある質問**（不安を解消する）: 細い欧文見出しとFAQのアコーディオン6行 10. **申込・CTA**（WEB入会へ誘導する）: グレージュの角丸帯に細い欧文、大きな和文案内と細枠ボタン、一般向けバナー 11. **スクール情報・フッター**（所在地と問い合わせ先を示す）: 淡い巨大欧文の下にACCESSとCONTACTの太字見出し、ロゴと著作権表示 ## Imagery - 自然光のテニスコートで笑顔の子どもを撮り、背景は明るくぼかす - スタジオの白地や淡いベージュ地で動きのある子どもの写真 - 講師は同じユニフォームで白壁前の上半身を撮り、縦長に切る - テニスボールを線画風のフラットな円で描き、クラス色に塗る - 黄・ピンク・水色の半透明ローポリ図形や水彩のにじみを背景に使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではFVの写真を右、キャッチを左に横長で配置する - 実績は数字を左、説明文を右に置く2カラムにする - おすすめカードとお客様の声は3カラムで横に並べる - 講師紹介とクラスカードは2カラムのグリッドにする - 申込は左に角丸帯、右に案内とボタンの2分割 - コンテンツ幅は約960pxに抑え、装飾図形を左右余白に広げる ## 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-c49b784a`（元 LP の URL から採番） - **元 LP**: https://www.sports-create.com/gotenyama/jrtennis/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。