--- version: alpha name: Soft Pink Glossy Femcare Supplement LP description: 淡いピーチピンクのグラデーション地に、艶のある球体や吹き出しを浮かべた女性向けサプリの縦長LP。濃いローズピンクの帯見出しで区切り、白文字で強めに訴求する。丸い吹き出しや円形カードを多用した、やわらかく上品な情報訴求型の構成。 colors: primary: '#C05C7B' background: '#FFECED' background-alt: '#F8ADAA' secondary: '#DB7D91' accent-1: '#F491AA' surface: '#F9E1E4' on-primary: '#FFFFFF' text: '#C05C7B' text-body: '#4A3A3A' accent-2: '#C05C7B' line: '#E7B6BC' tint-1: '#FCD4D2' primary-accessible: '#BC5374' text-accessible: '#A33F5E' secondary-accessible: '#CC4763' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 26px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 16px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 56px pearl-badge: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px worry-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 70px hex-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 80px ingredient-circle: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 170px product-block: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.accent}' height: 200px sub-ribbon: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 28px footnote: textColor: '{colors.text-body}' typography: '{typography.note}' height: 40px --- # DESIGN.md — 桃色グラデと艶玉のフェムケアサプリ LP（Soft Pink Glossy Femcare Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: かわいい、やさしい・柔らかい、上品・高級、情報量多め・訴求型 - **キーワード**: ピーチピンク・グラデーション・艶のある球体・吹き出し・円形カード・フェムケア - **地の質感**: パールのような光沢のある球体と、ぼかした光のにじみ。地はなめらかなグラデーション - **形**: 円・楕円の吹き出し、六角形のバッジ、斜めに切った帯見出し - **温度感**: 暖色寄りでやわらかく甘い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C05C7B` | 帯見出し・ブランドのローズピンク | 6% | 画素の主要色に補正 | | `background` | `#FFECED` | 全体のピーチピンク地 | 30% | 画素の実測 | | `background-alt` | `#F8ADAA` | 濃いめのコーラルピンク地 | 15% | 画素の主要色に補正 | | `secondary` | `#DB7D91` | サブ帯・強調ピンク | 5% | 画素の実測 | | `accent-1` | `#F491AA` | 明るいピンクの帯 | 7% | 画素の実測 | | `surface` | `#F9E1E4` | 商品紹介の白っぽい面 | 8% | 画素の実測 | | `on-primary` | `#FFFFFF` | 帯上の白文字 | 2% | 推定 | | `text` | `#C05C7B` | 強調見出し文字のローズ | 2% | 画素の主要色に補正 | | `text-body` | `#4A3A3A` | 本文の濃いブラウングレー | 2% | 推定 | | `accent-2` | `#C05C7B` | 成分名の濃いピンク | 1% | 画素の主要色に補正 | | `line` | `#E7B6BC` | 円カード内の区切り線 | 1% | 画素の主要色に補正 | | `tint-1` | `#FCD4D2` | 球体バッジの淡いピンク | 7% | 画素の主要色に補正 | | `primary-accessible` | `#BC5374` | AA を満たす補正値（計算） | | 計算 | | `text-accessible` | `#A33F5E` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#CC4763` | AA を満たす補正値（計算） | | 計算 | - 地は淡いピーチピンクのグラデーションで統一し、純白の面は使わない - セクションの区切りは濃いローズピンクの帯で行い、文字は白 - 強調語だけ濃いピンクにして大きくする - 本文は黒ではなく濃いブラウングレーでやわらかく - 成分カードは半透明の淡いピンク円＋細いピンク線 - `band-heading` は文字 `#FFFFFF` × 背景 `#C05C7B` のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#BC5374`、4.54:1）を使う。 - `pearl-badge` は文字 `#C05C7B` × 背景 `#FCD4D2` のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#A33F5E`、4.52:1）を使う。 - `hex-badge` は文字 `#C05C7B` × 背景 `#F9E1E4` のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#A33F5E`、4.56:1）を使う。 - `sub-ribbon` は文字 `#FFFFFF` × 背景 `#DB7D91` のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#CC4763`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し（白・影付き） | ゴシック | Zen Kaku Gothic New | 700 | 32px | 1.3 | 0.05em | | `headline-lg` | 帯の見出し | ゴシック | Zen Kaku Gothic New | 500 | 24px | 1.4 | 0.08em | | `headline-md` | 吹き出し内の強調語 | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.4 | 0.03em | | `headline-sm` | 成分名 | ゴシック | Noto Sans JP | 700 | 18px | 1.3 | 0.05em | | `accent` | 商品名の欧文ロゴ風 | 欧文サンセリフ | Montserrat | 300 | 26px | 1.2 | 0.05em | | `body-md` | 成分説明・本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0.03em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | - 見出しの中で強調語だけ1.3倍に大きくし、助詞は小さくする - 白抜き見出しには薄いピンクの影をつける - 商品名は細い欧文で大きく、和名は太字で小さく添える - 注釈番号は上付きで細かく入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。悩み・成分は2列の円配置 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算） - セクション冒頭に全幅の帯見出しを置く - 吹き出しは大小を散らして浮遊感を出す - 商品画像は右寄せ、テキストは左寄せで組む - 成分は円カードを2×2で並べる ## Elevation & Depth - 球体バッジにハイライトと柔らかい影で立体感 - 商品パッケージに淡いドロップシャドウ - 白文字見出しにピンクのテキストシャドウ ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 素材は切り抜きで背景になじませる。成分写真は円内に配置 - **セクション境界**: 濃いピンクの帯、緩やかな斜め・カーブで切り替え - 四角い枠は避け、円・楕円・六角形を使う - 吹き出しは手描き風の細線で囲む - 帯の上辺を斜めにして動きを出す ## Components - **帯見出し**（`band-heading`）: 全幅の濃ピンク帯に白い大きな見出し - **艶玉バッジ**（`pearl-badge`）: 光沢のある球体に短い訴求を3行で - **悩み吹き出し**（`worry-bubble`）: 細線の楕円吹き出しに悩みを2行で - **六角バッジ**（`hex-badge`）: 白い六角形に食感や粒数などの特長 - **成分円カード**（`ingredient-circle`）: 円内に素材写真・成分名・区切り線・説明 - **商品情報ブロック**（`product-block`）: 欧文商品名・和名・内容量と価格・商品写真 - **サブ帯**（`sub-ribbon`）: 細いピンク帯に白文字の一言 - **注釈**（`footnote`）: 番号付きの小さな注釈をブロック下に ## Do's and Don'ts **Do** - ピンクの濃淡だけで配色をまとめる - 円や吹き出しを大小に散らして柔らかく見せる - 強調語は濃ピンクで大きくする - 光のぼかしや艶玉で上品な質感を出す **Don't** - 寒色や純黒を使わない - 角ばった四角いカードを並べない - 白一色の平坦な背景にしない - 原色の赤など強すぎる色を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新習慣としての価値と商品を提示）: 白抜き大見出し、艶玉バッジ3つ、商品パッケージ、価格情報 2. **悩みの提起**（女性特有の悩みに共感）: 帯見出し下に悩み吹き出し5つを中央の大きな吹き出しの周りに配置 3. **商品紹介**（解決策として商品を提示）: 斜め帯のリード、欧文商品名と箱・袋の写真 4. **主成分**（主成分の価値を伝える）: 大見出しで成分名をかぎ括弧付きで強調、注釈付き 5. **続けやすさ**（味・食感・手軽さを訴求）: サブ帯＋六角バッジ3つ、素材写真と商品写真、吹き出し 6. **配合成分**（補助成分4種を紹介）: 小さな枠付き前置き語＋大見出し、2×2の円カード ## Imagery - 背景にぼかしたパール調の球体と光のにじみを置く - 商品はピンクの幾何学柄パッケージを斜めに置き影をつける - 素材写真は白背景で切り抜き、色鮮やかに - 粒状の商品を数個ころがしてリアリティを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP では帯見出しを2行にし文字を24px程度に - 悩み吹き出しは2列に並べ、中央の大吹き出しを上に - 成分円カードは2列を維持するか1列にする - PC は中央寄せ480〜750px幅の固定カラムで背景を左右に延長 ## 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-898e5977`（元 LP の URL から採番） - **元 LP**: https://axxzia.jp/products/vnr-hmp - **解析に使った画像**: PC（PC版） - **確度**: 色 高（4/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。