--- version: alpha name: Lavender Pink Elegant School LP description: 白地に薄いラベンダーとピンクのグラデーション帯を重ねた、女性向け資格スクールのLP。見出しの背景には大きく薄い欧文セリフを敷き、明朝体の見出しとカラフルな円形のスキル図解で、上品さと華やかさを両立させている。 colors: primary: '#9B8FD6' on-primary: '#FFFFFF' cta: '#8383D4' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F6F6F6' tint-1: '#F4E0EC' tint-2: '#F2ECF9' accent-1: '#E58BC0' accent-2: '#5FB5A0' text: '#333333' text-body: '#555555' secondary: '#F5E4EA' line: '#CFCBE6' cta-accessible: '#6C6CCC' accent-1-accessible: '#D13490' primary-accessible: '#7868C8' accent-2-accessible: '#3C8170' typography: display: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Playfair Display fontSize: 56px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px cta-gradient-band: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 200px watermark-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px skill-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 72px course-block: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-md}' height: 260px accordion-row: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 36px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 48px ribbon-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 60px voice-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 360px benefit-box: textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 90px --- # DESIGN.md — 藤色×桜色の上品な資格スクールLP（Lavender Pink Elegant School LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: 上品・高級、やさしい・柔らかい、かわいい、情報量多め・訴求型 - **キーワード**: ラベンダー・パステル・明朝見出し・透かし欧文・円形図解・女性向け - **地の質感**: フラットな白地に、淡いピンクと紫のグラデーション帯を重ねる。影はほぼ使わない - **形**: 角丸がほぼない四角いボタンとカード。円形のスキル図解とリボン型ラベルをアクセントにする - **温度感**: やや暖かいパステル。ピンクと藤色が中心 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#9B8FD6` | ブランドの藤紫（ボタン・番号・バッジ） | 3% | 推定 | | `on-primary` | `#FFFFFF` | 紫ボタン上の文字 | 0% | 画素の主要色に補正 | | `cta` | `#8383D4` | 説明会申込ボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地色 | 54% | 画素の実測 | | `background-alt` | `#F6F6F6` | スライダー・サポート欄の薄いグレーの帯 | 8% | 画素の実測 | | `tint-1` | `#F4E0EC` | 特典・説明会セクションの淡いピンク地 | 5% | 画素の実測 | | `tint-2` | `#F2ECF9` | 図解パネル・お客様の声カードの淡い藤色地 | 4% | 画素の実測 | | `accent-1` | `#E58BC0` | 特典ラベル・強調文字のピンク | 0% | 推定 | | `accent-2` | `#5FB5A0` | フロー見出しリボンのミントグリーン | 0% | 推定 | | `text` | `#333333` | 見出しの文字 | 1% | 推定 | | `text-body` | `#555555` | 本文の文字 | 1% | 推定 | | `secondary` | `#F5E4EA` | 透かし欧文の淡い藤色 | 1% | 画素の主要色に補正 | | `line` | `#CFCBE6` | アコーディオン・カードの枠線 | 0% | 推定 | | `cta-accessible` | `#6C6CCC` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#D13490` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#7868C8` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#3C8170` | AA を満たす補正値（計算） | | 計算 | - 地色は白を基本にし、区切りに薄いグレー（#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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチコピー | 明朝 | Shippori Mincho | 500 | 26px | 1.5 | 0.05em | | `accent` | 見出しの背後に敷く大きな透かし欧文 | 欧文セリフ | Playfair Display | 400 | 56px | 1.0 | 0.0em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 500 | 20px | 1.5 | 0.05em | | `headline-md` | 講座名・小見出し | 明朝 | Noto Serif JP | 500 | 17px | 1.5 | 0.03em | | `headline-sm` | カードの見出し・リスト見出し | ゴシック | Noto Sans JP | 500 | 15px | 1.6 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.03em | | `note` | 注釈・英文の副見出し | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 500 | 14px | 1.4 | 0.05em | - セクション見出しは、薄い藤色の大きな欧文（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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-1af16ac8`（元 LP の URL から採番） - **元 LP**: https://www.lapis234.com/imageconsultant/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。