--- version: alpha name: Academic Green and Burgundy Tutoring LP description: 深緑の帯見出しとえんじのアクセント、くすんだ金を合わせた、落ち着いた知的なオンライン個別指導塾の LP。明朝の見出しと細いゴシックの長い本文を組み合わせ、生成りグレーのカードに情報をたっぷり詰める。 colors: primary: '#1D6A58' dark-section: '#044728' cta: '#731F2F' on-cta: '#FFFFFF' secondary: '#4E463C' accent-1: '#938563' accent-2: '#AA7D01' accent-3: '#456B9C' background: '#FFFFFF' surface: '#F8F8F6' text: '#2B2B2B' line: '#BDB1A6' tint-1: '#D1D9EB' secondary-accessible: '#9E9180' accent-1-accessible: '#9F9170' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.6 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 2px md: 6px lg: 20px full: 999px spacing: unit: 8px card: 14px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' sticky-cta-bar: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px section-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 56px sub-band: backgroundColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 34px gold-marker-heading: textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 28px number-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 32px check-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 140px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 900px step-label: backgroundColor: '{colors.dark-section}' typography: '{typography.label-button}' height: 20px price-button: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 22px campaign-ribbon: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 38px --- # DESIGN.md — 深緑×えんじ×金の明朝系学習塾 LP（Academic Green and Burgundy Tutoring LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: 信頼・誠実、上品・高級、情報量多め・訴求型 - **キーワード**: 深緑の帯見出し・えんじの強調・くすんだ金・明朝見出し・長文の説得・生成りのカード - **地の質感**: フラットな単色面。金のリボンだけ淡いグラデーションを使う。写真は自然光の室内で撮った人物。 - **形**: 角丸はほぼ使わない。四角い帯と細い罫線が中心で、丸は番号や図解のときだけ使う。 - **温度感**: やや寒色寄りの落ち着いたトーンに、金とえんじで少しだけ温かみを加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1D6A58` | セクション見出しの帯（深緑） | 5% | 画素の実測 | | `dark-section` | `#044728` | 固定 CTA と STEP ラベルの濃い緑 | 1% | 画素の実測 | | `cta` | `#731F2F` | 電話 CTA・価格ボタン（えんじ） | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#4E463C` | サブ見出しの帯（こげ茶） | 4% | 画素の実測 | | `accent-1` | `#938563` | くすんだ金の見出し文字・続きを読むボタン | 2% | 画素の実測 | | `accent-2` | `#AA7D01` | お知らせ枠の黄土グラデーション | 1% | 画素の実測 | | `accent-3` | `#456B9C` | 指導の流れの青い帯 | 1% | 画素の実測 | | `background` | `#FFFFFF` | ページの地 | 37% | 画素の実測 | | `surface` | `#F8F8F6` | カードやブロックの生成りグレー | 20% | 画素の実測 | | `text` | `#2B2B2B` | 見出しと本文の文字 | 6% | 推定 | | `line` | `#BDB1A6` | 区切りの罫線 | 1% | 画素の主要色に補正 | | `tint-1` | `#D1D9EB` | 料金表の見出しセル | 0% | 画素の実測 | | `secondary-accessible` | `#9E9180` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#9F9170` | AA を満たす補正値（計算） | | 計算 | - 地は白にし、まとまったブロックは #F7F6F3 のカードに入れる - 大きなセクションの見出しは深緑の全幅帯に白文字で置く - サブ見出しの帯はこげ茶、小見出しは金の四角マーカー（■）と金の明朝文字にする - えんじは電話 CTA・価格・強調語・チェック枠だけに使う - 金はリボン・続きを読むボタン・見出しの傍点に使い、面を大きく塗らない - `number-heading` は文字 `#2B2B2B` × 背景 `#4E463C` のコントラスト比が 1.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#9E9180`、4.6:1）を使う。 - `campaign-ribbon` は文字 `#2B2B2B` × 背景 `#938563` のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#9F9170`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大コピー | 明朝 | Shippori Mincho | 700 | 30px | 1.3 | 0.05em | | `headline-lg` | 緑帯のセクション見出し | 明朝 | Noto Serif JP | 500 | 17px | 1.5 | 0.05em | | `headline-md` | 金マーカー付きの小見出し | 明朝 | Noto Serif JP | 600 | 15px | 1.6 | 0.03em | | `headline-sm` | 番号付きの見出し・カード見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.0em | | `body-md` | 長い本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.9 | 0.02em | | `note` | 注釈・プロフィールの補足 | ゴシック | Noto Sans JP | 400 | 9px | 1.7 | 0.0em | | `accent` | voice 番号・特徴番号の欧文 | 欧文セリフ | Noto Serif JP | 400 | 10px | 1.4 | 0.05em | | `label-button` | ボタンとラベル | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.03em | - 見出しは明朝、本文はゴシックに分ける - 本文は 11px 前後の小さめで、行間を広めにとる - 数字は大きくしてえんじや金で強調する（期間・偏差値・価格など） - 強調語は太字かえんじ色にし、マーカーは使わない - 見出しは中央揃え、本文は左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードの中も縦積みにする - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算） - 緑帯の見出しは画面幅いっぱいに敷く - カードは左右の余白を約 8px にした生成りの面にする - 長文の段落は 1 行空けて区切る - 番号付きの見出しは、正方形の番号ブロックと見出し、下罫線で作る - 横長の表は横スクロールにして『スクロールできます』の注記を添える ## Elevation & Depth - 影はほとんど使わない - カードは影ではなく背景色の差で区切る - スクロールを案内するアイコンにだけ弱い影を付ける ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は横長の長方形で、角丸なし - **セクション境界**: 直線。色帯で切り替える - ボタンは角の立った長方形を基本にする - 価格ボタンだけ角丸 md にする - 強調の枠はえんじの太い線で囲む - 金のリボンは左右の端を切り欠いた帯にする - 図解のときだけ大きな円を使う ## Components - **下部固定の 2 分割 CTA**（`sticky-cta-bar`）: 左がえんじの電話ボタン、右が深緑の申込ボタン - **緑帯の見出し**（`section-band`）: 全幅の深緑帯の中央に白い明朝の見出しを置き、上に小さなリード文を添える - **こげ茶帯の見出し**（`sub-band`）: カード上部に置くこげ茶帯に白文字の見出し - **金マーカーの小見出し**（`gold-marker-heading`）: 金の■に続けて金色の明朝で書く - **番号ブロックの見出し**（`number-heading`）: こげ茶か深緑の正方形に白い数字を入れ、右に太字の見出し、下にグレーの罫線を引く - **えんじ枠のチェックリスト**（`check-box`）: 太いえんじの枠の中に、チェックアイコン付きの効果を 3 行並べる。左上に円形のラベルを添える - **合格者の声のカード**（`voice-card`）: 写真の下に金の voice 番号、明朝の見出し、白い実績ボックス、本文、金の続きを読むボタンを並べる - **STEP ラベル**（`step-label`）: 濃い緑の小さな長方形に白い英字で STEP 番号を入れる - **モニター価格のボタン**（`price-button`）: 打ち消し線の元値の下に置くえんじのボタン。その下に大きなえんじ色の価格を置く - **金のリボン見出し**（`campaign-ribbon`）: 淡い金のグラデーションの帯に明朝の見出しを入れ、両端を切り欠く ## Do's and Don'ts **Do** - 見出しは明朝、帯は深緑かこげ茶にそろえる - 長文はカードに入れて背景色で区切る - 実績や数字はえんじか金で大きく見せる - 講師や生徒は自然光で撮った落ち着いた人物写真にする - 図解はグレーの線画とえんじの一色で描く **Don't** - ビビッドな原色やポップなイラストを使わない - ボタンをピル型にしたり強い影を付けたりしない - えんじを大面積の背景に使わない - 本文を太字だらけにしない - 装飾的なグラデーションを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（専門性と指導形態を伝える）: 講師の写真の下に半透明の濃い帯を敷き、白い明朝の大コピーと金の受賞風エンブレムを置く。下に実績を短く書いた帯を添える 2. **キャンペーン**（期間限定の体験授業へ誘導する）: 金のリボン、えんじの大きな数字、斜線の区切り、丸い特典バッジで構成する 3. **体験の効果**（受講して得られることを示す）: えんじ枠のチェックリストに 3 項目を並べる 4. **お知らせ**（募集状況を伝える）: 黄土色の枠の中に白いボックスを入れて告知文を書く 5. **特徴一覧**（強みを 4 つ見せる）: 緑帯の見出しの下に、金の番号と点線の区切りで 4 行並べる 6. **成果の声と課題解説**（成果を見せ、課題を論理的に説明する）: 生徒の写真に緑枠の吹き出しリストを添え、続けて金マーカーの見出しと長文を並べる 7. **悩みの提起**（共感を得る）: こげ茶帯の下に、グレーのカードでチェック付きの悩みを 4 つ並べる 8. **強みの詳細**（指導法を具体的に示す）: 番号見出し、段階別のこげ茶帯、問答の図解、比較図で構成する 9. **合格実績**（信頼性を示す）: 学部別に大学名をスラッシュでつないで、グレーのカードに並べる 10. **お客様の声**（成功例を見せる）: 写真付きの voice カードを 3 枚縦に並べる 11. **講師紹介**（人柄と経歴を伝える）: 大きなポートレート、明朝の名前、太字の肩書、経歴の本文を並べる 12. **指導の流れ・比較**（カリキュラムを理解してもらう）: 青い帯のステップと、横スクロールの比較表で見せる 13. **利用の流れ**（申込後の手順を示す）: 写真と STEP ラベル、説明を入れたカードを 3 つ並べる 14. **料金・注意事項・申込**（価格を明示して申込につなげる）: 淡い青の見出しセルを持つ表、えんじの価格ボタン、グレーの注意事項カード、フォームの順に置く ## Imagery - 講師や生徒は、明るい室内で自然な笑顔のところを撮る - 人物は黒や紺の服で、落ち着いた背景を選ぶ - 図解はグレーの人型シルエットとえんじの一色で作る - 教材の紙面は少し重ねて斜めに配置した写真にする - スマホを操作する手元写真で申込の流れを表す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 1000px の幅で、帯見出しは全幅にする - PC の特徴一覧や声は、写真を左・本文を右にした 2 カラムにする - PC のステップは画像を左・本文を右にした横並びにする - PC の料金表は横スクロールせず全列を表示する - PC は固定 CTA の代わりにヘッダー右に電話番号と申込ボタンを置く ## 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-36912f80`（元 LP の URL から採番） - **元 LP**: https://darwin-biology.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。