DESIGN.md — 藤色×桜色の上品な資格スクールLP（Lavender Pink Elegant School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、情報量多め・訴求型
• キーワード: ラベンダー・パステル・明朝見出し・透かし欧文・円形図解・女性向け
• 地の質感: フラットな白地に、淡いピンクと紫のグラデーション帯を重ねる。影はほぼ使わない
• 形: 角丸がほぼない四角いボタンとカード。円形のスキル図解とリボン型ラベルをアクセントにする
• 温度感: やや暖かいパステル。ピンクと藤色が中心

Colors

• 地色は白を基本にし、区切りに薄いグレー（#F6F6F6）と淡いピンクを交互に使う
• CTAの帯はピンクからラベンダーへの横グラデーションにし、紫の四角いボタンを3つ並べる
• スキルや講座ごとに、ピンク・ミント・黄・オレンジ・紫・緑のパステル色を割り当て、番号・タグ・アコーディオンの印も同じ色にそろえる
• 強調文字はピンク、番号やリスト番号は藤紫にする
• 濃い色の面は使わない。いちばん濃いのは本文のグレー
• button-cta は文字 #FFFFFF × 背景 #8383D4 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#6C6CCC、4.51:1）を使う。
• skill-circle は文字 #FFFFFF × 背景 #E58BC0 のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D13490、4.56:1）を使う。
• faq-item は文字 #9B8FD6 × 背景 #FFFFFF のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7868C8、4.55:1）を使う。
• ribbon-label は文字 #FFFFFF × 背景 #5FB5A0 のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#3C8170、4.6:1）を使う。

Typography

• セクション見出しは、薄い藤色の大きな欧文（Playfairの細め）を背後に置き、明朝の和文見出しを右下に少し重ねる
• 見出しの下には、小さな藤色の英語サブタイトルを添える
• 講座番号は「01」のような大きな薄い藤色のセリフ数字にし、講座名と重ねる
• 本文はグレーの細いゴシックで、行間を広めにとる
• 強調語はピンクや藤色の文字色で示し、太字はあまり使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央 700px 程度で、講座紹介は文章と写真の 2 カラム、カードは 3〜4 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの上下に余白を大きくとり、透かし欧文の見出しから始める
• 講座紹介は番号・講座名・説明・時間・色タグ・写真の順で、同じ型を繰り返す
• 講座の詳細は罫線で区切ったアコーディオンを3〜4行並べる
• 説明会CTAのグラデーション帯を、ページ中に3回ほど差し込む
• 料金表は藤色の見出しセルと白いセルの表を、淡い藤色の枠で囲む

Elevation & Depth

• 影はほぼ使わず、淡い背景色と細い枠線で階層を表す
• 白いカードを薄いグレー地に置き、地色の差だけで浮かせる
• スライダーのカードにも影はつけないか、ごく薄い影にとどめる

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は四角く切り抜き、余白を残した明るい構図にする。図解は円形で並べる
• セクション境界: 直線で区切る。見出しラベルには、下端が山形に切れたリボン型（旗型）を使う
• ボタンは角の立った長方形にし、右端に「>」を置く
• スキルは円形の色面で並べ、間を「+」でつなぐ
• 番号は四角い藤色の小さな面に白い文字で入れる
• 特典ラベルは両端が切れ込んだリボン型にする

Components

• 説明会申込ボタン（button-cta）: 藤紫の長方形に白文字。右端に「>」。グラデーション帯の中に3つ並べる
• グラデーションCTA帯（cta-gradient-band）: ピンクからラベンダーへの横グラデーション。白文字の誘導文の下にボタンを置く
• 透かし欧文の見出し（watermark-heading）: 大きな淡い藤色の欧文に、明朝の和文見出しと英語サブタイトルを重ねる
• 円形スキルバッジ（skill-circle）: パステル色の円に白文字のスキル名。「+」でつないで横に並べる
• 講座紹介ブロック（course-block）: 大きな薄い番号・明朝の講座名・説明・色タグに写真を組み合わせる
• 罫線アコーディオン（accordion-row）: 上下を罫線で区切った行。左に色の四角マークと項目名、右に「+」
• FAQ行（faq-item）: 藤色の枠のボックスで、左に藤色の四角に入れた「Q1」、藤色の質問文、右に「+」
• 旗型ラベル（ribbon-label）: 下端が山形に切れた縦長の旗。ピンク・ミント・紫でセクション名を入れる
• 卒業生カード（voice-card）: 人物写真の下に、淡い藤色の地で明朝の見出し・肩書き・名前・本文を入れる
• 特典ボックス（benefit-box）: 淡いピンクの帯に白い箱を置き、上部にピンクのリボンラベル、ピンクの大きな数字を入れる

Do's and Don'ts

Do - 淡いピンク・藤色・白の3色を軸に、明るい印象を保つ - 見出しは必ず「透かし欧文＋明朝の和文」の型にする - 講座ごとのパステル色を、番号・タグ・アコーディオンのマークまで一貫させる - 説明会CTA帯をページ中に繰り返し差し込む - 人物写真は明るい室内で、柔らかい光の自然な笑顔にする

Don't - 黒や原色の濃い面は使わない - ボタンをピル型や大きな角丸にしない - 太い影や立体的な装飾をつけない - 本文に明朝を使わない（見出しだけにする） - 見出しを太いゴシックで強く主張させない

Page Structure

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

1. ファーストビュー（なりたい姿と講座名を示す）: ピンクがかった室内の人物写真を全幅で置き、右側に白い明朝のコピー。右下に紫の旗型バッジを置く
2. 申込特典（申込の後押しをする）: 淡いピンクの帯に白い箱。ピンクのリボンラベルとピンクの見出しを入れる
3. 職業の説明（仕事の内容を理解してもらう）: 透かし見出しと本文の下に、人物を中心に置き、左右に藤色・水色のパネルでスキルとアドバイス内容を並べる図解
4. 身につくスキル（学べる内容を示す）: 左に番号付きのリスト、右にパステル色の円が重なるベン図
5. 活躍の場（将来像を見せる）: グレーの帯に、写真付きの白いカードを横スライダーで並べる
6. 卒業生の声（実績で信頼を得る）: 3列の写真と、藤色地のテキストカード
7. 説明会CTA（説明会へ誘導する）: グラデーション帯に紫のボタンを3つ。このあと動画埋め込みを置く
8. コース概要（学べる内容の全体を示す）: 円形のスキルバッジを「+」でつなぎ、番号付きのメリットと対象者リストを並べる
9. 講座の詳細（各講座を説明する）: 01〜08の番号ブロックと写真。その下に罫線アコーディオン
10. 料金表（費用を明示する）: 藤色の見出しセルの表に、カードブランドのロゴを入れる
11. サポート制度（安心感を与える）: グレー地に、番号付きの白いカードを3列×2段で並べる
12. 説明会の案内（参加のメリットと特典を伝える）: ピンク地にピンクの旗ラベル、括弧で囲んだ3つのポイント、特典ボックス
13. よくある質問（疑問を解消する）: 旗ラベルの下に、枠付きのQ&Aアコーディオンを並べ、その後にCTA帯
14. 代表メッセージ・フッター（代表者の思いと所在地を示す）: グレー地に、代表者の写真と明朝のメッセージ。その下に校舎情報を2列で並べる

Imagery

• 人物は女性を中心にし、明るい室内でパステル調の服装と柔らかい笑顔で撮る
• 背景はピンク・ラベンダー・白の壁にし、トルソーや花などで上品に演出する
• 物撮りはカラーチャートやコスメなど、色鮮やかな俯瞰の写真にする
• 写真は露出を高めにし、彩度をやや抑えた柔らかいトーンにそろえる
• 図解は平面のパステル色の円で作り、細い線と小さな丸でつなぐ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは講座ブロックを写真→番号・講座名→本文の縦積みにする
• スキルの円は3列で折り返し、サイズは64px前後にする
• CTAの3ボタンは縦に並べ、幅いっぱいにする
• 卒業生カード・サポートカードは1列か横スライダーにする
• 透かし欧文は48〜56pxに縮め、はみ出さないようにする
• 料金表は見出しセルを上に置く縦積みにする

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