DESIGN.md — くすみパステル×黄色オファーの資格講座LP（Soft Pastel Online Certification LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: やさしい・柔らかい、情報量多め・訴求型、親しみ・手作り感、上品・高級
• キーワード: くすみパステル・女性向け・手書き風・期間限定オファー・スマホ完結・円形バッジ
• 地の質感: 白〜淡いグラデーション地に、紙のような淡いテクスチャとぼかし写真を重ねる
• 形: 円形バッジ、角丸の小さいカード、斜線の\ /で囲む見出し、トゲのある吹き出し
• 温度感: 暖かめ。サーモンピンクとオレンジ黄色で温度を足し、セージグリーンで落ち着かせる

Colors

• 地は白・淡ピンク・淡緑・淡黄を交互に使い、強い原色の地は使わない
• オファーブロックはオレンジ黄色のグラデ枠＋白カードで統一し、ページ内で4回以上同じ形で繰り返す
• 主CTAだけ緑グラデにして、ピンク系の中で目立たせる
• 価格と強調語は赤ピンク、通常価格は取り消し線付きの濃いグレー
• 悩みパートはブルーグレーとモノクロ写真で彩度を落とす
• 見出しのキーワードはサーモンピンクで部分的に色を変える
• button-primary は文字 #ECFEFD × 背景 #2BC58A のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1C825B、4.59:1）を使う。
• feature-ring は文字 #D29E7E × 背景 #FEFEFE のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A8643B、4.58:1）を使う。

Typography

• 見出しは文字ごとに大きさを変え、キーワードだけ大きく色付きにする
• 見出しの上に「\ 短い前置き /」の斜線つき小見出しを置く
• 価格数字は太いゴシックで本文の3倍以上に
• 声の講座名や吹き出しは手書き風書体で親しみを出す
• 本文は字間広め・行間1.9で読みやすく
• 英字スクリプトは薄い色で見出しの背後に重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長バッジ・講座一覧は2〜4列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の地色で区切る
• オファーブロックは画面幅いっぱいの黄枠の中に白カード
• 声カードは左右交互に写真をずらして重ねる
• ステップは円形を左右ジグザグに配置
• 比較表は自社列だけ緑で縦に塗る

Elevation & Depth

• CTAボタンに下方向のやわらかい影
• 写真カード・SNS画面に薄いドロップシャドウ
• 声カードの写真は少し浮かせた影付き
• 円形ステップに淡い影

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真は大きな円や楕円で切り抜き、声は四角に影
• セクション境界: 直線で切り替え。一部はゆるい曲線や円弧
• 特長は細い線のリング付き円バッジ
• トゲ型の吹き出しで暇つぶし要素を表現
• 見出し前置きは斜線で挟む
• ラベルはピンクの小さい角丸タグ

Components

• 期間限定オファー枠（offer-block）: 黄グラデ枠に白カード。上部にタブ、取消線の通常価格→大きな赤価格、左に赤い時間リボン
• 主CTAボタン（button-primary）: 緑グラデのピル型。上段に小さな前置き、右に白い丸矢印、左に割引率のオレンジ丸バッジ
• 円形実績バッジ（badge-circle）: サーモンピンクのグラデ円に白文字で実績を3つ並べる
• 特長リングバッジ（feature-ring）: 白い円に細いピンクの線、強調語をピンクで2列に並べる
• お客様の声カード（voice-card）: 淡黄/淡青グラデの面に手書き風講座名、名前、罫線、本文。写真を角に重ねる
• 斜線前置き見出し（heading-slash）: \ / で挟んだ小見出しの下に大見出し
• 手書き吹き出し（speech-bubble）: 白地に黒い線の楕円吹き出し、下にピンク帯コピー
• 比較表（compare-table）: 自社列を緑で塗り◎○×△で比較、点線の行区切り
• ステップ円（step-circle）: 白い大円にスクリプトのStep番号、説明とピンク帯の強調

Do's and Don'ts

Do - オファーブロックを同じデザインで複数回挟む - キーワードだけ色と大きさを変える - 人物写真は笑顔の女性を明るく使う - 手書き風文字と吹き出しで語りかける - 注釈は小さくグレーでCTA直下に置く

Don't - 鮮やかな原色の地を広く使わない - CTAを緑以外にしない - 見出しを全部同じ書体・サイズにしない - 角の鋭い硬い枠を多用しない - 悩みパート以外を暗くしない

Page Structure

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

1. ファーストビュー（手軽さと実績を一目で伝える）: 淡いグラデ地に笑顔の女性写真、左に大きなコピー、下に円形実績バッジ3つ
2. オファー（限定価格で即申込を促す）: 黄枠オファーブロックと緑CTA
3. メディア・著名人実績（権威付け）: 淡黄地に雑誌表紙を重ね、ピンクタグ付き名前カードを縦に並べる
4. SNSの声（合格者の多さを見せる）: 淡ピンク地にグラデ帯見出し、SNS投稿画像を傾けて2枚
5. 悩みの提起（時間の浪費への共感）: グレー地、吹き出し、モノクロ写真、ブルーグレー帯にトゲ吹き出しアイコン、チェックリスト
6. 解決提示・特長（サービスで解決できると示す）: ピンク帯コピーと明朝の大見出し、円形リング特長6つ
7. お客様の声（体験談で信頼）: 月桂樹の実績エンブレム、左右交互の声カード
8. 講座一覧（選択肢の多さ）: 明朝大見出し＋スマホ画面、写真付き4列グリッドと評価、ピル型の一覧ボタン
9. 料金プラン説明（サブスクの仕組みを説明）: 緑の矢羽根型タイムラインと価格
10. ステップ（受講〜合格の流れ）: ベージュぼかし地に白円をジグザグ配置、画面キャプチャ添え
11. 比較・強み（他社との違い）: 淡緑地、吹き出し見出し、比較表、大きな初回価格
12. 未来像・後押し（理想の自分を想起）: 円形切り抜きの生活写真に吹き出しとピンク帯コピー
13. クロージング・追伸（最後の申込）: オファーブロック、淡緑地に白い影付きカードで追伸文、下線と赤強調

Imagery

• 20〜30代女性の自然光の笑顔写真、スマホを持つカット
• 悩み場面はソファでだらける写真を低彩度・モノクロ寄りに
• 背景はぼかしと淡いパステルグラデを重ねる
• スマホ画面モックで操作感を見せる
• 線画の人物イラストやトゲ吹き出しアイコンをアクセントに
• 金色の月桂樹エンブレムで実績表示
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央にSP幅（約750px）のカラムを置き、左右は淡い地色で埋める
• オファーブロックとCTAはPCでも幅を固定し中央配置
• 講座一覧はPCで4列のまま余白を広げる
• FVの写真は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 行書くと起動時に読み込まれる。