DESIGN.md — 青×白の爽やかな受験コーチング塾 LP（Clean Blue Academic Coaching LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: 青と白・淡い水色の面・オレンジのバッジ・LINE 緑 CTA・人物写真・フラットイラスト
• 地の質感: フラットな単色面に、うっすら方眼グリッドや斜めの光の帯を敷く程度の軽い質感
• 形: 角丸 8〜16px のカードとパネル、ピル型のラベルと吹き出し
• 温度感: やや寒色寄り。オレンジで温かさを足す

Colors

• 地は白と淡い水色を交互に置き、セクションを区切る
• 相談誘導と実績紹介は青のグラデーションパネルに白文字で載せる
• オレンジはバッジ・数値・キーワード下線だけに絞る
• 主 CTA は LINE の緑。ページ内でほかに緑は使わない
• 見出しのキーワードは青文字で強調する
• 比較の『ない人』はグレー、『ある人』はベージュで差をつける
• button-line-cta は文字 #FFFFFF × 背景 #0BC355 のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#08893C、4.51:1）を使う。
• cta-panel は文字 #FFFFFF × 背景 #2E88D7 のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#257AC4、4.51:1）を使う。
• badge-orange は文字 #FFFFFF × 背景 #F4812D のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C0570A、4.56:1）を使う。
• result-card は文字 #2E88D7 × 背景 #FDFDFD のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#257AC4、4.55:1）を使う。

Typography

• 見出しは中央揃えで 2 行に分け、キーワードを青文字にする
• 強調語の上に小さな点を 3 つ打つ（傍点）
• 数値は大きく、単位は小さくする
• 本文は左揃え・行間 1.8 で短い段落にする
• オレンジのピル型ラベルを見出しの上に置いて導入する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードと比較は PC で 2 列、悩みアイコンは 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 青パネルは左右に少し余白を残した角丸ブロックにする
• 写真カードは写真の下にタイトルと本文を置く
• 悩みの吹き出しは人物イラストの周りに散らす
• 相談の流れは STEP 番号付きのカードを横に並べる
• お客様の声は横スライダーにして矢印とドットを付ける

Elevation & Depth

• カードは影をごく薄く（0 2px 8px rgba(0,0,0,.06)）
• 吹き出しは細い青線＋薄い影
• 青パネルは影なしでグラデーションの面だけ
• CTA ボタンは小さな影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸 4〜8px の長方形。人物は胸から上でグラデ背景
• セクション境界: 直線で切り替えるのが基本。一部に大きな楕円カーブの雲形
• ラベルと吹き出しはピル型
• パネルは角丸 8px
• 円図は太い水色の輪を 2 つ重ねる
• 動画サムネは右下に青い角の装飾を付ける

Components

• LINE 相談ボタン（button-line-cta）: 緑のピル型ボタン。LINE アイコンと矢印付き
• 相談誘導パネル（cta-panel）: 青グラデの帯。左に特典のチェックリスト、右にスマホ図と白いボタンカード
• オレンジ導入ラベル（badge-orange）: 見出しの上に置くピル型ラベル
• 悩み吹き出し（worry-bubble）: グレーの楕円吹き出し。中に短い悩みを 2 行
• 比較カード（compare-card）: グレーとベージュの 2 枚を並べ、人物イラストと箇条書きを入れる
• 成績アップ実績カード（result-card）: 生徒写真の下に偏差値の上がり幅を大きく表示
• STEP カード（step-card）: 左上に青い STEP タグ、中央に丸背景のアイコン
• 声カード（voice-card）: 似顔絵イラストのアイコンと太字の見出しを置き、本文を続けるスライダー
• インタビュー動画サムネ（video-thumb）: 再生ボタン付きの写真の下に白いキャプション帯

Do's and Don'ts

Do - 白と淡い水色の地を交互に使う - 強調はオレンジのラベルと青文字に絞る - CTA は LINE 緑のピル型で統一する - 人物写真は明るく自然光で撮ったものを使う - 悩みや比較はフラットなイラストで柔らかく見せる

Don't - 赤や紫など別の強い色を足さない - 濃い暗色の背景を広く使わない - 装飾フォントや明朝を見出しに使わない - 角丸なしの硬いボックスを並べない - CTA の緑をほかの装飾に流用しない

Page Structure

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

1. ファーストビュー（サービスの価値を一言で伝える）: 勉強する学生の写真に白帯の大見出しを重ね、オレンジの丸バッジで成績の上がり幅を示す
2. 合格実績（信頼の裏付け）: 青枠のボックスに月桂樹アイコンと大学名を並べる
3. 成績アップ事例（成果を具体的に見せる）: 淡い水色の地に生徒写真 4 枚と偏差値の数値を並べる
4. 目指せる未来（得られる未来を想像させる）: ロゴの下に写真カードを 3 枚並べる
5. CTA（無料相談へ誘導）: 青グラデのパネル。チェックリストと白いボタンカード
6. 悩みの提起（共感させる）: 悩む学生のイラストの周りに吹き出しを 4 つ置く
7. 解決の提示（原因と解決策を示す）: オレンジのラベルを置き、方眼の枠の中にアイコン 3 つ
8. 比較（ある場合とない場合の差を見せる）: グレーとベージュのカードを 2 列で並べる
9. サービス紹介・特長（仕組みを説明する）: 円図と、写真付きの 2 列特長カード 4 枚
10. 講師紹介（講師の質を示す）: 水色の地に講師写真を横スクロールで並べる
11. 他社との比較（違いを見せる）: 他のタイプを小さなカードで並べ、自社だけ青ヘッダーのカードにする
12. メディア実績（権威付け）: 青パネルに動画・書籍・媒体ロゴを白カードで載せる
13. 相談の流れ・声・インタビュー（相談の不安をなくす）: STEP カード 3 枚、声のスライダー、相談例の吹き出し、動画サムネ 4 枚
14. 代表メッセージ・CTA・フッター（人柄を伝えて申込みを後押しする）: 青のプロフィールカードと手紙調の本文。最後に再度 CTA パネルを置き、画面下に追従 CTA を固定する

Imagery

• 学生と講師は明るい室内で自然光を使い、清潔感を出す
• 講師はスーツ姿で胸から上、淡いグレーの背景
• 悩み・比較・STEP には線が細く塗りがフラットなイラストを使う（青とオレンジ基調）
• 背景には淡い方眼グリッドや斜めの光の帯をうっすら入れる
• 動画サムネは太字のテロップを入れた YouTube 風にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにして、特長カード・比較カードを縦に積む
• CTA パネルは SP で縦並び（チェックリスト→ボタン）にする
• 実績写真は SP で 2×2 に組む
• PC は内容幅を約 800px に収め、青パネルは左右に余白を残す
• 画面下の追従 LINE CTA は SP・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 行書くと起動時に読み込まれる。