DESIGN.md — 紫ピンクグラデのZ世代向け音楽スクールLP（Pastel Gradient Youth Music School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、かわいい、クール・先進的、情報量多め・訴求型
• キーワード: パステルグラデーション・Z世代・白丸バッジ・角丸カード・2択CTA・カルーセル
• 地の質感: フラットなグラデーション面にソフトシャドウ。紙質感は使わない
• 形: 角の大きいカード、真円バッジ、ピル型ボタン、V字に切ったセクション境界
• 温度感: やや涼しめのパステル（紫・ピンク・水色）に、オレンジ・赤のキャンペーン色で熱を足す

Colors

• 地は薄いグレー。紫→ピンクの斜めグラデーション面と交互に並べて、セクションのリズムを作る
• グラデーションは左上のラベンダーから右下のピンクへ流す
• 主CTAはピンク→赤のグラデーション。サブCTAは水色→青のグラデーションにして、2択の対比を出す
• コースごとにピンク・青・黄・ミントのグラデーションでカードを色分けする
• キャンペーン部分だけ黒とオレンジを使い、緊急感を出す
• 英字ラベル・枠線ボタン・グラデーション上のバッジ文字は青系でそろえる
• button-primary は文字 #FEF6F9 × 背景 #FD6473 のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E60319、4.5:1）を使う。
• button-secondary は文字 #FEF6F9 × 背景 #6689DD のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#406CD5、4.57:1）を使う。
• circle-badge は文字 #6689DD × 背景 #FEFFFE のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#406CD5、4.55:1）を使う。
• campaign-bar は文字 #FEF6F9 × 背景 #FF6901 のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C04F00、4.53:1）を使う。
• button-outline は文字 #6689DD × 背景 #FEFFFE のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#406CD5、4.55:1）を使う。

Typography

• 見出しは「英字ラベル（青・大きな字間）→黒太字の2行見出し→グレーのリード2行」の3段で中央にそろえる
• グラデーション面の上の文字は白で、字間を広めにとる
• 番号は斜体の大きな数字にして、ラベルの上に半分重ねる
• 数字の価格は極太で大きくし、単位は小さく添える
• 本文は2行程度に収め、長い文章は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。CTAとスケジュールは 2 カラムで並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しブロックは中央ぞろえにし、上下に48〜64pxの余白をとる
• コースカードは横スクロールのカルーセル。左右に隣のカードを少し見せ、白丸の矢印を付ける
• 楽器やジャンルは3列のタイルで、写真の下にグレーの帯ラベルを敷く
• 2択CTAブロックはセクション2〜3つごとに繰り返す
• スタジオ一覧は青い地域見出し帯と2列のリストで作る

Elevation & Depth

• カードには大きくぼかした淡いソフトシャドウ（0 8px 24px rgba(0,0,0,.12)）を付ける
• 白丸バッジにも軽い影を付けて、グラデーション面から浮かせる
• CTAボタンは影を控えめにし、グラデーションで目立たせる
• スタジオ一覧のコンテナは薄い影のみで仕切る

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜きでグラデーション背景に置く。丸枠トリミングや角丸の矩形トリミングも使う
• セクション境界: グラデーション帯の上端・下端をV字や斜めに切る。基本は直線で区切る
• バッジ・アイコンは真円にする
• ボタンはすべてピル型
• コースカードは角丸24px程度
• 見出しの下に短い白い線を引く装飾を使う

Components

• 無料体験ボタン（button-primary）: ピンク→赤グラデーションのピル型。左に音符アイコンを置く
• 無料相談ボタン（button-secondary）: 水色→青グラデーションのピル型。吹き出しアイコン付き
• 2択CTAブロック（cta-choice-block）: グラデーション帯に「\ 〜 /」型の見出しを置き、写真入りの白カード2枚を黒丸のORでつなぐ
• 白丸バッジ（circle-badge）: 白い真円の中に、青や紫の太字の短い語を2行で入れる。輪の線でつないで配置する
• 英字ラベル見出し（section-label）: 字間の広い青い英字の下に、黒太字の見出しを置く
• コースカード（course-card）: カテゴリ色のグラデーション地に、白い英字タイトルと切り抜き人物を載せた角丸カード。カルーセルで見せる
• 番号付きピルラベル（number-pill）: 斜体の大きな数字をグラデーションのピルラベルに重ねる
• 料金比較カード（price-compare）: 灰色カードに取り消し線を引いた通常価格、下向きの矢印、青グラデーションカードに特別価格を大きく載せる
• キャンペーン特典帯（campaign-bar）: 黒帯で期限を示し、オレンジ帯でカウントダウン。斜めに切った白帯に特典を並べる
• 一覧へのボタン（button-outline）: 青い枠線と青文字のピル型ボタン

Do's and Don'ts

Do - 紫からピンクへの斜めグラデーションを、ブランドの面として繰り返し使う - 2択CTAをページの途中に何度も挟む - コース・カテゴリはそれぞれ色を変えたグラデーションのカードで見せる - 見出しは英字ラベル・黒太字・グレーのリードの3段で中央にそろえる - 人物写真は切り抜き、カラーの背景に明るく置く

Don't - くすんだ色や彩度の低い暗い色をメインに使わない - 角の尖ったボタンや角丸の小さいカードを使わない - 明朝体や手書き書体を使わない - 長い本文を詰め込まない - 黒とオレンジをキャンペーン以外の場所で使わない

Page Structure

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

1. ファーストビュー（ブランドと強みを一目で伝える）: 紫グラデーションの上にロゴ、白い字間広めのコピー、切り抜き人物を置き、下部に強みの丸バッジを3つ並べる
2. ナビ・キャンペーン（期間限定の特典で背中を押す）: 黒いナビ帯、水色のキャンペーン見出し、期限の黒帯とカウントダウンのオレンジ帯、写真の上に特典帯を3本
3. 関連バナー（姉妹サービスへ誘導する）: 横長の写真バナーを2〜3本並べる
4. ABOUT（対象者とスクールの方針を示す）: 英字ラベルと見出しの下に、対象を示す枠線ピルを3つ並べ、人物3名の切り抜きを置く
5. できること（特長を番号付きで伝える）: グラデーション面に大きな斜体番号と、写真付きの白カードを左右交互に配置。白丸バッジ4つを輪でつなぐ
6. 2択CTA（体験か相談かを選ばせる）: V字に切ったグラデーション帯に、写真入りカード2枚とORの黒丸
7. コース紹介（4系統のコースを見せる）: 番号ピルとカテゴリ色のカードをカルーセルで見せ、楽器・ジャンルは3列タイルにする
8. カリキュラム（デビュー支援の価値を伝える）: 4分割の写真を黒い斜め帯でまたぎ、紫の縦長パネルに丸写真・斜めラベル・「〇×〇」のバッジを並べる
9. ビジョン（得られる成果を図にする）: 吹き出し型のグラデーション見出しの下に、人物とロゴを中心にして成果の丸を円形に配置
10. スケジュール（通いやすさを示す）: 紫とピンクのカード、青のカードを2列に並べ、中に白いピル項目を縦に並べる
11. 料金（割安感を示す）: 灰色の通常価格カード→矢印→青グラデーションの特別価格カード
12. スタジオ・オンライン（受講スタイルと拠点を示す）: 左右矢印のOR比較図と人物の吹き出し、青い地域帯付きの2列の店舗リスト、ピンクのオンライン帯と写真
13. 最終CTA（申込を確定させる）: ピンクから水色へのグラデーション地に、大きなCTAカード2枚を縦に並べ、丸スタンプを添える
14. コミュニティ（仲間とのつながりを訴求して締める）: 濃いグレー地に白文字の見出し、円周上に人物の丸写真4つ

Imagery

• 制服やカジュアルな服の10〜20代の人物を切り抜き、明るい表情で楽器・マイク・スマホを持たせる
• 背景はパステルの単色やグラデーションにし、人物を浮かせる
• 丸枠の人物写真に白いふちを付けて、アイコン的に使う
• 楽器は白〜グレーのグラデーション背景で、物撮りタイルにする
• SNSアイコンや線画アイコンを、白丸やバッジに添える
• 明るく清潔なスタジオや自宅の写真を、角丸でトリミングする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅1000px程度の本文エリアを置き、グラデーション帯は全幅に広げる
• 2択CTAとスケジュールのカードは、PCでも横並びにして幅を広げる
• コースのカルーセルは、PCでは3〜4枚を同時に表示する
• 楽器タイルはPCで4〜6列に増やす
• スタジオ一覧はPCで3〜4列にする

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