DESIGN.md — 紺×深紅の線画イラスト社会人スクール LP（Navy & Crimson Business Education LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、クール・先進的
• キーワード: 濃紺・深紅アクセント・網点線画イラスト・データ訴求・グレーブルー地・白カード
• 地の質感: フラットな単色面。イラストに網点スクリーントーン、装飾にぼかしたリング状の円
• 形: 角丸小さめのカード、ピル型ボタン、縦長カプセル型の画像枠
• 温度感: クールな寒色が基調。深紅とオレンジで熱量を足す

Colors

• 地は白・グレーブルー・濃紺・ロイヤルブルーを交互にしてセクションを区切る
• 深紅は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

• 全体を太めのゴシックで統一する
• 数字だけ大きく太くし、%や単位は小さくする
• 出典の注番号 [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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。