--- version: alpha name: Coral Red Feminine Supplement LP description: 朱赤の FV と淡い桜ピンクの地を基調にした、女性向け健康サプリの縦長訴求 LP。白カードに赤い見出し、紺の丸バッジ、下向き三角の接続ラベルで、ストーリーを段階的に読ませる構成。 colors: primary: '#CC313D' secondary: '#C12A37' accent-1: '#22307A' background: '#FDE1DE' surface: '#FEFEFE' background-alt: '#FCF6E6' dark-section: '#444544' text: '#333333' accent-2: '#AFA25E' line: '#E5E6E3' marker: '#F5E46A' tint-1: '#F1B7A3' on-primary: '#FFEEEB' accent-2-accessible: '#817640' typography: display: fontFamily: Montserrat fontSize: 64px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 15px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' badge-circle: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px check-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 240px triangle-connector: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 60px heading-frame: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 340px faq-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 160px stat-row: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.display}' height: 110px pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px vertical-copy: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 300px --- # DESIGN.md — 朱赤×桜ピンクの女性向けサプリ LP（Coral Red Feminine Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、情報量多め・訴求型 - **キーワード**: 朱赤・桜ピンク・白カード・丸バッジ・下向き三角・グラフ訴求 - **地の質感**: フラットな面に柔らかいピンクのぼかし図形（勾玉状のしずく）を浮かべ、薄い影の白カードを重ねる - **形**: 角の小さい白カード、正円バッジ、下向き三角ラベル、L字カギ括弧の見出し枠 - **温度感**: 暖色寄り。赤とピンクで温かく、白とグレーで清潔感を保つ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CC313D` | ブランド朱赤（FV地・見出し強調・ラベル） | 9% | 画素の実測 | | `secondary` | `#C12A37` | FV 下部の深紅 | 4% | 画素の実測 | | `accent-1` | `#22307A` | 特長バッジの紺 | 2% | 推定 | | `background` | `#FDE1DE` | 桜ピンクのページ地 | 30% | 画素の実測 | | `surface` | `#FEFEFE` | 白カード | 28% | 画素の実測 | | `background-alt` | `#FCF6E6` | 実績セクションの生成りベージュ | 5% | 画素の実測 | | `dark-section` | `#444544` | 悩み提起の暗いグレー地 | 6% | 画素の実測 | | `text` | `#333333` | 見出し・本文の濃いグレー | 3% | 推定 | | `accent-2` | `#AFA25E` | 数値実績のゴールド | 1% | 画素の実測 | | `line` | `#E5E6E3` | FAQ 枠のライトグレー線 | 1% | 画素の主要色に補正 | | `marker` | `#F5E46A` | 強調語の下の黄色マーカー | 0% | 推定 | | `tint-1` | `#F1B7A3` | 装飾しずく図形のピーチ | 3% | 画素の主要色に補正 | | `on-primary` | `#FFEEEB` | 赤地上の白文字 | 1% | 画素の実測 | | `accent-2-accessible` | `#817640` | AA を満たす補正値（計算） | | 計算 | - 地は桜ピンクを基本にし、内容は白カードに載せる - 朱赤はFV地・キーワード・ラベル・Q記号に限定して使う - 悩み提起だけ暗いグレー写真地で空気を変える - 実績・受賞は生成りベージュ地とゴールド数字で権威感を出す - 特長バッジは紺の正円で赤と補色対比させる - 本文中の重要語は赤文字か赤ベタ白抜きで強調する - `stat-row` は文字 `#AFA25E` × 背景 `#FEFEFE` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#817640`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 成分量など大きな数値 | 欧文サンセリフ | Montserrat | 700 | 64px | 1.0 | 0.0em | | `headline-lg` | セクション主見出し（赤×黒混在） | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.08em | | `headline-md` | カード見出し・声のタイトル | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.4 | 0.05em | | `headline-sm` | 枠付きサブ見出し・FAQの質問 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注釈・集計日 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | Voice・How to use などの英字ラベル | 欧文サンセリフ | Montserrat | 600 | 15px | 1.2 | 0.05em | | `label-button` | 赤ピルラベル・三角ラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.08em | - 見出しは主語・キーワードを大きく赤、助詞を小さく黒にしてリズムを作る - 強調語の上に赤い傍点ドットを打つ - FVのキャッチは白地帯に赤文字の縦書き - 数字は欧文太字で極端に大きく、単位は小さく添える - 本文は字間をやや広めに取り行間1.8 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較図は 3 列横並び - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは左右5%の余白で中央配置 - 写真はカード幅いっぱいに入れ、下に本文を置く - セクション間を下向き三角ラベルでつなぐ - 見出しは中央揃え、本文は左揃え - 特長バッジは3つ横並びの正円 ## Elevation & Depth - 白カードに薄い灰色の柔らかい影（0 2px 8px rgba(0,0,0,.08)） - 吹き出し状の赤ボックスは写真に一部重ねる - FAQカードは影なしで灰色の太枠 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの横長長方形、一部は円形に抜いたクローズアップ - **セクション境界**: 直線切替。接続部は赤い下向き三角ラベル - カードの角はほぼ直角 - バッジは正円 - ラベルは赤のピル型 - 見出し枠はL字カギ括弧を左上と右下に配置 ## Components - **特長の丸バッジ**（`badge-circle`）: 紺または赤の正円に白文字で特長を3行で表記、3つ並び - **チェックリスト**（`check-list`）: 赤い丸チェックアイコン＋悩みを短文で4つ並べる半透明白パネル - **下向き三角ラベル**（`triangle-connector`）: 逆接・順接の接続語を赤い逆三角に白文字で入れる - **枠付きサブ見出し**（`heading-frame`）: 白地に細い黒枠、下に吹き出しの尾。主見出しの上に置く - **お客様の声カード**（`voice-card`）: 英字Voice＋大きな番号、赤見出し、下線、左に人物イラスト右に本文 - **Q&Aカード**（`faq-card`）: 灰色太枠の白カード、赤いQ記号と質問、点線区切りの下に回答 - **実績数値行**（`stat-row`）: 左に商品写真の色付きパネル、右にゴールドの大数字と注釈 - **赤ピルラベル**（`pill-label`）: 用量などを示す赤いピル型ラベル - **縦書きコピー帯**（`vertical-copy`）: 写真上に白帯を縦に置き赤・黒の縦書きコピー ## Do's and Don'ts **Do** - 淡ピンク地＋白カードの重ねを全体で統一する - 強調語は赤文字・赤ベタ・傍点・黄マーカーで使い分ける - 接続語の三角ラベルで話の流れを区切る - 数値は大きな欧文数字で見せ注釈を必ず添える - 装飾しずく図形を余白に散らして柔らかさを出す **Don't** - カードに大きな角丸を付けない - 青系や寒色を地色に使わない（紺はバッジのみ） - 赤を本文の長文に使わない - 写真に強いフィルターや暗い加工をかけない（悩み提起以外） - 装飾フォントや手書き書体を混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と主張を一目で伝える）: 朱赤地に商品パッケージと縦書きキャッチ、容量ピル、紺の丸バッジ3つ 2. **悩みの提起**（対象者を自分事化させる）: 暗いグレー写真地に白見出し、半透明白パネルのチェックリスト4項目 3. **共感・課題提示**（年齢変化を可視化する）: カギ括弧見出し、赤い曲線グラフ、人物写真と本文、マーカー強調 4. **成分解説**（成分の仕組みを説明）: 赤ボックスの説明文と食材写真を重ね、3枚並びの変換図 5. **問題の深掘り**（不足を数字で示す）: 三角ラベルでつなぎ、白カードに大きな赤い%数字と人物写真 6. **解決策・商品紹介**（商品で直接摂る提案）: 赤黒混在見出し、人物写真に商品と縦書きコピー、丸バッジ再掲 7. **配合量訴求**（含有量を印象付ける）: オレンジ〜ピンクのグラデ不定形に白の巨大数字と商品 8. **メーカーの実力**（研究実績で信頼獲得）: 研究者写真の白カード、赤ベタ白抜き強調語の本文 9. **受賞・実績**（権威性と販売実績）: 生成り地、月桂樹付き評価、ゴールド大数字の実績行 10. **飲みやすさ**（継続しやすさを訴求）: 白カードに服用写真と円形クローズアップ 11. **お客様の声**（体験談で後押し）: 番号付き声カードにフラットな人物イラスト 12. **使用方法**（摂り方を明示）: 赤ピルラベルと大数字、写真、チェック付き3項目 13. **よくある質問**（不安解消）: 花柄ピンク背景にカギ括弧見出し、灰枠Q&Aカード3つ 14. **クロージング**（ブランドイメージで締める）: 笑顔の人物写真に商品と縦書きコピー ## Imagery - 30〜50代女性の自然光ポートレート、明るく清潔な白背景 - 大豆など原料の俯瞰物撮りを白い器で - 研究室の白衣人物で信頼感 - 手のひらや粒の円形クローズアップ - 声欄は顔を描かないフラットな人物イラスト - 背景に淡いピンクの花柄ぼかしやしずく形の装飾 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元はSP幅相当の1カラムをPCでも中央固定で表示 - PCは最大幅480px前後の中央カラム、左右はピンク地で埋める - 丸バッジ3つと3列図はSPでも横並び維持 - 縦書きコピーは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-1e25d012`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/tamago-kichi/soyequol/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。