DESIGN.md — パールピンク×金の上品ファンデーションLP（Pearl Blush Luxury Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: パール光沢・淡いピーチピンク・シャンパンゴールド・細い明朝・広い余白・透明感
• 地の質感: シルクや液体ジェリーのような柔らかい光沢グラデーション。ノイズのない滑らかな面。
• 形: 角はほぼ直角で、細い金の枠線で囲む。悩み提示だけ白く光る真円バブルを使う。
• 温度感: 暖色寄りのニュートラル。ピンクベージュと薄いラベンダーグレーを交互に敷く

Colors

• 地は白・ピンクベージュのグラデ・ラベンダーグレーをセクションごとに交互に敷く
• 強い色は使わず、CTAとアクセント線だけシャンパンゴールドにする
• 見出し中の大事な語だけローズ色にする。1見出しにつき1〜2語まで
• 文字は真っ黒にせず濃グレーにする
• 購入枠は淡い面に金の1px線で囲む
• button-primary は文字 #FFFFFF × 背景 #D5C27D のコントラスト比が 1.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#88742C、4.58:1）を使う。
• step-number は文字 #FFFFFF × 背景 #DBB2BE のコントラスト比が 1.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B25B75、4.52:1）を使う。

Typography

• 和文はほぼすべて明朝の細めウェイトで組む
• 英字見出しは大文字のセリフ体で字間を広めに取る
• 見出しは中央揃え、本文は中央か左揃えで行間を2.0前後取る
• 注釈は※番号付きの極小ゴシックで、コピーの右下や下に置く
• 太字は使わず、色とサイズで強調する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央 約700px幅で、FVとモデルの段は2カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの上下に広い余白を取り、1画面に1メッセージにする
• 購入枠は中央に置き、左に商品写真、右に価格とボタン2つを縦に並べる
• 手順は番号・写真・説明文を横並びにし、SPでは縦に積む
• 区切りに中央の短い金のグラデ線を置く

Elevation & Depth

• 影はほぼ使わず、フラットな面と細線で区切る
• 悩みバブルだけ白い内側の光と柔らかい外側の影で浮かせる
• 技術アコーディオンの行は半透明の白い面にする

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 9999px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き。モデルは背景になじませた矩形。色見本はゆがんだ白い円の中に置く
• セクション境界: 直線で切り替え、背景色やグラデーションで区切る
• ボタンは角丸なしかごく小さい角丸の長方形
• SPF表記は細い線で囲んだ小さな長方形バッジにする
• 悩み提示は大小の真円を3つ重ねて配置する

Components

• ゴールド購入ボタン（button-primary）: シャンパンゴールドの平たい長方形に白の明朝文字。2つを縦に並べる
• 商品購入枠（purchase-box）: 淡い面を金の1px線で囲み、商品名・SPFバッジ・価格・ボタンを入れる
• SPFバッジ（badge-spf）: ローズの細枠と文字で作る小さな表示
• 悩みバブル（concern-bubble）: 白く光る真円の中に悩みを2〜3行で入れ、大きさを変えて3つ並べる
• 技術アコーディオン（tech-accordion）: ピンクのセリフ番号・説明・強調語・右端の＋を1行にまとめる
• 手順番号（step-number）: 淡ピンクの小さな円に白の番号を入れ、写真の左上に重ねる
• ポイント枠（point-box）: グレーの面に中央見出しを置き、図解と説明を並べる
• 金の区切り線（gold-divider）: 見出しの上下に置く、両端が消える細い金のグラデ線

Do's and Don'ts

Do - 淡いグラデーションと白の余白で上品さを保つ - 金はボタン・細線・枠だけに絞って使う - 明朝体を細く、字間を広めに組む - 効果をうたう表現には※注釈を必ず添える - 購入枠をページ中に3回繰り返して置く

Don't - 原色や彩度の高い赤・青を使わない - 太いゴシックや手書き風の書体を使わない - 濃い影や立体的なボタンを使わない - 文字を詰めて情報を詰め込まない - 角丸の大きいポップなカードにしない

Page Structure

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

1. ファーストビュー（商品の世界観と主張を一言で伝える）: ピーチ色のシルクのような背景に商品の切り抜き、右側に明朝2行コピーと英字の商品名を置く
2. コンセプト（商品の価値を言葉で定義する）: 左にローズ強調の見出しと短い本文、右にモデルのポートレートを置く
3. 購入CTA（早めに購入へ導く）: 感動を伝える2行コピーの下に金枠の購入ボックスを置く
4. 悩みの提起（ターゲットの悩みに共感する）: グレーのパール背景に光る円を3つ置き、下に見出しを入れる
5. 特長・技術（3つの技術で効果を裏付ける）: 中央に商品写真、その下に番号付きアコーディオンを3行
6. ブランドメッセージ（メインコピーを再提示する）: 金の区切り線で挟んだコピーとモデルの写真
7. カラーバリエーション（色の選択肢を示す）: ラベンダーグレーの地に英字見出し、番号付きの白い円の色見本を2つ並べる
8. 使い方（正しい使い方を手順で説明する）: 番号・写真・説明の行を4段にし、グレーのポイント枠で補足する
9. 関連商品（併用商品を提案する）: 金の二重線で区切った枠に、モデル写真と商品と価格を入れる
10. 動画（使い方を動画で見せる）: 英字見出しの下にFVと同じトーンのサムネイルと再生ボタン
11. 注意事項（品質への不安をなくす）: グレーの帯に商品写真と英字の小見出しと説明文
12. 最終CTA・フッター（購入をもう一度促す）: ピンクのグラデにコピーと購入枠、下に小さなリンクとコピーライト

Imagery

• 商品はパール白と金のパッケージを切り抜き、柔らかい映り込みを入れる
• 背景はピーチ色のシルクや液体ジェリーが波打つ光沢のビジュアル
• モデルは白い服で、明るいハイキーの自然光。微笑んだ肌の写真
• 使い方はスパチュラと指と肌のクローズアップを明るいグレーの背景で撮る
• テクスチャはクリームを丸く塗り広げた写真を白い円に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは2カラムのFVとモデル段を縦に積み、写真を先に置く
• 購入枠はSPで写真を上、価格とボタンを下にして、ボタンは全幅にする
• 悩みバブルはSPで大1つと小2つの三角配置に縮める
• 手順の写真と説明はSPで縦に積む
• PCは本文を最大700px程度で中央に寄せ、背景は全幅で敷く

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