DESIGN.md — パステル色ブロックの音楽教室 LP（Colorful Pastel Block Music School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、やさしい・柔らかい
• キーワード: パステル4色・手書き文字・付箋・音符の線画・ドット柄の地・繰り返すCTA
• 地の質感: 薄いドット柄や縦ストライプの地に、音符・ト音記号の淡い線画を散らす。クラフト紙風のベージュ地も使う。
• 形: 角丸の少ない四角い枠カード（太い色枠・点線枠・破線枠）、リボン型の見出し、波形のセクション境界
• 温度感: 暖かく明るい。暗い写真セクションで緩急をつける

Colors

• 特長01〜04は黄・水色・緑・ピンクを順に割り当てる。枠線・番号・強調語・アクセントを同じ色でそろえる
• 地は白・生成りドット・水色ドットをセクションごとに切り替える
• 主CTAは黄緑のグラデーションだけにし、ほかの要素に黄緑の面を使わない
• キャンペーン帯はパステル4色のカラーブロックを背景にし、白いカードを上に重ねる
• 料金表は強調する列ごとに色を変える（ピンク・緑・水色）
• 暗い写真の上の文字は、半透明の濃グレー箱に白文字で載せる
• button-primary は文字 #FFFFFF × 背景 #7CC72E のコントラスト比が 2.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#51831E、4.55:1）を使う。
• campaign-block は文字 #FD7364 × 背景 #EFEFEF のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D71803、4.54:1）を使う。
• flow-step は文字 #59D6F5 × 背景 #FFFFFF のコントラスト比が 1.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0A819F、4.51:1）を使う。

Typography

• 見出しの中の強調語は、テーマ色の文字に変えて下線マーカーを引く
• セクション見出しの上には、英字スクリプトの小ラベルを斜めに添える
• 吹き出し・付箋・補足は手書き風の書体にする
• 本文は中央揃えを基本にし、カード内は左揃えにする
• 数字（料金・％）は大きく、単位は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。講師カードや声カードは写真とテキストを左右に並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面幅いっぱいから左右12pxずつ空けて置く
• 特長カードは太い色枠で縦に連続させ、間隔を24pxにする
• 比較は『他だと…』のグレーカード、下向き矢印、自社の点線カードの順に縦に並べる
• 写真セクションは全幅にし、上に見出し帯を重ねる
• 円グラフは3つを横に並べる

Elevation & Depth

• キャンペーンの白カードに薄い影をつける
• 写真は白フチと軽い影でポラロイド風にする
• 見出しの白文字に柔らかいグロー影をつける
• 料金表の列にわずかな立体影をつける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は切り抜きか円形。施設写真は白フチ付きの四角で、やや傾けることもある
• セクション境界: 波形カーブ、破れた紙の縁、カラーストライプのライン
• カードは角丸がほぼない四角にする
• 見出しのラベルはリボン形や旗形にする
• 付箋は少し回転させて重ねる
• CTAは角丸が小さめの横長ボタンにする

Components

• 体験申込ボタン（button-primary）: 黄緑グラデーションの横長ボタン。白い太字で、一部の文字を小さくする
• キャンペーン帯（campaign-block）: パステルのカラーブロック背景に白カードを重ねる。中身はピンクのリボン見出し、クーポン券の線画、特典の大文字、CTAの順。ページ内で5回繰り返す
• 色枠の特長カード（feature-card）: テーマ色の太い枠線（5px）を持つ白カード。円の中に番号、強調語に下線を入れた見出しを置く
• リボン見出し（ribbon-heading）: 写真の上に置く、斜めのリボン型のラベルと白い大見出し
• 付箋の悩み（sticky-note）: 黄色い付箋を傾けて重ね、手書き文字で悩みを書く
• 点線枠カード（dashed-card）: 黒い点線の枠で囲み、写真とテキストを左右に並べる講師・声カード
• エリア選択アコーディオン（accordion-area）: 黄色の帯に地域名と▼を置く
• Q&A行（faq-item）: 黄色い吹き出しにQを入れ、太字の質問を並べる。下に点線の区切りを引く
• 流れのステップ（flow-step）: FLOWラベルと色付きの番号タグ、見出しを置く。写真と左右交互に並べる

Do's and Don'ts

Do - 特長ごとにパステル4色を固定で割り当てる - 手書き書体と音符の線画で親しみを出す - CTA帯を各ブロックの区切りごとに繰り返す - 強調語にはテーマ色の文字と下線を組み合わせる - 数字の実績は円形バッジにする

Don't - CTAの黄緑をほかの面に使わない - 原色のビビッドな色や黒背景を多用しない - 角丸の大きいふわっとしたカードにしない - 明朝体の上品な見出しにしない - 装飾のない無地の白だけで長く続けない

Page Structure

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

1. ファーストビュー（変化の約束と実績を示す）: 多色のキャッチ、人物の切り抜き、円形の実績バッジ3つを置き、下に濃色のナビを付ける
2. キャンペーンCTA（体験申込を促す）: カラーブロック背景、白カード、クーポンの線画、黄緑のボタン
3. 悩みの提起（共感を得る）: 悩む男女の写真に付箋を4枚重ね、暗い帯に不安を3つ並べる
4. 対象者チェック（自分ごと化する）: チェックリスト4行、強調語のマーカー、施設写真
5. 特長1（自由度）（選べる自由を示す）: 写真の見出し帯の下に、色枠の番号カードを4枚置く
6. 特長2（個別指導）（競合との違いを示す）: グレーの他社カード、矢印、点線の自社カードで比較する
7. 特長3（発信の場）（楽しさを伝える）: 暗い写真に半透明の箱を重ね、破れ紙の境界で区切る
8. 講師紹介（信頼を得る）: 点線カードに写真と経歴を載せ、施設写真を4枚並べる
9. お客様の声（社会的証明）: ストライプ地に点線カードを置き、円グラフを3つ並べる
10. 料金（価格を明示する）: 3列の表で、おすすめの列にラベルを付ける
11. 校舎アクセス（最寄りの校舎を探してもらう）: 黄色のアコーディオン
12. 体験の流れ（不安を取り除く）: クラフト地に斜線枠のカードを置き、4ステップを写真と交互に並べる
13. よくある質問（疑問を解消する）: Qの吹き出しと点線の区切り
14. 最終CTA（申込させる）: キャンペーン帯を再掲する

Imagery

• 明るい室内で笑顔の講師と生徒がレッスンしている写真
• 人物は白背景の切り抜きか、円形トリミングにする
• ライブ会場やステージは暗めの写真にし、上に半透明の文字箱を置く
• 音符・ト音記号・ピアノの鍵盤を淡い線画で散らす
• 比較図はグレーのシルエットのピクトグラムにする
• カレンダーの手描き風図解に色付きの予定タグを置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約800px幅で配置し、左右は背景の柄が広がる
• FVはPCではキャッチと人物を横に並べ、ナビはその下に全幅で置く
• カードの内部構成はSPとほぼ同じにし、余白だけ広げる
• 施設写真はPCでは横一列に5枚程度並べる

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