--- version: alpha name: Festive Pastel Bunting Music School LP description: 淡い水色グレーの地に、ガーランド旗と紙吹雪で祝祭感を出した音楽教室の LP。深い紫の CTA と、ティール系の見出し文字で、明るく誠実な雰囲気にまとめている。切り抜いた人物写真と円形写真を多用し、緩やかな斜めカーブでセクションを区切る。 colors: primary: '#5B2A86' cta: '#5A1E74' on-cta: '#FFFFFF' background: '#E4EEEF' background-alt: '#FFFFFF' secondary: '#1E7FA0' accent-1: '#A1D3DB' accent-2: '#73C394' accent-3: '#BA8BCC' tint-1: '#E6F1F5' surface: '#FFFFFF' line: '#DDE8EC' text: '#333333' tint-2: '#DDF1F2' accent-2-accessible: '#388357' typography: display: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.06em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.04em accent: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Montserrat fontSize: 9px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 2px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 12px section: 72px 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.sm}' height: 40px cta-banner: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.display}' height: 340px number-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 56px style-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 300px course-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 290px voice-card: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 230px faq-row: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 46px heading-lead: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 70px --- # DESIGN.md — 水色×紫の祝祭感ある音楽教室 LP（Festive Pastel Bunting Music School LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、清潔・爽やか、信頼・誠実、やさしい・柔らかい - **キーワード**: 祝祭感・ガーランド旗・紙吹雪・切り抜き人物・水色の空・斜めカーブ - **地の質感**: フラットな淡色地に、水彩風の空の写真と紙吹雪を重ねる - **形**: 斜めの緩いカーブ境界、円形写真、三角の番号バッジ、角丸の小さいカード - **温度感**: 爽やかで少し涼しめ。差し色のパステルで温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5B2A86` | ブランド紫・CTA帯の見出し文字 | 2% | 推定 | | `cta` | `#5A1E74` | 主CTAボタン面 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#E4EEEF` | メインの淡いグレー水色地 | 32% | 画素の実測 | | `background-alt` | `#FFFFFF` | 白セクション地 | 28% | 画素の実測 | | `secondary` | `#1E7FA0` | 見出し・コピーのティール文字 | 1% | 推定 | | `accent-1` | `#A1D3DB` | 円形写真の後ろ影・水色 | 5% | 画素の主要色に補正 | | `accent-2` | `#73C394` | 番号バッジの緑 | 0% | 画素の実測 | | `accent-3` | `#BA8BCC` | 番号バッジの薄紫 | 0% | 画素の実測 | | `tint-1` | `#E6F1F5` | FAQ行の薄水色面 | 3% | 画素の実測 | | `surface` | `#FFFFFF` | コース一覧カード面 | 6% | 画素の実測 | | `line` | `#DDE8EC` | お客様の声カード枠線 | 0% | 画素の主要色に補正 | | `text` | `#333333` | 本文・見出しの濃グレー | 2% | 推定 | | `tint-2` | `#DDF1F2` | フッター淡水色地 | 4% | 画素の実測 | | `accent-2-accessible` | `#388357` | AA を満たす補正値（計算） | | 計算 | - 地は淡いグレー水色と白を交互に使い、カーブ境界で切り替える - CTA は深い紫の 1 色に統一する。ほかの部品に紫の面は使わない - 見出しのリード文字とサブコピーはティール色にする - 番号バッジは緑・黄土・薄紫・ティール・青を順番に使い、パステル調の多色にする - CTA 帯は水色の空の写真に紙吹雪を重ね、白帯に紫の太字見出しを置く - ガーランド旗はパステル多色の小さな三角で、境界カーブに沿わせる - `number-badge` は文字 `#FFFFFF` × 背景 `#73C394` のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#388357`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビュー・CTA帯の太字見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.3 | 0.02em | | `headline-lg` | セクション見出し（細め・大きめ） | ゴシック | Zen Kaku Gothic New | 400 | 22px | 1.4 | 0.06em | | `headline-md` | 理由の小見出し・声のタイトル | ゴシック | Zen Kaku Gothic New | 500 | 16px | 1.4 | 0.04em | | `accent` | 見出し上のリードコピー（ティール） | ゴシック | Zen Kaku Gothic New | 400 | 13px | 1.5 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `note` | 注釈・英字サブ見出し | 欧文サンセリフ | Montserrat | 500 | 9px | 1.5 | 0.04em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.2 | 0.04em | - セクション見出しは細めのウェイトで大きく、字間を広めにとる - 数字だけを太字や大きいサイズにして強調する - 見出しの上にティールのリードコピーを 1 行置く - CTA 帯の見出しだけ極太にして白帯に乗せる - スタイル番号は青い太字の欧文数字にして写真に重ねる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。コース一覧は 3 列の小カードグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算） - 理由セクションは人物の切り抜き写真と本文を左右に並べ、段ごとに位置をずらす - 見出しは左揃え。CTA は中央揃え - お客様の声は 1 列の枠付きカードを縦に並べる - FAQ は全幅の帯行を 8px 間隔で積む ## Elevation & Depth - 影はほぼ使わずフラットにする - 切り抜き人物の足元に薄い楕円影を置く - SNS バーは白いピル型にして薄い影をつける ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は背景を抜いた切り抜き。スタイル紹介は大きな円形にして水色の円をずらして重ねる。講師・受講者は小さな円形 - **セクション境界**: 右上がりか右下がりの緩いカーブ境界。縁にパステル多色のガーランド旗をつける - CTA は角丸小さめの長方形。右端に白い丸の矢印を入れる - 番号バッジは右向き三角（理由）か下向き三角（声） - カードは白地で角丸は小さく、声カードだけ角丸 12px と水色枠 ## Components - **主CTAボタン**（`button-primary`）: 紫の長方形に白の太字。右端に白い丸の矢印アイコンを置く - **祝祭CTA帯**（`cta-banner`）: 水色の空と紙吹雪の背景に、白帯の紫極太見出しと CTA を中央に置き、切り抜き人物を添える - **三角番号バッジ**（`number-badge`）: パステル色の三角に白数字。右側にティールの小見出しを置く - **円形スタイル紹介**（`style-circle`）: 大きな円形写真に水色の円をずらして重ねる。青の番号、太字の名前、英字サブ、中央揃えの説明を入れる - **コースカード**（`course-card`）: 白カードに小さな円形写真と分類名。その下にグレーの小チップを 2 列で並べ、チップ右端に青の三角をつける - **お客様の声カード**（`voice-card`）: 水色枠の白カード。下向き三角の番号、ティール太字のタイトル、波線、本文、右側に円形の顔写真を入れる - **FAQアコーディオン行**（`faq-row`）: 薄水色の帯。左に濃いティールの Q、右にティールの丸いプラスアイコンを置く - **リード付き見出し**（`heading-lead`）: ティールの短いコピーの下に、細く大きい見出しを左揃えで置く ## Do's and Don'ts **Do** - セクションの境界は緩いカーブにして、ガーランド旗を必ずつける - 人物は全身の切り抜きで、楽器を持った躍動的なポーズにする - CTA は紫の 1 種類だけを繰り返し使う - 見出しの上にティールのリードコピーを置き、型をそろえる - 番号バッジはパステル多色で順番に色を変える **Don't** - 濃い背景色を広い面に使わない - セクション境界を水平な直線にしない - CTA に紫以外の色を使わない - 角丸の大きいピル型ボタンにしない - 見出しを全部太字にしない（太くするのは CTA 帯と数字だけ） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観と楽しさを伝える）: 水色の空に楽器と紙吹雪、全身の人物が並ぶ横長のビジュアル。中央に白い太字キャッチを置く 2. **オファー＋CTA**（無料体験への誘導）: 白地に小さなリード文と極太見出し、その下に水色の斜め帯、紫の CTA を置く 3. **選ばれる理由**（5 つの強みを示す）: 淡い水色地。三角の番号バッジ、小見出し、切り抜き人物と本文を交互に配置する 4. **動画**（CM で雰囲気を伝える）: 白地。左に動画埋め込み、右にティールの短い詩的なコピーを置く 5. **中間CTA**（申込への再誘導）: 空と紙吹雪の帯。白帯に紫の見出しと CTA を置き、人物の切り抜きを添える 6. **レッスンスタイル**（受講形態 3 種の紹介）: 大きな円形写真と番号、名前、英字サブ、説明を中央揃えで並べる 7. **コース一覧**（豊富なコースを網羅して見せる）: 二重線つきの中央見出し。白カードの 3 列グリッドにチップを並べる 8. **お客様の声**（実際の体験で安心感を出す）: 白地。番号つきの枠カードに顔写真とコース名を入れる 9. **よくある質問**（不安を解消する）: 薄水色のアコーディオン帯を 5 行並べ、下に詳細リンクを置く 10. **最終CTA・フッター**（最後のひと押しとブランドの提示）: 空の CTA 帯の下に淡水色のフッター。ロゴ、SNS のピル型バー、規約リンクを置く ## Imagery - スタジオで撮った全身の人物を切り抜き、楽器を持って踊るような動きのポーズにする - 背景は水彩調の水色の空に、パステル色の紙吹雪を散らす - レッスン写真は暖かい室内光で、講師と生徒が並ぶ構図にして円形に切り抜く - 装飾はパステル多色の三角ガーランド旗と、小さな紙片のみ - 人物の服装は青・白・ピンク系の明るい色で統一する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 75% 幅のコンテナに収め、背景帯は全幅にする - PC の理由セクションは 3 列＋2 列のグリッドにする - PC のレッスンスタイルは円形写真を 3 列で横並びにする - PC のお客様の声は 2 列グリッドにする - PC のコース一覧カードは横長になり、チップを 2 列で並べる - PC の動画セクションは動画とコピーを横並びのまま中央に寄せる ## 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-2428a470`（元 LP の URL から採番） - **元 LP**: https://school.jp.yamaha.com/music/lp/instrument-welcome/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。