DESIGN.md — 青×橙×黒のハロウィン調子ども英会話 LP（Halloween Pop Kids English School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: ハロウィン・ブロブ図形・高彩度3色・子ども写真・キャンペーン訴求・ガーランド装飾
• 地の質感: ベタ塗りのフラット面。紺地に細かいノイズ風の質感、紙のような生成りのカードを重ねる
• 形: 有機的なブロブ形、波形のセクション境界、円や不定形に切り抜いた写真、角丸カード
• 温度感: 暖色と寒色を強いコントラストでぶつけた、にぎやかで温かい雰囲気

Colors

• セクションの地は白・紺・オレンジ・黒紫の順にはっきり切り替える
• 情報カードは白か生成りにして、色地の上でも読みやすくする
• CTA は赤一色に限定し、他の要素に赤を使わない
• 黄色はタブ・番号・カード枠などの小さな強調に使う
• 紫はブロブ図形や価格バッジの差し色として少しだけ使う
• 濃色地の上の文字は白、大見出しはオレンジ黄でグラデーション風に強調する

Typography

• FV の大見出しだけ太い明朝で、季節感とインパクトを出す
• それ以外の見出しは太字ゴシックで字間を少し広げる
• 価格の数字は特大にし、単位は小さくして差をつける
• 見出しの上に小さなリード文を添えて二段で組む
• 注釈は小さいサイズで、価格表示のすぐ下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せの細めのカラムで、特長は写真と文章を左右交互に置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 主要セクションの後に毎回 CTA 帯を挟む
• 特長は POINT 番号つきで写真と文章を交互に並べる
• タブで年齢別コースを切り替える
• ステップは縦に並べ、間に下向き三角を入れる
• 背景のブロブは画面の端からはみ出させる

Elevation & Depth

• 影はほぼ使わず、フラットな面の重なりで奥行きを出す
• カードは白地に太い黄色の枠でまとめる
• 声カードには薄い枠線と色付きの見出し帯をつける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 円・不定形のブロブ形・角丸四角で切り抜く
• セクション境界: 波形・ブロブ形の曲線でセクションを切り替え、FV 下は三角形に尖らせる
• 直線の区切りは避け、曲線で区切る
• タブは上だけ角丸にする
• 価格バッジは縦長の角丸枠にする

Components

• 赤いピル型 CTA（button-primary）: 上に期間限定の短い文を添え、右に三角アイコンをつける
• 価格訴求ブロック（campaign-price）: 縦書き風の角丸ラベルの横に特大の数字を置く
• POINT 番号バッジ（point-badge）: 黄色の円に欧文ラベルと 2 桁の番号を入れ、写真の角に重ねる
• 黄色枠の写真カード（feature-card）: 写真の下に短い見出しと説明を入れ、4 枚を並べる
• 年齢別タブ（tab-switch）: 黄と青の 2 タブで、選んだ方の色が下のパネルとつながる
• STEP 行（step-row）: 黄色の番号ブロックと生成りの説明帯を横に並べ、間に三角を置く
• 保護者の声カード（voice-card）: 線画アイコンと青・橙の見出し帯をつけ、左右交互にずらして並べる
• 教室エリア地図（area-map）: 日本地図のイラストから色付きの吹き出しを出して、エリア別に教室数を示す

Do's and Don'ts

Do - ブロブ・アルファベット・キラキラの装飾を余白に散らす - CTA 帯をセクションの区切りごとに繰り返す - 子どもの笑顔の写真を円や不定形で切り抜く - 季節のモチーフ（お化け・かぼちゃ・ガーランド）を FV に集める - 情報は白・生成りのカードに入れて読みやすくする

Don't - くすんだ色や淡いパステルだけで構成しない - 赤を CTA 以外に使わない - セクションを直線だけで区切らない - 本文を色地に直接長く書かない - 写真を四角いまま大きく並べない

Page Structure

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

1. ファーストビュー（季節キャンペーンと特典を一目で伝える）: 黒紫地にお化け屋敷のシルエット、両側に子ども写真、大見出しと価格を中央に置く
2. CTA 帯（体験申込へ誘導する）: 薄いグレー地に期間の文と赤いピルボタン
3. 導入・早期学習のすすめ（始める時期の大切さを伝える）: 白地に見出しと短い文、黄色枠の写真カードを 4 枚並べる
4. 特長（選ばれる理由を 3 つ示す）: 紺地に POINT 番号つきの円形写真と文章を左右交互に置く
5. コース紹介（年齢別のレッスン内容を見せる）: オレンジ地に黄・青のタブ、白いパネルに写真と説明を入れる
6. 体験の流れ（申込後の手順を伝え、不安をなくす）: 白カードの中に STEP を 4 段、縦に並べる
7. キャンペーン再訴求（特典をもう一度伝える）: FV と同じ構成を紺地の上に黒紫のブロブで重ねる
8. お客様の声（保護者の実感を伝える）: 色付きの見出し帯がある声カードを 3 枚、ジグザグに並べる
9. 教室一覧（通いやすさを示す）: 地図イラストとエリア別の吹き出しで教室数を示す
10. クロージング・最終 CTA（最後のひと押し）: 青のブロブと子ども写真に大きなコピーを重ね、CTA 帯を 2 回置く

Imagery

• 教室で学ぶ未就学児〜小学生の明るい笑顔の写真
• 外国人講師と子どもが向かい合う、自然光の室内写真
• お化け・かぼちゃ・魔女・コウモリをフラットに描いたイラスト
• 黄・紫・青で描いた手書き風のアルファベットを散らす
• 三角旗のガーランドとキラキラの線画
• 単色の線で描いた保護者のアイコン
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 600px の中央寄せにし、背景のブロブを左右に広げる
• SP では特長の左右交互をやめ、写真の下に文章を置く縦積みにする
• 導入カードは SP で 2 列×2 段にする
• FV の写真は SP で上下に重ね、大見出しを中央に置く
• CTA ボタンは SP で幅 90% にする

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