--- version: alpha name: Fresh Green and Magenta Kids Online English LP description: 深緑をブランド色に、マゼンタで強調、黄色で CTA を目立たせる子ども向けオンライン英会話の LP。淡い黄緑と淡いピンクの地で区切り、手描き風の人物イラストと波線マーカーを使って、親しみやすく信頼感のある雰囲気にしている。 colors: primary: '#01523B' on-primary: '#FFFFFF' accent-1: '#DF0580' cta: '#FEF20D' on-cta: '#110A00' secondary: '#FBE41C' background: '#FEFEFE' background-alt: '#F5FEE9' tint-1: '#FDE9EA' surface: '#FFFBFA' accent-2: '#33705E' text: '#070706' marker: '#E8202A' line: '#044E38' typography: display: fontFamily: Dela Gothic One fontSize: 38px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.6 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.8 rounded: sm: 8px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px 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.full}' height: 64px button-secondary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px heading-wave: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px point-box: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px feature-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 64px campaign-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 26px offer-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 260px stat-pie: textColor: '{colors.accent-1}' typography: '{typography.display}' rounded: '{rounded.full}' height: 180px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 42px --- # DESIGN.md — 深緑×マゼンタ×黄の子ども英語教室 LP（Fresh Green and Magenta Kids Online English LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: ポップ・元気、信頼・誠実、清潔・爽やか、親しみ・手作り感 - **キーワード**: 深緑の信頼感・マゼンタの波線強調・黄色ピル CTA・淡い黄緑の地・線画の人物イラスト・POINT 番号付き特長 - **地の質感**: グラデーションは使わず、フラットな単色面。影はほとんど付けない - **形**: 角丸の長方形カードとピル型ボタン。セクション境界は波形か斜めカットの二色ライン - **温度感**: 明るく温かい。緑の落ち着きとピンクの華やかさを両立 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#01523B` | ブランドの深緑（バッジ・ボタン・見出し文字） | 6% | 画素の実測 | | `on-primary` | `#FFFFFF` | 深緑の面に乗せる白文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#DF0580` | マゼンタの強調文字・キャンペーン見出し | 2% | 画素の実測 | | `cta` | `#FEF20D` | 黄色い主 CTA ボタン | 3% | 画素の実測 | | `on-cta` | `#110A00` | CTA 上の黒文字 | 0% | 画素の実測 | | `secondary` | `#FBE41C` | 特長の小見出しに使う黄色いボックス | 2% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白い地 | 40% | 画素の実測 | | `background-alt` | `#F5FEE9` | 淡い黄緑のセクション地 | 23% | 画素の実測 | | `tint-1` | `#FDE9EA` | キャンペーンの淡いピンク地 | 6% | 画素の実測 | | `surface` | `#FFFBFA` | ピンク地の上の白カード | 2% | 画素の実測 | | `accent-2` | `#33705E` | キャンペーン用のくすんだ緑の帯 | 1% | 画素の実測 | | `text` | `#070706` | 見出しと本文の黒文字 | 2% | 画素の実測 | | `marker` | `#E8202A` | 注意書きに使う赤文字 | 0% | 推定 | | `line` | `#044E38` | FAQ やカードの深緑の枠線 | 0% | 画素の実測 | - 地は白と淡い黄緑を交互に置き、キャンペーンのブロックだけ淡いピンクにする - 深緑はブランド色。サブ CTA、特徴バッジ、FAQ の Q の帯、枠線に使う - マゼンタは見出しの一部と数字（%、価格など）の強調だけに使う - 黄色は申込の主 CTA と、POINT の小見出しボックスに限って使う - セクションの区切りには、深緑とマゼンタの二本の斜めカットラインを使う - 注意書きは赤い小さな文字にし、本文とは色を変える ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのロゴ風の大見出し（斜体ぎみの太字） | ゴシック | Dela Gothic One | 900 | 38px | 1.2 | 0.02em | | `headline-lg` | セクションの大見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.6 | 0.05em | | `headline-md` | キャンペーン見出し（マゼンタ・斜体） | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `headline-sm` | POINT ボックスの見出しと、FAQ のセクション見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 12px | 2.2 | 0.03em | | `accent` | POINT.01 などの英字ラベルと % の数字 | 欧文サンセリフ | Montserrat | 700 | 11px | 1.4 | 0.08em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.04em | | `note` | 注釈・著作権表記 | ゴシック | Noto Sans JP | 500 | 10px | 1.8 | 0.0em | - 見出しは中央揃えの極太ゴシック。キーワードだけマゼンタにして、下にマゼンタの波線を引く - 本文は太めのゴシックで、行間を 2.0 以上広く取る - キャンペーン名や数字は斜体ぎみの極太にして勢いを出す - 数字（0円・98% など）は周りの文字の 2〜3 倍の大きさにする - 英字ラベルは深緑の小さな大文字で、字間を広げる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。設備アイコンなどは 2〜3 列 - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - コンテンツは左右に約 28px の余白を取って中央に置く - POINT ブロックは英字ラベル、黄色の見出しボックス、本文、イラストの順で縦に積む - CTA ボタンは画面幅の 85〜90% にする - セクション間は約 70px あける ## Elevation & Depth - 影は基本的に使わず、フラットにする - カードは白い面か枠線で区別する - 動画や写真は角丸だけで、影は付けない ## Shapes - **角丸**: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の長方形、または画面幅いっぱいの横長。イラストは白い地に切り抜く - **セクション境界**: ピンク地の下端は波形にする。その他は深緑とマゼンタの斜めカット二重ラインで区切る - CTA は高さ 60〜80px のピル型で、右端に矢印「>」を付ける - POINT の見出しボックスは角丸 8px の黄色い長方形 - FAQ は深緑の枠線で角丸 8px。左に深緑の Q の帯を付ける ## Components - **黄色ピル CTA**（`button-primary`）: 申込への導線。2 行の文字と右端の矢印 - **深緑ピルボタン**（`button-secondary`）: 動画や詳細ページへの導線。上に人物イラストを乗せる - **波線強調見出し**（`heading-wave`）: 見出しのキーワードをマゼンタにし、下に波線を引く - **POINT 見出しボックス**（`point-box`）: 英字の番号ラベルと、黄色い面に深緑文字の見出し - **特徴バッジ**（`feature-badge`）: FV に 3 つ並べる深緑の角丸ボックス。上にイラストを乗せる - **期間ラベル**（`campaign-label`）: マゼンタの帯に白文字で締切などを示す - **特典カード**（`offer-card`）: 上部が緑の帯の白カード。左に特典名、右に商品写真 - **満足度円グラフ**（`stat-pie`）: マゼンタの大きな % と円グラフを 2 列に並べる - **FAQ アコーディオン**（`faq-item`）: 深緑の枠線、左に Q の帯、右にマゼンタの＋アイコン ## Do's and Don'ts **Do** - 強調はマゼンタの文字と波線でまとめる - 黄色 CTA をページ中に繰り返し置く - 特長ごとに線画イラストか写真を必ず添える - 白と淡い黄緑の地を交互にしてリズムを作る - 数字は大きくマゼンタで見せる **Don't** - グラデーションや強い影を使わない - 黄色を本文や広い背景に使わない - マゼンタを広い面の塗りに使わない（ラベルと円グラフは例外） - 明朝体や細い書体を使わない - 暗い背景のセクションを作らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービス名と価値を一目で伝える）: 右側に子どもの写真。左上に深緑の大きなロゴ風見出し、その下にマゼンタ強調の 2 行コピーと特徴バッジ 3 つ、対象学年 2. **期間限定プログラム**（短期の入門プランを提案する）: ピンクの地に深緑の帯ラベル、マゼンタの大見出し、条件の表、0 円を強調した白カード 3. **キャンペーン**（入会特典で行動を後押しする）: マゼンタの期間ラベル、マゼンタの斜体見出し、緑の帯付きの特典カード、注釈。下端は波形 4. **CTA と実績**（体験申込と信頼の訴求）: 黄緑の地に黄色ピル CTA、波線強調の見出しと短い本文 5. **特長**（サービスの 4 つの特長を説明する）: 白い地に POINT.01〜04 を縦に並べる。黄色い見出しボックス、本文、イラストか写真 6. **動画・満足度**（動画と数字で信頼を補強する）: 横長の埋め込み動画、マゼンタの % を添えた 2 列の円グラフ 7. **利便性**（自宅で受けられる安心感と必要な機材を伝える）: 全幅の写真、波線見出し、深緑枠のカードにアイコン 2 つを＋でつなぐ、深緑ピルボタン 8. **講師紹介**（講師の質を訴求する）: 全幅の写真、波線見出し、本文、イラスト付きの深緑ボタン 9. **スケジュール**（授業時間を示す）: 白いピル型ラベルと深緑の箇条書きを左右に並べ、深緑ボタンを置く 10. **よくある質問**（不安を解消する）: Q の帯付きアコーディオンを 7 項目、その下に黄色 CTA 11. **保護者へのお願い**（利用上の注意を伝える）: 黄色の見出しボックス、親子のイラスト、本文、青いリンク 12. **最終 CTA・フッター**（申込への最後の導線）: 大きな黄色ピル CTA、赤い注意書き、著作権表記 ## Imagery - 人物イラストは太い茶色の線画で、パステル調の塗り。笑顔の子どもと講師を描く - 上半身だけのシンプルなイラストをボタンやバッジの上に乗せる - 写真はヘッドセットを付けてオンライン受講する子どもや講師。自然光で明るく撮る - アイコンは深緑の線の太いシンプルなもの（PC・Wi-Fi など） - イラストの背景に淡い黄緑の円を敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 900px で中央に置き、FV は写真を背景に左側へ文字、右側に満足度の円バッジを置く - PC では POINT を 2 列のグリッドにする - PC では右端に縦型の固定 CTA タブ（深緑・黄）を置く - 見出しは PC だと 1 行にまとめる - キャンペーンカードは 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-b38c5473`（元 LP の URL から採番） - **元 LP**: https://www.eccjr.co.jp/lp/online/ - **解析に使った画像**: 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/）からご連絡ください。