DESIGN.md — 深緑×黄の太字訴求型 個別指導塾 LP（Green Bold Promo Cram School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 情報量多め・訴求型、力強い・インパクト、信頼・誠実、ポップ・元気
• キーワード: 深緑の帯・黄色マーカー・赤い大きな数字・比較表・繰り返し CTA・斜体の極太見出し
• 地の質感: フラットな面に斜めストライプや方眼の薄い地紋。緑帯は濃淡グラデーションと多角形の陰影
• 形: 角丸小さめの白カード、点線枠の吹き出しバッジ、斜めに切った見出し帯
• 温度感: 明るく元気だが、深緑で誠実さを保つやや暖色寄り

Colors

• 地は白・クリーム・黄緑方眼を交互に置き、価格や比較は濃緑の全幅セクションで締める。
• セクション見出し帯は深緑に白の太字。
• 数字・価格・保証内容は赤で大きく、下に黄色マーカーを敷く。
• 主 CTA はオレンジ、サブ CTA は青、どちらにも黄色の『無料』バッジを右上に重ねる。
• 比較表は自社列だけ薄オレンジ地＋オレンジ見出しで差をつけ、他社列はグレー。
• 緑地上の強調語は黄色文字にする。
• button-primary は文字 #FEFAF1 × 背景 #FF6B23 のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CE4300、4.55:1）を使う。
• button-secondary は文字 #FEFAF1 × 背景 #1E8FDB のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1979B9、4.5:1）を使う。
• feature-badge は文字 #E0141E × 背景 #E5F3A3 のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D4131C、4.52:1）を使う。

Typography

• 見出しは極太ゴシックで、一部の語だけ色・サイズを変えて強弱をつける。
• 数字は単位の約 2 倍の大きさにする。
• 大見出しは中央揃え、本文は左揃え。
• FV やバナーの見出しは斜体＋白縁取り＋影で立体感を出す。
• 注釈は ※ 付きの小さなグレー文字でブロック直下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。実績タブは 3 列、ケース選択は 3×2 グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは画面端から約 12px の余白で置く。
• CTA ブロック（特長バッジ 3 つ＋ロゴ＋特典見出し＋2 ボタン＋体験でわかること＋電話）を 4 回ほど繰り返す。
• 比較表は横スクロールにし、下にスクロールバーを出す。
• 長いリストは途中をフェードさせて『もっと見る』で開く。
• POINT セクションは番号ラベル＋緑帯見出し＋白カードを 1 組にする。

Elevation & Depth

• CTA ボタンは下に濃い色の厚み影（4px 程度）をつける。
• 白カードには薄い影か細い緑枠をつける。
• FAQ 行は白地に軽い影。
• FV やバナーの見出し文字にはドロップシャドウ。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸小さめの長方形。人物は切り抜きを枠からはみ出させる
• セクション境界: 基本は直線。緑帯の下端に斜線ストライプの縁取り
• CTA は角丸 6px 前後の横長長方形。
• 校舎詳細ボタンだけ深緑のピル型。
• 特長バッジは点線枠の黄緑の吹き出し（下向き三角つき）。
• POINT 番号は黄緑の丸いタブに虫眼鏡を添える。

Components

• 体験予約 CTA（button-primary）: オレンジの横長ボタンに鉛筆アイコン、右上に黄色の『無料』バッジ
• 資料請求 CTA（button-secondary）: 青の横長ボタン、本アイコン＋無料バッジ
• 特長吹き出しバッジ（feature-badge）: 点線枠の黄緑の吹き出しを 3 つ並べる。上は小さい黒文字、下は赤の太字斜体
• POINT 見出し帯（section-band）: 全幅の深緑帯に白の太字見出し。上に POINT 番号タブ、下端に斜線
• 他社比較表（comparison-table）: 黄緑の見出し行。自社列はオレンジ見出し＋薄オレンジ地、差額は赤字
• 成果ケースタブ（case-tabs）: 緑グラデのタイル 6 枚に CASE 番号と点数 UP。選択中は黄緑
• FAQ アコーディオン（faq-item）: 白い行に赤の大きな Q、右端に深緑の『開く』ボタン
• 校舎カード（location-card）: 薄グレーのカード。黄緑の縦線つき校舎名、住所、深緑のピル型ボタン
• 電話問い合わせ（phone-block）: 黄緑地に白〜グレーの大きな電話番号ボタン、下に受付時間
• もっと見るボタン（more-button）: 深緑の横長ボタンに白文字。フェードしたリストの下に置く

Do's and Don'ts

Do - 数字（％・円・点）は赤の極太で大きくし、黄色マーカーを敷く。 - CTA ブロックはセクションの合間に何度も同じ形で入れる。 - 見出し帯と表見出しは深緑で揃える。 - 比較表では自社列だけ色を変える。 - 注釈は ※ 付きで根拠を必ず添える。

Don't - パステルだけの淡い配色にしない。 - 細い明朝体を見出しに使わない。 - CTA の色（オレンジと青）を他の要素に使い回さない。 - 大きな角丸やピル型の CTA にしない。 - 余白を広く取りすぎて情報密度を下げない。

Page Structure

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

1. ファーストビュー（指導方針と成果を一目で伝える）: 緑グラデ背景に斜体の極太見出し、生徒と講師の写真、立体矢印のキャラクター。下に実績率 2 つを黄色ボックスで
2. 期間講習バナー（季節キャンペーンの告知）: ピンク地のバナーに赤枠の講習名と赤字の期間
3. CTA ブロック（体験予約と資料請求へ誘導する）: 特長バッジ 3 つ、ロゴ、深緑の特典見出し、オレンジと青のボタン、体験でわかること 3 項目、電話
4. キャンペーン特典（無料回数の内訳で得を伝える）: 赤い集中線背景に紙吹雪。白カードに赤ラベルの特典を＋でつなぐ
5. 成績アップ実績（具体的な点数アップで証明する）: クリーム地に人物の切り抜き、ケースタブ 6 枚、カルーセルの体験談カード
6. 合格実績（合格率と進学先を見せる）: 巨大な％数字＋黄マーカー、3 タブ、学校名リストはフェードさせてもっと見る
7. 保護者の声（口コミで信頼を高める）: 白カードにイラストのアバターと引用文、区切り線、校舎名
8. 料金・他社比較（安さと品質の差を示す）: 濃緑地に黄色の見出し、白い価格カード、横スクロールの比較表 2 つ
9. コース案内（学年別コースを紹介する）: クリーム地に学年タブ、写真と黄色見出しのカード、・付きのコース一覧
10. 5 つのポイント（サービスの強みを順に説明する）: POINT 帯見出し＋緑枠カード。黄緑の点線ボックスで要点、赤字で保証内容
11. 保護者への進捗共有・安心環境（保護者の安心感をつくる）: 緑地見出し、写真、チェックリスト、イラスト付きの白カード 3 枚
12. よくある質問（不安を解消する）: 黄緑地に Q アコーディオン 5 行
13. 校舎一覧（通える教室を探せるようにする）: グレーのカードを縦に並べ、それぞれに詳細ボタン

Imagery

• 明るい教室で講師と生徒が笑顔で向き合う写真。白〜水色の明るいトーン。
• 歴史上の人物風の切り抜きキャラクターを指差しポーズで添え、ユーモアを出す。
• 保護者のアバターはシンプルなフラットイラストを丸の中に。
• 安心環境の説明は防犯カメラやパソコン窓口などのフラットイラスト。
• 緑地には濃淡の多角形パターン、黄緑地には薄い方眼の地紋。
• 教材の写真は斜めに重ねて並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 900px の幅で、FV は左に見出しパネル、右に写真の 2 分割。
• PC の CTA ブロックは 2 つのボタンを横に並べ、体験でわかることも 3 列にする。
• 口コミ・FAQ・校舎カードは PC で 2 列。
• 比較表は PC では全列を表示し、横スクロールなし。
• PC では右端に体験予約・資料請求の縦長の追従ボタンを置く。

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