--- version: alpha name: Dusty Rose Salon-Quality Body Care LP description: くすみローズと淡いピンクベージュを地に、金メダル・月桂樹・明朝体見出しで上品さと権威性を出す女性向けボディケア単品通販 LP。定期コースの価格カードと緑の立体 CTA を何度も繰り返す訴求型の構成。 colors: primary: '#D0707F' on-primary: '#FFFFFF' cta: '#3B8434' on-cta: '#FFFFFF' background: '#FFFFFE' background-alt: '#F6EAEC' secondary: '#D9476F' accent-1: '#9A8360' tint-1: '#F3ECE4' dark-section: '#49525C' accent-2: '#93ADB5' text: '#272626' text-muted: '#A8A495' tint-2: '#F2F5FB' secondary-accessible: '#D63A65' primary-accessible: '#C54D60' accent-1-accessible: '#A08967' accent-2-accessible: '#5B7B85' typography: display: fontFamily: Shippori Mincho fontSize: 46px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 22px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.15em headline-sm: fontFamily: Allura fontSize: 24px fontWeight: 400 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 64px price-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.display}' rounded: '{rounded.md}' height: 620px badge-discount: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 80px feature-tile: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 64px award-medal: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 120px number-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 40px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px checklist: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 260px info-box: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 170px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 56px --- # DESIGN.md — くすみローズ×金のサロン品質ボディケア LP（Dusty Rose Salon-Quality Body Care LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: くすみローズ・金メダル・明朝見出し・サロン監修・定期コース訴求・ポラロイド写真 - **地の質感**: ピンクの泡や光のボケ、シルク調の淡いグラデーション背景に、白カードを重ねる柔らかな質感 - **形**: 角丸小さめのカード、円形の成分写真、円形メダル、ポラロイド風の傾いた写真枠 - **温度感**: 暖色寄り。ピンクベージュ主体で一部にグレーブルーの寒色セクションを挟む ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D0707F` | ブランドのくすみローズ（特長ボタン・セクション地） | 9% | 推定 | | `on-primary` | `#FFFFFF` | ローズ面上の白文字 | 2% | 画素の主要色に補正 | | `cta` | `#3B8434` | 申込ボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA ボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFE` | 基本の白地 | 19% | 画素の実測 | | `background-alt` | `#F6EAEC` | 淡いピンクベージュのセクション地 | 13% | 画素の実測 | | `secondary` | `#D9476F` | 価格・強調の濃いピンク | 2% | 推定 | | `accent-1` | `#9A8360` | 金・ブロンズ（番号バッジ・ライン・監修ラベル） | 4% | 推定 | | `tint-1` | `#F3ECE4` | ベージュのボックス地（内容量帯など） | 6% | 画素の実測 | | `dark-section` | `#49525C` | 悩み提起のグレーブルー暗色地 | 6% | 画素の実測 | | `accent-2` | `#93ADB5` | 解説ボックスのグレーブルー | 1% | 画素の実測 | | `text` | `#272626` | 見出し・本文の濃いグレー | 4% | 画素の実測 | | `text-muted` | `#A8A495` | 注釈文字のグレー | 2% | 画素の主要色に補正 | | `tint-2` | `#F2F5FB` | ラベンダー寄りの淡い青地（成分・検証） | 7% | 画素の実測 | | `secondary-accessible` | `#D63A65` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#C54D60` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#A08967` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#5B7B85` | AA を満たす補正値（計算） | | 計算 | - 地は白・淡ピンクベージュ・淡ラベンダーを交互に切り替えてセクションを区切る - くすみローズは特長ラベル・見出し帯・価格カード枠に限定して使う - 価格数字とキーワード強調は濃いピンクで明朝の大きな文字にする - CTA だけは緑の立体ボタンにしてピンク基調から浮かせる - 権威性（受賞・監修・番号）は金のグラデーションやブロンズで表現 - 悩み提起だけ暗いグレーブルー地にして気分を切り替える - `price-card` は文字 `#D9476F` × 背景 `#FFFFFE` のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#D63A65`、4.51:1）を使う。 - `badge-discount` は文字 `#FFFFFF` × 背景 `#D9476F` のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#D63A65`、4.51:1）を使う。 - `feature-tile` は文字 `#FFFFFF` × 背景 `#D0707F` のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C54D60`、4.56:1）を使う。 - `award-medal` は文字 `#272626` × 背景 `#9A8360` のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#A08967`、4.51:1）を使う。 - `number-badge` は文字 `#FFFFFF` × 背景 `#9A8360` のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#A08967`、4.55:1）を使う。 - `info-box` は文字 `#FFFFFF` × 背景 `#93ADB5` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#5B7B85`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し・価格数字 | 明朝 | Shippori Mincho | 700 | 46px | 1.2 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 600 | 24px | 1.5 | 0.1em | | `headline-md` | カード・特長の小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.05em | | `accent` | 英字セクションラベル（FEATURES 等） | 欧文セリフ | Cormorant Garamond | 500 | 22px | 1.3 | 0.15em | | `headline-sm` | Voice・Step などの筆記体飾り | 欧文スクリプト | Allura | 400 | 24px | 1.2 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.05em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | CTA ボタン文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.1em | - 見出しは明朝、本文と小見出しはゴシックで使い分ける - 英字ラベルは細いセリフ体を大文字で広めの字間にし、和文見出しの上に置く - 強調語だけ濃いピンクに色替えし、太字にはしない - 注釈は※付きの小さいグレー文字で、ブロックの下にまとめる - 縦書き見出しを FV 直後の写真上で使ってもよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長ボタン・成分写真は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算） - カードは画面端から約 20px 内側に置く - セクション頭は英字ラベル→和文見出しの 2 段構成 - 価格カードは同じ内容を 3 回以上繰り返す - 成分は円形写真 2 列＋下にラベル - 長文は『さらに読み込む』『more』で折りたたむ ## Elevation & Depth - CTA ボタンは下に濃い影をつけた立体表現 - 白カードは影なし、または非常に薄い影で地色から浮かせる - ポラロイド風の写真は白枠＋柔らかな影で重ねる - メダルは金グラデーションと光沢で立体に見せる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 成分は正円、人物は上部アーチ形や角丸、写真はポラロイド白枠で傾ける - **セクション境界**: 基本は直線。一部に V 字の切り込みや波形の帯を使う - 価格カードはピンクの細枠＋上部に波形のピンクヘッダー - 割引は円形のピンクバッジ - 番号は金色の円バッジでカード左上にかける - FAQ は白の角丸バー＋右端に＋アイコン ## Components - **緑の立体申込ボタン**（`button-primary`）: 横幅いっぱい・角丸小・右に三角アイコン・下に影 - **定期コース価格カード**（`price-card`）: ピンク枠と波形ヘッダー。商品画像、通常価格、明朝の大きなピンク価格、送料無料帯を入れる - **割引率の円バッジ**（`badge-discount`）: 濃いピンクの正円に白の明朝で割引率。上に弧状の小さい文字 - **特長ボタン風タイル**（`feature-tile`）: ローズ地に白文字 2 行の特長を 2×2 で並べる - **金メダル＋月桂樹**（`award-medal`）: 金グラデーションの円に明朝で実績。左右に月桂樹を添える - **特長番号バッジ**（`number-badge`）: 金色の円に白のセリフ数字。カード左上にはみ出して置く - **お客様の声カード**（`voice-card`）: 上に筆記体の番号と年代表記、白カードに太字の要約と本文、more ボタンで折りたたむ - **悩みチェックリスト**（`checklist`）: 白カードに丸いチェックアイコン付きの悩みを 8 個前後並べる - **用語解説ボックス**（`info-box`）: ローズまたはグレーブルー地に白文字。見出しの下に細線 - **FAQ アコーディオン**（`faq-item`）: 淡ピンク地に白バー、質問文と右端の＋ ## Do's and Don'ts **Do** - 見出しは明朝、英字ラベルは細いセリフ体で上品さを保つ - 受賞・監修などの権威要素は金色で統一する - 価格カード＋CTA を FV 直後、中盤、終盤で繰り返す - 注釈は※番号で本文と対応させ、小さいグレー文字でまとめる - 地色は淡いピンク・ベージュ・ラベンダーの 3 系統で切り替える **Don't** - 原色の赤やビビッドなピンクを大面積に使わない - CTA 以外に緑を使わない - 見出しを太いゴシックで固くしない - 写真を黒枠や強いコントラストで硬く見せない - 注釈を省いて誇大な印象にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サロン品質と実績を一目で伝える）: 肌の写真背景に明朝の大見出し、黒帯サブコピー、商品画像、金メダル 2 つ、ローズの特長タイル 2×2 2. **共感コピー**（始めるきっかけを作る）: 人物写真に縦書きの明朝コピーを重ねる 3. **価格・CTA**（定期コースへの申込を促す）: 波形ヘッダーの価格カード、割引円バッジ、折りたたみ規約、緑の CTA 4. **受賞実績**（権威付け）: シャンパンゴールド地に月桂樹付きの大見出しと金メダル 3 つ 5. **メディア掲載**（第三者の評価を示す）: 雑誌誌面の写真を傾けて重ね、黒いピル型の媒体ラベルをつける 6. **サロン・監修者**（専門家の後ろ盾を示す）: ローズ地に施術室の白枠写真。ベージュ地にアーチ形の人物写真、黒ラベルの肩書き、ハイライト付き紹介文 7. **検証結果**（効果の根拠を示す）: 淡ラベンダー地に検証→結果の流れ。金枠のラベル、下向き三角、掲載誌カード 8. **悩みの提起**（自分ごと化させる）: グレーブルーの暗い地にモノトーン写真と白文字、下に白いチェックリスト 9. **開発背景・商品紹介**（開発の想いと進化点を伝える）: 斜めに切った帯、ピンクのリボン見出し、泡状の円に成分訴求 10. **成分**（配合成分の価値を示す）: 色帯ラベルの主要成分と、円形写真 2 列グリッド 11. **お客様の声**（使用感の共感）: ポラロイドのコラージュ、筆記体の番号、白カード、more で折りたたみ 12. **使い方**（使用方法を示す）: ローズの円 3 つで要点、Point と Step を筆記体ラベル＋線画イラストで 13. **特長詳細**（特長を深掘りする）: 淡ピンクのカードに金の番号バッジ、写真、見出し、解説ボックス 14. **開発者の想い**（情緒的に後押しする）: ローズ地に白文字、商品画像とポラロイド写真を重ねる 15. **最終 CTA・商品詳細・FAQ**（購入を決めてもらう）: 明朝の大コピー、価格カード、全成分のテキスト、白バーの FAQ、申込フォーム ## Imagery - 人物は白やベージュの下着で、明るく柔らかな光のもとデコルテを中心に撮る - 背景は淡ピンクの泡・光のボケ・シルクの布 - 成分は単体をマクロで撮り、正円に切り抜く - 金メダルや月桂樹で受賞を表す - ローズの花やクリームのテクスチャを添え物にする - 線画の女性イラストは淡いピンクで手順の説明に使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版も SP と同じ 1 カラム画像を中央に置く構成 - PC では 375〜450px 幅の中央カラムにし、左右は淡ピンクの地で埋める - 画像内の文字はそのまま縮小せず、カラム幅を固定して読みやすさを保つ - フォームは PC で 2 列の入力欄にしてもよい ## 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-4453487d`（元 LP の URL から採番） - **元 LP**: https://cellnote.jp/lp?u=BVLgelPRO_06 - **解析に使った画像**: 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/）からご連絡ください。