DESIGN.md — 白×金の上品な美白ボディクリームLP（Pearl White and Gold Whitening Cosmetic LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、情報量多め・訴求型
• キーワード: 純白・シルク質感・金の箔文字・明朝見出し・月桂樹・ワインレッドのリボン
• 地の質感: 布のドレープや幾何学の白いグラデーション地、金の箔のようなグラデーション文字
• 形: 角の立った矩形ラベル、円形の成分バッジ、斜めのリボン帯
• 温度感: 白とグレーを基調にした、少し温かみのある金の涼しげな高級感

Colors

• 地は白と淡いシルクグレーを交互に使い、色面を広く取らない
• 強調語は金グラデーションの明朝で、数字や商品名に限る
• ワインレッドはリボン帯とバッジだけに少量使う
• 悩みの強調語のみ赤ピンク文字にする
• 統計など1か所だけ暗いチャコール帯を入れ、黄色で数字を強調
• 比較は他社=濃グレー、自社=金の箱で対比させる
• award-ribbon は文字 #343533 × 背景 #99896B のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A99B82、4.52:1）を使う。
• compare-label は文字 #FFFFFF × 背景 #BE9B4A のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#8E7233、4.56:1）を使う。

Typography

• 見出しは明朝で字間を広めにとる
• 強調語だけ大きく金グラデーションにし、助詞は小さくする
• 本文はゴシックで細めに
• Pointの番号は筆記体の欧文と細い明朝の数字を組み合わせる
• 数字の実績は金の明朝イタリックを月桂樹で挟む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、成分説明は画像左・文字右の帯
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは中央揃え
• セクション間は短い灰色の横棒で区切る
• 成分は画面幅いっぱいの横長帯を縦に重ねる
• 手順は写真と文字を左右交互に配置
• 表は細い罫線と点線で行を区切る

Elevation & Depth

• 商品チューブ写真の下に柔らかい影を落とす
• ラベル箱に軽いドロップシャドウ
• カード類はほぼフラットで影は控えめ

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物・商品は切り抜きで白地になじませ、成分は横長の矩形にグラデーションでフェード
• セクション境界: 直線の切り替えと大きな楕円の白い弧、中央の短い灰色バー
• ラベルは角丸ほぼなしの矩形
• 成分や部位は円形バッジで示す
• リボンは斜めの帯で端を切り込む

Components

• 受賞リボン帯（award-ribbon）: 金のリボン帯と受賞メダルをFV上部に置く
• ワインレッドの斜め帯（ribbon-tag）: 白い明朝でキャッチを載せる斜めリボン
• 部位・成分の円バッジ（circle-badge）: 白い円に部位名、写真円に成分名を載せる
• 無添加タグ（free-tag）: 濃グレーの矩形に白文字の無添加項目を並べる
• 月桂樹の実績表示（laurel-stat）: 金の月桂樹と王冠で順位や販売数を挟む
• 悩みのチェックリスト（check-list）: 写真地に四角チェックと白文字、強調語を赤ピンク
• Point番号見出し（point-heading）: 筆記体のPointと数字に、クリームの塗り跡を添える
• 比較ラベル箱（compare-label）: 他社は濃グレー、自社は金の箱で特徴を並べる
• 吹き出し付き表（speech-box）: 細線の枠に下向き吹き出しと罫線表を組む

Do's and Don'ts

Do - 白とグレーの余白を広く保ち高級感を出す - 見出しは明朝、強調語は金グラデーションに - セクション毎にPoint番号で区切る - 成分は実物写真を横長帯で見せる - 数字の実績は月桂樹で装飾する

Don't - 原色の大きな色面を使わない - ポップな丸ゴシックを見出しに使わない - 金とワインレッドを多用しない - 角丸の大きいカードを並べない - 写真を暗く強いコントラストにしない

Page Structure

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

1. ファーストビュー（権威と効果を一目で伝える）: 受賞リボン、明朝大コピー、商品写真、部位円バッジ、無添加タグ
2. 実績（人気と販売数で信頼づけ）: 白地に王冠と月桂樹、金の大数字
3. 悩みの提起（共感を得る）: モノトーン写真地に白文字チェックリスト
4. 統計データ（悩みの普遍性を示す）: 暗い帯に黄色の円グラフと大きな%
5. 商品紹介（解決策として登場させる）: 明朝の商品名、人物と商品の切り抜き、縦書きの金コピー
6. 選ばれる理由（成分）（有効成分を説明）: Point見出しと成分写真の横長帯
7. 選ばれる理由（使用部位）（全身に使えると示す）: 人物切り抜きに金の引き出し線で部位名
8. 他社比較（デザインの優位性）: グレー対金の左右対比ラベル
9. 使い方（手軽さを伝える）: リボン帯、大きなSTEP数字、写真と文字を交互配置
10. 使用目安（継続を促す）: 細線枠の吹き出しと罫線表、商品写真
11. こだわり・品質（安全性で安心させる）: シルク地、無添加の白パネル、月桂樹の認証表示

Imagery

• 白い下着の女性モデルを明るいハイキーで撮る
• 商品チューブは白背景に切り抜き、柔らかい影
• 成分は果実や植物の接写で、一方を白へフェード
• 背景に白いシルクのドレープや幾何学の淡い面
• 金の月桂樹・王冠・細い線のアイコン装飾
• クリームの塗り跡テクスチャを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像は中央固定幅の縦長構成で、SPもほぼ同じ1カラム
• SPでは大見出しを28px前後に縮める
• 成分帯は画面幅いっぱいを維持
• 比較ラベルは左右2列のまま小さくする
• PCでは左右に淡いグレー地を見せ中央カラム化

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