DESIGN.md — 濃紺グラデと淡青の受験コーチング LP（Navy Gradient Academic Coaching LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 濃紺グラデーション・淡いブルーの地・金メダルバッジ・比較表・成績グラフ・2 本立ての CTA
• 地の質感: フラットな面とグラデーション帯が中心。写真は明るく、白っぽく抜けた学生写真を使う
• 形: 角丸の小さい四角いボックス、斜線の括弧付きの小見出し、番号付きの正方形
• 温度感: クール寄り。CTA の赤とグリーン、金バッジで温度を足す

Colors

• 白地と淡いブルー地を交互に置き、要所に濃紺グラデーション帯を挟む
• 濃紺帯の上の文字は白にし、キーワードだけ水色にする
• 見出しのキーワードは secondary の青で色を変える
• 主 CTA は赤オレンジ、LINE 系はグリーンにして常に 2 本並べる
• 金・黄色はバッジとおすすめラベルだけに使う
• 本文の強調は太字と黄色マーカー、または赤文字にする
• button-primary は文字 #FFFFFF × 背景 #FD3204 のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E32B02、4.55:1）を使う。
• button-line は文字 #FFFFFF × 背景 #4CC463 のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#2C863D、4.58:1）を使う。

Typography

• FV のコピーだけ太い明朝にして格調を出す。それ以外はゴシックで統一する
• 見出しは中央揃えにし、キーワードは青で大きくする
• 小見出しは『＼ ／』の斜線で挟む
• 数字は欧文の太字で大きくし、単位は小さくする
• 本文は左揃えで行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩み・おすすめの人・合格実績は PC で 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地の色を切り替える
• 特長は写真とテキストを左右交互に並べ、大きな薄い番号を重ねる
• 比較表は自社列を色付きのヘッダーで目立たせる
• 流れは番号付きの正方形と細い区切り線で縦に並べる
• 最後に CTA 帯と特典バナーを重ねて締める

Elevation & Depth

• カードは薄い影か細い枠線だけにする
• 料金カードは白地にやわらかい影をつけ、おすすめ側は黄色の太枠で囲む
• CTA ボタンには小さな落ち影をつける

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角い切り抜き。人物は白背景の切り抜き写真を横に並べる
• セクション境界: 直線で切り替える。濃紺帯はグラデーションの面で区切る
• ボックスはほぼ角張らせ、角丸は小さくする
• 吹き出しには下向きの三角をつける
• バッジは月桂冠付きの円形メダルにする

Components

• 無料相談ボタン（button-primary）: 赤オレンジの角丸四角ボタン。グリーンの LINE ボタンと横に並べる
• LINE 相談ボタン（button-line）: グリーンの地にアイコン付きの白文字
• 実績メダルバッジ（badge-medal）: 金の縁と濃紺の円に、満足度などの % を白で大きく入れる。リボン付きで 3 つ並べる
• 悩みと解決の吹き出し（worry-bubble）: 斜線括弧で挟んだ悩みの下に三角を置き、その下に青いボックスで解決策を書く
• 番号付き特長（feature-row）: 見出しの一部を青にし、大きな淡い番号を重ねる。写真と左右交互に配置する
• 比較表（compare-table）: 自社列はティール、他社列は青のヘッダー。行は細い罫線で区切る
• 成績アップのカード（score-graph-card）: 人物アイコン、偏差値の帯、青い棒グラフとオレンジの上向き矢印で成績の変化を見せる
• 料金カード（price-card）: 濃紺帯の上に白いカードを置き、料金は青い大きな数字で示す。おすすめ側は黄色の枠とラベルにする
• 流れの番号（step-number）: 濃紺の正方形の中に白い数字を入れ、右側にステップ名と説明を書く
• FAQ の Q&A（faq-qa）: Q は赤、A は青の小さな正方形アイコンにし、質問は太字で書く

Do's and Don'ts

Do - 濃紺帯と淡いブルー地を交互にしてリズムを作る - 実績は数字を大きく出し、メダルやグラフで見せる - CTA は赤とグリーンを並べ、ページ内で複数回置く - 比較表や番号付きの流れで論理的に見せる - 強調は太字・黄色マーカー・青文字の 3 種類に絞る

Don't - 暖色の地や派手なグラデーションを広い面に使わない - 大きな角丸やピル型にしない - 金色をバッジ以外に乱用しない - 暗い写真や重い質感の写真を使わない - 見出しに明朝を多用しない（明朝は FV だけ）

Page Structure

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

1. ファーストビュー（対象と成果を一目で伝える）: 明るい学生写真の左に太い明朝のコピーを置き、下に実績メダルを 3 つ並べる
2. キャンペーンバナー（入会特典で行動を促す）: 青枠の横長バナーに、人物と「無料」の大きな文字を入れる
3. 悩みの提起（よくある悩みに共感し、解決策を示す）: 淡いブルー地に悩みの吹き出しを 4 つ、2×2 で並べ、下に青い解決ボックスを置く
4. 解決の提示（講師陣を見せて安心感を出す）: 白背景に切り抜いた人物を横一列に並べ、上にキャッチを置く
5. 問題提起とストーリー（一般的な塾との違いを説く）: 濃紺グラデーション帯に白文字を置き、写真の上に青いボックスを 3 つ並べる
6. 選ばれる理由（特長を 4 つ伝える）: 番号付きの特長を写真と左右交互に並べる
7. おすすめの人（対象者を明確にする）: 淡いブルー地に、アイコン付きの白カードを 2 枚並べる
8. 他社との比較（優位性を示す）: グレー地に 4 列の比較表を置き、自社列をティールにする
9. 合格実績（成果を証明する）: 成績アップのカードを 2 枚、棒グラフ付きで並べる
10. 学習プラン例（具体的なイメージを持たせる）: スケジュール表の画像に短い補足を添える
11. 代表メッセージ（想いを伝え、共感を得る）: 淡い水色地に青いラベル見出しとイラスト人物を置き、本文をマーカーで強調する
12. 料金プラン（価格を明示する）: 濃紺帯に白い料金カードを 2 枚並べ、おすすめ側を黄色の枠で囲む
13. 入会の流れ・CTA（手順を示して申込みへ導く）: 番号付きの 4 ステップの後、濃紺帯に赤とグリーンのボタンを置く
14. よくある質問・特典（不安を解消し、LINE 登録を促す）: Q&A のリストの後に、グリーン×金の特典バナーとボタンを置き、最後に淡いブルーのフッター

Imagery

• 制服姿の学生や講師を、明るく白っぽい背景で撮った写真
• 人物は切り抜いて横に並べ、清潔感を出す
• 代表者はモノクロ調のイラストで親しみを出す
• 成績はシンプルな青い棒グラフとオレンジの矢印で見せる
• 金メダルや月桂冠のバッジで実績を装飾する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにし、悩みや実績の 2 カラムは縦に積む
• FV は写真を上、コピーとメダルを下に重ねる。メダルは 3 つ横並びのまま縮める
• 比較表は横スクロールにするか、列数を絞る
• 特長の左右交互は、写真が上・テキストが下の順にそろえる
• SP では CTA を固定フッターに置き、赤とグリーンを横並びにする

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