青×黄の元気な子ども向けスポーツ教室LP

Bright Blue & Yellow Kids Sports School LP

鮮やかな青と黄色の帯を交互に重ね、芝生の写真と子どもの切り抜きで躍動感を出す習い事スクールのLP。白い角丸カードに太い紺ゴシックの見出しを置き、オレンジのピル型CTAを何度も挟んで無料体験へ誘導する。

教育・スクール・資格ポップ・元気スポーティ信頼・誠実情報量多め・訴求型SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地の色は青・黄・白・薄水色を交互に切り替え、セクションごとにリズムを作る
青地の上は白文字と白カード、黄地の上は紺文字と白カードにする
強調語は紺または青の文字色、さらに強い語は黄色マーカー帯の上に黒文字
オレンジはCTAと番号・チェックマークだけに使う
CTA帯は黄地＋白カード＋オレンジボタンの同じ構成をページ内で5回以上繰り返す
フォーム送信ボタンだけは緑にして区別する

TYPOGRAPHY

書体

display大きな数字・セクション大見出しゴシック／ Dela Gothic One 900 ／ 44px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出しゴシック／ Noto Sans JP 900 ／ 28px ／行間 1.35

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdカードのタイトルゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm小見出し・チェック項目ゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Noto Sans JP 400 ／ 14px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

note注釈ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

accent吹き出しの見出し・ラベル丸ゴシック／ M PLUS Rounded 1c 800 ／ 18px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonCTAの文字・番号欧文サンセリフ／ Barlow Condensed 700 ／ 30px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

見出しはとても太いゴシックで、大事な数字や語だけ1.5〜2倍に拡大する
強調語は黄色マーカーの帯か、黒地に白文字のボックスに入れる
本文は中央揃え、カード内の本文は左揃え
番号は細長い欧文書体のオレンジで大きくする
手書き風の英字（Fun!・Good Job!など）を写真の上に添える
注釈は※付きで小さいグレー文字にする

PAGE STRUCTURE

セクション構成

ファーストビュー実績の数字と対象年齢で信頼を伝える芝生の写真に子どもとコーチを切り抜き、白い帯に大きな数字の見出し、20周年エンブレムと受賞バッジ
CTA無料体験への最初の誘導黄地に白カード、悩みの吹き出しとオレンジのピル型ボタン
悩みの提起とお試しの提案保護者の不安に応えて無料期間を見せる白地に手書き風の吹き出しを3つ。クリーム地に紺の丸いバッジを4つ並べる
コンセプト楽しさと上達を伝える芝生の写真に白い円を2つ重ね、太い文字とFun!などの手書き英字
特長（教育方針）技術以外に育つ力を説明する青い方眼地に黄色マーカーの見出し、雲形の吹き出しで問いかけ
育つ能力5つの力を図とリストで見せる五角形の図と、番号付きの能力カード5枚
選ばれる理由と根拠独自の測定ツール・研究データで納得させる黄地の理由カード、青地の白カード、グラフのイラスト
実績・メディア掲載会員数の推移と掲載実績で権威づける棒グラフと黄色い矢印、黄地にチェックリストと書籍写真・動画
お客様の声保護者の体験談で安心させる薄水色の方眼地に、番号ラベル付きの声カードを4枚
卒業生紹介将来の進路を見せる枠線カードに写真、エンブレム、斜め切りの青いラベル付きの表
おすすめの対象自分ごと化させる紺のリボン見出しと、チェック付きのリスト、下部に波形写真
4つの理由継続のしやすさを詳しく伝える青地に盾形の番号エンブレムと理由カードを4枚
年間活動1年の流れを見せる黄地にすごろく風の月ごとのマス目と説明カード
申込の流れ・フォーム体験の申込を完了させる青地にステップカード3枚と動画。白地のフォームに必須ラベルと緑の送信ボタン、紺のフッター

COMPONENTS

部品

主CTAボタン button-primaryオレンジのピル型。上に紺のタブ型ラベル、中に大きな価格表記と小さい説明文、右端に丸い矢印
CTAカード cta-card黄地の上に白い角丸カード。ロゴ、紺帯の見出し、保護者の悩みの吹き出し、CTAボタンを縦に積む
吹き出しラベル speech-label紺か白の吹き出しにセクションを導く短い言葉を入れる
理由カード reason-card盾形の番号エンブレム＋紺の見出し帯＋白カード（写真とオレンジのチェック付き箇条書き）
番号付き能力カード numbered-list-card薄い水色グラデのカードに、オレンジの大きい番号、太字のタイトル、青字の強調入り説明
お客様の声カード voice-card白い角丸カードに青いピル型の番号ラベル、太字タイトル、右上に円形の顔写真、点線区切りの下に本文
マーカー見出し marker-heading黄色の帯か黒地に白文字のボックスで重要語を強調する
チェックリスト check-list緑かオレンジのチェック記号と紺の太字強調で、おすすめの対象を並べる
流れのステップ step-card青地に白い角丸カード、左に円形写真と大きな番号、点線の下に説明

守ること

青・黄・白の帯を交互に切り替えて、明るく元気なリズムを保つ
見出しは太いゴシックにし、数字と大事な語を大きくする
子どもが笑顔で動いている写真を切り抜いて大きく使う
CTAカードは同じデザインでセクションごとに繰り返す
理由やステップには必ず番号をつけ、カードに分ける

DON'T

避けること

暗い色や渋い色の写真を使わない
細い明朝体や細いウェイトの見出しにしない
オレンジをCTA以外に広く塗らない
角のとがったカードや影の強い重いデザインにしない
長い本文を装飾なしで続けない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 青×黄の元気な子ども向けスポーツ教室LP（Bright Blue & Yellow Kids Sports School LP）

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

Overview

業種: 教育・スクール・資格／ 雰囲気: ポップ・元気、スポーティ、信頼・誠実、情報量多め・訴求型
キーワード: 青と黄の帯・芝生の写真・子どもの切り抜き・白い角丸カード・オレンジCTA・番号付きの理由
地の質感: ベタ塗りの面に細かい方眼柄やきらめき装飾をのせる。写真は彩度高めで明るい
形: 角丸カード、吹き出し、エンブレム型バッジ、斜めのリボン帯、波形と山形の境界
温度感: 明るくて温かい。子どもと保護者の両方に安心感と元気さを伝える

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#3A8AFE`	ブランドの青。セクション地	12%	画素の実測
`secondary`	`#02419B`	濃紺。見出しの帯・バッジ・見出し文字	5%	画素の実測
`accent-1`	`#FEDA02`	黄色。セクション地・マーカー	9%	画素の実測
`cta`	`#F26A1B`	主CTAのオレンジ	2%	推定
`on-cta`	`#FDFCFB`	CTA上の文字	0%	画素の実測
`background`	`#FEFEFE`	基本の白地	27%	画素の実測
`background-alt`	`#EBF5F6`	薄水色の方眼地（お声・卒業生）	10%	画素の実測
`tint-1`	`#F7F7D5`	クリーム地（お試し説明）	4%	画素の実測
`text`	`#222222`	見出し・本文の濃い文字	3%	推定
`text-muted`	`#666666`	注釈のグレー	0%	推定
`accent-2`	`#EE660F`	番号・チェックのオレンジ	0%	画素の実測
`dark-section`	`#03409B`	フッターの紺	2%	画素の実測
`accent-3`	`#5BBF1A`	送信ボタンの緑	0%	推定
`cta-accessible`	`#C54F0B`	AA を満たす補正値（計算）		計算

地の色は青・黄・白・薄水色を交互に切り替え、セクションごとにリズムを作る
青地の上は白文字と白カード、黄地の上は紺文字と白カードにする
強調語は紺または青の文字色、さらに強い語は黄色マーカー帯の上に黒文字
オレンジはCTAと番号・チェックマークだけに使う
CTA帯は黄地＋白カード＋オレンジボタンの同じ構成をページ内で5回以上繰り返す
フォーム送信ボタンだけは緑にして区別する
button-primary は文字 #FDFCFB × 背景 #F26A1B のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C54F0B、4.56:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	大きな数字・セクション大見出し	ゴシック	Dela Gothic One	900	44px	1.2	0.0em
`headline-lg`	セクション見出し	ゴシック	Noto Sans JP	900	28px	1.35	0.04em
`headline-md`	カードのタイトル	ゴシック	Noto Sans JP	700	20px	1.4	0.02em
`headline-sm`	小見出し・チェック項目	ゴシック	Noto Sans JP	700	16px	1.5	0.02em
`body-md`	本文	ゴシック	Noto Sans JP	400	14px	1.8	0.02em
`note`	注釈	ゴシック	Noto Sans JP	400	10px	1.6	0.0em
`accent`	吹き出しの見出し・ラベル	丸ゴシック	M PLUS Rounded 1c	800	18px	1.3	0.05em
`label-button`	CTAの文字・番号	欧文サンセリフ	Barlow Condensed	700	30px	1.1	0.0em

見出しはとても太いゴシックで、大事な数字や語だけ1.5〜2倍に拡大する
強調語は黄色マーカーの帯か、黒地に白文字のボックスに入れる
本文は中央揃え、カード内の本文は左揃え
番号は細長い欧文書体のオレンジで大きくする
手書き風の英字（Fun!・Good Job!など）を写真の上に添える
注釈は※付きで小さいグレー文字にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、カード内は写真＋テキストを縦に積む
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
カードは画面幅いっぱいから左右16px程度あけて配置する
セクション冒頭に吹き出し型ラベルと大見出しを置く
理由やステップは番号エンブレム＋紺のタイトル帯＋白い本文カードの構成にする
CTAカードはセクションの区切りごとに挟む
子どもの切り抜き写真はカードの端からはみ出させて動きを出す

Elevation & Depth

白カードには薄くて柔らかい影（0 4px 12px rgba(0,0,0,0.08)）をつける
CTAボタンは下側に濃いオレンジの影をつけて立体的にする
写真の切り抜きにはごく薄いドロップシャドウ
フォーム入力欄は影なしで薄いピンク地

Shapes

角丸: 小 6px ／中 12px ／大 24px。ボタンはピル型。
写真の切り抜き: 写真は角丸の長方形か円形に切り抜き、人物は背景を抜いて配置する
セクション境界: 山形・波形・斜めのカットで切り替え、まっすぐな直線の境界と混ぜて使う
CTAは大きいピル型で、右端に白い丸の矢印アイコンをつける
吹き出しは丸い雲形か、しっぽ付きの角丸にする
理由の番号は盾形のエンブレム
能力の図は五角形の中心に丸いバッジを配置
斜めのリボン帯で見出しを飾る

Components

主CTAボタン（button-primary）: オレンジのピル型。上に紺のタブ型ラベル、中に大きな価格表記と小さい説明文、右端に丸い矢印
CTAカード（cta-card）: 黄地の上に白い角丸カード。ロゴ、紺帯の見出し、保護者の悩みの吹き出し、CTAボタンを縦に積む
吹き出しラベル（speech-label）: 紺か白の吹き出しにセクションを導く短い言葉を入れる
理由カード（reason-card）: 盾形の番号エンブレム＋紺の見出し帯＋白カード（写真とオレンジのチェック付き箇条書き）
番号付き能力カード（numbered-list-card）: 薄い水色グラデのカードに、オレンジの大きい番号、太字のタイトル、青字の強調入り説明
お客様の声カード（voice-card）: 白い角丸カードに青いピル型の番号ラベル、太字タイトル、右上に円形の顔写真、点線区切りの下に本文
マーカー見出し（marker-heading）: 黄色の帯か黒地に白文字のボックスで重要語を強調する
チェックリスト（check-list）: 緑かオレンジのチェック記号と紺の太字強調で、おすすめの対象を並べる
流れのステップ（step-card）: 青地に白い角丸カード、左に円形写真と大きな番号、点線の下に説明

Do's and Don'ts

Do - 青・黄・白の帯を交互に切り替えて、明るく元気なリズムを保つ - 見出しは太いゴシックにし、数字と大事な語を大きくする - 子どもが笑顔で動いている写真を切り抜いて大きく使う - CTAカードは同じデザインでセクションごとに繰り返す - 理由やステップには必ず番号をつけ、カードに分ける

Don't - 暗い色や渋い色の写真を使わない - 細い明朝体や細いウェイトの見出しにしない - オレンジをCTA以外に広く塗らない - 角のとがったカードや影の強い重いデザインにしない - 長い本文を装飾なしで続けない

Page Structure

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

ファーストビュー（実績の数字と対象年齢で信頼を伝える）: 芝生の写真に子どもとコーチを切り抜き、白い帯に大きな数字の見出し、20周年エンブレムと受賞バッジ
CTA（無料体験への最初の誘導）: 黄地に白カード、悩みの吹き出しとオレンジのピル型ボタン
悩みの提起とお試しの提案（保護者の不安に応えて無料期間を見せる）: 白地に手書き風の吹き出しを3つ。クリーム地に紺の丸いバッジを4つ並べる
コンセプト（楽しさと上達を伝える）: 芝生の写真に白い円を2つ重ね、太い文字とFun!などの手書き英字
特長（教育方針）（技術以外に育つ力を説明する）: 青い方眼地に黄色マーカーの見出し、雲形の吹き出しで問いかけ
育つ能力（5つの力を図とリストで見せる）: 五角形の図と、番号付きの能力カード5枚
選ばれる理由と根拠（独自の測定ツール・研究データで納得させる）: 黄地の理由カード、青地の白カード、グラフのイラスト
実績・メディア掲載（会員数の推移と掲載実績で権威づける）: 棒グラフと黄色い矢印、黄地にチェックリストと書籍写真・動画
お客様の声（保護者の体験談で安心させる）: 薄水色の方眼地に、番号ラベル付きの声カードを4枚
卒業生紹介（将来の進路を見せる）: 枠線カードに写真、エンブレム、斜め切りの青いラベル付きの表
おすすめの対象（自分ごと化させる）: 紺のリボン見出しと、チェック付きのリスト、下部に波形写真
4つの理由（継続のしやすさを詳しく伝える）: 青地に盾形の番号エンブレムと理由カードを4枚
年間活動（1年の流れを見せる）: 黄地にすごろく風の月ごとのマス目と説明カード
申込の流れ・フォーム（体験の申込を完了させる）: 青地にステップカード3枚と動画。白地のフォームに必須ラベルと緑の送信ボタン、紺のフッター

Imagery

屋外の人工芝で、ユニフォーム姿の子どもが笑顔で走る・跳ぶ写真を彩度高めで撮る
人物は背景を切り抜き、ボールや星のイラストを添える
保護者と子どもの寄り添う写真は円形に切り抜く
サッカーボール・ゴール・ホイッスル・スパイクの3D風イラストを添える
白い線のきらめき、手書き英字、黄色い星などのポップな装飾
青地には細かい方眼柄を薄く重ねる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは中央寄せで最大幅900px程度にし、左右に地の色を広げる
PCでは理由カードやお声カードを写真左・テキスト右の横並びにする
卒業生カードはPCで2列に並べる
ファーストビューはPCで写真を右、見出しを左に配置する
PCではヘッダー右上に常時オレンジのCTAボタンを置き、TOPに戻るボタンも表示する
フォームはPCでラベル左・入力欄右の2列表にする

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

---
version: alpha
name: Bright Blue & Yellow Kids Sports School LP
description: 鮮やかな青と黄色の帯を交互に重ね、芝生の写真と子どもの切り抜きで躍動感を出す習い事スクールのLP。白い角丸カードに太い紺ゴシックの見出しを置き、オレンジのピル型CTAを何度も挟んで無料体験へ誘導する。
colors:
  primary: '#3A8AFE'
  secondary: '#02419B'
  accent-1: '#FEDA02'
  cta: '#F26A1B'
  on-cta: '#FDFCFB'
  background: '#FEFEFE'
  background-alt: '#EBF5F6'
  tint-1: '#F7F7D5'
  text: '#222222'
  text-muted: '#666666'
  accent-2: '#EE660F'
  dark-section: '#03409B'
  accent-3: '#5BBF1A'
  cta-accessible: '#C54F0B'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.2
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1.35
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: M PLUS Rounded 1c
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.05em
  label-button:
    fontFamily: Barlow Condensed
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
rounded:
  sm: 6px
  md: 12px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
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
  cta-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.secondary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 420px
  speech-label:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 40px
  reason-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 520px
  numbered-list-card:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 90px
  voice-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 220px
  marker-heading:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 44px
  check-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 300px
  step-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 140px
---

# DESIGN.md — 青×黄の元気な子ども向けスポーツ教室LP（Bright Blue & Yellow Kids Sports School LP）

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

## Overview

- **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、スポーティ、信頼・誠実、情報量多め・訴求型
- **キーワード**: 青と黄の帯・芝生の写真・子どもの切り抜き・白い角丸カード・オレンジCTA・番号付きの理由
- **地の質感**: ベタ塗りの面に細かい方眼柄やきらめき装飾をのせる。写真は彩度高めで明るい
- **形**: 角丸カード、吹き出し、エンブレム型バッジ、斜めのリボン帯、波形と山形の境界
- **温度感**: 明るくて温かい。子どもと保護者の両方に安心感と元気さを伝える

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#3A8AFE` | ブランドの青。セクション地 | 12% | 画素の実測 |
| `secondary` | `#02419B` | 濃紺。見出しの帯・バッジ・見出し文字 | 5% | 画素の実測 |
| `accent-1` | `#FEDA02` | 黄色。セクション地・マーカー | 9% | 画素の実測 |
| `cta` | `#F26A1B` | 主CTAのオレンジ | 2% | 推定 |
| `on-cta` | `#FDFCFB` | CTA上の文字 | 0% | 画素の実測 |
| `background` | `#FEFEFE` | 基本の白地 | 27% | 画素の実測 |
| `background-alt` | `#EBF5F6` | 薄水色の方眼地（お声・卒業生） | 10% | 画素の実測 |
| `tint-1` | `#F7F7D5` | クリーム地（お試し説明） | 4% | 画素の実測 |
| `text` | `#222222` | 見出し・本文の濃い文字 | 3% | 推定 |
| `text-muted` | `#666666` | 注釈のグレー | 0% | 推定 |
| `accent-2` | `#EE660F` | 番号・チェックのオレンジ | 0% | 画素の実測 |
| `dark-section` | `#03409B` | フッターの紺 | 2% | 画素の実測 |
| `accent-3` | `#5BBF1A` | 送信ボタンの緑 | 0% | 推定 |
| `cta-accessible` | `#C54F0B` | AA を満たす補正値（計算） |  | 計算 |

- 地の色は青・黄・白・薄水色を交互に切り替え、セクションごとにリズムを作る
- 青地の上は白文字と白カード、黄地の上は紺文字と白カードにする
- 強調語は紺または青の文字色、さらに強い語は黄色マーカー帯の上に黒文字
- オレンジはCTAと番号・チェックマークだけに使う
- CTA帯は黄地＋白カード＋オレンジボタンの同じ構成をページ内で5回以上繰り返す
- フォーム送信ボタンだけは緑にして区別する
- `button-primary` は文字 `#FDFCFB` × 背景 `#F26A1B` のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C54F0B`、4.56:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 大きな数字・セクション大見出し | ゴシック | Dela Gothic One | 900 | 44px | 1.2 | 0.0em |
| `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.35 | 0.04em |
| `headline-md` | カードのタイトル | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em |
| `headline-sm` | 小見出し・チェック項目 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em |
| `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `accent` | 吹き出しの見出し・ラベル | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.3 | 0.05em |
| `label-button` | CTAの文字・番号 | 欧文サンセリフ | Barlow Condensed | 700 | 30px | 1.1 | 0.0em |

- 見出しはとても太いゴシックで、大事な数字や語だけ1.5〜2倍に拡大する
- 強調語は黄色マーカーの帯か、黒地に白文字のボックスに入れる
- 本文は中央揃え、カード内の本文は左揃え
- 番号は細長い欧文書体のオレンジで大きくする
- 手書き風の英字（Fun!・Good Job!など）を写真の上に添える
- 注釈は※付きで小さいグレー文字にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、カード内は写真＋テキストを縦に積む
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- カードは画面幅いっぱいから左右16px程度あけて配置する
- セクション冒頭に吹き出し型ラベルと大見出しを置く
- 理由やステップは番号エンブレム＋紺のタイトル帯＋白い本文カードの構成にする
- CTAカードはセクションの区切りごとに挟む
- 子どもの切り抜き写真はカードの端からはみ出させて動きを出す

## Elevation & Depth

- 白カードには薄くて柔らかい影（0 4px 12px rgba(0,0,0,0.08)）をつける
- CTAボタンは下側に濃いオレンジの影をつけて立体的にする
- 写真の切り抜きにはごく薄いドロップシャドウ
- フォーム入力欄は影なしで薄いピンク地

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 写真は角丸の長方形か円形に切り抜き、人物は背景を抜いて配置する
- **セクション境界**: 山形・波形・斜めのカットで切り替え、まっすぐな直線の境界と混ぜて使う
- CTAは大きいピル型で、右端に白い丸の矢印アイコンをつける
- 吹き出しは丸い雲形か、しっぽ付きの角丸にする
- 理由の番号は盾形のエンブレム
- 能力の図は五角形の中心に丸いバッジを配置
- 斜めのリボン帯で見出しを飾る

## Components

- **主CTAボタン**（`button-primary`）: オレンジのピル型。上に紺のタブ型ラベル、中に大きな価格表記と小さい説明文、右端に丸い矢印
- **CTAカード**（`cta-card`）: 黄地の上に白い角丸カード。ロゴ、紺帯の見出し、保護者の悩みの吹き出し、CTAボタンを縦に積む
- **吹き出しラベル**（`speech-label`）: 紺か白の吹き出しにセクションを導く短い言葉を入れる
- **理由カード**（`reason-card`）: 盾形の番号エンブレム＋紺の見出し帯＋白カード（写真とオレンジのチェック付き箇条書き）
- **番号付き能力カード**（`numbered-list-card`）: 薄い水色グラデのカードに、オレンジの大きい番号、太字のタイトル、青字の強調入り説明
- **お客様の声カード**（`voice-card`）: 白い角丸カードに青いピル型の番号ラベル、太字タイトル、右上に円形の顔写真、点線区切りの下に本文
- **マーカー見出し**（`marker-heading`）: 黄色の帯か黒地に白文字のボックスで重要語を強調する
- **チェックリスト**（`check-list`）: 緑かオレンジのチェック記号と紺の太字強調で、おすすめの対象を並べる
- **流れのステップ**（`step-card`）: 青地に白い角丸カード、左に円形写真と大きな番号、点線の下に説明

## Do's and Don'ts

**Do**
- 青・黄・白の帯を交互に切り替えて、明るく元気なリズムを保つ
- 見出しは太いゴシックにし、数字と大事な語を大きくする
- 子どもが笑顔で動いている写真を切り抜いて大きく使う
- CTAカードは同じデザインでセクションごとに繰り返す
- 理由やステップには必ず番号をつけ、カードに分ける

**Don't**
- 暗い色や渋い色の写真を使わない
- 細い明朝体や細いウェイトの見出しにしない
- オレンジをCTA以外に広く塗らない
- 角のとがったカードや影の強い重いデザインにしない
- 長い本文を装飾なしで続けない

## Page Structure

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

1. **ファーストビュー**（実績の数字と対象年齢で信頼を伝える）: 芝生の写真に子どもとコーチを切り抜き、白い帯に大きな数字の見出し、20周年エンブレムと受賞バッジ
2. **CTA**（無料体験への最初の誘導）: 黄地に白カード、悩みの吹き出しとオレンジのピル型ボタン
3. **悩みの提起とお試しの提案**（保護者の不安に応えて無料期間を見せる）: 白地に手書き風の吹き出しを3つ。クリーム地に紺の丸いバッジを4つ並べる
4. **コンセプト**（楽しさと上達を伝える）: 芝生の写真に白い円を2つ重ね、太い文字とFun!などの手書き英字
5. **特長（教育方針）**（技術以外に育つ力を説明する）: 青い方眼地に黄色マーカーの見出し、雲形の吹き出しで問いかけ
6. **育つ能力**（5つの力を図とリストで見せる）: 五角形の図と、番号付きの能力カード5枚
7. **選ばれる理由と根拠**（独自の測定ツール・研究データで納得させる）: 黄地の理由カード、青地の白カード、グラフのイラスト
8. **実績・メディア掲載**（会員数の推移と掲載実績で権威づける）: 棒グラフと黄色い矢印、黄地にチェックリストと書籍写真・動画
9. **お客様の声**（保護者の体験談で安心させる）: 薄水色の方眼地に、番号ラベル付きの声カードを4枚
10. **卒業生紹介**（将来の進路を見せる）: 枠線カードに写真、エンブレム、斜め切りの青いラベル付きの表
11. **おすすめの対象**（自分ごと化させる）: 紺のリボン見出しと、チェック付きのリスト、下部に波形写真
12. **4つの理由**（継続のしやすさを詳しく伝える）: 青地に盾形の番号エンブレムと理由カードを4枚
13. **年間活動**（1年の流れを見せる）: 黄地にすごろく風の月ごとのマス目と説明カード
14. **申込の流れ・フォーム**（体験の申込を完了させる）: 青地にステップカード3枚と動画。白地のフォームに必須ラベルと緑の送信ボタン、紺のフッター

## Imagery

- 屋外の人工芝で、ユニフォーム姿の子どもが笑顔で走る・跳ぶ写真を彩度高めで撮る
- 人物は背景を切り抜き、ボールや星のイラストを添える
- 保護者と子どもの寄り添う写真は円形に切り抜く
- サッカーボール・ゴール・ホイッスル・スパイクの3D風イラストを添える
- 白い線のきらめき、手書き英字、黄色い星などのポップな装飾
- 青地には細かい方眼柄を薄く重ねる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央寄せで最大幅900px程度にし、左右に地の色を広げる
- PCでは理由カードやお声カードを写真左・テキスト右の横並びにする
- 卒業生カードはPCで2列に並べる
- ファーストビューはPCで写真を右、見出しを左に配置する
- PCではヘッダー右上に常時オレンジのCTAボタンを置き、TOPに戻るボタンも表示する
- フォームはPCでラベル左・入力欄右の2列表にする

## 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-9bddf89b`（元 LP の URL から採番）
- **元 LP**: https://liberta.sport-school.com/plp2/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://liberta.sport-school.com/plp2/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

教育・スクール・資格水色×紺グラデの大学受験生向け LPSky Blue to Navy Gradient Campus Guide LP 教育・スクール・資格緑グラデとミントの爽快スポーツスクールLPFresh Green Gradient Sports School LP 教育・スクール・資格藤色×生成りの上品な専門学校 LPSoft Lavender Ceremony Vocational School LP 教育・スクール・資格黄色×水色の線画イラストキャリア相談 LPBright Yellow Pop Illustration Career Service LP 教育・スクール・資格くすみパステル×黄色オファーの資格講座LPSoft Pastel Online Certification LP 教育・スクール・資格方眼紙×水色グラデのIT専門学校LPGrid Paper Digital School LP