DESIGN.md — 深い紺と光沢の高級美容液キャンペーンLP（Midnight Navy Luxury Skincare Campaign LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、クール・先進的、情報量多め・訴求型
• キーワード: 濃紺グラデーション・青白い発光・明朝見出し・ポイント倍率訴求・ボトルの物撮り・細い光のライン
• 地の質感: 暗い宇宙のような深い紺に、中央から放射する青白い光とスポットライト。後半は光沢のある白・淡いピンクのスタジオ光。
• 形: ほぼ角丸なしの矩形。価格枠は細い白線の四角、ボタンは淡色の小さな矩形、ポイントバッジだけ円形。
• 温度感: 前半は冷たく静謐、後半はやや暖かく華やか。

Colors

• 前半のブランド訴求は濃紺→黒のグラデーション地に統一し、文字は白。
• 光は中央・商品背後から青白く放射させ、単色ベタの紺は避ける。
• ポイント倍率や特典見出しのみマゼンタを使い、他では使わない。
• 濃紺地のボタンは淡い水色地＋紺文字、白地のボタンは黒地＋白文字。
• 後半の商品一覧・特典は白〜淡いピンク地に切り替えて温度を上げる。
• フッターは黒地に白文字で締める。

Typography

• 見出しは明朝で上品に。数字訴求だけ太いゴシックで強める。
• 注釈記号（*1 など）を見出し内に小さく上付きで添える。
• 見出しは中央揃え、商品情報ブロックは右寄せ・中央揃え。
• 価格は税込表記を小さく添える。
• 見出し上下に細い白のグラデーション線を引く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典カードは横スクロールまたは縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは全幅の背景で区切り、内容は中央寄せ。
• 商品セクションは写真と情報を左右（SPは上下）に配置。
• 成分はカルーセルで1枚ずつ大きく見せる。
• 効果キーワードは商品画像を囲むように楕円バッジで配置。
• 脚注は該当ブロックの直後にまとめる。

Elevation & Depth

• 影はほぼ使わず、光のグロー（外側の青白いぼかし）で浮遊感を出す。
• クーポンカードに薄い影。
• 楕円バッジは半透明の濃紺に白い縁光。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きボトルを光の中に置く。モデルは矩形で全幅。
• セクション境界: 直線で背景色を切り替える。
• ボタンは小ぶりの矩形、末尾に » 矢印。
• 価格枠は白の細線で囲む矩形。
• ポイントバッジはマゼンタの正円。
• 効果ワードは楕円の半透明バッジ。

Components

• 購入ボタン（濃紺地上）（button-primary）: 淡い水色の矩形に紺文字と » 矢印
• 黒の購入ボタン（button-dark）: 白地商品ブロック用の黒矩形と、横にマゼンタのお気に入りボタン
• 期間限定ポイントラベル（limited-label）: 淡色帯に「期間限定」と太字の倍率数字
• 価格枠（price-box）: 白細線の矩形に容量と価格を行ごとに記載
• ポイント円バッジ（point-badge）: マゼンタの正円に白で倍率
• エントリー特典カード（coupon-card）: 白またはピンク地の矩形、大きな倍率数字と黒の詳細ボタン
• 成分カルーセルカード（ingredient-card）: 濃紺カードに光る球体イラスト、円形の新配合ラベル、左右矢印とドット
• 効果キーワード楕円（benefit-bubble）: 商品の周囲に配置する半透明の楕円バッジ
• 特典カード（gift-card）: マゼンタの見出し帯＋淡ピンク地の本文と商品写真

Do's and Don'ts

Do - 暗い地には必ず青白い光源を入れて奥行きを出す。 - 見出しは明朝、数字はゴシック太字で強弱をつける。 - ポイント倍率はセクションごとに繰り返し提示する。 - 注釈番号を付け、脚注をまとめて記載する。 - 商品は切り抜きで光の中心に置く。

Don't - 暖色やビビッドな色を前半のブランド部に使わない。 - 丸っこいピル型ボタンやポップな書体を使わない。 - マゼンタを見出しや本文に多用しない。 - 濃紺を平坦なベタ塗りにしない。 - 大きな角丸カードでカジュアルにしない。

Page Structure

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

1. ファーストビュー（セール期間と高級感の提示）: 左に黒地の明朝タイトルと期間、右にボトルとモデルの光る写真
2. エントリー・クーポン（ポイント特典の告知）: 白地に3枚の特典カードと、下にピンクのお知らせバナー
3. 新商品誕生（主力商品の登場演出）: 濃紺グラデーションにボトル、期間限定ラベル、大きな明朝見出し、ブランド動画枠
4. 商品購入ブロック（価格提示と購入導線）: 左にボトル、右に見出し・倍率ラベル・価格枠・購入ボタン
5. 成分訴求（新成分の価値説明）: 光る球体ビジュアルと数字の明朝見出し、2列のチェックリスト
6. 配合成分（成分を個別に紹介）: 濃紺カードのカルーセル
7. 効果イメージ（得られる肌の状態を列挙）: 渦巻く光の中央に商品、周囲に効果の楕円バッジ
8. テクスチャー（使用感の訴求）: 液体の質感写真と短い説明、詳細ボタン
9. 関連商品（ギフト向け商品の提案）: 濃紺地に上部ラベル、商品写真と価格・購入ボタン
10. 注釈（表記の根拠提示）: 白地に小さな番号付き脚注を列挙
11. ベストセラー（他商品への回遊）: ピンク帯見出し、カテゴリタブ、全幅の商品ブロックを交互に配置し円形ポイントバッジ
12. 購入特典（公式購入の動機づけ）: 淡ピンク地に3枚のマゼンタ見出しカード
13. フッター（正規品保証と問い合わせ）: 黒地に保証マークと白文字、リンクを3列

Imagery

• ボトルは黒背景で青白いリムライトを当て、底部が光る演出。
• 成分は透明な球体・水滴を発光させた CG 風。
• 渦巻く光の軌跡や星屑で宇宙的な背景を作る。
• モデルは冷たい色調で肌に光の粒子を重ねる。
• 後半の商品は白い光沢面と透明アクリル、虹色の反射で撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 480px 相当の固定幅で、SP でもほぼ同じ縦積み構成。
• SP では商品購入ブロックを写真上・情報下に積む。
• 特典カード3枚は SP で横スクロールまたは1列に。
• 効果バッジは SP で商品の左右2列に縮小配置。
• フッターのリンクは SP で2列に。

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