--- version: alpha name: Bright Sky Blue Grid Notebook Education LP description: 水色の地に白い方眼紙風カードを並べた、子ども向け学習教室の生徒募集LP。黄色の教室検索帯とオレンジのボタンがページ全体に繰り返し出てくる。角丸カード、吹き出し型の見出し装飾、STEP番号、Qアコーディオンで、明るく親しみやすい誠実なトーンにまとめている。 colors: primary: '#54C3F1' secondary: '#17A2E7' accent-1: '#FEE45E' cta: '#FE732B' on-cta: '#FEF4E5' background: '#FFFFFF' background-alt: '#F9FDFD' tint-1: '#DCF4FF' tint-2: '#DCF3FD' text: '#1A1A1A' accent-2: '#E5721B' accent-3: '#308FC1' line: '#17A2E7' marker: '#FFE460' accent-2-accessible: '#9F4F12' cta-accessible: '#C74501' secondary-accessible: '#1176A8' typography: display: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' search-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' height: 230px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 52px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 52px sticky-bar: backgroundColor: '{colors.accent-1}' textColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 72px heading-bubble: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px step-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 44px faq-item: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px review-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 330px price-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 230px menu-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 82px --- # DESIGN.md — 水色×黄色の方眼ノート風 学習塾 LP（Bright Sky Blue Grid Notebook Education LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 方眼ノート・水色の地・黄色い検索帯・オレンジCTA・吹き出し見出し・子どもの笑顔 - **地の質感**: 白地に薄い水色の方眼線を敷いたノート風。フラットで影はほぼない - **形**: 角丸12〜16pxの白カード、角丸のボタン、吹き出し型の線で作った見出し装飾 - **温度感**: 明るく爽やか。黄色とオレンジで温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#54C3F1` | ページ地の水色 | 30% | 画素の実測 | | `secondary` | `#17A2E7` | 濃い青（STEP番号・FAQバー・現在地ボタン） | 9% | 画素の実測 | | `accent-1` | `#FEE45E` | 教室検索帯の黄色 | 14% | 画素の実測 | | `cta` | `#FE732B` | 検索・都道府県ボタンのオレンジ | 3% | 画素の実測 | | `on-cta` | `#FEF4E5` | CTA上の白文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | カードの白地 | 23% | 画素の実測 | | `background-alt` | `#F9FDFD` | 方眼カードの淡い地 | 8% | 画素の主要色に補正 | | `tint-1` | `#DCF4FF` | 目次帯・表見出しの淡水色 | 8% | 画素の実測 | | `tint-2` | `#DCF3FD` | 口コミ属性ラベルの淡水色 | 1% | 画素の実測 | | `text` | `#1A1A1A` | 見出し・本文の黒 | 3% | 推定 | | `accent-2` | `#E5721B` | 検索見出しのオレンジ文字 | 0% | 画素の実測 | | `accent-3` | `#308FC1` | 小見出しの青文字 | 1% | 画素の実測 | | `line` | `#17A2E7` | 区切りの青い点線 | 0% | 画素の主要色に補正 | | `marker` | `#FFE460` | 強調語の黄色マーカー | 0% | 画素の主要色に補正 | | `accent-2-accessible` | `#9F4F12` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#C74501` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#1176A8` | AA を満たす補正値（計算） | | 計算 | - 地は水色、内容は白い方眼カードに載せる - 黄色の帯は教室検索専用。数セクションおきに挟む - 主な行動ボタンはオレンジ一色に絞る。サブの行動は濃い青 - 見出しは黒、小見出しと数値の強調は青文字 - 強調したい語には黄色のマーカー線を引く - 目次や表の見出しには淡い水色の面を使う - `search-band` は文字 `#E5721B` × 背景 `#FEE45E` のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#9F4F12`、4.57:1）を使う。 - `button-primary` は文字 `#FEF4E5` × 背景 `#FE732B` のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C74501`、4.51:1）を使う。 - `button-secondary` は文字 `#FEF4E5` × 背景 `#17A2E7` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1176A8`、4.61:1）を使う。 - `sticky-bar` は文字 `#E5721B` × 背景 `#FEE45E` のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#9F4F12`、4.57:1）を使う。 - `step-badge` は文字 `#FEF4E5` × 背景 `#17A2E7` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1176A8`、4.61:1）を使う。 - `faq-item` は文字 `#FEF4E5` × 背景 `#17A2E7` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1176A8`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの募集見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.04em | | `headline-md` | STEP名・口コミの見出し（青） | 丸ゴシック | M PLUS Rounded 1c | 700 | 18px | 1.5 | 0.04em | | `headline-sm` | 目次リンク・カード見出し | ゴシック | Noto Sans JP | 500 | 15px | 1.6 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.04em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | 検索・CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.02em | | `accent` | STEPラベルなどの欧文 | 欧文サンセリフ | Montserrat | 700 | 11px | 1.2 | 0.05em | - 全体をゴシック体で揃え、太字で親しみやすく見せる - 見出しの中の一部の語だけ色を変えて強調する（オレンジまたは青） - 本文は行間を広く（1.8〜1.9）とり、保護者が読みやすくする - 料金などの数値は大きめの太字で表示する - 注釈は※付きの小さな文字で、カードの下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。目次は 2 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算） - 水色の地の上に、左右に約4%の余白をとって白カードを置く - カード内のSTEPや口コミは点線で区切る - 教室検索の黄色帯は画面幅いっぱいに敷く - 下部に検索ボタンの固定バーを常に表示する - 目次は2×2のリンクにして、下線とシェブロンを付ける ## Elevation & Depth - 基本はフラットで、影を使わない - FAQバーにはごく薄い下影を付ける - 固定バーは面の色の差で前面に見せる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸の長方形。人物は切り抜いて、カードからはみ出させる - **セクション境界**: 直線で切り替える（水色→黄色→水色）。カードの角は丸める - ボタンは角丸10px前後のしっかりした四角にする - 郵便番号の入力欄は白い角丸 - 口コミのアイコンは円形に切り抜く - Qアイコンは白い円の中に青文字 ## Components - **教室検索帯**（`search-band`）: 黄色の帯に、斜線で挟んだ見出し・郵便番号の入力欄・オレンジの検索ボタン・テキストリンク2つを並べる。両端に子どもの切り抜き写真を置く - **オレンジ検索ボタン**（`button-primary`）: 虫眼鏡アイコン付きの太字白文字。角丸の四角 - **現在地ボタン**（`button-secondary`）: 濃い青の地に、ピンアイコンと白文字 - **下部固定の検索バー**（`sticky-bar`）: 黄色の帯で、左にオレンジ文字のラベル、右にボタン2つを置く - **吹き出し線の見出し装飾**（`heading-bubble`）: 見出しの下に黒と水色の線を引き、中央を吹き出しのしっぽ状に折る - **STEP番号**（`step-badge`）: 青い角丸の四角に、STEPの欧文と番号を白で入れる。右に青い見出し、下に三角付きの点線 - **Qアコーディオン**（`faq-item`）: 青い角丸のバーに、白丸のQ・白文字の質問・右端の＋を並べる - **口コミブロック**（`review-card`）: 円形のイラストアイコンと青い見出しを置き、本文の右下に淡水色のピル型属性ラベルを付ける - **料金表**（`price-table`）: 見出し行は淡水色、左列は青地に白文字。数値は大きな太字で、セルは点線で区切る - **魅力メニューカード**（`menu-card`）: 白い横長カードの左に写真、中央に見出し、右に青の虫眼鏡アイコンを置く ## Do's and Don'ts **Do** - 教室検索の導線は黄色帯と固定バーで何度も見せる - 内容は必ず白い方眼カードの上に載せる - 強調は青文字・オレンジ文字・黄色マーカーの3つに限る - 子どもと講師の明るい笑顔の写真を使う - 料金や手順は表やSTEP形式で整理して見せる **Don't** - 暗い色や重い影を使わない - オレンジを検索・申込以外のボタンに使わない - 明朝体や細い書体で堅く見せない - グラデーションや写真をページ全体の背景に敷かない - 1セクションの本文を長く詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（募集の告知と、学べる教科を示す）: 方眼の白カードに、大きな黒の太字見出しと3色の教科バッジを置き、子どもと講師の切り抜き写真を添える 2. **教室検索**（最寄りの教室探しに誘導する）: 黄色帯に郵便番号の入力欄・オレンジボタン・リンクを並べる 3. **価値訴求バナー**（学習で得られる変化を伝える）: 青い方眼地の中央に大きなコピーを置き、周りを白い吹き出し4つで囲む 4. **魅力メニュー**（詳しいコンテンツへ案内する）: 写真付きの白い横長カードを縦に並べる 5. **CMバナー**（認知と話題性を伝える）: ロゴ風の大見出しと人物写真を組み合わせた角丸バナー 6. **目次**（費用不要を訴求し、ページ内を案内する）: 淡水色の帯に斜線で挟んだコピーを置き、その下に2×2のリンクを並べる 7. **学習の流れ**（入会までの手順を示す）: STEP番号付きの4段を、点線と三角でつなぐ 8. **月額会費**（料金を明確にする）: 青と淡水色の表に注釈を添える 9. **お客様の声**（保護者の実感を伝える）: アイコンと青い見出しの口コミを、点線で区切って3件並べる 10. **よくある質問**（不安を解消する）: 青いQアコーディオンを6件並べる 11. **見学CTA・フッター**（見学に誘導し、会社情報を示す）: 水色の地に白文字と白枠のピル型ボタンを置き、その下にリンクとコピーライトを並べる ## Imagery - 白背景で撮った子どもの全身写真を切り抜き、腕を上げて跳ねる元気なポーズにする - 講師役は白衣風の制服で、満点の答案を持って笑顔 - 口コミのアイコンは、保護者の線画イラストを円形の淡水色の中に入れる - 背景は薄い水色の方眼線でノートを表現する - 吹き出しや斜線などのシンプルな線の装飾を添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約75%幅のカードを置く。水色の地はそのまま - PCではFVを写真右・見出し左の横組みにする - 魅力メニューはPCで5列のカードにする - 学習の流れと口コミは、PCで横並びの2〜3列にする - 検索バーはPCで右端の縦型固定タブにする - 検索帯はPCで入力欄とリンクを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-9440d12b`（元 LP の URL から採番） - **元 LP**: https://www.kumon.ne.jp/dmd/lp/ - **解析に使った画像**: 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/）からご連絡ください。