--- version: alpha name: Soft Dusty Rose Women's Supplement LP description: 生成りとくすみピンクのグラデーション地に、ローズ系の明朝・細ゴシック見出しを置いた女性向けサプリ LP。角丸の写真、縦書きの帯ラベル、こげ茶の丸バッジで区切りを作り、やさしく上品にストーリーを進める。 colors: primary: '#C98A8F' background: '#FBF8F3' background-alt: '#FEFBFC' surface: '#FFFEFE' cta: '#E57F86' on-cta: '#FFF7F1' dark-section: '#5A4A47' text: '#5C5250' text-body: '#4A4240' text-muted: '#B5A6A5' secondary: '#BCBCBC' tint-1: '#F3DBD7' accent-1: '#E3EEF4' marker: '#FCEBE9' cta-accessible: '#D6333E' secondary-accessible: '#727272' primary-accessible: '#B1565D' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Cormorant Garamond fontSize: 12px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.2em label-button: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.06em headline-sm: fontFamily: Montserrat fontSize: 48px fontWeight: 500 lineHeight: 1.0 rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 80px 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.full}' height: 72px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px badge-transition: backgroundColor: '{colors.dark-section}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 64px label-vertical: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 160px card-voice: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 420px card-price: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 480px tag-ingredient: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 28px box-guarantee: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 200px heading-bracket: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 90px --- # DESIGN.md — くすみローズと生成りの女性向けサプリ LP（Soft Dusty Rose Women's Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: やさしい・柔らかい、上品・高級、ナチュラル、情報量多め・訴求型 - **キーワード**: くすみローズ・生成り・淡いグラデーション・角括弧の強調・縦書き帯・大きな欧文の透かし - **地の質感**: 霧がかかったような淡いピンクのグラデーションと、白いカードの柔らかい影 - **形**: 角丸の写真とカード、円形バッジ、アーチ型・弧型のセクション境界 - **温度感**: 暖色寄りでやさしいトーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C98A8F` | ブランドのくすみローズ（強調文字・帯・バッジ） | 5% | 推定 | | `background` | `#FBF8F3` | 生成りのベース地 | 30% | 画素の実測 | | `background-alt` | `#FEFBFC` | 淡いピンクのセクション地 | 20% | 画素の実測 | | `surface` | `#FFFEFE` | 白いカード面 | 10% | 画素の実測 | | `cta` | `#E57F86` | 申込ボタンのコーラルピンク | 1% | 推定 | | `on-cta` | `#FFF7F1` | CTA上の白文字 | 0% | 画素の実測 | | `dark-section` | `#5A4A47` | こげ茶の丸バッジ・コース見出し帯 | 2% | 推定 | | `text` | `#5C5250` | 見出しのグレーブラウン文字 | 2% | 推定 | | `text-body` | `#4A4240` | 本文テキスト | 2% | 推定 | | `text-muted` | `#B5A6A5` | 注釈・小さな英字ラベル | 0% | 画素の実測 | | `secondary` | `#BCBCBC` | サブ購入ボタンのグレー | 1% | 画素の実測 | | `tint-1` | `#F3DBD7` | 濃いめのピンク面（アーチ背景） | 6% | 画素の実測 | | `accent-1` | `#E3EEF4` | こだわりセクションの淡いブルーグレー地 | 4% | 画素の実測 | | `marker` | `#FCEBE9` | 本文中の淡ピンクマーカー | 0% | 画素の主要色に補正 | | `cta-accessible` | `#D6333E` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#727272` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#B1565D` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと淡ピンクのグラデーションを交互に使い、境界はアーチや弧でつなぐ - 見出しはグレーブラウンを基本にし、キーワードだけローズで色を変える - こげ茶は丸バッジとコース見出し帯だけに使い、場面転換の合図にする - CTAだけ彩度が高めのコーラルピンクにして、ほかの色とはっきり分ける - 安心感を出したい生産地の話だけ淡いブルーグレーの地にする - 本文の強調は太字にせず、淡ピンクのマーカーを引く - `button-primary` は文字 `#FFF7F1` × 背景 `#E57F86` のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D6333E`、4.5:1）を使う。 - `button-secondary` は文字 `#FFF7F1` × 背景 `#BCBCBC` のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#727272`、4.54:1）を使う。 - `label-vertical` は文字 `#FFF7F1` × 背景 `#C98A8F` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B1565D`、4.55:1）を使う。 - `box-guarantee` は文字 `#C98A8F` × 背景 `#FBF8F3` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#B1565D`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVやキーコピーの大見出し | ゴシック | Zen Kaku Gothic New | 500 | 34px | 1.4 | 0.12em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 500 | 26px | 1.5 | 0.1em | | `headline-md` | カードの見出しや声の見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.08em | | `body-md` | 本文・お客様の声 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.05em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | 英字ラベル・背景の大きな透かし文字・年齢の数字 | 欧文セリフ | Cormorant Garamond | 400 | 12px | 1.2 | 0.2em | | `label-button` | CTAボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.3 | 0.06em | | `headline-sm` | 価格の大きな数字 | 欧文サンセリフ | Montserrat | 500 | 48px | 1.0 | 0.0em | - 見出しは字間を広め（0.1em前後）にして、ゆったり見せる - キーワードは1〜2文字だけローズにして、少し大きくする - 大事な言葉は細い線の角括弧［ ］で囲む - 写真の上には縦書きのコピーをローズ帯の白抜きで重ねる - 背景には薄い欧文セリフの大きな透かし文字を置く - 数字はほかより大きく、細めの書体で目立たせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分タグは 3 列、比較カードは 2 列 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 見出しは中央揃え、本文は左揃え - 写真は左右に互い違いに置き、一部を画面の端で切る - セクションの切り替わりにはこげ茶の丸バッジを置き、細い縦線でつなぐ - 白カードは画面幅の約86%で中央に置く - 背景の大きな透かし文字は画面の端からはみ出させてよい ## Elevation & Depth - 白カードにはぼかし大きめで薄い影（0 8px 24px rgba(150,100,100,.08)）をつける - CTAには下側にピンクの影を落とし、少し立体的に見せる - 写真に影はつけず、角丸だけにする ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 角丸の長方形が基本。主役の人物写真は縦長のアーチ型や楕円で切り抜く - **セクション境界**: アーチ型や大きな弧で、色の違う地をなめらかにつなぐ - バッジや成分ラベルは円形にする - 成分名は白い角丸の小さいタグにする - 見出し下の吹き出しは細い線で描く - 直角の切り替えや斜めの切り替えは使わない ## Components - **申込CTA**（`button-primary`）: コーラルピンクのピル型ボタン。上に小さく特典文言、下に大きくボタン名を2段で置き、影で立体的にする - **単品購入ボタン**（`button-secondary`）: グレーのピル型ボタン。文字は2行 - **つなぎの丸バッジ**（`badge-transition`）: こげ茶の円に白文字を短く入れる。下に細い縦線を伸ばす - **縦書きコピー帯**（`label-vertical`）: 写真の端に重ねる縦書きのローズ帯。1〜2列で白文字 - **お客様の声カード**（`card-voice`）: 角丸写真の上に縦書きの見出しと年齢の大きな数字を置く。下の本文にはマーカーを引く - **定期コースの価格カード**（`card-price`）: 上にこげ茶の帯見出し、左上にローズの割引円バッジ、中央に商品画像と大きな価格を置く - **成分タグ**（`tag-ingredient`）: 白い小さな角丸タグを3列のグリッドで並べる - **返品保証ボックス**（`box-guarantee`）: 細いピンク枠の箱。月桂樹の飾りで囲んだ保証見出しと説明文を入れる - **角括弧の見出し**（`heading-bracket`）: 細い線の角括弧で見出しやキーワードを左右から囲む ## Do's and Don'ts **Do** - 淡いグラデーションの地とアーチ型の境界で、やさしく流れを作る - 強調は色（ローズ）・角括弧・マーカーで表し、太字に頼らない - 女性の自然な笑顔の写真を角丸で、余白を広めにとって並べる - グラフはローズと淡ピンクの2色だけで描き、出典を小さく添える - 購入ブロックはページの中盤と終盤に2回置く **Don't** - 原色の赤や黄色を使わない - 黒ベタや真っ黒の文字を使わない（こげ茶にとどめる） - 直角に切り替わるセクション境界や、角の立った写真は使わない - 太く詰まった見出しや、勢いのあるセール風の装飾は使わない - CTA以外の要素にコーラルピンクを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（実績を見せ、習慣にするイメージを伝える）: こげ茶の細い帯に実績を入れる。アーチ型の背景に商品写真を置き、円形の実績バッジを2つ添える 2. **悩みの提起**（日々の疲れに共感する）: 短い悩みを3つ、角丸の人物写真と左右交互に並べる。最後に夕景のグラデーションと結論のコピーを置く 3. **提案**（がんばるのではなく補うという考え方を示す）: こげ茶の丸バッジから始め、大きなローズの見出しと手持ちの商品写真、成分の円バッジを置く 4. **著名人の声**（共感と信頼を得る）: 白カードに人物写真、年齢の円バッジ、見出し、本文を入れる 5. **CTA・価格**（購入へ誘導する）: キャンペーン特典、定期コースの価格カード、単品カード、返品保証ボックス、定期の注意事項を順に置く 6. **成分の解説①**（成分の豊富さを示す）: 大きな数字の見出し、泡のような球体の写真、白い成分タグのグリッド 7. **働きの解説**（活動と休息の両方を支えることを示す）: 2列の白カードに角括弧の見出しと円形の成分ラベルを入れる 8. **成分の解説②**（年齢による減少と吸収のよさを伝える）: 曲線グラフと棒グラフを白カードに入れ、縦書き帯つきの写真を添える 9. **その他の栄養素**（幅広い栄養を含むことを伝える）: 白い円を6つ花のように配置し、棒グラフで他社と比べる 10. **専門家の声**（専門家の視点から信頼を補う）: 吹き出し枠の見出し、縦書きの肩書きを重ねた写真、マーカー入りの本文 11. **素材の特長**（素材を丸ごと使っている価値を示す）: 縦書きの本文とカプセル写真、ローズのレーダーチャート 12. **お客様の声**（実感の声を数多く見せる）: 番号つきの英字ラベル、縦書き見出しの写真、年齢の数字、マーカー入りの本文を4件並べる 13. **品質へのこだわり**（生産地と生産者の信頼を伝える）: ブルーグレーの空のグラデーション地に風景・生産者の写真と白カードを置く ## Imagery - 30〜50代の女性を自然光で撮り、白い服で柔らかく笑っている場面にする - 商品写真は白い石の台や生成りの布の上に置き、明るく霞んだトーンにする - 手のひらにカプセルをのせた接写を使う - 成分は光る透明な球体やゼリーのような質感で抽象的に見せる - 生産地は青空・水辺・手作業の写真で素朴さを出す - 背景には極薄の欧文セリフの透かし文字を入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は SP のレイアウトを中央に固定幅（約 450px）で表示する - PC の背景は生成りに薄い欧文の透かし文字を繰り返す - PC の右側に商品画像と CTA を縦に固定して表示する - PC の左側の余白は装飾だけにして、本文は置かない ## 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-1a8f2b68`（元 LP の URL から採番） - **元 LP**: https://www.teinei.co.jp/lp/komachi/direct/012/aa/?argument=65XB9HHy&dmai=a5fc9afc57a2b5&gclid=CjwKCAiAgJWABhArEiwAmNVTBwwMv7asQ1DnYiA9HydPJNTSDXpJCkpWU7HX-MMwRgz3v9Q7tp3LbhoC7wMQAvD_BwE&utm_source=Pinterest&utm_medium=organic&camp_no=30795 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。