DESIGN.md — くすみピンク×金の女性向けスクールLP（Soft Dusty Pink and Gold Women's Career School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: やさしい・柔らかい、上品・高級、情報量多め・訴求型、かわいい
• キーワード: くすみピンク・金の帯・手書き数字・白カード・淡いグラデーション・キャンペーン訴求
• 地の質感: ざらっとした紙のようなノイズを乗せた淡いグラデーション地。方眼の地紋や、ぼけた光の粒を散らした地も使う
• 形: 大きな角丸カード、ピル型タグ、ポラロイド風に傾けた写真、波形と大きな角丸のセクション境界
• 温度感: 暖かめ（ピンク・ベージュ・金）。そこにグレー青を少し差して落ち着かせる

Colors

• 地は白・クリーム・くすみピンク・ベージュのグラデーションを交互に使い、セクションごとに色を変える
• 見出しは濃いグレーにし、キーワードだけサーモンレッドにする
• 金色は価格・割引・ラベル・下線など、お得さを伝える部分に限って使う
• CTAは鮮やかな緑だけにして、淡い地の上で目立たせる
• カウントダウンは深緑の帯に白文字を置き、数字は白い箱に入れる
• タグはピンクとグレー青の2色を、カテゴリごとに使い分ける
• 本文中の強調は黄色マーカーとサーモンレッドの太字で行う
• button-primary は文字 #FFFFFF × 背景 #2DB24A のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#228738、4.57:1）を使う。

Typography

• 見出しは中央揃えにし、上に斜線で挟んだ小ラベルを置く
• 見出しの中のキーワードだけサーモンレッドにし、少し大きくする
• 数字（割引率・価格）は本文の2〜3倍の大きさにし、単位は小さくする
• 番号は細い手書き風の書体で大きく入れ、色はピンクにする
• 本文は字間を広めにとり、行間は1.8前後にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは中央に縦積み
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは小ラベル→見出し→リード文→コンテンツの順に組む
• カードは左右に4%ずつ余白をとり、白地の角丸で浮かせる
• 悩みと変化のリストは左右に少しずつずらして配置し、リズムを出す
• CTAのまとまり（カウントダウン＋バナー＋ボタン）はページ中で3回くり返す
• 料金は通常価格の表→下向き矢印→割引後の価格の順に縦に流す

Elevation & Depth

• 白カードには下方向にやわらかい影（0 6px 16px rgba(0,0,0,.12)）をつける
• チェックリストの短冊には薄い影をつける
• ポラロイド写真は白い枠と影をつけ、傾けて置く
• CTAボタンには濃い緑の縁取りと軽い影をつける

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は円形または角丸で切り抜く。スキル紹介の写真は円形にして金の細い線で囲む。実績のスクショはピンクの枠に入れる
• セクション境界: 波形、大きな角丸で下側をすぼめる形、中央が下に尖るV字
• タグはピル型で、ピンクまたはグレー青の地に白文字
• 見出しの帯はピル型で、下に吹き出しのしっぽをつける
• 理由を並べるカードは左右が半円の横長カプセル型で、細い赤線で縁取る
• 講師カードは左上だけ大きく角を丸め、右上に金色の名札を置く
• CTAボタンは角丸を小さくした長方形にし、上にピル型のバッジを重ねる

Components

• 緑のCTAボタン（button-primary）: 緑のグラデーションで角丸の長方形。白い太字で2行まで入れ、上辺に白地で緑縁のピル型バッジを重ねる
• カウントダウン帯（countdown-bar）: 深緑の全幅帯。上段にキャンペーン終了までの文言、下段に白い箱に入った数字と日・時間・分・秒
• 斜線で挟む小ラベル（section-eyebrow）: 見出しの上に置く小さな文字。左右を『＼ ／』の斜線で挟む
• チェック付きの短冊（check-strip）: 白地の横長の短冊。左にチェック、キーワードには黄色マーカー。左右に少しずらして縦に並べる
• スキルタグ（skill-tag）: ピル型。ピンクまたはグレー青の地に白文字。折り返して並べる
• 黄色の見出しラベル（label-yellow）: 黄色の長方形を細い線の枠とずらして重ねる。カードの上辺にまたがせて置く
• 番号付きの特長カード（feature-card）: 白い角丸カード。上に線画アイコン、手書きの番号＋見出し、金色の下線で区切った箇条書き
• 割引価格ボックス（price-box）: 淡い黄色の斜めストライプ地。金色の下線、大きな数字
• よくある質問のアコーディオン（faq-item）: 白い角丸の行。左に金色のQ、右に金色の＋
• 金色の吹き出し見出し（gold-heading-pill）: 金色のピル型の帯に白い太字。下にしっぽがあり、金の線で縁取ったボックスにつながる

Do's and Don'ts

Do - 地色はセクションごとに淡い色を切り替え、境界は波形か大きな角丸にする - 強調はサーモンレッド・黄色マーカー・金色の3つだけに絞る - 番号は手書き風の書体で入れ、柔らかさを出す - CTAのまとまりはページ中で複数回くり返す - 人物写真は自然光で明るく、笑顔の女性を使う

Don't - 真っ黒や原色の赤を広い面に使わない - 角ばったシャープなカードを並べない - CTA以外に緑を使わない - 見出しを左揃えの無装飾にしない - 金色を本文の文字色にしない

Page Structure

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

1. ファーストビュー（対象者と価値を一目で伝える）: くすみピンク地に笑顔の女性写真。白枠の縦書きキャッチ、金の帯のサブコピー、円形バッジを3つ並べる
2. 補助金バナーとキャンペーン（お得さと期限を示す）: 白カードに割引率、流れる欧文の帯、カウントダウン、キャンペーンのバナー、緑のCTA
3. 悩みの提起（共感を得る）: 悩む女性の写真と、チェック付きの短冊4つ。下端はV字で閉じる
4. 成果物の実績（習得できるレベルを見せる）: 白い大カードの中に、ピンク枠のタブ付きギャラリー
5. 受講後の変化（理想の未来を描く）: ピンク地にチェックリストと、傾けたポラロイド写真
6. 特長（学び方の3本柱を伝える）: 番号付きの白カードを3枚、縦に並べる
7. 身につくスキル（学習範囲を示す）: 方眼地に、黄色ラベル・円形写真・ピル型タグの入ったカード
8. 選ばれる理由（サポート体制を示す）: カプセル型のカードに線画イラストと箇条書き
9. 講師紹介・お客様の声（信頼を補強する）: グラデーション地のスライダー。左右の矢印と下のドット
10. 料金と比較（価格の妥当性を示す）: 金色の帯の見出し、価格表、矢印、ストライプの価格ボックス、自社列だけ金色の比較表
11. メッセージと補助金の説明（感情面で背中を押す）: ベージュの光の地に左揃えの詩的な文と女性写真。続けて金色の帯と割引額の計算
12. よくある質問（不安を解消する）: 青灰地に白いアコーディオン
13. 特典とクロージングCTA（申込を促す）: 番号付きのタグ型カードを11枚、カウントダウン、緑のCTA、グレー青のフッター

Imagery

• 20〜30代の女性を明るい自然光で撮る。ノートPCを使う在宅のシーン
• 彩度を抑えたベージュ・白系の室内
• 細い線の手書き風イラストで、髪だけサーモンピンクの女性を描く
• PC型の線画アイコンはピンクの淡い面と組み合わせる
• 地にきらめきやぼけた光の粒、紙のノイズを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約80%幅で配置し、背景は全幅にする
• 特長カードはPCで3カラム、スキルカードは2カラムにする
• 悩みのセクションは、PCで写真を左・リストを右に並べる
• 比較表はSPでは横スクロール、PCでは全列を表示する
• 特典の一覧はPCで2カラムにする
• キャンペーンのバナーとカウントダウンは、PCで横長の1枚にまとめる

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