DESIGN.md — 水色×オレンジの爽やか英会話スクールLP（Bright Sky Blue Campaign School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、ポップ・元気、情報量多め・訴求型、信頼・誠実
• キーワード: 水色の格子柄・白カード・オレンジCTA・青の太字見出し・線画イラスト・キャンペーン価格
• 地の質感: 水色のダイヤ柄やストライプの地に、フラットな白カードを浮かせる。うすい影を付ける
• 形: 角丸カード、ピル型ボタン、円形アイコンバッジ、手書き風の「point」「step」ラベル
• 温度感: 明るく爽やか。少し暖かい印象（クリーム地・オレンジ・ピンク）

Colors

• 地は白・水色の柄・クリームを交互に使い、セクションを分ける
• 主CTAはオレンジだけにする。他のボタンは白地に青文字
• 価格と数値の強調は赤、本文の強調は青文字か黄色マーカー
• ピンクはキャンペーン価格の帯だけに使う
• 見出しは濃い青、本文は濃いグレーで書く
• button-primary は文字 #FFFFFF × 背景 #FF6801 のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C85100、4.53:1）を使う。
• price-box は文字 #E8231E × 背景 #FEFEFE のコントラスト比が 4.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E71D18、4.54:1）を使う。
• icon-badge は文字 #FFFFFF × 背景 #1E8FE0 のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1A7BC1、4.52:1）を使う。

Typography

• 見出しは極太のゴシックで書き、強調語だけ色や引用符で目立たせる
• 価格・パーセントの数字は単位より大きく組む
• 小見出しの上に「＼ ／」で囲んだ短いリードを置く
• 本文は14px前後で、行間はゆったり取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコンや理由は 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 柄のある地の上に中央の白い大カードを置き、その中にポイントを積む
• CTAブロック（ボタン＋電話カード）は数セクションおきに繰り返す
• 見出しは中央揃えにする
• 比較表は自社の列を青枠で囲む

Elevation & Depth

• 白カードにうすく広い影を付ける（0 4px 12px rgba(0,0,0,.08)）
• 写真カードには少し強めの影を付けて浮かせる
• FAQ行やタイムラインには影を付けない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。写真は2枚を斜めにずらして配置し、矢印で循環を表す
• セクション境界: 直線で切り替える。地の色や柄の切り替え、紺の細い線で区切る
• アイコンは塗りの青い円に白線画
• 吹き出しは角丸か楕円で、うすいピンク地
• 下向きの台形タブで次のセクションへつなぐ

Components

• オレンジのピル型CTA（button-primary）: 横幅いっぱいのピル型ボタン。右端に「>」を付ける
• 電話番号カード（tel-card）: CTAの下に置く白カード。左に案内文、右にフリーダイヤルと受付時間
• キャンペーン価格ボックス（price-box）: ピンク帯の上に白い枠を2つ並べる。取消線の旧価格→赤の大きな新価格。角に黄色の円形バッジを付ける
• 特長の円アイコン（icon-badge）: 青い円の中に白い線画アイコンと短いラベル。横に並べる
• point/step番号（point-label）: 赤の手書き風「point 01」。下線か円で囲み、見出しの上に置く
• 理由カード（reason-card）: 白カードの左上に青丸の番号、中央に円形イラスト、下に見出し、右下に「+」
• 月桂樹の満足度バッジ（satisfaction-badge）: 金色の月桂樹で囲んだ大きな赤い%表示
• FAQアコーディオン（faq-item）: うす水色の行の左に青丸の「Q」、右に「+」。回答は白地に赤丸の「A」
• 体験談スライダー（testimonial-card）: 青の地に白カードを並べ、上に円形の似顔絵イラスト。下にドットと矢印

Do's and Don'ts

Do - CTAは毎回、オレンジのピル型ボタンと電話カードをセットで置く - 強調語には青文字・黄色マーカー・赤の数字を使い分ける - 白カードと水色の柄地の対比を保つ - 人物は線画イラストで添え、親しみやすくする - 数値（満足度・価格）は大きく見せる

Don't - オレンジをCTA以外に使わない - 暗い背景色を広い面で使わない - 明朝体や細い書体で見出しを書かない - カードを角丸なしの硬い形にしない - 1つのセクションにCTAを複数並べすぎない

Page Structure

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

1. ファーストビュー（キャンペーンと実績を一目で伝える）: 桜を散らした人物写真の右に、青の極太キャッチを置く。左上に金色の実績バッジ
2. キャンペーン価格帯（割引の内容を示す）: ピンクの帯に白い価格ボックスを2つ、＋でつなぐ。下に注意事項のオレンジバー
3. 固定ナビCTA（予約と校舎検索へ導く）: 水色の帯にオレンジの予約ボタンと白の検索ボタンを並べる
4. 共感の導入（なりたい姿を提示する）: クリーム色の吹き出しの両側に線画の人物。下に金色の台形タブ
5. 商品の概要（レッスンの特徴を整理する）: 水色の柄地に白い大カード。円アイコンを横に並べ、おすすめの人をクリーム地のリストで示す
6. ポイント解説（効果と成長の道筋を示す）: point番号と見出し、写真の循環図、3期間のタイムライン、吹き出しで成長を見せる
7. お客様の声（利用者の実感を伝える）: 青の地に白カードを並べたスライダー
8. 無料体験の案内（体験レッスンへ誘導する）: 短い説明文と動画の埋め込み。その後に柄地のCTAブロック
9. 選ばれる理由（5つの強みと満足度を示す）: クリーム地に番号付きのカードを横に並べ、下に月桂樹の満足度バッジ
10. 他社比較（コスパの優位性を示す）: 自社の列を青ヘッダーと青枠で囲んだ比較表。赤字で差を強調
11. 校舎検索（近くの校舎を探してもらう）: 水色の地に吹き出しラベルと白いピル型の検索ボタン
12. 体験の流れ（申込みの手順を示す）: クリーム色のカードにstep番号。step1に予約CTA、残りの手順は3列にイラスト付きで並べる
13. よくある質問（不安を取り除く）: Q/Aアコーディオンを縦に並べる
14. クロージングCTA（最後の後押しをする）: 柄地に吹き出しと人物イラスト、オレンジのCTAと電話カード

Imagery

• 人物写真は明るい教室で笑顔の多国籍の学習者。高い明るさで撮る
• 人物はシンプルな線画イラストにする。黒い線に青と黄色をアクセントで入れる
• 季節感は桜の花びらなどを写真の周りに散らす
• 背景は水色のダイヤ柄・斜線の繰り返しパターン
• アイコンは白い線画を青い円に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは価格ボックスを縦に積むか、2列のまま小さく組む
• 円アイコンや理由カードは2〜3列で折り返す
• 比較表は横スクロールにするか、列幅を詰める
• PCではコンテンツを幅約860pxの中央に寄せ、左右に水色の柄地を見せる
• 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 行書くと起動時に読み込まれる。