--- version: alpha name: Warm Coral Women's Career School LP description: 淡いピーチ地にオレンジ〜コーラルのグラデ帯とネイビー見出しを合わせた、女性向けオンライン講座のLP。白カードを積み重ねて、悩み→解決→講師→料金と情報を丁寧に見せる。LINE登録CTAの帯を何度も挟んで登録を促す。 colors: primary: '#EC661C' secondary: '#F35375' cta: '#22C55E' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#FFF6F1' tint-1: '#E7EAEF' accent-1: '#CB7961' text: '#2E3F66' text-body: '#555555' accent-2: '#DCB325' dark-section: '#365581' surface: '#EBEEF3' marker: '#FDE68A' cta-accessible: '#178841' primary-accessible: '#F29460' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.2em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-line-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px cta-band: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 140px worry-item: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px course-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px qa-solution: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 220px lecturer-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 260px flow-step: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 90px price-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 480px section-label: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 50px --- # DESIGN.md — コーラル×ネイビーの女性向けオンラインスクールLP（Warm Coral Women's Career School LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、情報量多め・訴求型、清潔・爽やか - **キーワード**: ピーチ地・コーラルグラデ・ネイビー見出し・白カード・LINE誘導・女性キャリア - **地の質感**: フラットな単色面に、ごく弱い影の白カードを重ねる。CTA帯だけはピンク〜オレンジのグラデーション。 - **形**: 角丸4〜8pxの控えめなカード。CTAはピル型。見出しには丸括弧風の装飾を付ける。 - **温度感**: 暖色寄り。ネイビーの文字で甘くなりすぎないよう引き締める。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EC661C` | ブランドのオレンジ（見出し強調・コース帯） | 4% | 画素の実測 | | `secondary` | `#F35375` | 上級・ライフ系のピンク | 2% | 画素の実測 | | `cta` | `#22C55E` | LINEボタンの緑 | 1% | 推定 | | `on-cta` | `#FFFFFF` | CTAの上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白い地 | 33% | 画素の実測 | | `background-alt` | `#FFF6F1` | ピーチ色のセクション地 | 21% | 画素の実測 | | `tint-1` | `#E7EAEF` | 悩み・FLOWのグレー青地 | 9% | 画素の実測 | | `accent-1` | `#CB7961` | コーラル（#番号・ラベル） | 2% | 画素の実測 | | `text` | `#2E3F66` | 見出しのネイビー | 2% | 推定 | | `text-body` | `#555555` | 本文のグレー | 3% | 推定 | | `accent-2` | `#DCB325` | 中級コースの黄土色 | 1% | 画素の実測 | | `dark-section` | `#365581` | フッターのネイビー | 2% | 画素の実測 | | `surface` | `#EBEEF3` | 悩みQの帯のグレー | 4% | 画素の実測 | | `marker` | `#FDE68A` | 強調文字の下線マーカー | 0% | 推定 | | `cta-accessible` | `#178841` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#F29460` | AA を満たす補正値（計算） | | 計算 | - 地の色は白・ピーチ・グレー青をセクションごとに交互に使う - CTA帯はコーラルピンクから黄みオレンジへの横グラデーションで塗る - 見出しはネイビーにし、キーワードだけをオレンジにする - コースとプランは、オレンジ・黄・ピンクの帯で区別する - 主CTAはLINEの緑だけにして、他の用途に緑を使わない - フッターは濃いネイビーで締める - `button-line-cta` は文字 `#FFFFFF` × 背景 `#22C55E` のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#178841`、4.53:1）を使う。 - `cta-band` は文字 `#2E3F66` × 背景 `#EC661C` のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#F29460`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大きなキャッチ | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.35 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.04em | | `headline-md` | 解決策・特長のオレンジ見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em | | `headline-sm` | カード見出し・講師名 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈・肩書き | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 英字ラベル・#番号 | 欧文サンセリフ | Montserrat | 500 | 11px | 1.2 | 0.2em | | `label-button` | CTAボタン | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.04em | - 見出しの上に、小さな英字ラベルを字間を広げてオレンジで置く - 見出しは中央揃えのネイビー。キーワードだけオレンジにする - 本文は行間を広め（1.8）にしてやさしく見せる - 特長の番号は、細めの「#01」を大きなコーラルで書く - 価格の数字だけは大きく太いオレンジにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。講師・コースはPCで2カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは上下64px前後で区切る - カードは縦に12〜16px間隔で積む - 悩みは細長いチェック付きカードを縦に並べる - 解決策は、Q帯→オレンジ線付きの白カード（本文と画像）の順で組む - LINE CTAの帯は主要セクションの間ごとに挟む ## Elevation & Depth - 白カードはごく薄い影（0 2px 8px rgba(0,0,0,.06)）にする - CTAカードは影を少し強めにして、グラデ帯から浮かせる - それ以外はフラットにして、線と地色で区切る ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の長方形。講師は円形に切り抜き、淡い色の円を背景に置く - **セクション境界**: 直線で地色を切り替える。見出しの左右に細い横線を引く - カードの上辺に、色帯または2pxのオレンジ線を付ける - LINEボタンは緑のピル型にし、右に矢印を付ける - 理由の見出しは丸括弧状の装飾で挟む ## Components - **LINE登録ボタン**（`button-line-cta`）: 緑のピル型で、左にLINEの白いラベル、右に矢印。上に小さなリボン見出しを付ける - **グラデCTA帯**（`cta-band`）: コーラル〜オレンジのグラデ帯の上に、白いカード（文言・ボタン・資料イラスト）を置く - **悩みチェックカード**（`worry-item`）: 白い細長カードにオレンジのチェックを付け、要点に下線マーカーを引く - **コースカード**（`course-card`）: 色帯のヘッダーに、期間を示す丸バッジ。中は対象・内容・目指す姿の3段 - **悩み→解決カード**（`qa-solution`）: グレーのQ帯の下に、オレンジ線付きの白カードを置き、「〇〇で解決」の見出し・本文・画像を入れる - **講師カード**（`lecturer-card`）: 円形の顔写真、肩書き、名前、ローマ字表記、経歴文を入れた白いカード - **流れステップ**（`flow-step`）: コーラルの丸番号を付けた白カードを3つ、点線でつなぐ - **料金プラン表**（`price-table`）: 色帯のヘッダーに大きな価格を置き、機能の有無を○△×のアイコン格子で示す - **英字ラベル付き見出し**（`section-label`）: 小さなオレンジの英字ラベルの下に、ネイビーの和文見出しを中央揃えで置く ## Do's and Don'ts **Do** - 地色を白・ピーチ・グレー青の3色で交互に切り替える - 主要セクションの間ごとに同じLINE CTA帯を繰り返す - キーワードはオレンジの文字か黄色マーカーで強調する - 写真は明るく自然光で、笑顔の女性を中心にする - 料金・機能は表やアイコンで一目でわかるように示す **Don't** - 黒背景や原色の強いコントラストを使わない - 緑をCTA以外に使わない - 角丸を大きくしすぎてポップに寄せない - 本文を詰めて行間を狭くしない - 見出しを明朝体にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（価格と提供価値を一目で伝える）: 女性の写真の上に白い帯付きの大きなキャッチを置き、丸バッジ3つで特典を示す 2. **CTA**（LINE登録を促す）: グラデ帯の上に白カードとLINEボタン 3. **悩みの提起**（ターゲットに共感する）: グレー青地に悩みカードを6つ縦に並べ、悩む女性のイラストを添える 4. **コンセプト**（理念を伝える）: ピーチ地の中央揃え本文に、薄い大きな英字を背景に置く。代表のメッセージカードも入れる 5. **特長**（コースとサポートを説明する）: #番号見出しの下に、色分けしたコースカードとサポートカードを置く 6. **選ばれる理由**（強みを3つ示す）: 写真と文章を左右交互に並べた白カード 7. **悩み別の解決**（具体的な悩みに答える）: 2つのタブボタンで分類し、Q帯と解決カードを繰り返す 8. **講師紹介**（専門性で信頼を得る）: ピーチ地に講師カードを2カラムで並べる 9. **入会の流れ**（手順を簡単に見せる）: 番号付きのカード3つを横に並べる 10. **料金プラン**（プランを比べてもらう）: オレンジとピンクのプラン表を2つ並べる 11. **フッター**（規約へのリンク）: ネイビー地に白いロゴとリンク ## Imagery - 自然光のオフィスや自宅で働く、30代女性の明るい写真 - 講師は白背景のバストアップを円形に切り抜く - 悩む人物は線画に淡い色を塗った、フラットなイラスト - 動画画面・資料などを角丸のモック画像にしてオレンジ地に置く - 背景に、薄い大きな英字の筆記体をうっすら敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約600〜700px幅のコンテンツを置き、左右に縦書きの英字装飾を入れる - SPではコースカード・講師カード・料金表を1カラムに積み直す - 理由のカードは、SPでは写真を上・文章を下にする - 流れの3ステップは、SPでは縦並びにして縦の点線でつなぐ - CTA帯はSPで幅いっぱいにし、ボタンも幅いっぱいにする ## 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-db90f7b7`（元 LP の URL から採番） - **元 LP**: https://lp.cuel.co.jp/1 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。