DESIGN.md — 朱色×白カードのポップな音楽教室 LP（Vivid Orange Rounded Card Music School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、親しみ・手作り感、清潔・爽やか
• キーワード: 朱オレンジ・大きな角丸・白カード・手書き英字ラベル・笑顔の写真・ピルボタン
• 地の質感: フラットな塗り面。影はごく薄く、写真で温度感を出す
• 形: 角丸の大きな面とカード、ピル型ボタン、丸い矢印アイコン
• 温度感: 暖色。オレンジが明るく元気な印象

Colors

• 地は薄グレーと白を交互にし、要所を朱オレンジの全幅面で区切る
• オレンジ面の上には白カードを載せて内容を置く
• 見出し中のキーワード・数字だけをオレンジにする
• ボタンは白地ピル＋オレンジ丸矢印、主CTAはオレンジ塗り
• 本文は真っ黒ではなく茶味の濃色
• button-primary は文字 #FFFFFF × 背景 #EC602D のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D34613、4.51:1）を使う。
• fv-badge は文字 #EA551D × 背景 #FFFFFF のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D04713、4.57:1）を使う。
• voice-card は文字 #FCF2E8 × 背景 #EA551D のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D04713、4.57:1）を使う。
• sns-button は文字 #EA551D × 背景 #FFFFFF のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D04713、4.57:1）を使う。

Typography

• 見出し左上に斜めの手書き英字をオレンジで重ねる
• 見出しは2行に分け、キーワードをオレンジで強調
• 数字は本文より大きく太くし単位は小さく
• 本文は小さめで行間を広く取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カード一覧は横スクロール
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション間は広い余白で区切る
• 特長は写真と文章を左右交互（SPは縦積み）
• コース一覧はSP 2列の小カード
• 見出しは左寄せが基本、補助セクションは中央

Elevation & Depth

• 白カードはごく薄い影か影なし
• ボタンに薄いドロップシャドウ
• オレンジ面は影なしのフラット

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 角丸長方形、コンセプト写真は円形
• セクション境界: オレンジ面の角を大きく丸めた帯で区切る
• 大きい面は角丸32px前後
• 写真カードは角丸12px
• ボタンは必ずピル型＋丸矢印

Components

• 主CTAボタン（button-primary）: オレンジ塗りピル型の申込ボタン
• 詳細ボタン（button-more）: 白地ピルに右端オレンジ丸矢印
• 英字ラベル付き見出し（heading-script）: 手書き英字を斜めに重ねた見出し
• FV実績バッジ（fv-badge）: 写真下部に並ぶ白角丸の実績カード3枚
• 生徒の声カード（voice-card）: 写真に順位の丸バッジとオレンジ帯の短い感想
• コースカード（course-chip）: オレンジ面上の白小カード、アイコン＋コース名
• お知らせカード（news-card）: 写真＋カテゴリ枠ラベル＋日付
• SNSボタン（sns-button）: オレンジ枠線の角丸ボタン

Do's and Don'ts

Do - オレンジ面と薄グレー面を交互に配置する - 白カードは大きく角丸にする - 笑顔の人物写真を多用する - 強調語は文字色のみオレンジで - ボタンには丸矢印を付ける

Don't - オレンジ以外の強い色を足さない - 角張った四角カードを使わない - 本文を純黒にしない - 暗い重いトーンの写真を主役にしない - 見出しを装飾過多にしない

Page Structure

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

1. ファーストビュー（体験の楽しさを伝える）: 全幅の人物写真に白抜きキャッチ、下部に実績バッジ3枚
2. キャンペーン（特典で申込を促す）: オレンジ面上に淡色の横長バナー
3. コンセプト（サービスの特徴説明）: オレンジ面上の大きな白カードに文章と円形写真
4. お客様の声（実績と安心感）: 大きな数字見出し＋写真カードの横スライダー
5. 特長（仕組みの説明）: 番号付き3項目を写真と左右交互
6. 教室一覧（立地の訴求）: 教室写真カードの横スクロール
7. イベント（コミュニティ訴求）: 大きな角丸写真1枚とボタン
8. 料金・コース（価格提示）: 角丸オレンジ帯に料金とコース小カード群
9. 衛生管理（安心材料）: 写真付き3列カード
10. お知らせ・SNS（更新情報と導線）: ニュースカード3枚とSNS枠ボタン

Imagery

• 明るい室内で笑顔の講師と生徒の自然光写真
• 複数人で並ぶ楽しげなグループ写真
• 清潔で明るい教室内観
• 円形切り抜きに音符などの線画を添える
• ライブ写真は暗めでもアクセントとして1点のみ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは1カラムで特長は写真→文章の縦積み
• カード一覧はSPで横スクロール
• コース小カードはSP 2列
• PCは中央幅約60%で左右に余白
• FVバッジはSPで横並び縮小か縦積み

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