DESIGN.md — 琥珀×金×黒の高級美容液通販 LP（Amber Gold Premium Serum Direct-Response LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、力強い・インパクト、ラグジュアリー・ダーク
• キーワード: 琥珀ボトル・金の箔・黒い背景にきらめき・明朝の大見出し・赤い価格・受賞メダル
• 地の質感: 金属っぽい金のグラデーション、ボケ光のきらめき、水しぶき・オイルの雫、大理石風の白
• 形: 角丸ほぼなしの帯と枠。円形メダル・丸いバッジ・リボン・下向き三角の吹き出しを多めに使う
• 温度感: 暖かい（琥珀・金・ベージュ）。成分パートだけ寒色の水色

Colors

• 地は白とベージュ中心、FV・受賞・悩み提起は黒〜濃紺の暗い地にして緩急を作る
• 金はメダル・リボン・見出しのグラデーションだけに使い、面に広げない
• 価格の数字と『送料無料』は必ず赤、帯ラベルはワインレッド
• 申込ボタンだけ緑のグラデーションにして周りから浮かせる
• 成分・科学的な説明パートは水色・白の寒色系に切り替える
• キーワードは黄色マーカーか赤文字で強調する
• button-primary は文字 #FEFEFE × 背景 #1C9C2C のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#188626、4.65:1）を使う。

Typography

• 大見出しは明朝で、金・墨のグラデーションや影をつけて重厚にする
• 1行の中でキーワードだけ1.5〜2倍に大きくしてジャンプ率を作る
• 縦書きの明朝コピーを写真の横に置く
• 価格の数字は欧文セリフで特大、円・税込は小さく
• 注釈は※付きで小さい灰色文字にし、該当ブロックの直下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。画像を縦に積み、口コミ・特典は左画像右テキストの2分割
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の背景で区切り、中は左右16px程度の余白
• オファーブロックは白い枠カードに価格→クーポン→CTA→注釈の順で積む
• 特典リストはメダル画像左、テキスト右の行を罫線で区切る
• 同じオファー・保証ブロックをページ内で3回程度繰り返す
• 悩みのチェックリストは紙風の白い面に左揃え

Elevation & Depth

• カードは薄いドロップシャドウで背景から浮かせる
• CTAボタンは光沢グラデーションと下影で立体的に
• メダル・バッジは金属の陰影つき
• 大見出し文字に軽い影

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物・肌のアップは円形切り抜き、手順写真は角あり四角、商品は切り抜きで配置
• セクション境界: 直線の切り替えが基本。下向き三角の吹き出しや斜めのリボン帯でつなぐ
• ボタンは角丸小さめの横長
• メダル・成分は円形
• 見出し帯はリボン形や台形
• 罫線枠は細い金・茶の二重線

Components

• 申込CTA（button-primary）: 緑の光沢グラデーションに白文字。左に割引額の大数字、右に2行の申込文言
• 価格表示（price-block）: 通常価格を打ち消し線、矢印で特別価格へ。赤い特大数字＋赤い四角の送料無料バッジ
• ワインレッド帯（label-band）: 見出しや条件を載せる横長の濃赤帯に白文字
• 受賞メダル（award-medal）: 金の円形メダルに順位・受賞名。黒い地にきらめきと並べる
• 口コミカード（voice-card）: 白カードにVoice番号の筆記体、顔写真と見出し、本文の一部を赤字で強調、注釈
• 返金保証ボックス（guarantee-box）: ベージュ大理石地に茶色のタブ見出し、明朝の大見出し、細枠の説明囲み
• 特典リスト行（campaign-row）: 金と黒の番号メダル左、右に小見出し＋赤い大文字の特典名
• 吹き出し帯（speech-pointer）: 黒や紺の帯の下に三角を付けて次の主張へつなぐ
• Q&A（faq-item）: 茶色明朝のQ番号、グレー帯、開閉の矢印。回答はA番号つき

Do's and Don'ts

Do - 暗い地のセクションと白・ベージュのセクションを交互に置く - 数字（秒・冠・%・価格）を特大で見せる - 価格・CTA・保証のセットを数回繰り返す - 商品ボトルはどのセクションでも琥珀色の切り抜きで目立たせる - 根拠・注釈を※で必ず添える

Don't - CTAを緑以外の色にしない - 金を大きな面に塗らない - 本文まで明朝にしない - パステル一色のやわらかすぎる配色にしない - 余白を広げすぎて情報密度を下げない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. お知らせ・クーポン帯（数量限定とクーポンで緊急性を出す）: 二重枠のお知らせ、赤帯と金のクーポン画像
2. ファーストビュー（悩みと効果を一目で伝える）: 黒地にきらめき、明朝の大キャッチ、縦書きコピー、ボトル、円形の特長バッジ3つ
3. 受賞実績（権威付け）: 黒地に金メダルと銀のリボン
4. オファー（割引価格と申込）: 白カードに価格、クーポン、赤い価格、緑CTA、注釈
5. 返金保証（不安解消）: ベージュ大理石地の保証ボックス
6. 使い方（手軽さを示す）: 水色地に女性写真、手順を3ステップの矢印で
7. 悩みの提起（共感と危機感）: 暗いひび割れ地、チェックリスト、紺の矢印見出し、グラフ
8. 成分紹介（解決策を示す）: 白と水色の分子背景に円形の成分バブル
9. 商品紹介（商品の登場）: 金のオイル波とボトル、縦書き明朝、大きな見出し
10. SNS・お客様の声（社会的証明）: 横スクロールの投稿カード、Voice番号つき口コミカード
11. 3つのポイント（成分の根拠を詳しく）: Point筆記体ラベル、ワインレッド帯、図解・比較図
12. 4つの約束（品質・安全の安心）: ベージュ地に大きな明朝の番号、写真、無添加の丸アイコン
13. よくある質問（疑問解消）: 茶色の帯見出しとアコーディオン
14. 特典とクロージング（定期購入へ後押し）: 6つのメダル特典リスト、お届けサイクル図、比較図、黄色の安心帯、再度保証と注意書き

Imagery

• 琥珀色のスポイトボトルを切り抜きで大きく、金キャップの光沢を強調
• 黒地に金のボケ光やきらめきを散らす
• 40代前後の女性が頬に手を当てる明るい笑顔のアップ
• 雫・水しぶき・金のオイル波で浸透感を出す
• 成分は分子モデルや透明バブル、肌断面の図解イラスト
• 工場・検査の写真で清潔感と信頼感
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 程度の SP 幅カラムを置き、両側は無地かぼかした背景
• 画像主体の構成はそのまま拡大せず縦積みを維持
• 口コミや投稿カードは PC で2〜3列に並べてもよい
• 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 行書くと起動時に読み込まれる。