DESIGN.md — 金×朱赤の蜂蜜系薬用スキンケア LP（Golden Honey Medicated Skincare LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 情報量多め・訴求型、上品・高級、力強い・インパクト
• キーワード: 金色・蜂蜜・薬用・効果訴求・定期通販・明朝見出し
• 地の質感: 蜂蜜の滴り・金のきらめき・光の玉ボケを重ねた艶感。白とラベンダーグレーの柔らかい光の背景。
• 形: 六角形と円形のバッジ、角帯ラベル、斜め切りのリボン見出し、白いカード。
• 温度感: 暖色寄り（金・オレンジ・朱赤）に冷たい白グレーを差して清潔感を出す。

Colors

• 地は白・ラベンダーグレー・蜂蜜クリームを交互に切り替え、セクション境界を色で示す。
• 金は帯見出し・ラベル・枠線に使い、高級感の骨格にする。
• 効果ワードと数字は朱赤で大きく強調する。
• 価格は深紅、主 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

• 大見出しは明朝の極太で 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。