DESIGN.md — 深緑×マゼンタ×黄の子ども英語教室 LP（Fresh Green and Magenta Kids Online English LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、信頼・誠実、清潔・爽やか、親しみ・手作り感
• キーワード: 深緑の信頼感・マゼンタの波線強調・黄色ピル CTA・淡い黄緑の地・線画の人物イラスト・POINT 番号付き特長
• 地の質感: グラデーションは使わず、フラットな単色面。影はほとんど付けない
• 形: 角丸の長方形カードとピル型ボタン。セクション境界は波形か斜めカットの二色ライン
• 温度感: 明るく温かい。緑の落ち着きとピンクの華やかさを両立

Colors

• 地は白と淡い黄緑を交互に置き、キャンペーンのブロックだけ淡いピンクにする
• 深緑はブランド色。サブ CTA、特徴バッジ、FAQ の Q の帯、枠線に使う
• マゼンタは見出しの一部と数字（%、価格など）の強調だけに使う
• 黄色は申込の主 CTA と、POINT の小見出しボックスに限って使う
• セクションの区切りには、深緑とマゼンタの二本の斜めカットラインを使う
• 注意書きは赤い小さな文字にし、本文とは色を変える

Typography

• 見出しは中央揃えの極太ゴシック。キーワードだけマゼンタにして、下にマゼンタの波線を引く
• 本文は太めのゴシックで、行間を 2.0 以上広く取る
• キャンペーン名や数字は斜体ぎみの極太にして勢いを出す
• 数字（0円・98% など）は周りの文字の 2〜3 倍の大きさにする
• 英字ラベルは深緑の小さな大文字で、字間を広げる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。設備アイコンなどは 2〜3 列
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツは左右に約 28px の余白を取って中央に置く
• POINT ブロックは英字ラベル、黄色の見出しボックス、本文、イラストの順で縦に積む
• CTA ボタンは画面幅の 85〜90% にする
• セクション間は約 70px あける

Elevation & Depth

• 影は基本的に使わず、フラットにする
• カードは白い面か枠線で区別する
• 動画や写真は角丸だけで、影は付けない

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形、または画面幅いっぱいの横長。イラストは白い地に切り抜く
• セクション境界: ピンク地の下端は波形にする。その他は深緑とマゼンタの斜めカット二重ラインで区切る
• CTA は高さ 60〜80px のピル型で、右端に矢印「>」を付ける
• POINT の見出しボックスは角丸 8px の黄色い長方形
• FAQ は深緑の枠線で角丸 8px。左に深緑の Q の帯を付ける

Components

• 黄色ピル CTA（button-primary）: 申込への導線。2 行の文字と右端の矢印
• 深緑ピルボタン（button-secondary）: 動画や詳細ページへの導線。上に人物イラストを乗せる
• 波線強調見出し（heading-wave）: 見出しのキーワードをマゼンタにし、下に波線を引く
• POINT 見出しボックス（point-box）: 英字の番号ラベルと、黄色い面に深緑文字の見出し
• 特徴バッジ（feature-badge）: FV に 3 つ並べる深緑の角丸ボックス。上にイラストを乗せる
• 期間ラベル（campaign-label）: マゼンタの帯に白文字で締切などを示す
• 特典カード（offer-card）: 上部が緑の帯の白カード。左に特典名、右に商品写真
• 満足度円グラフ（stat-pie）: マゼンタの大きな % と円グラフを 2 列に並べる
• FAQ アコーディオン（faq-item）: 深緑の枠線、左に Q の帯、右にマゼンタの＋アイコン

Do's and Don'ts

Do - 強調はマゼンタの文字と波線でまとめる - 黄色 CTA をページ中に繰り返し置く - 特長ごとに線画イラストか写真を必ず添える - 白と淡い黄緑の地を交互にしてリズムを作る - 数字は大きくマゼンタで見せる

Don't - グラデーションや強い影を使わない - 黄色を本文や広い背景に使わない - マゼンタを広い面の塗りに使わない（ラベルと円グラフは例外） - 明朝体や細い書体を使わない - 暗い背景のセクションを作らない

Page Structure

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

1. ファーストビュー（サービス名と価値を一目で伝える）: 右側に子どもの写真。左上に深緑の大きなロゴ風見出し、その下にマゼンタ強調の 2 行コピーと特徴バッジ 3 つ、対象学年
2. 期間限定プログラム（短期の入門プランを提案する）: ピンクの地に深緑の帯ラベル、マゼンタの大見出し、条件の表、0 円を強調した白カード
3. キャンペーン（入会特典で行動を後押しする）: マゼンタの期間ラベル、マゼンタの斜体見出し、緑の帯付きの特典カード、注釈。下端は波形
4. CTA と実績（体験申込と信頼の訴求）: 黄緑の地に黄色ピル CTA、波線強調の見出しと短い本文
5. 特長（サービスの 4 つの特長を説明する）: 白い地に POINT.01〜04 を縦に並べる。黄色い見出しボックス、本文、イラストか写真
6. 動画・満足度（動画と数字で信頼を補強する）: 横長の埋め込み動画、マゼンタの % を添えた 2 列の円グラフ
7. 利便性（自宅で受けられる安心感と必要な機材を伝える）: 全幅の写真、波線見出し、深緑枠のカードにアイコン 2 つを＋でつなぐ、深緑ピルボタン
8. 講師紹介（講師の質を訴求する）: 全幅の写真、波線見出し、本文、イラスト付きの深緑ボタン
9. スケジュール（授業時間を示す）: 白いピル型ラベルと深緑の箇条書きを左右に並べ、深緑ボタンを置く
10. よくある質問（不安を解消する）: Q の帯付きアコーディオンを 7 項目、その下に黄色 CTA
11. 保護者へのお願い（利用上の注意を伝える）: 黄色の見出しボックス、親子のイラスト、本文、青いリンク
12. 最終 CTA・フッター（申込への最後の導線）: 大きな黄色ピル CTA、赤い注意書き、著作権表記

Imagery

• 人物イラストは太い茶色の線画で、パステル調の塗り。笑顔の子どもと講師を描く
• 上半身だけのシンプルなイラストをボタンやバッジの上に乗せる
• 写真はヘッドセットを付けてオンライン受講する子どもや講師。自然光で明るく撮る
• アイコンは深緑の線の太いシンプルなもの（PC・Wi-Fi など）
• イラストの背景に淡い黄緑の円を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px で中央に置き、FV は写真を背景に左側へ文字、右側に満足度の円バッジを置く
• PC では POINT を 2 列のグリッドにする
• PC では右端に縦型の固定 CTA タブ（深緑・黄）を置く
• 見出しは PC だと 1 行にまとめる
• キャンペーンカードは 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 行書くと起動時に読み込まれる。