--- version: alpha name: Golden Honey Medicated Skincare LP description: 金色の容器と蜂蜜の質感を軸に、朱赤の強調文字と金の帯見出しで効果を畳みかける通販型スキンケア LP。明朝の大見出し、六角形・円形バッジ、ビフォーアフター比較、定期コースの価格ブロックと緑の申込ボタンで購買へ導く。 colors: primary: '#BB9C44' accent-1: '#D54D21' secondary: '#CC5B3C' cta: '#3E9A2E' on-cta: '#FFFFFF' marker: '#BE0E3E' background: '#FEFAF5' background-alt: '#E3E3EB' tint-1: '#FAF0D0' tint-2: '#FDECDC' dark-section: '#4C1B1B' text: '#393832' text-muted: '#777777' line: '#B39F6D' cta-accessible: '#368628' primary-accessible: '#8A7332' accent-1-accessible: '#CA491F' typography: display: fontFamily: Shippori Mincho fontSize: 46px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 32px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 700 lineHeight: 1.25 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Great Vibes fontSize: 26px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 60px 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.full}' height: 80px heading-gold-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 44px badge-hex: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 110px badge-circle-gold: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px price-block: backgroundColor: '{colors.background}' textColor: '{colors.marker}' typography: '{typography.display}' rounded: '{rounded.md}' height: 200px benefit-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 130px voice-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px compare-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 400px ribbon-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 130px --- # DESIGN.md — 金×朱赤の蜂蜜系薬用スキンケア LP（Golden Honey Medicated Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 情報量多め・訴求型、上品・高級、力強い・インパクト - **キーワード**: 金色・蜂蜜・薬用・効果訴求・定期通販・明朝見出し - **地の質感**: 蜂蜜の滴り・金のきらめき・光の玉ボケを重ねた艶感。白とラベンダーグレーの柔らかい光の背景。 - **形**: 六角形と円形のバッジ、角帯ラベル、斜め切りのリボン見出し、白いカード。 - **温度感**: 暖色寄り（金・オレンジ・朱赤）に冷たい白グレーを差して清潔感を出す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BB9C44` | 金の帯見出し・ラベル | 7% | 画素の実測 | | `accent-1` | `#D54D21` | 朱赤の強調見出し文字 | 3% | 画素の実測 | | `secondary` | `#CC5B3C` | 朱赤オレンジの帯・バッジ | 3% | 画素の主要色に補正 | | `cta` | `#3E9A2E` | 申込ボタンの緑 | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `marker` | `#BE0E3E` | 価格の深紅 | 1% | 画素の実測 | | `background` | `#FEFAF5` | 白の地 | 15% | 画素の実測 | | `background-alt` | `#E3E3EB` | ラベンダーグレーの光の地 | 11% | 画素の実測 | | `tint-1` | `#FAF0D0` | 淡い蜂蜜クリーム地 | 7% | 画素の主要色に補正 | | `tint-2` | `#FDECDC` | ピーチベージュの価格セクション地 | 6% | 画素の実測 | | `dark-section` | `#4C1B1B` | こげ茶の帯見出し | 2% | 画素の実測 | | `text` | `#393832` | 見出しの濃茶黒 | 5% | 画素の実測 | | `text-muted` | `#777777` | 注釈のグレー | 2% | 推定 | | `line` | `#B39F6D` | カード枠の金線 | 0% | 画素の実測 | | `cta-accessible` | `#368628` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#8A7332` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#CA491F` | AA を満たす補正値（計算） | | 計算 | - 地は白・ラベンダーグレー・蜂蜜クリームを交互に切り替え、セクション境界を色で示す。 - 金は帯見出し・ラベル・枠線に使い、高級感の骨格にする。 - 効果ワードと数字は朱赤で大きく強調する。 - 価格は深紅、主 CTA だけ緑にして他と被らせない。 - こげ茶の帯は理由・技術説明の導入に限る。 - 注釈は小さいグレーで各セクション末尾にまとめる。 - `button-primary` は文字 `#FFFFFF` × 背景 `#3E9A2E` のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#368628`、4.57:1）を使う。 - `heading-gold-band` は文字 `#FFFFFF` × 背景 `#BB9C44` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8A7332`、4.59:1）を使う。 - `badge-hex` は文字 `#D54D21` × 背景 `#FEFAF5` のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CA491F`、4.51:1）を使う。 - `badge-circle-gold` は文字 `#D54D21` × 背景 `#FAF0D0` のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CA491F`、4.51:1）を使う。 - `benefit-card` は文字 `#D54D21` × 背景 `#FEFAF5` のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CA491F`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 大見出しのキャッチ | 明朝 | Shippori Mincho | 800 | 46px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 700 | 32px | 1.3 | 0.04em | | `headline-md` | カード見出し・帯文字 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.03em | | `headline-sm` | バッジ内の効果ワード | 明朝 | Noto Serif JP | 700 | 18px | 1.25 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 英字の飾りラベル | 欧文スクリプト | Great Vibes | 400 | 26px | 1.0 | 0.0em | | `label-button` | CTA ボタン文字 | ゴシック | Noto Sans JP | 900 | 24px | 1.2 | 0.05em | - 大見出しは明朝の極太で 1 行 4〜6 文字に区切る。 - 強調語だけ朱赤・大きめにし、助詞は小さく濃茶にする。 - 縦書き見出しを人物写真の横に置く。 - 数字は見出しの 1.5 倍以上に拡大する。 - 注釈記号（※1 など）は小さく右上付けにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。バッジ群は 2〜3 個を千鳥配置。 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は全幅で敷き、文字を重ねる。 - 説明カードは左右 12px 余白の白カード。 - 各セクション末に注釈ブロックを置く。 - 価格ブロックは定期コース見出し→商品→特典→価格→CTA の順。 - 特典は番号付きの横長カードを縦に並べる。 ## Elevation & Depth - 白カードに薄い影（0 2px 8px rgba(0,0,0,.08)）。 - CTA ボタンは立体的なグラデと下影。 - 商品画像は柔らかい落ち影で浮かせる。 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物・ラボ写真は全幅角版、比較写真は角丸 8px、効果は円形金バッジ。 - **セクション境界**: 直線の地色切替。一部に波形と三角の切り込み。 - 効果バッジは金の円か六角形。 - 見出しリボンは端を斜め切りにする。 - ラベルは角版の金帯または朱赤帯。 ## Components - **申込 CTA**（`button-primary`）: 緑グラデのピル型。左に商品写真、右に丸矢印、上に小さな安心コピー。 - **金帯見出し**（`heading-gold-band`）: 金の全幅帯に白文字、アイコン付き。 - **六角形成分バッジ**（`badge-hex`）: 白地に金縁の六角形、上に朱赤の小ラベル、中に成分名。 - **金の円形効果バッジ**（`badge-circle-gold`）: 金グラデの球に効果ワードを明朝で 2 行。 - **価格ブロック**（`price-block`）: 通常価格の打ち消し、深紅の大きな価格、円形の割引率バッジ、金枠の限定注記。 - **番号付き特典カード**（`benefit-card`）: 左に金のリボン番号、右に朱赤明朝の特典名とアイコン。 - **お客様の声**（`voice-card`）: 金帯の短い見出し、本文、地域・年齢。人物写真を左右交互に置き英字スクリプトで番号。 - **比較クイズカード**（`compare-card`）: 朱赤タブの英字ラベル、2 枚並べた写真、下に灰／金のラベル。 - **こげ茶リボン見出し**（`ribbon-dark`）: 下向き三角で終わる濃茶の帯に白い明朝。 ## Do's and Don'ts **Do** - 金・朱赤・白の 3 色を軸に装飾を重ねる。 - 効果ワードはバッジ化して視覚的に数を見せる。 - 商品画像をほぼ全セクションに繰り返し登場させる。 - 主張には必ず※注釈を添える。 - 価格・CTA ブロックはページ中盤と末尾に 2 回置く。 **Don't** - 青や寒色のアクセントを強調色にしない。 - CTA 以外に緑を使わない。 - 見出しを細いゴシックだけで済ませない。 - 余白を広げすぎて訴求の密度を下げない。 - 注釈を省略しない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（実績と効果を一目で訴える）: 朱赤帯に実績、ジェル質感写真に縦書き明朝の大見出し、商品画像。 2. **ビフォーアフター**（変化を見せる）: 肌のアップ写真 2 組を矢印でつなぎ、朱赤の擬音見出し。 3. **お知らせ帯**（品薄の告知）: 金帯に白文字、白枠の説明。 4. **オファー（定期コース）**（早期の申込誘導）: ピーチ地に白カード、商品・特典・価格・緑 CTA。 5. **販売実績**（人気の証明）: 金の吹き出し見出し、商品の積み上げ写真、海外店頭写真のコラージュ。 6. **研究・承認**（信頼性）: 白衣・顕微鏡のラボ写真に朱赤とオレンジの斜め帯見出し。 7. **効果一覧**（多機能を見せる）: 番号入りの金円バッジを商品の周囲に配置。 8. **成分**（配合の価値）: 蜂蜜色の地に六角形バッジの群れ。 9. **独自技術**（浸透の理由）: こげ茶リボン、人物写真と縦書き、肌断面イラストの白カード。 10. **比較・実験**（実感の裏付け）: クイズ形式の比較カードと実験写真 2 枚。 11. **お客様の声**（共感）: 英字見出し、写真と文章を左右交互に。 12. **使い方**（手軽さ）: Step 番号付きの円形イラスト 2 つを矢印で。 13. **特典**（定期の魅力）: 黒地の金粉写真、朱赤カード見出し、番号付き特典カード 4 枚。 14. **申込フォーム**（購入完了）: オファー再掲後、必須ラベル付きフォームと緑の確認ボタン。 ## Imagery - 金の容器とクリーム色のジェルを艶やかに寄りで撮る。 - 蜂蜜の滴り・ハニカム・金の水滴の玉を装飾に散らす。 - 肌のきれいな 30〜50 代女性が頬に手を添える笑顔の写真。 - 白衣のラボ写真で科学的な印象を出す。 - 黒背景に金粉が舞う高級感のあるカット。 - 肌断面はオレンジとピンクのフラットなイラスト。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 750px 前後の 1 カラムで SP と同じ構成にする。 - 左右の余白は淡いグレーやセクション地色で埋める。 - バッジ群は横並びの数を増やしてよい。 - CTA は最大幅 600px で中央に置く。 ## 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-20552a5f`（元 LP の URL から採番） - **元 LP**: https://nachulife.jp/lp/rperg/rperg_tk_001.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。