--- version: alpha name: Soft Pink Pastel Toddler Learning Trial LP description: サーモンピンクを軸に、水色・若草・クリーム黄のパステル面でブロックを分けた乳幼児向け教室の無料お試し LP。オレンジのグラデーションボタンと小さなキャラクター装飾で、親しみやすさと申込導線を両立する。体験談が多い訴求型の構成。 colors: primary: '#F09B9E' cta: '#FA9402' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#FDF8F2' tint-1: '#E0F1F9' tint-2: '#EBF4E3' surface: '#F3F0C1' secondary: '#FEEEEF' text: '#333333' accent-1: '#E5404A' accent-2: '#029DE3' accent-3: '#72BD2A' marker: '#FCF26B' line: '#C8CEBE' cta-accessible: '#AC6601' primary-accessible: '#E03137' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 48px 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: 52px section-heading-bar: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px testimonial-bubble: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 60px feature-panel: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 280px cta-banner: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 100px ribbon-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 32px price-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 56px reason-badge: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 36px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 140px faq-grid: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 50px --- # DESIGN.md — ピンク×パステル面の乳幼児教室お試し LP（Soft Pink Pastel Toddler Learning Trial LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: かわいい、やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: サーモンピンク・パステル面分け・オレンジCTA・キャラクター装飾・体験談吹き出し・番号付き理由 - **地の質感**: ほぼフラット。ボタンと見出し帯に弱いグラデーション、ページ両端はクリーム色の地 - **形**: 角丸の小さいパネル、円形の番号・バッジ、リボン型ラベル、丸いアバターアイコン - **温度感**: 暖色寄り。ピンクとオレンジを主に、水色と若草色で温度を和らげる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F09B9E` | ヘッダー帯・リボン・見出し左線のサーモンピンク | 6% | 画素の実測 | | `cta` | `#FA9402` | 申込・検索ボタンのオレンジ | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 本文コンテンツ列の白地 | 36% | 画素の実測 | | `background-alt` | `#FDF8F2` | ページ両端のクリーム地・体験談吹き出しの面 | 12% | 画素の実測 | | `tint-1` | `#E0F1F9` | 教材紹介パネルの水色面 | 6% | 画素の主要色に補正 | | `tint-2` | `#EBF4E3` | 教室紹介パネルの若草色面 | 8% | 画素の実測 | | `surface` | `#F3F0C1` | 途中 CTA バナーのクリーム黄面 | 5% | 画素の実測 | | `secondary` | `#FEEEEF` | フッターエリアの淡ピンク地 | 5% | 画素の実測 | | `text` | `#333333` | 見出し・本文の濃グレー文字 | 2% | 推定 | | `accent-1` | `#E5404A` | 本文中の強調語の赤文字 | 0% | 推定 | | `accent-2` | `#029DE3` | 番号円・教材ラベルの青 | 0% | 画素の実測 | | `accent-3` | `#72BD2A` | 教室側の番号円・ラベルの緑 | 0% | 画素の実測 | | `marker` | `#FCF26B` | 理由番号バッジの黄 | 0% | 画素の実測 | | `line` | `#C8CEBE` | セクション内区切りの点線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#AC6601` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E03137` | AA を満たす補正値（計算） | | 計算 | - 地は白の本文列とクリームの外側の二層で組む - 教材系の内容は水色、教室系の内容は若草色のパネルで色分けする - ブランドの顔はサーモンピンク。ヘッダー・リボン・見出しの左線・料金枠に使う - 申込・検索ボタンだけをオレンジにし、他の要素にオレンジを使わない - 途中 CTA バナーはクリーム黄の面にまとめる - 本文の強調語は赤文字にする。太字との併用は見出し程度にとどめる - フッター周辺は淡ピンクの地に切り替える - `button-primary` は文字 `#FFFFFF` × 背景 `#FA9402` のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AC6601`、4.51:1）を使う。 - `ribbon-label` は文字 `#FFFFFF` × 背景 `#F09B9E` のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E03137`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャンペーンタイトル（多色の丸い文字） | 装飾・ディスプレイ | M PLUS Rounded 1c | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | グレー帯のセクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0em | | `headline-md` | パネル内見出し・理由のタイトル | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0em | | `headline-sm` | 体験談の属性（月齢＋続柄） | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0em | | `body-md` | 本文・吹き出しの体験談 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0em | | `note` | ※注釈・テキストリンク | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0em | | `accent` | 料金の数字 | ゴシック | Noto Sans JP | 700 | 28px | 1.2 | 0em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.3 | 0.02em | - 装飾的な丸文字はファーストビューのタイトルだけに使う - 見出しと本文は太さの違う角ゴシック 1 書体でそろえる - 強調は赤文字で 1 文に 1〜2 か所までにする - 料金は数字だけを大きくし、税込などの注記は小さく横に添える - テキストリンクは青文字＋オレンジの丸矢印アイコンで示す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。2 項目の比較・ステップは SP で縦積み - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 本文は白い中央列に置き、外側はクリーム地にする - セクションは帯見出しで始め、内部は点線で区切る - 体験談はアイコン＋属性＋吹き出しの横並びを繰り返す - 2〜3 セクションごとに CTA バナーを挟む - 『A＋B』の関係は 2 つのパネルをピンクの円形プラス記号でつなぐ ## Elevation & Depth - 影はほぼ使わずフラットにする - CTA ボタンに上明・下暗の縦グラデーションと薄い下影をつける - 見出し帯は白から薄グレーへの横グラデーションにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしの長方形。紹介アイコンは円形に切り抜き、太い色付きの縁をつける - **セクション境界**: 直線と点線で区切る。ファーストビュー下だけ雲形の波線にする - パネル・バナーは小さめの角丸にする - 番号は円形または角丸の正方形にする - ラベルは両端に切り込みのあるリボン型にする - 料金枠はピンクの太線の角丸ボックスにする ## Components - **申込 CTA ボタン**（`button-primary`）: オレンジのグラデーション角丸ボタン。右にキャラクターを小さく添える - **帯見出し**（`section-heading-bar`）: 左にピンクの太線、白から薄グレーのグラデ帯。右端にキャラクターを置く - **体験談吹き出し**（`testimonial-bubble`）: 円形の親アイコン、属性の太字、ベージュの角丸吹き出しを横に並べる - **色分け紹介パネル**（`feature-panel`）: 水色または若草色の角丸パネル。左上に番号円またはラベルを置き、写真と説明を並べる - **途中 CTA バナー**（`cta-banner`）: クリーム黄の角丸面に人物写真・吹き出し・キャラクター・オレンジボタンを横並びで置く - **リボンラベル**（`ribbon-label`）: ピンクのリボン型帯に白文字。円形アイコン写真の下に添える - **料金ボックス**（`price-box`）: ピンクの太枠の角丸ボックスに大きい料金数字と小さな注記を入れる - **理由番号バッジ**（`reason-badge`）: 黄色の正方形に小さな見出し語と大きな数字を縦に並べる - **ステップカード**（`step-card`）: ピンクの円形 STEP 番号、見出し、写真を並べ、カード同士を三角矢印でつなぐ - **Q&A リンクグリッド**（`faq-grid`）: 水色枠の中に小さなイラストと質問文のリンクセルを 3 列で並べる ## Do's and Don'ts **Do** - 教材と教室など 2 本柱の内容は水色と若草色で一貫して色分けする - 各セクション見出しに小さなキャラクターを添える - 体験談は月齢と続柄を属性として必ず添える - CTA ボタンはオレンジのグラデーションで統一する - 写真は親子や先生と子どもの自然な笑顔を使う **Don't** - 濃い色やダークな面を大きく使わない - CTA 以外にオレンジを使わない - 丸文字を本文や小見出しに広げない - 強い影や立体的な装飾を使わない - 強調の赤文字を多用して読みにくくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名と期間を伝え、申込を促す）: 淡ピンクの地に多色の丸文字タイトル、円形の子ども写真、期間バッジ、オレンジ CTA を置き、下端を雲形にする 2. **特典の概要**（お試しで得られる 2 つの内容を一目で示す）: クリームの地に 2 つの円形写真とリボンラベルをプラス記号でつなぎ、中央に期間を大きく出す 3. **お客様の声**（体験者の実感で安心させる）: アイコン＋属性＋吹き出しを点線で区切って 2 件ずつ並べる 4. **キャンペーン内容**（もらえるもの・体験できることを詳しく見せる）: 番号付きの水色パネルと若草色パネルを、ピンクのプラス円でつないで縦に並べる 5. **利用の流れ**（申込から体験までの手順を示す）: 3 ステップのカードを矢印でつなぐ。写真付き 6. **途中 CTA**（受付中であることを伝えて申込を促す）: クリーム黄のバナーにキャラクターとオレンジボタンを置く 7. **サービス紹介**（サービスの構成と月額料金を伝える）: 2 本柱の円形写真とリボン、料金ボックス、動画を入れた色分けパネル 8. **教室の魅力**（保護者の声で通う価値を補強する）: 赤い強調を入れた見出し付きの体験談を並べる 9. **選ばれる理由**（効果の根拠を 3 点で示す）: 黄色の番号バッジ、見出し、写真を左、説明とリンクを右に置き、点線で区切る 10. **教室検索 CTA**（近くの教室を探す行動へつなぐ）: 講師写真、吹き出し、キャラクター、検索ボタンを入れたクリーム黄バナー 11. **研究の根拠**（幼少期の学びの重要性を伝える）: 写真を重ねて置き、ピンクのラベルと短い説明を添える 12. **料金まとめ**（2 本柱を足した月額を提示する）: 2 色のパネルからピンクの点線矢印で料金ボックスへ流す 13. **フッターナビと Q&A**（よくある疑問と各ページへの導線を示す）: 淡ピンクの地にピンクのメニュー枠、水色枠の Q&A グリッド、検索 CTA、関連バナーを置く ## Imagery - 写真は明るい室内の自然光。親子・先生・乳幼児が笑顔でふれあう場面 - 教材は明るいパステル色の冊子を重ねたり広げたりして撮る - シンプルな線の黒いクマのキャラクターを見出しや CTA の横に小さく置く - 保護者アイコンはやわらかいフラットな似顔絵イラスト - 音符など、明るい色の小さなアイコンを写真に重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 640px の白い列と左右のクリーム地。SP は白い列を全幅にする - PC の 2 列パネル・3 列ステップは SP で縦積みにする - 体験談の横並びは SP でも維持し、アイコンを 48px に縮める - 途中 CTA バナーは SP で写真を上、ボタンを全幅で下に置く - Q&A の 3 列は SP で 1 列にする ## 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-f4616a9b`（元 LP の URL から採番） - **元 LP**: http://www.kumon.ne.jp/babykumon/otameshi/index.html?utm_source=yaho?utm_medium=web_ad&utm_campaign=i1211listingy035&wapr=55a47909 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-20、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。