DESIGN.md — ドット絵×原色ブルーの子ども向けプログラミング教室LP（Pixel Game Pop Kids Programming LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型、レトロ
• キーワード: ドット絵・ゲーム風・原色ブロック・白カード・黄色CTA・子ども写真
• 地の質感: ベタ塗りのフラット面。カード外周がピクセル状に欠けたドット枠になっている
• 形: 角が段々に欠けたピクセル枠カード、円形の写真、ピル型ボタン、雲形の境界
• 温度感: 明るく元気な寒色ベースに、黄・赤のアクセントを効かせる

Colors

• セクションごとに濃青→青緑→青→水色→紺と地色を切り替えて区切る
• 情報はすべて白カードに載せ、色地に直接本文を置かない
• CTAは黄色ピル型で統一し、他要素に黄色の面を多用しない
• カード内のラベルは黄土色、手順は赤帯、学年は緑や青の帯で色分けする
• 色地上の見出しは白、重要な数字は黄色にして目立たせる
• 強調したい語は赤やピンクの文字にする
• info-label は文字 #F8FEFD × 背景 #E59D01 のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9B6B01、4.58:1）を使う。
• step-bar は文字 #F8FEFD × 背景 #F53E43 のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#EA0C12、4.51:1）を使う。
• grade-badge は文字 #F8FEFD × 背景 #35B614 のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#27860F、4.57:1）を使う。

Typography

• 見出しは極太で太いゲームロゴ風にする
• FVタイトルは1文字ずつ色を変えた多色にする
• 本文は中央揃えを基本にし、カード内の説明だけ左揃えにする
• 数字は大きく、単位は小さく組む
• カード内の文字は濃色、色地上の文字は白にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦に積み、理由カードは2列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは見出し→カード群→CTAの順で組む
• カード同士の間隔は16〜24px
• 情報表はラベル帯＋白セルの縦積みで組む
• CTAは横幅いっぱいのピル型を区切りごとに置く
• PCは2カラムのカードグリッドを使う

Elevation & Depth

• 影はほぼ使わず、黒いドット枠で浮かせる
• 吹き出しには黒い縁取りと小さなずらし影をつける
• ボタンは平面で影なし

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: カード上部は長方形、コースや生徒の写真は正円で切り抜く
• セクション境界: 基本は直線で色を切り替える。実績セクションの上だけ雲形の波線にする
• カード外周は四隅が段々に欠けたピクセル枠にする
• 情報ラベルは角丸なしの帯
• 吹き出しはわずかに角丸の四角に尾をつける
• ボタン右端に>矢印を入れる

Components

• 黄色ピルCTA（button-primary）: 横幅いっぱいの黄色ピル。右端に黒い>矢印
• 詳しくはボタン（button-detail）: カード下部に置く小さな黄色ピル
• ドット枠カード（pixel-card）: 白地に黒いピクセル状の欠け角の枠。イベントやコースを載せる
• 情報ラベル帯（info-label）: 黄土色の帯に白文字の項目名、下に白セルで値
• ステップ帯（step-bar）: 赤い帯にSTEP番号。間は▼でつなぐ
• 対象学年帯（grade-badge）: カード上端の緑や青のベタ帯に学年を白文字で入れる
• 番号付き理由カード（reason-card）: 黄色やピンクの面に大きな番号、写真、短い説明を載せる。上部に斜線つきキャプション
• 実績吹き出し（speech-bubble）: 黒縁の白い吹き出しに実績を書き、強調語を赤くする。下に円形写真
• 斜線囲みコピー（free-badge）: 紺の帯に＼ ／で挟んだ白文字、その下に黄色の小見出し

Do's and Don'ts

Do - カードには必ずドット枠を使い、ゲーム感を保つ - セクションごとに原色の地色をはっきり切り替える - 子どもが楽しそうに操作する写真を使う - 星やキューブのマスコットを見出し横に添える - 情報は帯ラベル＋値の表で短く見せる

Don't - くすんだ色や中間色を地色にしない - 角丸の大きいふんわりしたカードにしない - 色地の上に長い本文を直接置かない - CTAを黄色以外の色にしない - 明朝体や細い書体を使わない

Page Structure

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

1. ファーストビュー（イベントの楽しさを一目で伝える）: ドット絵の空と草原の背景に、多色のロゴ風タイトルと子ども2人の切り抜き写真、PC画面のイラストを置く
2. 無料訴求帯（参加の敷居を下げる）: 紺の帯に斜線で挟んだ白い大きな文字と黄色の小見出し
3. イベント内容（体験プログラムの詳細を示す）: 濃青の地に2列のドット枠カード。写真、対象、ステップ、時間、費用を帯ラベルで縦に積む
4. 追加イベント（別プログラムを紹介する）: 横長のドット枠カード。左に写真、右に情報表
5. 申込CTA（申込へ誘導する）: 全幅の黄色ピルボタン
6. 学習コース（通常コースの一覧を示す）: 青緑の地に2列のカード。学年帯、円形写真、コース名、説明、詳しくはボタン
7. 特別活動・会員サービス（受講生の特典を伝える）: ドット枠カード内に箇条書き、黄色の囲みエリア、丸いアイコン3つ
8. 検定実績（成果を数字で示す）: 赤帯の実績表示と、大きな赤い合格率の数字、右に写真
9. 選ばれる理由（スクールの強みを示す）: 青の地に5つの番号付きカードを3＋2で並べ、黄とピンクの面を交互にする
10. 生徒の実績（成長の実例で共感を生む）: 雲形の境界から水色の地。吹き出しと円形の生徒写真を並べ、マスコットを添える
11. フッター（公式サイトと教室一覧へ誘導する）: 紺の地に水色と黄色のピルボタン2つ、コピーライト

Imagery

• 明るい教室でPCやタブレットを使う小学生の写真。笑顔やピースサインのもの
• FVはドット絵の雲・木・草原・ブロックの背景
• 星やキューブ型の顔つきマスコットイラスト
• 作品画面のスクリーンショットを斜めに傾けて添える
• 円形のアイコンにシンプルな線画のピクトを入れる
• 写真は高彩度・高明度に調整する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは2列カードを1列に積む
• 理由カードはSPでは2列＋1か1列にする
• FVのタイトルはSPでは画面幅の90%に縮めて、写真は下に回す
• PCは本文幅を約900pxに固定し、左右は地色を全幅で敷く
• 横長カードはSPで写真を上、情報を下にする

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