--- version: alpha name: Soft Pink Career School Seminar LP description: コーラルピンクを主役に、水色・生成り・淡いピンクの地色をセクションごとに切り替える女性向けオンラインスクールの無料セミナー誘導LP。線画イラストの吹き出しで悩みを描き、ターコイズのピル型CTAを何度も配置する。 colors: primary: '#FE6379' secondary: '#FCA3A9' cta: '#28BFCF' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F8F5E6' tint-1: '#FDEFEF' tint-2: '#DCEDF7' surface: '#F6F1EB' accent-1: '#4B8C9C' accent-2: '#CD998A' text: '#333333' text-muted: '#928F8D' line: '#F2B6BA' cta-accessible: '#1B828D' secondary-accessible: '#EC0817' primary-accessible: '#ED0223' accent-1-accessible: '#447E8D' typography: display: fontFamily: Zen Maru Gothic fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 34px fontWeight: 600 lineHeight: 1.1 label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 6px md: 14px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px section-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 90px benefit-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 200px worry-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 100px timeline-step: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 40px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 150px fact-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 330px label-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 22px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 70px --- # DESIGN.md — ピンク×水色のやさしい女性向けスクールLP（Soft Pink Career School Seminar LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: やさしい・柔らかい、かわいい、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: コーラルピンク・ターコイズCTA・線画イラスト・淡色の地色切替・特典カード・女性のキャリア - **地の質感**: フラットな淡色面に水彩風の淡いグラデーションを一部に使う。影はほぼなし。 - **形**: 角丸カード、ピル型ボタン、円形の写真とバッジ、下向き三角付きの見出し帯。 - **温度感**: 暖かく柔らかい。ピンクと生成りで親しみ、水色で落ち着きを補う。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FE6379` | 見出し帯・強調・番号 | 5% | 画素の実測 | | `secondary` | `#FCA3A9` | セクション見出し帯の淡ピンク | 3% | 画素の実測 | | `cta` | `#28BFCF` | 主CTAボタン | 2% | 推定 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の地色 | 33% | 画素の実測 | | `background-alt` | `#F8F5E6` | 理由セクションの生成り地 | 11% | 画素の実測 | | `tint-1` | `#FDEFEF` | 特典カード・提案セクションの淡ピンク | 7% | 画素の実測 | | `tint-2` | `#DCEDF7` | 誤解セクションの水色地 | 8% | 画素の実測 | | `surface` | `#F6F1EB` | 講師紹介のベージュ地 | 10% | 画素の実測 | | `accent-1` | `#4B8C9C` | 悩み・誤解の青緑見出し/バッジ | 2% | 画素の実測 | | `accent-2` | `#CD998A` | スキル円の線・テラコッタ | 1% | 画素の実測 | | `text` | `#333333` | 見出し・本文 | 5% | 推定 | | `text-muted` | `#928F8D` | 講師ローマ字名 | 0% | 画素の実測 | | `line` | `#F2B6BA` | 見出し下線 | 0% | 推定 | | `cta-accessible` | `#1B828D` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#EC0817` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#ED0223` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#447E8D` | AA を満たす補正値（計算） | | 計算 | - 地色は白・生成り・ベージュ・淡ピンク・水色をセクション単位で切り替える - 強調語・番号・見出し帯はコーラルピンクに統一 - CTAだけはターコイズにして、ピンクの画面で目立たせる - 悩み・誤解パートは水色地＋青緑文字で冷静なトーンにする - 本文は濃いグレーで、純黒は使わない - 写真の上の文字にはピンクのベタ帯を敷く - `button-primary` は文字 `#FFFFFF` × 背景 `#28BFCF` のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1B828D`、4.54:1）を使う。 - `section-band` は文字 `#FFFFFF` × 背景 `#FCA3A9` のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#EC0817`、4.55:1）を使う。 - `timeline-step` は文字 `#FFFFFF` × 背景 `#FE6379` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#ED0223`、4.53:1）を使う。 - `fact-card` は文字 `#4B8C9C` × 背景 `#FFFFFF` のコントラスト比が 3.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#447E8D`、4.55:1）を使う。 - `label-pill` は文字 `#FFFFFF` × 背景 `#FE6379` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#ED0223`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大コピー（白抜き円＋ピンク文字） | 丸ゴシック | Zen Maru Gothic | 700 | 30px | 1.4 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.5 | 0.05em | | `headline-md` | 理由の番号付き見出し・カード見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.5 | 0.03em | | `headline-sm` | 特典名・リスト項目 | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 肩書き・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 特典番号（斜体の大数字）・英字ラベル | 欧文サンセリフ | Montserrat | 600 | 34px | 1.1 | 0.0em | | `label-button` | CTAボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.03em | - 見出しは中央揃え、2行に分けて改行位置を調整する - セクション帯は英字ラベル＋日本語見出しの2段にする - 特典番号はピンクの斜体大数字にする - 強調語はピンク文字か、ピンク地の白抜き帯にする - 本文は詳細部分で左揃え、導入文は中央揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。職種紹介とメディア掲載は 2〜3 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右に約18pxの余白を取る - CTAは主要セクションの終わりごとに置く - 理由パートは見出し＋全幅下線＋左写真・右本文の2列 - 講師紹介は名前→円形写真→本文→メディア3列の順 ## Elevation & Depth - 基本はフラットで影なし - CTAの下に濃いターコイズの薄い影をつけ、立体感を出す - 書類の画像だけに軽いドロップシャドウ ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 講師は円形、事例写真は角丸の矩形、紹介写真は四角 - **セクション境界**: 見出し帯の下に下向き三角。悩みセクションは下端をV字に切る - カードは角丸14〜20px - 番号・日数は円形のピンクバッジ - お客様の声は太めのピンク枠で囲う ## Components - **主CTAボタン**（`button-primary`）: ターコイズのピル型。白文字2行で下に影 - **セクション見出し帯**（`section-band`）: 全幅の淡ピンク帯に英字と日本語の見出し。下に三角 - **特典カード**（`benefit-card`）: 淡ピンクの角丸カード。斜体の大きな番号＋見出し＋画像 - **悩み吹き出し**（`worry-bubble`）: 線画の人物と手描き風の楕円吹き出しを左右交互に置く - **日数タイムライン**（`timeline-step`）: ピンクの円バッジを縦線でつなぎ、右に項目を書く - **お客様の声カード**（`voice-card`）: ピンク枠の白カード。番号ラベル＋成果の見出し＋写真を左右交互 - **誤解の実態カード**（`fact-card`）: 水色地の上の白カード。青緑のピル型ラベル＋見出し＋区切り線＋本文 - **ピンクのラベル**（`label-pill`）: メディア掲載やスキル名を示す小さなピンクのピル - **FAQ項目**（`faq-item`）: ピンクの丸Q/Aアイコン、下線付きの太字質問 ## Do's and Don'ts **Do** - CTAはターコイズのピル型で統一し、毎回同じ文言の型にする - セクションごとに淡い地色を切り替えてリズムを作る - 悩みや誤解には線画イラストと吹き出しを使う - 数字や番号はピンクの円か斜体の大数字で目立たせる - 講師やお客様は笑顔の写真を使い、肩書きを小さく添える **Don't** - 濃い原色や黒い背景は使わない - CTAをピンクにしない（地色に埋もれる） - 影の強いカードや立体的な装飾は使わない - 明朝体で硬い印象にしない - 本文を純黒で太く詰めて組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象者と得られる未来を示す）: キッチンの女性写真に白抜き円とピンクの大文字コピー。下に金色の月桂冠バッジを3つ 2. **告知帯**（期間限定であることを伝える）: 全幅のコーラルピンク帯に白文字 3. **特典紹介**（登録特典を2つ見せる）: 淡ピンクの角丸カードに斜体の番号と資料のモック画像→CTA 4. **職種紹介**（仕事の種類を見せる）: 番号タグ付きの写真を2列グリッドで並べ、下線付きの職種名を添える 5. **悩みの提起**（読者の不安に共感する）: 水彩風の水色地に線画の人物と吹き出しを3つ。最後は青緑の帯で締め、下端はV字 6. **登録特典の再提示＋無料講座**（登録の価値を補強する）: かぎ括弧の枠のリード、特典カード、リボン見出しと7日間のタイムライン→CTA 7. **コンセプト**（スクールの理念を伝える）: ピンクを重ねた写真の上に大きな見出しとピンク帯の副題、本文 8. **メディア掲載**（信頼性を補強する）: 雑誌の表紙を横に並べ、淡ピンクのカードに誌面を拡大して見せる 9. **選ばれる理由**（特長を6つ説明する）: 生成り地に番号付き見出し＋ピンクの下線、左に写真・右に本文。講座一覧はチェック付きの2列 10. **お客様の声**（成果事例を示す）: ピンク枠のカード4枚で写真を左右交互に置く→CTA 11. **よくある誤解**（独学などの誤解を正す）: 水色地にイラストと吹き出し、下向き三角、白の実態カードを3枚 12. **解決策**（必要なスキルを3つ提示する）: 淡ピンク地にテラコッタの線の円を3つ。写真カード＋ピンクラベル＋箇条書き 13. **講師紹介**（講師の実績を見せる）: ベージュ地にピンクの氏名とグレーのローマ字、円形写真、メディア掲載を3列 14. **代表メッセージ・FAQ・最終CTA**（想いを伝え、不安を解消して登録へ導く）: ピンク枠の白カードに中央揃えの文章、Q&Aリスト、特典とタイムラインを再掲してCTA、ピンクのフッター ## Imagery - 自然光のキッチンや自宅で笑顔の女性を写した明るい写真 - 悩み・誤解は太めの黒線で描き、くすんだ青や黄色を部分的に塗った線画イラスト - 資料はPDFやスライドのモックを少し傾けて重ねる - 講師は白背景の円形ポートレート - 鍋や泡立て器など調理器具の小さな線画を添える - キラキラや集中線などの手描き装飾をピンクで添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約750px幅のカラムを置き、左右は地色で埋める - 職種やメディアのグリッドはPCで3〜4列に増やす - 理由パートの写真＋本文の2列は比率を保つ - CTAの幅は最大400px程度に抑える - 見出しの文字サイズは1.3倍程度まで大きくする ## 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-218905a5`（元 LP の URL から採番） - **元 LP**: https://mia.keiumehara-jwk.com/afr? - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。