--- version: alpha name: Pastel Gradient Youth Music School LP description: ラベンダーからピンクへのグラデーション面と、薄いグレーの地を交互に並べた学生向け音楽・芸能スクールのLP。白い丸バッジ、角の大きいカード、色分けしたコース別カルーセルでポップさを出す。2択のCTAブロックを何度も挟んで、無料体験への導線を太くしている。 colors: primary: '#ADA1E9' secondary: '#EE8BC4' background: '#F9F9F9' surface: '#FEFFFE' cta: '#FD6473' on-cta: '#FEF6F9' accent-1: '#6689DD' accent-2: '#FF6901' accent-3: '#63DAD4' tint-1: '#FDBC65' dark-section: '#010101' text: '#030203' text-muted: '#666666' background-alt: '#666666' cta-accessible: '#E60319' accent-1-accessible: '#406CD5' accent-2-accessible: '#C04F00' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.15em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.5em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS 1p fontSize: 28px fontWeight: 800 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-secondary: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px cta-choice-block: backgroundColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 300px circle-badge: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 120px section-label: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 24px course-card: backgroundColor: '{colors.accent-3}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 320px number-pill: backgroundColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 38px price-compare: backgroundColor: '{colors.accent-1}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 130px campaign-bar: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 56px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#ADA1E9` | ブランドのラベンダー紫（グラデーションの起点） | 12% | 画素の実測 | | `secondary` | `#EE8BC4` | グラデーションの終点となるピンク | 10% | 画素の実測 | | `background` | `#F9F9F9` | ページの地のごく薄いグレー | 40% | 画素の実測 | | `surface` | `#FEFFFE` | カード・バッジの白 | 8% | 画素の実測 | | `cta` | `#FD6473` | 無料体験ボタンのピンク〜赤グラデーション | 2% | 画素の実測 | | `on-cta` | `#FEF6F9` | CTAボタン上の白文字 | 0% | 画素の実測 | | `accent-1` | `#6689DD` | 英字の小見出し・枠線ボタン・相談ボタンの青 | 4% | 画素の実測 | | `accent-2` | `#FF6901` | キャンペーンの特典帯・カウントダウンのオレンジ | 2% | 画素の実測 | | `accent-3` | `#63DAD4` | コース別カードのミントグリーン | 3% | 画素の実測 | | `tint-1` | `#FDBC65` | 4番目のコースカードの黄〜オレンジ | 2% | 画素の実測 | | `dark-section` | `#010101` | ナビ帯・キャンペーン黒帯 | 4% | 画素の実測 | | `text` | `#030203` | 見出しの黒文字 | 1% | 画素の実測 | | `text-muted` | `#666666` | リード文のグレー文字 | 1% | 推定 | | `background-alt` | `#666666` | 最後のセクションの濃いグレー地 | 5% | 画素の実測 | | `cta-accessible` | `#E60319` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#406CD5` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#C04F00` | AA を満たす補正値（計算） | | 計算 | - 地は薄いグレー。紫→ピンクの斜めグラデーション面と交互に並べて、セクションのリズムを作る - グラデーションは左上のラベンダーから右下のピンクへ流す - 主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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのコピーとグラデーション面の大見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.4 | 0.15em | | `headline-lg` | セクション見出し（黒・太字・2行） | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.05em | | `accent` | 見出し上の英字ラベル（字間を広げる） | 欧文サンセリフ | Montserrat | 700 | 15px | 1.2 | 0.5em | | `headline-md` | カード内の見出し・特長の小見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `headline-sm` | 白丸バッジ内の太い短い語 | ゴシック | M PLUS 1p | 800 | 28px | 1.1 | 0.0em | | `body-md` | リード文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.05em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.03em | | `note` | 注釈・駅からの道順 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.0em | - 見出しは「英字ラベル（青・大きな字間）→黒太字の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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-60a6606c`（元 LP の URL から採番） - **元 LP**: https://inspiart-z.com/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。