DESIGN.md — 空色×黄色の黒フチ子ども英語スクールLP（Playful Sky Blue Kids English School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、親しみ・手作り感、清潔・爽やか、情報量多め・訴求型
• キーワード: 空色・黒フチ・方眼背景・大きな英字見出し・黄色アクセント・角丸カード
• 地の質感: 白地に薄いグレーの方眼線。空色の面は大きな角丸やアーチ形でくり抜いて重ねる。
• 形: 角丸 20〜30px の黒い 2〜3px 線のカード。楕円バッジ、円形の番号、プラスや輪の装飾を使う。
• 温度感: 明るく爽やかで暖かみもある。

Colors

• 地は方眼柄の白と空色の大きな面を交互に置き、テンポを作る。
• 黄色は CTA・お客様の声カード・番号バッジに限って使う。
• マゼンタはファーストビュー直下の告知帯だけに使う。
• カードの縁取りは黒で統一し、太線の漫画風にする。
• 見出しの強調語だけを空色にする。
• 空色の面の上の文字は白にする。
• notice-band は文字 #FFFFFF × 背景 #E62E8C のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E01B7F、4.53:1）を使う。
• faq-item は文字 #FFFFFF × 背景 #5AB4E2 のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1E7DAD、4.57:1）を使う。
• label-bar は文字 #FFFFFF × 背景 #5AB4E2 のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1E7DAD、4.57:1）を使う。

Typography

• 見出しは英字の大見出しと日本語の小見出しを上下に組み合わせる。
• 英字の大見出しは極太にし、白抜きのアウトライン版も使う。
• 番号は斜体の極太英数字で大きく見せる。
• 本文は行間を広め（1.9 前後）にとる。
• キャッチは白い丸ゴシックにし、一部の文字だけ色を変える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 70px、基本単位 8px、カード内 28px（375px 幅換算）
• カードは左右に約 27px の余白をとって中央に置く。
• 番号付きのカードは、楕円バッジを上辺にまたがせて置く。
• カード内では写真から下を淡い水色の帯にする。
• 空色の面は画面幅いっぱいにし、上下を大きな角丸かアーチで区切る。
• 見出しは中央揃え、本文は左揃えにする。

Elevation & Depth

• 影はぼかさず、黒い面を右下にずらしたベタ影にする（お客様の声カード）。
• それ以外は影を使わず、黒の太線で立体感を出す。

Shapes

• 角丸: 小 10px ／ 中 20px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 16〜20px の長方形。人物の顔は黒フチの円形に切り抜く。
• セクション境界: 空色の面の端を大きな角丸やアーチ状のカーブにする。
• カードには黒い 2〜3px の線を引く。
• 番号は楕円バッジか円形バッジに入れる。
• 装飾にプラス記号と太い輪を淡い空色で散らす。
• 見出しラベルは角丸の空色帯にし、左右にプラスを添える。

Components

• 申込CTA（button-primary）: 黄色の面に黒文字、右端に矢印を置く。角丸は小さめ。
• 告知帯（notice-band）: マゼンタの帯の中に、白いピル型の対象ラベル、白い大文字、黄色い黒フチボタンを入れる。
• 番号付き特長カード（feature-card）: 黒フチの白カード。上辺に空色の楕円番号バッジを重ね、写真から下は淡い水色の帯にする。
• お客様の声カード（voice-card）: 黄色の面に黒フチと黒のベタ影。右上に円形の顔写真、左上に空色の学年ラベルを置く。
• 手順カード（step-card）: 白カードの右上に黄色い円形の番号を置き、カードの間を黄色い丸の下向き矢印でつなぐ。
• よくある質問のアコーディオン（faq-item）: 空色の面に黒フチと白文字。右端にプラスを置く。
• 小見出しラベル（label-bar）: 空色の角丸帯に白文字を入れ、左右にプラスを置く。
• 地域タブ（tab-pill）: 黒フチのピル型を 2 列に並べる。選択中は空色、それ以外はグレージュにする。

Do's and Don'ts

Do - カードとボタンは黒の太線で縁取る。 - セクションの頭に大きな英字見出しを置く。 - 地は空色の面と方眼柄の白で交互に切り替える。 - 黄色は行動を促す要素だけに使う。 - 線画アイコンは空色か黄色の単色にする。

Don't - ぼかしたドロップシャドウは使わない。 - 空色・黄色・マゼンタ以外の鮮やかな色は増やさない。 - 明朝体は使わない。 - マゼンタは何度も使わない。 - 直角の写真やカードは使わない。

Page Structure

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

1. ファーストビュー（子どもが楽しく学ぶ印象を伝える）: 空色の地に角丸の写真を置く。黄色い付箋風ラベルと白い大きなキャッチを重ね、左上にロゴの白タブを置く。
2. 告知・CTA（無料体験への誘導）: マゼンタの帯に対象ラベルと黄色ボタンを置く。
3. 概要（サービスの説明）: 空色の面にアウトラインの英字見出しと白文字を置き、黒フチの写真を添える。
4. 特長（5 つの強みを示す）: 大きな英字見出しの下に、番号付きカードを縦に並べる。カードの中に例示の小リストを入れる。
5. 選ばれる理由（通いやすさなどの利点）: 空色の面に円形スタンプのアイコンと白い太字を置き、黒フチの写真と交互に並べる。
6. お客様の声（保護者の声で信頼を得る）: 黄色のベタ影カードに顔写真の円と空色の見出しを入れる。
7. 動画（授業の様子を見せる）: フィルム風の帯に入れた見出しの下に、空色の円の背景を敷いた動画を置く。
8. コース概要（対象年齢別のコースを示す）: 大きな英字見出しの下に、グレージュのアコーディオンを置く。
9. 体験の流れ（申込の不安を減らす）: 角丸の空色の面の中に手順カードを 3 枚並べる。
10. よくある質問（疑問の解消）: ?アイコン付きの見出しの下に、空色のアコーディオンを並べる。
11. 校舎案内・CTA（所在地と申込）: 地域タブ、校舎写真、電話番号、黄色の大きいCTA、地図の順に置く。
12. フッター（ブランドの締め）: 空色の面に白いロゴと白文字を置く。

Imagery

• 写真は明るい教室で子どもと外国人講師が笑顔で活動する場面にする。
• 教材の写真は白背景の明るい物撮りにする。
• アイコンはギザギザの円や円形のテキストスタンプに入れた単色の線画にする。
• 背景には淡いプラス記号や太い輪の装飾を散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はカードの幅を約 800px までに抑えて中央に置く。
• PC は特長カードの写真と本文を 2 カラムにしてもよい。
• 大きな英字見出しは PC で 100px 前後まで拡大する。
• お客様の声と手順カードは、PC で横に 2〜3 枚並べる。

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