--- version: alpha name: Pop Pastel Kids Sports Club Campaign LP description: 水色・黄緑の縦ストライプ・ピンクのストライプでセクションごとに地色を切り替える、にぎやかな子ども向けスクールの入会キャンペーンLP。黄色の傾いた帯見出し、丸いメリットバッジ、角丸の白カード、マスコットキャラと桜の花びら・蝶の装飾で、親しみと元気さを出している。主CTAは黄緑グラデのピル型ボタンで、ピンクの帯の中に何度も置く。 colors: primary: '#68BCE1' secondary: '#01B0DD' background: '#FEFEFE' background-alt: '#F8F6E9' tint-1: '#F6C7C7' accent-1: '#D3CB42' tint-2: '#B6C42E' cta: '#8DB02A' on-cta: '#FFFFFF' marker: '#FBF364' accent-2: '#D66355' accent-3: '#F39901' text: '#0E6BB2' text-body: '#4A4647' cta-accessible: '#657F1E' accent-3-accessible: '#985F01' accent-2-accessible: '#CF4938' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.5 label-button: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 14px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 56px heading-band: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 56px benefit-card: backgroundColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 150px merit-badge: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 120px price-box: backgroundColor: '{colors.accent-3}' textColor: '{colors.marker}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 110px faq-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 70px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 300px notice-highlight: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 22px info-table: backgroundColor: '{colors.primary}' typography: '{typography.body-md}' height: 46px --- # DESIGN.md — 水色×黄緑×桃色のポップな子ども体操教室LP（Pop Pastel Kids Sports Club Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 子ども向け・パステル多色・キャンペーン訴求・マスコット・傾いた帯見出し・縦ストライプ地 - **地の質感**: ベタ塗りの面と、淡い縦ストライプ柄の地を交互に使う。黒っぽいオフセット影を付けたカードや帯で、シールを貼ったような質感を出す。 - **形**: 角丸の大きいカード、円形のバッジ、ピル型ボタン、少し傾けた平行四辺形の帯見出し。 - **温度感**: 明るく暖かい。原色寄りのパステルで楽しげ。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#68BCE1` | メインの水色セクション地 | 22% | 画素の実測 | | `secondary` | `#01B0DD` | 特典カードの濃い水色 | 8% | 画素の実測 | | `background` | `#FEFEFE` | 白の基本地・カード地 | 26% | 画素の実測 | | `background-alt` | `#F8F6E9` | 生成りの基本情報・フッター上地 | 9% | 画素の実測 | | `tint-1` | `#F6C7C7` | CTA帯・お客様の声のピンク地 | 9% | 画素の実測 | | `accent-1` | `#D3CB42` | 商品紹介ボックスのからし黄緑 | 7% | 画素の実測 | | `tint-2` | `#B6C42E` | FAQの黄緑ストライプ地 | 6% | 画素の実測 | | `cta` | `#8DB02A` | 主CTAボタンの黄緑 | 1% | 推定 | | `on-cta` | `#FFFFFF` | CTAボタン上の白文字 | 0% | 画素の主要色に補正 | | `marker` | `#FBF364` | 帯見出し・期限バーの黄色 | 2% | 画素の実測 | | `accent-2` | `#D66355` | 強調文字・リボンのサーモン赤 | 2% | 画素の実測 | | `accent-3` | `#F39901` | 料金ボックスのオレンジ | 2% | 画素の実測 | | `text` | `#0E6BB2` | 見出しの濃い青文字 | 1% | 画素の実測 | | `text-body` | `#4A4647` | 本文の濃いグレー | 1% | 画素の実測 | | `cta-accessible` | `#657F1E` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#985F01` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#CF4938` | AA を満たす補正値（計算） | | 計算 | - セクションごとに水色・白・黄緑ストライプ・ピンクストライプ・生成りと地色を切り替え、区切りを色で示す。 - 主CTAは必ずピンク地の帯に置き、黄緑ボタンで目立たせる。 - 黄色は帯見出しと期限バーにだけ使い、金額や特典名は黄色文字を濃い水色の上に乗せる。 - 強調語はサーモン赤、通常の見出しは濃い青で、1つの見出しの中で2色を混ぜる。 - お客様の声の強調は淡いピンクのマーカー、注意文の強調はサーモン赤の地に白文字。 - 写真の上以外では多色のグラデーションを使わない。 - `button-primary` は文字 `#FFFFFF` × 背景 `#8DB02A` のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#657F1E`、4.56:1）を使う。 - `price-box` は文字 `#FBF364` × 背景 `#F39901` のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#985F01`、4.56:1）を使う。 - `notice-highlight` は文字 `#FFFFFF` × 背景 `#D66355` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#CF4938`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーンタイトルとキャッチの大見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 36px | 1.3 | 0.02em | | `headline-lg` | 帯見出し（メリット・コース紹介・FAQなど） | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.3 | 0.05em | | `headline-md` | カードの見出し・特典名 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-sm` | バッジ内の短い説明・Q見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.4 | 0.0em | | `body-md` | 本文・回答・声の文章 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.05em | | `accent` | 料金の大きな数字 | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.1 | 0.0em | | `note` | 注釈・期限表記 | ゴシック | Noto Sans JP | 500 | 10px | 1.5 | 0.0em | | `label-button` | CTAボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.2 | 0.05em | - 見出しは極太で、白フチや影を付けてシール風に見せる。 - 1つの見出しの中で強調語だけをサーモン赤にし、ほかは濃い青にする。 - 金額の数字は単位より2倍近く大きくする。 - 本文は行間を広め（1.8〜2.0）にして読みやすくする。 - 欧文ラベル（MERIT・POINT）は小さく弧を描くように配置する。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。メリット・強みのバッジだけ 3 列。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右に約5%の余白を取り、画面幅の90%前後にする。 - セクション見出しの横にマスコットを重ねる。 - 特典カードは縦に積み、間を12px程度空ける。 - 料金表と時間割はカードの中に入れ子にする。 - CTA帯は3回ほど繰り返し、毎回、下に注意文を2行添える。 ## Elevation & Depth - カードとバッジは右下に濃い色のオフセット影（ぼかしなし、4px程度）を付ける。 - 帯見出しには黒っぽい影の平行四辺形を重ねる。 - CTAボタンは下に濃い影を付けて立体的にする。 - FAQの吹き出しには濃い緑の影を付ける。 ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形を白カードの中に収める。 - **セクション境界**: 基本は直線で色を切り替える。キャッチ部分だけ上辺に大きな弧を付ける。 - メリット・強みは白い円形バッジにする。 - 帯見出しは平行四辺形を少し傾け、両端に点を置く。 - お客様の声は吹き出しの尾が付いた角丸カードにする。 - 名前の部分は円形にする。 ## Components - **主CTAボタン**（`button-primary`）: 黄緑グラデのピル型ボタン。右端に白丸の再生アイコンを置き、左にマスコットを重ねる。 - **傾き帯見出し**（`heading-band`）: 黄色の平行四辺形に濃い影を重ね、青やサーモン赤の極太文字を載せる。 - **特典カード**（`benefit-card`）: 濃い水色の角丸カード。黄色の特典番号、白文字の説明、黄色の期限バーを載せる。 - **円形メリットバッジ**（`merit-badge`）: 白い円に、弧状の欧文ラベル、大きな番号、3行の短い説明を入れ、青い影を付ける。 - **料金ボックス**（`price-box`）: オレンジまたは水色の角丸の箱。左に白いラベル、右に黄色の大きな金額を並べる。 - **Q&A吹き出し**（`faq-bubble`）: 白い角丸の吹き出し。Qは左寄せ、Aは右にずらして置く。文頭に黄緑のQ/Aを付ける。 - **お客様の声カード**（`voice-card`）: 白いカードにピンクの影。横にピンクの円形でイニシャルを置き、左右交互に配置する。 - **注意文の強調**（`notice-highlight`）: CTAの下に置く2行の注意文。強調語だけサーモン赤の地に白文字にする。 - **基本情報表**（`info-table`）: 左の見出しセルを水色地に白文字、右を白地にした表。 ## Do's and Don'ts **Do** - セクションごとに地色や柄を変え、元気なリズムを作る。 - 見出しの横にマスコットのイラストを添える。 - 空きスペースに桜の花びらや蝶の小さな装飾を散らす。 - 特典・料金・期限を数字で大きく見せる。 - CTAはピンクの帯に入れて、何度か繰り返す。 **Don't** - 暗い地色や落ち着いたモノトーン中心にしない。 - 細い明朝体を使わない。 - カードの影をぼかしにしない（オフセットのベタ影にする）。 - CTAを黄緑以外の色にしない。 - 装飾を本文の上に重ねない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **告知バー**（専門性を一言で伝える）: 黄緑の細い帯に白文字を1行。 2. **ファーストビュー**（キャンペーンを告知する）: ロゴ、多色の極太タイトル、子どもの写真のコラージュ。花形の周年バッジと円形の特典バッジを重ねる。 3. **限定特典の帯**（割引を即座に伝える）: サーモン赤のリボン見出しの下に、生成り地で割引率を大きく表示する。 4. **特典一覧**（5つの特典を見せる）: 黄色バッジ付きの見出しの下に、濃い水色の特典カードを縦に積む。 5. **記念グッズ紹介**（物販を案内する）: からし黄緑の角丸ボックスに、リボン見出しと商品写真のグリッド、価格を入れる。 6. **CTA**（無料体験へ誘導する）: ピンク地にピンクのラベル、黄緑のピル型ボタン、強調付きの注意文を置く。 7. **キャッチコピー**（体験の価値を伝える）: 上辺が弧の白地に、青い極太の2行コピーと赤い副見出し。下に写真を3枚並べる。 8. **メリット**（体験参加の利点を示す）: 水色地に帯見出しと円形バッジを3つ並べる。 9. **コース紹介**（料金と時間を示す）: コースごとに色の違う角丸カード。料金ボックスと時間割の表を入れる。 10. **申込方法**（申込の手順を案内する）: 白地にサーモン赤の文字。下はピンクのCTA帯につなげる。 11. **よくある質問**（不安を解消する）: 黄緑の縦ストライプ地に、Q&Aの吹き出しを互い違いに置く。 12. **お客様の声**（信頼感を作る）: ピンクのストライプ地に、声カードを左右交互に並べる。 13. **強み**（実績・施設・講師を伝える）: 水色地に円形のPOINTバッジを3つ。その下に番号見出し付きの写真カードを3枚。 14. **基本情報・フッター**（所在地と連絡先を示す）: 生成り地にロゴ、情報表、地図。最後に水色のフッター。 ## Imagery - 明るい体育館で、笑顔の子どもが運動している写真。 - 大人数の集合写真やスタッフの写真で、実績と人柄を見せる。 - 太い輪郭線のペンギン風マスコットを、見出しごとにポーズを変えて添える。 - 桜の花びらと黄色い蝶のフラットなイラストを散らす。 - 商品は白背景の切り抜き写真にする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでもSPと同じ縦長の1カラムを中央に置き、幅は約500〜700px。 - 地色の帯は全幅に伸ばす。 - PCの特典カードは横長にし、左に特典番号、右に内容を置く。 - PCの記念グッズは商品写真を横に並べる。 - PCの写真3枚は、横スクロールのスライダー表示にする。 ## 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-62898c5d`（元 LP の URL から採番） - **元 LP**: https://ogc.sakura.ne.jp/cp/lp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。