DESIGN.md — 青緑グラデ×黄マーカーのキャリアスクールLP（Blue-Green Gradient Career School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 情報量多め・訴求型、ポップ・元気、信頼・誠実、清潔・爽やか
• キーワード: 青→黄緑グラデーション・黄色マーカー・巨大数字・ドーナツグラフ・黄色線画イラスト・紙吹雪
• 地の質感: フラットな単色面とグラデーション帯。影はほぼなく、紙吹雪で祝祭感を足す
• 形: 角の立った四角カードが基本。CTAと悩み吹き出しはピル型、セクション下端はV字に尖らせる
• 温度感: 明るく前向きでやや暖かい。青緑の清潔感に黄・赤で熱量を加える

Colors

• 白地を基本に、区切りの強いセクションは青→黄緑の左右グラデーション帯で全幅を塗る
• グラデ帯上の文字は白、さらに強調したい語は黄色
• 強調語には下半分だけの黄色マーカーを引く
• 数値・『無料』『半額』は赤〜オレンジのグラデ文字か赤ピンクで大きく
• 見出しの主要語は青→黄緑のグラデ文字にする
• 生成りと淡い黄緑は情報ブロックの地色として交互に使う
• CTAは赤ピンク一色に限定し他要素に使わない
• button-primary は文字 #FEF8FC × 背景 #FD024C のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E40244、4.57:1）を使う。

Typography

• ほぼ全て太ゴシック。細字は本文と注釈のみ
• 一文の中で強調語だけを1.5〜2倍に大きくしてジャンプ率を出す
• 数字は欧文の極太で、単位は小さく添える
• 見出し上に『＼ 短いリード ／』のスラッシュ囲みを置く
• ※注釈は数字の直後に上付きで付け、極小文字で下部にまとめる
• 中央揃えを基本、本文段落のみ左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。実績アイコンのみ 3 列円、タグは 3+2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右約5%の余白で並べる
• グラデ帯は全幅で塗る
• 縦に同型カードを10〜16pxの間隔で積む
• ステップは下向き三角で連結する
• セクション見出しから本文まで24〜32px

Elevation & Depth

• 基本は影なしのフラット
• CTAボタンのみ白縁と下方向の柔らかい影で浮かせる
• 悩み吹き出しはわずかな影付きの白ピル

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物写真は角なしの四角。イラストは白い正円の中に配置。代表写真は斜め三角の淡色面と重ねる
• セクション境界: グラデ帯・暗い写真帯の下端をV字に尖らせる。他は直線切り替え
• カードは角丸なしか極小
• CTAと悩み吹き出しは完全なピル
• 特典カードの左上に黄色三角と白抜き縁取り数字を重ねる
• 実績カードは青→黄緑グラデの太枠

Components

• 主CTAボタン（button-primary）: 赤ピンクのピル。上段に＼特典訴求／の小文字、下段に大きな申込文言。白縁と影
• 黄色マーカー（marker-highlight）: 強調語の下半分に黄色帯を敷く
• 黄色タグ（tag-yellow）: キャリアの選択肢を黄色長方形に入れて並べる
• 番号付き特典カード（benefit-card）: 生成り地。左上に黄色三角と縁取り数字。一部の語をグラデで大きく
• 悩み吹き出し（worry-bubble）: 暗い写真上に白ピルを5つ並べ、水しぶきアイコンを添える
• POINT見出し（point-header）: グラデ帯に『POINT』と大きな番号、矢印、白の見出し
• タイムラインステップ（timeline-step）: 緑/青の帯ラベルの下に白枠ボックス。帯の下中央に小三角
• 実績カード（result-card）: グラデ太枠の白カード。左に顔写真と緑の名前ラベル、右に経歴と巨大な月収数字
• チェックリスト（check-list）: 緑チェック＋小リード＋マーカー付き大きめ語。グレーの区切り線
• ドーナツ実績グラフ（donut-stat）: 赤〜オレンジのリングに極太数字と黄色マーカー

Do's and Don'ts

Do - 数字は大きく極太で、注釈を必ず添える - 強調語には黄色マーカーかグラデ文字を使う - グラデ帯と白・生成り・淡緑のセクションを交互にしてリズムを出す - 同型カードを縦に積み、実績量の多さを見せる - イラストは黄＋黒の線画に統一する - CTAはFV直下とページ末尾など複数回置く

Don't - CTAの赤ピンクを装飾に使わない - カードを大きく角丸にしない - 細い明朝や手書き書体を混ぜない - グラデの向きや色を変えない（常に青→黄緑） - 本文の段落を長く中央揃えにしない - 淡いパステルだけで構成して数値の熱量を落とさない

Page Structure

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

1. ファーストビュー（憧れの働き方と満足度で惹きつける）: 白い背景に笑顔の人物写真。黒地白文字のタグ、極太ロゴ、金色の満足度メダル
2. CTA帯（無料体験へ即誘導）: グラデ帯に黄色リード帯、白見出し、赤ピンクのピルCTA
3. 権威・実績（運営の信頼性を示す）: グラデ見出し、2社ロゴの×表記、緑枠内に取引先ロゴ群
4. 数値実績（成功率で成果を証明）: 巨大ドーナツグラフ＋生成りカードの箇条書き
5. キャリアパス提示（選択肢と無料相談を結びつける）: グラデ帯に黄色タグ5つ、黄文字強調、下端V字
6. 無料・特典（参加メリットを強く押す）: 赤枠ラベル＋赤オレンジ巨大文字、番号付き特典カード5枚
7. 悩みの提起（読者の不安に共感）: 暗い写真背景に白ピル吹き出し5つ、下端V字
8. 理由（POINT）（今学ぶべき根拠）: POINT見出しカード3つ。棒グラフ、他社比較、ドーナツ図
9. 補助金の流れ（費用負担の軽さを説明）: 紙吹雪背景、色分けタイムライン、赤オレンジの大見出し、人物イラスト
10. サポート内容（支援の3ステップを示す）: 淡緑地、黄色吹き出し見出し、白円イラスト＋緑番号、三角で連結
11. お客様の声（具体的な転身事例）: グラデ帯上の白カード、写真＋ビフォーアフター枠＋マーカー付き本文
12. 得られること（相談の価値を列挙）: 緑チェックとマーカー語のリスト
13. 受講生実績一覧（収入成果を量で見せる）: 生成り地にグラデ枠カードを6枚縦積み
14. 監修者・メッセージ・フッター（人の顔で信頼を締める）: グラデ帯に代表2名を左右交互、金線枠のメッセージ、チャコールのフッターと固定CTA

Imagery

• 人物写真は明るい自然光、笑顔、ビジネスカジュアル
• 受講生は正方形の顔写真で親近感重視
• イラストは黄色塗り＋黒線のフラットな人物線画
• 紙吹雪（黄・緑・青・灰）を余白に散らして祝祭感
• グラフは赤〜オレンジのグラデのドーナツと青い棒グラフ
• 満足度は金縁の濃い赤メダルで表現
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央約660pxの1カラムを維持し、SPと同じ構成
• グラデ帯と紙吹雪背景は全幅に広げる
• カード類は中央幅で、左右余白を大きく取る
• PCでは主CTAを画面下に固定表示する
• 文字サイズは1.2倍程度にとどめジャンプ率を保つ

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