DESIGN.md — コーラル×ネイビーの女性向けオンラインスクールLP（Warm Coral Women's Career School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: やさしい・柔らかい、信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: ピーチ地・コーラルグラデ・ネイビー見出し・白カード・LINE誘導・女性キャリア
• 地の質感: フラットな単色面に、ごく弱い影の白カードを重ねる。CTA帯だけはピンク〜オレンジのグラデーション。
• 形: 角丸4〜8pxの控えめなカード。CTAはピル型。見出しには丸括弧風の装飾を付ける。
• 温度感: 暖色寄り。ネイビーの文字で甘くなりすぎないよう引き締める。

Colors

• 地の色は白・ピーチ・グレー青をセクションごとに交互に使う
• CTA帯はコーラルピンクから黄みオレンジへの横グラデーションで塗る
• 見出しはネイビーにし、キーワードだけをオレンジにする
• コースとプランは、オレンジ・黄・ピンクの帯で区別する
• 主CTAはLINEの緑だけにして、他の用途に緑を使わない
• フッターは濃いネイビーで締める
• button-line-cta は文字 #FFFFFF × 背景 #22C55E のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#178841、4.53:1）を使う。
• cta-band は文字 #2E3F66 × 背景 #EC661C のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#F29460、4.55:1）を使う。

Typography

• 見出しの上に、小さな英字ラベルを字間を広げてオレンジで置く
• 見出しは中央揃えのネイビー。キーワードだけオレンジにする
• 本文は行間を広め（1.8）にしてやさしく見せる
• 特長の番号は、細めの「#01」を大きなコーラルで書く
• 価格の数字だけは大きく太いオレンジにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。講師・コースはPCで2カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは上下64px前後で区切る
• カードは縦に12〜16px間隔で積む
• 悩みは細長いチェック付きカードを縦に並べる
• 解決策は、Q帯→オレンジ線付きの白カード（本文と画像）の順で組む
• LINE CTAの帯は主要セクションの間ごとに挟む

Elevation & Depth

• 白カードはごく薄い影（0 2px 8px rgba(0,0,0,.06)）にする
• CTAカードは影を少し強めにして、グラデ帯から浮かせる
• それ以外はフラットにして、線と地色で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形。講師は円形に切り抜き、淡い色の円を背景に置く
• セクション境界: 直線で地色を切り替える。見出しの左右に細い横線を引く
• カードの上辺に、色帯または2pxのオレンジ線を付ける
• LINEボタンは緑のピル型にし、右に矢印を付ける
• 理由の見出しは丸括弧状の装飾で挟む

Components

• LINE登録ボタン（button-line-cta）: 緑のピル型で、左にLINEの白いラベル、右に矢印。上に小さなリボン見出しを付ける
• グラデCTA帯（cta-band）: コーラル〜オレンジのグラデ帯の上に、白いカード（文言・ボタン・資料イラスト）を置く
• 悩みチェックカード（worry-item）: 白い細長カードにオレンジのチェックを付け、要点に下線マーカーを引く
• コースカード（course-card）: 色帯のヘッダーに、期間を示す丸バッジ。中は対象・内容・目指す姿の3段
• 悩み→解決カード（qa-solution）: グレーのQ帯の下に、オレンジ線付きの白カードを置き、「〇〇で解決」の見出し・本文・画像を入れる
• 講師カード（lecturer-card）: 円形の顔写真、肩書き、名前、ローマ字表記、経歴文を入れた白いカード
• 流れステップ（flow-step）: コーラルの丸番号を付けた白カードを3つ、点線でつなぐ
• 料金プラン表（price-table）: 色帯のヘッダーに大きな価格を置き、機能の有無を○△×のアイコン格子で示す
• 英字ラベル付き見出し（section-label）: 小さなオレンジの英字ラベルの下に、ネイビーの和文見出しを中央揃えで置く

Do's and Don'ts

Do - 地色を白・ピーチ・グレー青の3色で交互に切り替える - 主要セクションの間ごとに同じLINE CTA帯を繰り返す - キーワードはオレンジの文字か黄色マーカーで強調する - 写真は明るく自然光で、笑顔の女性を中心にする - 料金・機能は表やアイコンで一目でわかるように示す

Don't - 黒背景や原色の強いコントラストを使わない - 緑をCTA以外に使わない - 角丸を大きくしすぎてポップに寄せない - 本文を詰めて行間を狭くしない - 見出しを明朝体にしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（価格と提供価値を一目で伝える）: 女性の写真の上に白い帯付きの大きなキャッチを置き、丸バッジ3つで特典を示す
2. CTA（LINE登録を促す）: グラデ帯の上に白カードとLINEボタン
3. 悩みの提起（ターゲットに共感する）: グレー青地に悩みカードを6つ縦に並べ、悩む女性のイラストを添える
4. コンセプト（理念を伝える）: ピーチ地の中央揃え本文に、薄い大きな英字を背景に置く。代表のメッセージカードも入れる
5. 特長（コースとサポートを説明する）: #番号見出しの下に、色分けしたコースカードとサポートカードを置く
6. 選ばれる理由（強みを3つ示す）: 写真と文章を左右交互に並べた白カード
7. 悩み別の解決（具体的な悩みに答える）: 2つのタブボタンで分類し、Q帯と解決カードを繰り返す
8. 講師紹介（専門性で信頼を得る）: ピーチ地に講師カードを2カラムで並べる
9. 入会の流れ（手順を簡単に見せる）: 番号付きのカード3つを横に並べる
10. 料金プラン（プランを比べてもらう）: オレンジとピンクのプラン表を2つ並べる
11. フッター（規約へのリンク）: ネイビー地に白いロゴとリンク

Imagery

• 自然光のオフィスや自宅で働く、30代女性の明るい写真
• 講師は白背景のバストアップを円形に切り抜く
• 悩む人物は線画に淡い色を塗った、フラットなイラスト
• 動画画面・資料などを角丸のモック画像にしてオレンジ地に置く
• 背景に、薄い大きな英字の筆記体をうっすら敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約600〜700px幅のコンテンツを置き、左右に縦書きの英字装飾を入れる
• SPではコースカード・講師カード・料金表を1カラムに積み直す
• 理由のカードは、SPでは写真を上・文章を下にする
• 流れの3ステップは、SPでは縦並びにして縦の点線でつなぐ
• CTA帯はSPで幅いっぱいにし、ボタンも幅いっぱいにする

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 行書くと起動時に読み込まれる。