--- version: alpha name: Warm Cream Feminine Yoga School LP description: 淡いクリーム色の地に白いカードを重ね、明朝体の見出しと金色の丸メダルで落ち着いた女性向けの上品さを出している。オレンジのグラデーションCTAと赤字の価格強調で申込を促す。手書きの声や淡いピンクの吹き出しで親しみも加えている。 colors: background: '#FFF7E0' surface: '#FDFCFA' background-alt: '#F8FAE5' tint-1: '#FAEDD2' primary: '#EBDDC3' accent-1: '#D9B13A' cta: '#FC8C2C' secondary: '#F7B500' on-cta: '#FDFDFC' accent-2: '#E0461E' tint-2: '#F3BABA' text: '#3A2E25' text-body: '#5E5249' line: '#CEC9B8' dark-section: '#8A6E55' cta-accessible: '#BA5703' secondary-accessible: '#966E00' accent-2-accessible: '#D0411C' accent-1-accessible: '#8D701B' tint-2-accessible: '#DC3333' typography: display: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Yomogi fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 2px md: 4px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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.sm}' height: 52px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px offer-box: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.body-md}' height: 120px medal-number: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 44px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 260px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 300px voice-badge: backgroundColor: '{colors.tint-2}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 40px worry-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 90px step-flow: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' rounded: '{rounded.lg}' height: 70px --- # DESIGN.md — クリーム地と金メダルのヨガ資格スクールLP（Warm Cream Feminine Yoga School LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 教育・スクール・資格 ／ **雰囲気**: やさしい・柔らかい、上品・高級、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: クリーム地・明朝見出し・金メダル・白カード・手書きの声・オレンジCTA - **地の質感**: 和紙のような淡い紙の質感。カード角に薄い植物の線画をあしらう - **形**: 角の小さい白カード、雲形の写真切り抜き、丸メダル、下向きの山形区切り - **温度感**: 暖色寄り。ベージュとクリームでやわらかく温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFF7E0` | ページ全体の地色（クリーム） | 36% | 画素の実測 | | `surface` | `#FDFCFA` | 特長・強みのカード面 | 18% | 画素の実測 | | `background-alt` | `#F8FAE5` | FV背景の淡い黄緑クリーム | 4% | 画素の実測 | | `tint-1` | `#FAEDD2` | 声カードの淡いベージュ面 | 5% | 画素の実測 | | `primary` | `#EBDDC3` | 下向き矢印・区切りのブラウンベージュ | 4% | 画素の実測 | | `accent-1` | `#D9B13A` | 番号メダルの金色 | 1% | 推定 | | `cta` | `#FC8C2C` | 主CTAのオレンジ | 1% | 画素の実測 | | `secondary` | `#F7B500` | サブCTAの黄色ボタン | 0% | 推定 | | `on-cta` | `#FDFDFC` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#E0461E` | 強調語・価格の赤 | 0% | 推定 | | `tint-2` | `#F3BABA` | 受講生の声吹き出しの淡いピンク | 0% | 画素の実測 | | `text` | `#3A2E25` | 見出しのこげ茶黒 | 2% | 推定 | | `text-body` | `#5E5249` | 本文のグレーブラウン | 3% | 推定 | | `line` | `#CEC9B8` | カード枠・区切り線のベージュグレー | 2% | 画素の主要色に補正 | | `dark-section` | `#8A6E55` | 特典見出し帯のブラウン | 0% | 推定 | | `cta-accessible` | `#BA5703` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#966E00` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#D0411C` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#8D701B` | AA を満たす補正値（計算） | | 計算 | | `tint-2-accessible` | `#DC3333` | AA を満たす補正値（計算） | | 計算 | - 地はクリーム一色。白カードを載せて区切る - 強調語・価格・合格保証など数字や要点は赤〜朱で - CTAは濃いオレンジ＋黄色の2段で、他にオレンジを使わない - 番号は金色グラデーションの丸メダルに統一 - ピンクは受講生の声の吹き出しだけに使う - 文字は純黒を避け、こげ茶系にする - `button-primary` は文字 `#FDFDFC` × 背景 `#FC8C2C` のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#BA5703`、4.63:1）を使う。 - `button-secondary` は文字 `#FDFDFC` × 背景 `#F7B500` のコントラスト比が 1.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#966E00`、4.56:1）を使う。 - `offer-box` は文字 `#E0461E` × 背景 `#FDFCFA` のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#D0411C`、4.6:1）を使う。 - `medal-number` は文字 `#FDFDFC` × 背景 `#D9B13A` のコントラスト比が 2.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#8D701B`、4.62:1）を使う。 - `voice-badge` は文字 `#FDFDFC` × 背景 `#F3BABA` のコントラスト比が 1.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-2-accessible`（`#DC3333`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ | 明朝 | Shippori Mincho | 700 | 26px | 1.4 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 700 | 20px | 1.5 | 0.04em | | `headline-md` | 特長カードの見出し（赤の強調語入り） | 明朝 | Noto Serif JP | 700 | 18px | 1.4 | 0.02em | | `body-md` | 説明文・講師紹介 | 明朝 | Noto Serif JP | 400 | 13px | 1.8 | 0.02em | | `accent` | 受講生の手書きの声 | 手書き・筆 | Yomogi | 400 | 15px | 1.9 | 0.03em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.03em | | `note` | ボタン下の注記・住所・肩書 | 明朝 | Noto Serif JP | 400 | 11px | 1.6 | 0.02em | - 見出しと本文は明朝で統一し上品さを出す - 見出し内の要点だけ赤＋一段大きく - CTAだけはゴシック太字で視認性を優先 - 声は手書き書体で罫線上に置く - 見出しは中央揃え、カード内は左揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。講師紹介は SP でも 横スクロールか縦積み - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは白カードで囲み、地との差で区切る - CTAブロックをFV直後・中盤・末尾の3回繰り返す - セクション間は下向き山形の矢印でつなぐ - 特長カードは写真とテキストを左右交互に配置 - 講師紹介は3人を並べ、その下に詳細テキスト ## Elevation & Depth - カードは薄い影（0 1px 4px rgba(120,90,50,.15)） - CTAボタンは下に濃い影とグラデーションで立体感 - 金メダルは光沢のグラデーション - 写真に影はつけない ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 40px。ボタンは角丸の長方形。 - **写真の切り抜き**: 雲形・角丸の不定形で写真を切り抜く。人物写真は四角に白縁 - **セクション境界**: 下向きの山形（V字）ベージュ矢印とFV下の点線レース - カード・ボタンはほぼ角ばった小さな角丸 - 番号は丸メダル - 吹き出しは丸い雲形のピンク - FVの訴求は四角い白枠ボックスを3つ並べる ## Components - **無料説明会CTA**（`button-primary`）: オレンジのグラデーション長方形。白文字と注記の2行、右に丸矢印 - **資料請求ボタン**（`button-secondary`）: 黄色の細めボタン。主CTAの直下に置く - **特典ボックス**（`offer-box`）: ブラウン帯の見出しと、取り消し線の旧価格→赤字の無料表示 - **金メダル番号**（`medal-number`）: 金色の丸に白で番号。特長・強みの左に置く - **特長カード**（`feature-card`）: 白カードに金メダル・赤強調見出し・本文・雲形写真。角に植物線画 - **手書きの声カード**（`voice-card`）: 罫線ノート風の面に手書き文字、白縁の人物写真、右上にピンク吹き出し - **受講生の声吹き出し**（`voice-badge`）: 淡いピンクの丸吹き出しに白文字 - **悩み吹き出し**（`worry-bubble`）: 人物写真の横に縦書きの白い吹き出しで悩みを3つ - **ステップフロー**（`step-flow`）: 雲形ベージュの手順を矢印で横につなぐ。ピンク丸で補足 ## Do's and Don'ts **Do** - 地はクリーム、カードは白で明度差を小さく保つ - 見出しは明朝、要点だけ赤で強調する - CTAブロックを3回以上同じ形で繰り返す - 番号は金メダルで統一する - 写真は雲形や白縁でやわらかく見せる **Don't** - 寒色や彩度の高い背景を使わない - 見出しを太いゴシックにしない - オレンジをCTA以外に使わない - 純黒の文字や太い黒罫線を使わない - 角丸の大きいピル型ボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（資格取得の早さと通いやすさを伝える）: 淡い黄緑クリーム地に明朝キャッチ、右に人物、下に四角い訴求ボックス3つ 2. **CTA（特典付き）**（無料説明会へ誘導）: 白枠内にオレンジ主CTAと黄色サブCTA、右に特典と写真 3. **悩みの提起**（不安を代弁する）: 3人の人物と縦書き吹き出しを横に並べる 4. **特長**（3つの選ばれる理由）: 白カード3枚、金メダル番号、写真左右交互 5. **インタビュー**（第三者の推薦で信頼を得る）: ベージュ面に人物写真と鉤括弧の明朝見出し、長文 6. **CTA（再掲）**（申込の再促進）: FV直後と同じCTAブロック 7. **お客様の声**（受講生の実感を伝える）: 罫線ノート風カードに手書き文字と修了証を持つ写真 8. **強み**（合格保証などの制度を訴求）: 紙質感の白カードに金メダル3つと赤強調見出し 9. **講師紹介**（指導者の人柄と実績）: 3人の写真と肩書を横並び、下に各講師の詳細文を線で区切る 10. **受講の流れ**（デビューまでの道のりを示す）: 雲形ステップを矢印でつなぎ、ピンク丸で回数・期間を補足 11. **アクセス**（通いやすさを示す）: 雲形のスタジオ写真と簡略地図を並べ、住所を添える 12. **クロージングCTA**（最終の申込誘導）: 明朝の誘い文の下に同じCTAブロック、最下部に小さなコピーライト ## Imagery - 自然光の明るいスタジオで撮った女性中心の人物写真 - 悩み場面は手をあごに当てる等の考える表情 - 受講生は修了証を持った笑顔の上半身写真 - カードの角に細い線の植物・唐草イラストを淡く置く - 地図は灰色の簡略図にオレンジで目的地を示す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央固定幅（約730px）の1カラムで左右は地色 - SPでは特長カードの写真をテキスト上に縦積み - CTAブロックはSPで特典を下に回し縦積み - 講師3人はSPで縦積みか横スクロール - 悩み吹き出しは縦書きを横書きに変えてもよい - ステップフローは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-91d3ed3d`（元 LP の URL から採番） - **元 LP**: http://school.karadamainte.com/lp/yoga/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/15 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-15、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。