DESIGN.md — シャンパンベージュ×焦げ茶の上品エイジングケア LP（Champagne Beige Aging Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実、清潔・爽やか
• キーワード: シャンパンゴールド・焦げ茶の明朝・艶と光の粒・細線の枠・余白多め
• 地の質感: 白〜生成りのフラットな地に、金色の光の粒やボケのある写真で艶感を足す
• 形: 角丸はほぼなし〜小。細い1pxの枠線カード、円形の成分バッジ
• 温度感: 暖かめ（ベージュ・茶系）

Colors

• 地は白を基本に、商品一覧など区切りたい塊だけ生成りにする
• 見出しは焦げ茶、本文は茶寄りのグレーで黒を避ける
• 金ベージュは数量限定バッジ・帯・小見出し線に限定
• 購入ボタンは濃い黒茶ベタ、白文字
• 原色は使わず、すべて暖色系の低彩度でまとめる

Typography

• 情緒的な見出しは明朝、情報・価格はゴシック
• 見出しは中央揃え、字間をやや広く
• 価格は太字ゴシックで（税込）を小さく添える
• 数字やDay表記は斜体セリフで大きく
• 本文は行間1.8以上でゆったり
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、タイプ比較や体験写真は横スクロールまたは縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 中央寄せの見出し→本文→画像の順に積む
• 商品カードは細線枠で囲み、画像左・情報右（SPは縦積み）
• セクション間は余白で区切り、線は細く控えめ
• 商品一覧は生成り地の上に白カードを敷く

Elevation & Depth

• 影はほぼ使わずフラット
• カードは1pxの淡い線で区切る
• ステップ図の円だけ淡いぼかしのグロー

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形トリミング、商品は白背景の切り抜き
• セクション境界: 直線。色帯の切り替えか余白のみ
• ボタンは角丸2〜4pxの長方形
• 成分バッジは細線の正円
• 見出し下に金の細い横線を引く

Components

• カート・購入ボタン（button-primary）: 黒茶ベタの横長ボタン、右にカートアイコンや矢印
• 数量限定バッジ（badge-limited）: 金ベージュの小さな四角ラベル
• 商品カード（product-card）: 細線枠内に商品切り抜き・商品名・価格・ボタン
• 金線小見出し（heading-gold-line）: 金文字を中央に置き下に細い金線
• 成分円バッジ（ingredient-circle）: 細線の円に成分名を太字で3つ並べる
• タイプ比較カード（type-compare-card）: チェックリスト→番号付きタイプ名帯→説明→図解の3枚
• ベージュ帯見出し（band-heading）: 淡いベージュ全幅帯に中央見出し2行
• 関連バナー（banner-link）: 左画像・右テキストの細線枠横長バナー、右下にリンク矢印

Do's and Don'ts

Do - 暖色の低彩度でまとめ、金は差し色に留める - 余白を広く取り高級感を保つ - 商品は白背景の切り抜きで清潔に見せる - 情緒的コピーは明朝、価格・スペックはゴシック

Don't - 赤や原色のセール風ボタンを使わない - 強いドロップシャドウや大きな角丸を使わない - 純黒の本文や詰めた行間にしない - 装飾アイコンを多用しない

Page Structure

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

1. ファーストビュー（ブランド世界観と試用期間の訴求）: ベージュ光背景にモデル写真、左に大きな明朝コピーとロゴ
2. 受賞実績（信頼付与）: 金の二重枠バナーに受賞メダルと実績数
3. 限定セットCTA（早期購入導線）: 細線枠カードに商品画像・限定バッジ・価格・購入ボタン
4. ブランドストーリー（研究背景の訴求）: 光の粒の円形背景に明朝の中央揃え文
5. 使用変化（日数ごとの実感を示す）: モデル写真3枚にDay数字を斜体で重ねる
6. 成分・処方（効果の根拠）: 艶玉写真2枚と円形成分バッジ3つ
7. 使用感（テクスチャー訴求）: 金線小見出し、本文と滴の写真、肌アップ写真
8. タイプ選び（自分に合う種類の案内）: 3列比較カード、下向き三角、チェック方法の解説
9. トライアル・限定セット（購入）: 二重線枠カード2つに商品と黒茶ボタン
10. 商品一覧（単品購入）: 生成り地に白パネル、商品ごとに価格・ボタン・特典
11. 使用ステップ（併用提案）: 朝夜の図、ベージュ帯見出し、円のステップ図
12. 関連商品（クロスセル）: 2列商品と詳細ボタン
13. 開発ストーリー（作り手の想い）: 写真付きカードの横スライダー
14. 関連バナー・SNS・フッター（回遊と問い合わせ）: 細線枠横長バナー3本、丸SNSアイコン、黒帯フッター

Imagery

• 40〜50代女性の自然な笑顔、白い服、柔らかい暖色光
• 金色の光の粒・ボケ・艶のある球体で成分を表現
• 商品は白背景で真正面の切り抜き
• 肌アップは横顔で艶を強調、背景は白
• 研究・開発は明るい自然光の実験室・作業風景
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約800px幅、SPは左右5%余白の1カラム
• 商品カードはPCで画像左・情報右、SPは縦積み
• タイプ比較3列はSPで縦積みか横スクロール
• Day写真3枚はSPでも3列を縮小維持
• FVはSPで写真上・コピー下に分割

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