--- version: alpha name: Playful Pastel Kids Gymnastics Campaign LP description: 水色を主役に、桜ピンク・若草グリーン・黄色を帯ごとに切り替えるポップな子ども向けスクール LP。マスコットのイラスト、桜の花びら、ストライプ地、斜めの黄色リボン見出しで元気さと親しみを出す。無料体験の申込へ何度も誘導する。 colors: primary: '#68BCE1' background: '#FEFEFE' secondary: '#0F6AB1' cta: '#94B32B' on-cta: '#FFFFFF' background-alt: '#F8C6C7' accent-1: '#F16B59' accent-2: '#FCF364' accent-3: '#C5D053' tint-1: '#FDE3BE' tint-2: '#AFDEFA' surface: '#F8F6E9' text: '#3A3A3A' marker: '#FCE1EA' cta-accessible: '#687E1E' accent-1-accessible: '#E02B13' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 26px fontWeight: 800 lineHeight: 1.1 label-button: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em rounded: sm: 6px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 56px 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: 52px cta-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 180px ribbon-heading: backgroundColor: '{colors.accent-2}' textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 56px merit-badge: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px course-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 600px price-block: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-2}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 110px faq-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 70px voice-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 320px point-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 520px info-table: backgroundColor: '{colors.primary}' typography: '{typography.body-md}' height: 390px --- # DESIGN.md — 水色×桜ピンクのポップな子ども体操教室 LP（Playful Pastel Kids Gymnastics Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: パステル多色・マスコット・桜の花びら・ストライプ地・斜めリボン見出し・円形バッジ - **地の質感**: フラットな塗りに縦ストライプと花びらの散らしを重ね、カードに濃い色のずらし影を付けて手作り感を出す - **形**: 大きな角丸カード、円形のメリットバッジ、傾けた長方形リボン見出し、しっぽ付きの吹き出し - **温度感**: 明るく暖かい。春っぽい軽さ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#68BCE1` | メインの水色背景 | 22% | 画素の実測 | | `background` | `#FEFEFE` | 白の地・カード | 27% | 画素の実測 | | `secondary` | `#0F6AB1` | 見出し・数字の濃い青 | 2% | 画素の実測 | | `cta` | `#94B32B` | 申込ボタンの若草グリーン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background-alt` | `#F8C6C7` | CTA帯・お客様の声の桜ピンク | 11% | 画素の実測 | | `accent-1` | `#F16B59` | 強調の朱赤（特典帯・マーカー・小見出し） | 2% | 画素の実測 | | `accent-2` | `#FCF364` | 見出しリボンの黄色 | 2% | 画素の実測 | | `accent-3` | `#C5D053` | FAQ帯の黄緑ストライプ | 10% | 画素の実測 | | `tint-1` | `#FDE3BE` | 幼児コースカードの淡いオレンジ | 3% | 画素の主要色に補正 | | `tint-2` | `#AFDEFA` | 小中高コースカードの淡い水色 | 3% | 画素の実測 | | `surface` | `#F8F6E9` | 特典・店舗情報の生成り地 | 6% | 画素の実測 | | `text` | `#3A3A3A` | 本文の濃い茶グレー | 3% | 推定 | | `marker` | `#FCE1EA` | お客様の声の淡いピンクマーカー | 1% | 推定 | | `cta-accessible` | `#687E1E` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#E02B13` | AA を満たす補正値（計算） | | 計算 | - 地色はセクションごとに水色→ピンク→黄緑→ピンク→水色→生成りと切り替え、リズムを作る - CTA帯は必ず桜ピンク地＋若草グリーンのピル型ボタン - 強調語は朱赤の塗りに白抜き文字のマーカーで目立たせる - 見出しは黄色リボンに濃い青文字、ピンク帯では白リボンにピンク文字にする - コースはカテゴリごとに淡オレンジと淡水色で色分けし、料金ブロックは同系の濃い色にする - 価格の数字は黄色の太字で濃い背景の上に置く - `button-primary` は文字 `#FFFFFF` × 背景 `#94B32B` のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#687E1E`、4.57:1）を使う。 - `merit-badge` は文字 `#F16B59` × 背景 `#FEFEFE` のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E02B13`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャンペーン名（文字ごとに多色・白フチ） | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | キャッチコピー・リボン見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 30px | 1.3 | 0.04em | | `headline-md` | サブ見出し・ポイント見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.03em | | `headline-sm` | コース名・メリットバッジ文 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.4 | 0.02em | | `body-md` | 本文・FAQ・お客様の声 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.04em | | `accent` | 料金の数字・MERIT/POINTの欧文 | 欧文サンセリフ | Montserrat | 800 | 26px | 1.1 | 0.0em | | `label-button` | CTAボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.2 | 0.05em | | `note` | 注釈・表内の小文字 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.02em | - 見出しは極太の丸ゴシックで、子ども向けの柔らかさを出す - キャッチは『』でくくった語を大きく、助詞を小さくする - 見出し内で重要語だけ朱赤、残りは濃い青にする - 料金は数字を大きく、単位の円を小さくする - 本文は13px前後・行間1.8でゆったり組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。メリットは円形バッジ3つ横並び、ポイントは2つ横並び - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右6%前後の余白で中央に置く - CTA帯はセクションの間に3〜4回挟む - 料金表・時間割は罫線付きの表で見せる - マスコットは見出しの左右端にはみ出して配置する - お客様の声は吹き出しを左右交互に寄せる ## Elevation & Depth - カードには影色を濃い同系色にしたぼかしなしのずらし影（右下4px） - CTAボタンには下方向の濃い影で立体感を出す - 見出しリボンの背後に濃い青の平行四辺形を少しずらして重ねる - ぼかしの強いドロップシャドウは使わない ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの長方形でカード内に全幅で入れる - **セクション境界**: 基本は水平の直線切替。キャッチ部分のみ大きな円弧で白地をくり抜く - メリット・ポイントは白い正円バッジに下側だけ濃青の影 - 見出しは少し傾けた長方形リボン＋左右に縦並びのドット - 吹き出しにはしっぽの小三角を付ける - コースカード上部の見出しは右端を切った白いタブ型 ## Components - **電話申込ボタン**（`button-primary`）: 若草グリーンのピル型、右端に白丸の再生アイコン、左にマスコットが乗る - **CTA帯**（`cta-band`）: 桜ピンク地にボタンと、朱赤マーカー入りの2行の急かし文 - **リボン見出し**（`ribbon-heading`）: 黄色の傾いた長方形に濃青文字、背後に青い帯、左右に縦3つのドット - **メリット円形バッジ**（`merit-badge`）: 白い正円に弧状の欧文ラベルと大きな番号、下に朱赤の短文 - **コースカード**（`course-card`）: 淡色の角丸カードにタブ見出し・クラス表・説明・料金ブロック・時間割 - **料金ブロック**（`price-block`）: 濃いオレンジ/青の角丸面に白い角丸ラベルと黄色の大きな価格 - **Q&A吹き出し**（`faq-bubble`）: Qは左寄せ、Aは右にずらした白い吹き出し。緑のずらし影と緑のQ/A - **お客様の声吹き出し**（`voice-bubble`）: 白い角丸の吹き出しを左右交互に置き、ピンク丸のイニシャルアイコンを添える - **ポイントカード**（`point-card`）: 白い角丸カードの左上に弧状の欧文ラベル、番号と見出し、区切り線と写真 - **店舗情報表**（`info-table`）: 左列が水色地に白文字、右列が白地の情報表 ## Do's and Don'ts **Do** - セクションごとに地色をはっきり変える - マスコットと花びらや蝶の装飾を各セクションに散らす - CTA帯は同じデザインで繰り返し入れる - 重要語は朱赤マーカーかピンクの淡マーカーで強調する - カードは濃い同系色のずらし影でポップに見せる **Don't** - 黒や暗い色の重い背景は使わない - 細い明朝体や大人っぽいセリフ体は使わない - 装飾のないフラットな四角見出しにしない - CTAの色を緑以外に変えない - 写真に強いフィルターをかけない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **トップバー**（業種と教室名の告知）: 黄緑の細い帯に白文字1行 2. **ファーストビュー**（季節キャンペーンの訴求）: 多色のロゴ風キャンペーン名、跳ぶ子どもの写真、ピンクの申込案内ラベル 3. **入会特典**（割引特典の提示）: 朱赤のリボン帯と生成り地に大きな割引額 4. **CTA**（無料体験の申込誘導）: ピンク地に緑ピル型ボタンと急かし文 5. **コンセプト**（教室の価値を短いコピーで伝える）: 円弧で抜いた白地に濃青の大キャッチと朱赤のサブ、写真3枚並び 6. **メリット**（体験参加のメリット3つ）: 水色地に黄色リボン見出しと白い円形バッジ3つ 7. **コース紹介**（年齢別コースと料金・時間割）: 色分けした角丸カードに表と料金ブロック 8. **申込方法**（申込手段の案内）: 白地に朱赤の案内文、注釈、手書き風の矢印ラベル 9. **CTA**（再度の申込誘導）: FV下と同じCTA帯 10. **よくある質問**（不安の解消）: 黄緑ストライプ地に白い吹き出しのQ&A 11. **お客様の声**（保護者の体験談）: ピンクストライプ地に左右交互の吹き出し 12. **強み**（教室の強み2つ）: 水色地に円形ポイントバッジと写真付きカード 13. **CTA**（最後の申込誘導）: 斜体の白フチ呼びかけ文とCTA帯 14. **店舗情報・フッター**（所在地と営業時間）: 生成り地に情報表と地図、水色フッター ## Imagery - 写真は体育館で練習する子どもと指導者の自然光の実写 - 跳び箱・鉄棒・マットなど動きのある瞬間を選ぶ - 太い輪郭線のペンギン風マスコットを見出し横に配置 - 桜の花びら・黄色い蝶・たんぽぽの小さなイラストを散らす - FAQとお客様の声の地は縦ストライプ柄 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCも中央に約50%幅の1カラムで、SPのデザインをそのまま使う - セクションの地色とストライプは画面幅いっぱいに広げる - PCではキャッチ部分の円弧が横に広がって大きなアーチになる - 表やカードは最大幅を固定して中央寄せ - 文字サイズはSPとほぼ同じ比率で、相対的に小さく見える ## 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-cb6df1f1`（元 LP の URL から採番） - **元 LP**: https://ogc.sakura.ne.jp/takatsuki/autumn_cp2026/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。