DESIGN.md — 青×黄のポップな子ども向けスクールLP（Bright Blue & Yellow Playful Kids After-School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、かわいい、信頼・誠実、清潔・爽やか
• キーワード: 子ども・放課後・青い波・黄色ボタン・丸写真・ガーランド
• 地の質感: 白と淡い水色・クリームの平面。一日の流れ部分だけ紙のような細かい地模様を敷く
• 形: 円形の写真、波線の帯、角丸カード、ピル型ボタン、ふわっとした不定形の色面
• 温度感: 明るく軽い。青で清潔感、黄とピンクで温かみ

Colors

• 地は白を基本に、淡い水色とクリームを交互に敷いてパートを区切る
• 青は写真横の波帯、セクション境界の太線、ラベル、アコーディオン枠に使う
• 黄色は主CTAと小さなタグに限定し、行動ポイントを目立たせる
• 見出しの強調語1〜2語だけをピンクか青に色替えする
• ピンク・グリーン・黄は小さな装飾（斜線・ドット・ガーランド）で散らす
• 本文はグレーがかった紺で、真っ黒は使わない
• wave-band は文字 #515558 × 背景 #008CD7 のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#80D3FF、4.54:1）を使う。
• number-garland は文字 #008CD7 × 背景 #FFFFFF のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#80D3FF、4.6:1）を使う。
• store-accordion は文字 #008CD7 × 背景 #FFFFFF のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#80D3FF、4.6:1）を使う。

Typography

• 大見出しは手書き風の太い書体で字間を広く
• 強調語は色替えし、字をひと回り大きくする
• 見出しの左右に斜線（＼ ／）や小さなキラキラを添える
• 本文は13px前後・行間1.8で、短い段落にする
• 番号や時刻は欧文書体で丸の中に入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。特長カードは2列グリッドも可
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃え、その下に波線か点線の短い飾り
• 写真と文章カードを青い波帯の上に左右で重ねる
• 一日の流れは点線でジグザグにつなぐ
• FAQと店舗一覧は全幅の縦並びアコーディオン
• 注釈はブロック下に小さく添える

Elevation & Depth

• 影はほぼ使わずフラットにする
• カードは白地に細い線か淡い地色で区切る
• 吹き出しにだけごく薄い影をつけてもよい

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真は円形が中心。帯上の写真は四角、FVは全幅
• セクション境界: 青の波線帯・ゆるいアーチ・不定形の色面・太い青線
• CTAは黄色のピル型で、右端に下向きの矢印
• ステップアイコンは不定形の色面の上に乗せる
• 枠の四隅に青いL字のコーナー飾りを置く
• 下向きの三角で次のブロックへつなぐ

Components

• 黄色ピルCTA（button-primary）: 説明会申込への主ボタン。右に下向き矢印
• 青い波帯（wave-band）: 写真と白い説明カードを重ねる、下端が波形の青い帯
• 青ラベル見出し（pill-label）: カードの上辺中央に重なる青いピル型ラベル
• 黄色タグ（tag-yellow）: キーワードを並べる黄色の小さな角丸タグ
• ガーランド付き番号（number-garland）: 円で囲んだ数字を、左右の三角旗ガーランドで挟む
• 悩みの吹き出し（speech-bubble）: 雲形の白い吹き出しを人物の周りに4つ置く
• 利用者の声（voice-card）: 大きな番号と丸い顔写真、クリーム地の不定形面に本文
• FAQアコーディオン（faq-item）: 淡い青のカードに青い丸のQアイコンと右に矢印
• 地域別アコーディオン（store-accordion）: 白地に青い枠線、地域名と右に矢印
• 時刻バッジ（time-badge）: 流れの各ステップにつける青い丸の時刻表示

Do's and Don'ts

Do - CTAは黄色ピルで統一し、FV直下・中盤・終盤に置く - 人物写真は円形に切り抜き、周囲にドットや斜線を散らす - セクションの切り替えに青い波線や太い線を使う - 見出しは強調語だけ色を変えてリズムを出す - 余白を広くとり、白い面を多めに残す

Don't - 暗い背景や重い影を使わない - 黄色をCTAとタグ以外の広い面に使わない - 明朝体や細い書体で見出しを組まない - 写真を角ばった大きな四角ばかりで並べない - 装飾の色を増やしすぎて青・黄・ピンク・緑の4色から外れない

Page Structure

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

1. ファーストビュー（対象と価値を一目で伝える）: 子どもの写真を全幅に置き、左に太字キャッチ、右下に実績の黄色い丸バッジ3つ
2. CTA（説明会への誘導）: クリームと青緑の不定形面の上に、英字の小見出しと黄色ピルボタン
3. サービス概要（特長をまとめて示す）: アーチ型の写真、ロゴ、丸写真と強調語を左右交互に並べ、受賞の帯を添える
4. 悩みの提起（保護者の悩みに共感する）: 青い波線で区切った帯の中で、人物を中央に置き周りに吹き出し4つ
5. 解決・特長一覧（4つの強みを示す）: 丸写真と短い見出しを2列でジグザグに配置し、カラフルな小装飾を散らす
6. 中間CTA（行動を促す）: 黄色タグ3つ、太いキャッチ、子どもの集合写真、黄色ピルボタン
7. 選ばれる理由（3つの理由を詳しく説明する）: ガーランド付き番号、ピンクの小見出し、青い波帯の写真＋カード、詳細カード群
8. 一日の流れ（利用イメージを具体化する）: 紙の質感の地に、時刻バッジと写真を黄色の点線でジグザグにつなぐ
9. お客様の声（信頼を補強する）: ピンクのリボン見出し、番号と丸顔写真、クリーム地に本文を左右交互に配置
10. 体験の流れ（申込までの手順を示す）: STEP番号付きの不定形アイコンと説明を交互に置き、黄色の下矢印でつなぐ
11. よくある質問（不安を解消する）: 淡い青のアコーディオンを4つ縦に並べる
12. 最終CTA（申込への最後の後押し）: 黄色タグ、キャッチ、子どもの写真、黄色ピルボタン
13. 店舗一覧・フッター（最寄りの拠点を探してもらう）: 青枠の地域アコーディオン、淡い地のリンク群、青い細帯のコピーライト

Imagery

• 明るい自然光の室内で、笑顔の子どもとスタッフを撮る
• 活動中の様子（運動・工作・勉強）を円形に切り抜く
• 背景にはパステルの不定形な面、ドット、斜線、三角旗を散らす
• 手順やアイコンは単色の線画で、不定形の色面に乗せる
• 白い服の大人が考え込むポーズの写真で悩みパートを作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央約60%の1カラムで、SPでは幅88%に広げる
• 写真＋カードの左右配置は、SPでは写真の下にカードを重ねて縦に積む
• 特長の2列ジグザグは、SPでも2列か1列の交互配置にする
• 習い事の丸アイコンは、PCの5列からSPでは3列に減らす
• CTAボタンはSPで幅85%程度・高さ52pxにする

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