DESIGN.md — 紺×金×ローズの明朝系エイジングケア美容クリーム LP（Navy Gold Elegant Anti-Aging Cream LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、信頼・誠実、清潔・爽やか
• キーワード: 濃紺の夜空・金メダル・明朝体の大見出し・ローズピンク強調・とろみのある白クリーム・悩み提起の黒黄
• 地の質感: 星空のグラデーション、クリームの質感写真、石膏・コンクリート風の灰色テクスチャ、ペーパー調の淡色地
• 形: 円形の成分バッジ、金縁の角丸メダル、斜めカットのセクション境界、白カードに軽い影
• 温度感: やや寒色寄り（紺・グレー）に、ピンクと金で温かさを差す

Colors

• 地は白と淡グレーを基本とし、オファー・特典・ポイントは濃紺の夜空地に切り替える。
• 数字・価格・悩みワードはローズピンクで強調する。
• 受賞・ポイント番号・特典番号は金グラデーションで高級感を出す。
• 悩み提起パートだけ黒・灰テクスチャ地に黄色文字で警告感を出す。
• CTAは緑グラデーションのボタンに黄色のクーポンラベルを重ねる。
• 成分紹介は自然由来を示す緑をラベルに限定使用。
• button-primary は文字 #FFFFFF × 背景 #3DBE3A のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2B8729、4.56:1）を使う。
• offer-card は文字 #BD1F54 × 背景 #15224C のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D9E0F5、4.57:1）を使う。
• award-medal は文字 #FFFFFF × 背景 #B8902E のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#917224、4.53:1）を使う。

Typography

• 上品な訴求は明朝、警告・悩みは極太ゴシックで使い分ける。
• 見出しは重要語だけ一回り大きくしてピンクにする。
• 数字は斜体セリフで大きく、単位は小さく添える。
• 薬機法対応の※注釈を見出し右上に小さく付ける。
• 縦書き見出しをFVや悩み写真の上に使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、成分や比較は 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは画像幅いっぱいの全幅で積む。
• 特典は白カードを縦に並べ、左に金の番号円を置く。
• 成分は円形写真＋名称＋説明の3列グリッド。
• 写真の上に縦書き見出しや吹き出しを重ねる。
• 比較は左右2列で並べ下にラベルを置く。

Elevation & Depth

• 白カードに薄いドロップシャドウ。
• 金メダルは光沢グラデーションで立体感。
• 円形バッジは白地に柔らかい影と光沢縁。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅写真、円形切り抜き、角丸四角の比較写真
• セクション境界: 斜めカットや三角の切り込みでセクションを繋ぐ
• 成分・無添加項目は正円バッジ。
• 帯見出しは台形・リボン型。
• CTAは角丸小さめの横長ボタン。

Components

• クーポン付きCTA（button-primary）: 緑グラデのボタンに黄色クーポンラベルと割引価格を重ねる
• 価格オファーカード（offer-card）: 濃紺夜空の上に商品写真、通常価格の取り消し、ピンクの大きな価格と割引円バッジ
• 受賞メダル（award-medal）: 金縁の盾型メダルに王冠とNo.1表記
• 特典リスト（benefit-list）: 白カード内に金の番号円と特典テキストを点線区切りで並べる
• 帯見出し（ribbon-heading）: 濃紺または灰の帯に白文字の小見出し
• 円形成分バッジ（circle-badge）: 白い光沢円に効果ワードを明朝で配置、×で2つ並べる
• 愛用者の声カード（voice-card）: 顔写真の横に金帯ラベルと白カードの感想
• 悩み警告見出し（warning-heading）: 黒帯に黄色極太文字、写真上に縦書き黒ラベル
• 使い方ステップ（step-circle）: 紺の番号札付き円形線画イラストを左右交互に配置

Do's and Don'ts

Do - 明朝の大見出しで上品さを保つ。 - 数字と効果ワードはピンクで大きく。 - オファー部分は濃紺夜空背景で統一する。 - 全ての効能表記に※注釈を付ける。 - 成分は円形写真で清潔に並べる。

Don't - ビビッドな原色を広い面に使わない。 - 黒黄の警告表現を悩み以外に使わない。 - 丸ゴシックでかわいく寄せない。 - 注釈なしで効能を断定しない。 - 金色をフラットな黄土色で済ませない。

Page Structure

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

1. 告知バー・お知らせ（限定特典と購入制限を伝える）: ピンク帯の特典告知と濃紺地の注意書き
2. ファーストビュー（効能と信頼を一目で伝える）: 女性ポートレート上に縦書き明朝の特大見出しと金バッジ
3. 新提案（2つの効能を提示）: 光沢円バッジ2つを×で並べ商品写真
4. 実績・受賞（社会的証明）: 金メダル3つと斜体の大数字
5. メディア・SNS（話題性を示す）: 雑誌コラージュ、SNS写真のグリッド
6. オファー・特典（定期コースの価格と特典）: 濃紺夜空にオファーカード、CTA、6特典リスト、お届けサイクル
7. 悩みの提起（年齢による悩みに共感）: モノクロ写真、黒帯に黄色極太文字、吹き出し
8. 商品の特長（テクスチャと個包装を訴求）: クリーム写真と明朝見出し、愛用者の声カード
9. 誤解と根拠（専用ケアの必要性）: 灰テクスチャ地、イラスト、断面図比較、円グラフ
10. 成分の秘密（有効成分の解説）: 番号付き秘密、成分カード、円形成分グリッド、無添加円バッジ
11. 使い方（使用手順を示す）: 夜空のルーティン図、円形線画ステップ
12. ポイント（配送・送料の安心）: 写真背景に番号付きポイント
13. クロージングCTA（最終申込）: オファーカードとCTAを再掲

Imagery

• 30〜40代女性の首元・顔を柔らかい自然光で撮影。
• 白いクリームのとろみ・ツヤを接写。
• 星空や光の粒のグラデーション背景。
• 成分は植物素材を円形切り抜き。
• 悩みパートはモノクロ・灰色テクスチャ。
• 手順は細線の線画イラスト。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に375〜480px幅のSPデザインを置き、左右は淡色地で埋める。
• 背景グラデーションは全幅に伸ばす。
• 成分グリッドはPCで4〜6列も可。
• CTAは最大幅400px程度に抑える。

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 行書くと起動時に読み込まれる。