DESIGN.md — 白銀×シャンパンゴールドの高級化粧水LP（Pearl White and Champagne Gold Luxury Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、シンプル・ミニマル、やさしい・柔らかい、清潔・爽やか
• キーワード: 白銀・シャンパンゴールド・明朝体・余白・艶・とろみ
• 地の質感: パールのような白と淡いグレーのグラデーション。液体や絹の柔らかな光沢がある
• 形: 角のない円形のバッジやカード、細い金の水平線、角丸のない矩形ボタン
• 温度感: わずかに暖かいニュートラル（生成り寄りの白に金）

Colors

• 地は白が基本。区切りにはオフホワイトやライトグレーをごく薄く使う
• ゴールドは見出しの強調文字・細線・ボタン・帯だけに使う
• ゴールドの帯やボタンは左右で濃淡がつくグラデーションにし、金属の光沢を出す
• 本文は墨色。真っ黒やビビッドな色は使わない
• 口コミの円やバッジはクリーム色の地に金の細い輪郭をつける
• 写真は白銀〜クリームの色味にそろえ、彩度の高い色を入れない
• gold-band は文字 #FFFFFF × 背景 #948A6E のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#7E765D、4.53:1）を使う。

Typography

• 全体を明朝体で統一する。ゴシックはフッターだけに使う
• 強調する見出しはゴールド文字で中央揃えにし、2 行に分ける
• 本文は左揃えで行間を広く取る
• 注釈は * 記号付きの極小サイズにして、該当ブロックの直下に置く
• 数値は本文より一回り大きくし、効果を強調する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。図解は画像と文章の 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション間は金の細いグラデーション線で区切る
• 見出しは中央揃え、本文は左揃え
• 商品の写真は画面の中央に大きく置き、周囲に余白を多く取る
• 特長は「番号ラベル→ゴールド見出し→写真→本文→まとめのゴールド文」の順に並べる
• 口コミの円カードは左右交互にずらして配置する

Elevation & Depth

• 影はほぼ使わない。平面と光沢で奥行きを出す
• 口コミの円は輪郭を淡くぼかした内側グラデーションで、浮いているように見せる
• 定期便の写真は白い枠線とグレーのマットで額装する

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は矩形のまま。テクスチャのマクロ写真は円形にぼかして切り抜く
• セクション境界: 中央が濃く両端が消える金の細線。またはゴールドグラデーションの帯
• ボタンと枠は角丸なしの矩形
• 円形は口コミ・効能バッジ・番号ラベル・吹き出しだけに使う
• 枠線は 1px のゴールド

Components

• ゴールド購入ボタン（button-primary）: 横幅いっぱいの角丸なし矩形。ゴールドのグラデーションに墨色の明朝文字
• 口コミ円カード（review-circle）: 直径約 170px のクリーム色の円に金の輪郭。中に短い感想を中央揃えで入れ、左右交互にずらす
• 効能の円バッジ群（benefit-bubbles）: 白く半透明の円を 4 つ重ね、各円にゴールドの明朝体で 2 文字の効能語を入れる
• ゴールドのコピー帯（gold-band）: 画面幅いっぱいのゴールドグラデーション帯。白い明朝体の 2 行コピーを入れる
• 特長番号ラベル（feature-label）: 見出しの上に置く小さな「ブランド名＋番号」表記。下に金の細線を引く
• まとめの番号付きリスト（summary-list-item）: 左に金の輪郭の円の番号、右に小さな説明と大きな見出しを置き、下に金線を引く
• 受賞実績ブロック（award-block）: 王冠アイコンと英字ラベル。上下を金の線で挟み、受賞名を中央揃えで列挙する
• 定期便ボックス（subscription-box）: グレー地のボックスに、ゴールドの見出し・額装した写真・説明・ボタンを入れる
• 相談案内カード（counseling-card）: 金の 1px の枠。左に見出し・本文・ゴールドのテキストリンク、右に人物写真を置く

Do's and Don'ts

Do - 余白を大きく取り、1 画面に入れる要素を少なくする - ゴールドは細線・強調文字・ボタンに限定して使う - 注釈は * 記号で本文と対応させ、極小サイズで添える - 写真は白〜クリームのハイキーなトーンにそろえる - 各特長の最後は、ゴールド文字の 2 行で締める

Don't - 赤や黄色のセール風の配色を使わない - 太いゴシックや手書き文字を使わない - ピル型ボタンやドロップシャドウを使わない - 要素を詰め込みすぎない。カードを密に並べない - ゴールドを広い面のベタ塗りに使わない

Page Structure

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

1. ファーストビュー（商品の世界観を一目で伝える）: とろみのある液体の渦の上に商品ボトルを置いた大きな写真。下に明朝の短いキャッチと商品名を置く
2. リード・効能（商品の価値を要約する）: 左揃えの明朝リード文と注釈。白い円バッジに効能語を 4 つ入れ、ボトル写真と組み合わせる
3. 受賞実績（第三者の評価で信頼を得る）: 王冠アイコンとゴールドの見出し。受賞名を中央揃えで列挙し、上下を金線で挟む
4. お客様の声（使用感を共感とともに伝える）: 星 5 つとゴールド見出しの下に、クリーム色の円カードを 4 つ左右交互に並べる
5. ブランド訴求（技術の先進性を印象づける）: ボトルのクローズアップ写真に見出しを重ね、ゴールドの帯コピーにつなげる
6. 特長1〜3（成分・質感・浸透の根拠を示す）: 番号ラベル、ゴールド見出し、マクロ写真、断面の図解、本文、まとめのゴールド文の順に並べる。各特長は金線で区切る
7. 特長まとめ（3 つの特長を振り返る）: 商品写真の下に、円の番号付きリストを 3 行置く
8. 商品・購入（購入へ誘導する）: ゴールドの帯コピー、大きなボトル写真、商品名と容量、ゴールドの購入ボタン、ゴールドの説明見出しの順に並べる
9. 定期便（継続購入を案内する）: グレーのボックスに、額装したセットの写真と申込ボタンを入れる
10. 相談案内（無料相談へ誘導する）: 金枠のカードに、テキストと人物写真を横に並べる
11. フッター（SNS と各種リンクを載せる）: オフホワイト地。欧文セリフの見出しと黒い SNS アイコン、中央揃えのリンク一覧

Imagery

• 白〜クリーム色の液体が渦を巻くマクロ写真。柔らかな逆光で艶を出す
• 白銀色の絹糸の束や水面の波紋を、ハイキーで背景を飛ばして撮る
• 商品ボトルは白背景の切り抜きで、中央に大きく置く
• 肌の断面は、淡い水色のレンガ状の細胞とゴールドの油滴で描いたフラットな図解
• ゴールドの円の吹き出しに、2〜4 文字の効果語を白文字で入れる
• 人物写真は黒い服のスタッフ。白い明るい背景で撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 80% 幅のコンテナ。FV は横長写真の左側にキャッチを重ねる
• PC のリードは、左にテキスト、右にボトルと効能バッジの 2 カラムにする
• PC の口コミ円は 4 つを横一列に並べる
• PC の図解や比較写真は 2 カラムで並べる
• PC の購入エリアは、左に商品写真、右に説明とボタンの 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 行書くと起動時に読み込まれる。