--- version: alpha name: Navy & Crimson Business Education LP description: 濃紺とロイヤルブルーを地に、深紅を強調とCTAに使った社会人向けオンライン講座の LP。網点入りの線画イラスト、データ図表、比較表を多く使い、信頼感と訴求力を両立させている。 colors: primary: '#264192' dark-section: '#212241' background: '#FFFFFF' background-alt: '#CDD7E0' tint-1: '#EDF5F9' tint-2: '#FDEDCC' cta: '#D21546' on-cta: '#FFFFFF' accent-1: '#F2A100' text: '#1E2235' text-muted: '#778595' accent-2: '#0C9AC4' line: '#AAB9C8' accent-1-accessible: '#A06B00' primary-accessible: '#E9EDF9' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 48px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 64px 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: 44px button-header: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px badge-flag: backgroundColor: '{colors.accent-1}' textColor: '{colors.cta}' typography: '{typography.headline-md}' height: 80px badge-fact: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 52px label-question: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 36px card-testimonial: textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 260px pill-heading: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px compare-table: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' height: 320px step-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 160px discount-banner: backgroundColor: '{colors.primary}' textColor: '{colors.cta}' typography: '{typography.accent}' height: 90px --- # DESIGN.md — 紺×深紅の線画イラスト社会人スクール LP（Navy & Crimson Business Education LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: 信頼・誠実、情報量多め・訴求型、クール・先進的 - **キーワード**: 濃紺・深紅アクセント・網点線画イラスト・データ訴求・グレーブルー地・白カード - **地の質感**: フラットな単色面。イラストに網点スクリーントーン、装飾にぼかしたリング状の円 - **形**: 角丸小さめのカード、ピル型ボタン、縦長カプセル型の画像枠 - **温度感**: クールな寒色が基調。深紅とオレンジで熱量を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#264192` | ブランドの青。大きなパネル・見出し文字 | 12% | 画素の実測 | | `dark-section` | `#212241` | 悩み・データ提起の濃紺セクション | 7% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 | | `background-alt` | `#CDD7E0` | グレーブルーの区切り地 | 13% | 画素の実測 | | `tint-1` | `#EDF5F9` | 地図など淡い水色地 | 6% | 画素の実測 | | `tint-2` | `#FDEDCC` | 助成金訴求の淡いクリーム地 | 3% | 画素の実測 | | `cta` | `#D21546` | 主CTAボタン・強調ラベル | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#F2A100` | オレンジ。サブCTA・小見出し・バッジ | 1% | 推定 | | `text` | `#1E2235` | 見出し・本文の濃い文字 | 2% | 推定 | | `text-muted` | `#778595` | 注釈・出典の灰文字 | 1% | 画素の主要色に補正 | | `accent-2` | `#0C9AC4` | 円グラフの水色 | 1% | 画素の実測 | | `line` | `#AAB9C8` | 表・カードの枠線 | 1% | 画素の主要色に補正 | | `accent-1-accessible` | `#A06B00` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E9EDF9` | AA を満たす補正値（計算） | | 計算 | - 地は白・グレーブルー・濃紺・ロイヤルブルーを交互にしてセクションを区切る - 深紅はCTA、数字の強調、『事実』バッジ、特典ボックスに限る - オレンジは小見出し、サブCTA、スタンプ型バッジに少しだけ使う - 青いパネルの上には白カードを置き、カード内は濃紺文字にする - 本文の強調は深紅の地に白文字のマーカーで示す - グラフは青系の濃淡でまとめ、強調値だけ深紅にする - `button-header` は文字 `#FFFFFF` × 背景 `#F2A100` のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#A06B00`、4.57:1）を使う。 - `badge-flag` は文字 `#D21546` × 背景 `#F2A100` のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#A06B00`、4.52:1）を使う。 - `discount-banner` は文字 `#D21546` × 背景 `#264192` のコントラスト比が 1.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E9EDF9`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVキャッチ | ゴシック | Noto Sans JP | 900 | 30px | 1.35 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.45 | 0.03em | | `headline-md` | 理由・カードの見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `headline-sm` | 小見出し・ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.02em | | `note` | 出典・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 大きな割引数字・割合 | 欧文サンセリフ | Montserrat | 900 | 48px | 1.0 | -0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.04em | - 全体を太めのゴシックで統一する - 数字だけ大きく太くし、%や単位は小さくする - 出典の注番号 [n] を本文の末尾に小さく付ける - 見出しの下に深紅の下線を引いて強調する - 背景に大きく薄い欧文ロゴタイプを敷く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。人物カードは 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 青い大パネルは左右に約5%の余白を残し、中に白カードを縦に積む - 表は横スクロールにして列幅を保つ - フローの各ステップは枠線付きの箱で作り、下向き矢印でつなぐ - データ図はグレーブルーの角丸パネルに入れる ## Elevation & Depth - 白カードは淡く大きい青灰色の影で浮かせる - お客様の声のカードは左上に紺のタブを付け、影を広めにする - フォームとパネルは影なしのフラットにする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 人物は円形か縦長のカプセル型。イラストは上が半円のアーチ枠に入れる - **セクション境界**: 基本は直線で切り替える。悩みセクションの下端だけ下向き三角の吹き出しにする - CTAボタンは右端に>を付けたピル型にする - ラベルは角丸の小さい矩形か吹き出し形にする - バッジは下端がV字の旗形かギザギザのスタンプ形にする ## Components - **主CTAボタン**（`button-primary`）: 深紅のピル型ボタン。白文字で右に矢印を付ける - **ヘッダー2連ボタン**（`button-header`）: オレンジ（説明会）と深紅（申込）のピル型ボタンを並べる - **実績旗バッジ**（`badge-flag`）: 下がV字の黄色からオレンジのグラデ旗。実績の数字を3つ並べる - **円形事実バッジ**（`badge-fact`）: 深紅の円に白文字で理由の頭に置く - **質問吹き出しラベル**（`label-question`）: 紺の横長帯に白文字の設問。左下に尻尾を付ける - **声カード**（`card-testimonial`）: 円形の顔写真を上にはみ出させた白カード。要所を深紅の文字で強調する - **ピル型見出し帯**（`pill-heading`）: 紺の横長ピルに白い見出しを中央寄せで入れる - **比較表**（`compare-table`）: 自社列はオレンジのヘッダーと深紅の枠で囲む。他社列はグレー地に△×を置く - **フローステップ**（`step-box`）: 紺の枠線箱。左上に番号付きの紺丸を置き、右に線画を配置する - **割引バナー**（`discount-banner`）: 左が紺地にアイコン、右が白地に紺枠で深紅の巨大な割引数字 ## Do's and Don'ts **Do** - 主張にはグラフや表などのデータと出典注釈を必ず添える - イラストは紺の線と網点、差し色の赤ネクタイで統一する - 青パネルと白カードの入れ子で情報をまとめる - CTAはフロー、特典、フォームの直前に繰り返し置く - 装飾にはぼかしたリング円を余白にまばらに散らす **Don't** - 深紅を地色として広く使わない（特典ボックスなどは例外） - パステルや暖色の柔らかい写真調にしない - 丸ゴシックや手書き書体を使わない - 大きな角丸や強い立体影を付けない - グラフに多色を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（講座の価値と実績を一目で伝える）: 白地に紺の太字キャッチを置き、右下に網点の線画人物。旗バッジを3つ並べる 2. **公的認定・助成**（信頼性と費用面の安心を伝える）: クリーム地に白いロゴ枠を縦に並べ、続けて割引バナーを置く 3. **紹介動画**（講座の雰囲気を伝える）: ロイヤルブルー地に動画を全幅で埋め込む 4. **問題提起データ**（AIの脅威で危機感を持たせる）: 濃紺地にラベル、大きな数字、円グラフを置く 5. **3つの理由**（学ぶべき根拠を示す）: 円形事実バッジ、見出し、出典、グレーパネルの図表を3回繰り返す 6. **悩みの提起**（読み手の不安に共感する）: 濃紺地に深紅の吹き出し見出し。悩みの文と困る人物の線画を交互に置く 7. **メソッド紹介**（独自の学び方を説明する）: 青パネルにアーチ枠イラストで3手法を並べ、旧来型と新方式の対比カードを続ける 8. **受講者分布・交流**（全国に広がっていることを示す）: 淡水色地にドット地図と色分けの地域ラベル、イベント写真 9. **お客様の声**（成果を実感させる）: 引用カードと動画を左右交互に置き、続けて満足度の円グラフ、顔写真カードを2列 10. **講師紹介・実績**（講師の権威を示す）: グレーブルー地にカプセル型ポートレート、受賞歴の月桂樹枠、SNSリスト、評価表 11. **サポート・比較**（安心感と他社との差を示す）: 青パネル内に白カード3枚。比較表は横スクロールにする 12. **受講の流れ・スケジュール**（申込までの手順と日程を示す）: 枠線ステップを矢印でつなぎ、CTAを置く。日程は青パネルの行リスト 13. **プラン・申込方法**（料金と条件を明示する）: グレー見出し行の定義リスト。特典は深紅のボックスで示す 14. **特典・予約フォーム**（最後のひと押しと予約）: 青パネルに特典カードとスタンプバッジを置く。最後に予約カレンダーのフォーム ## Imagery - スーツのビジネスパーソンを紺の線画で描き、服に網点トーン、赤ネクタイを差し色にする - 人物の背後に紺や淡い青の不定形の塊を敷く - アイコンは青のフラットな線画。PC、チャット、動画などを描く - 人物写真は明るい室内で撮り、円形かカプセル型に切り抜く - 装飾としてオレンジ、深紅、紺のぼかしリングと小さな丸を散らす - グラフはフラットな円グラフや棒グラフにし、中央にアイコンを置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約900px幅でヘッダーにグローバルナビを表示する - データ提起や理由のセクションは、PC では図と文を左右2カラムにする - メソッド、サポート、声カードは PC で3〜2列の横並びにする - 声の引用カードと動画は PC で左右交互の2カラムにする - 料金表は PC で左に見出し列を置く2列テーブルにする - 予約フォームは 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-e6bb8c0c`（元 LP の URL から採番） - **元 LP**: https://member.bbt.ac/aicamp-by-bbt/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。