DESIGN.md — シャンパンベージュ×真珠光沢の化粧品 LP（Champagne Pearl Cosmetic Foundation LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型
• キーワード: シャンパンベージュ・真珠光沢・明朝の見出し・光のボケ・金茶グラデーション・番号付き特長
• 地の質感: 光のボケ、シルクのドレープ、水面の揺らぎを淡く敷く。艶のある質感。
• 形: 角丸は小さめ。円形の成分バブル、ガラス玉のようなバッジ、細い金線の枠を使う。
• 温度感: 暖色寄り。ベージュとピンクベージュの間の色温度。

Colors

• 地は生成り白とシャンパンベージュを交互に使い、純白は面積を絞る。
• 大見出しは金茶のグラデーション、本文は濃いグレーブラウンにする。
• 訴求を強めたい帯だけにブラウンの濃色を使い、文字は白にする。
• 悩みのセクションだけ青灰色の帯にして、明るい解決パートと差をつける。
• 強調語はベージュのマーカー背景で目立たせる。
• 原色や彩度の高い色は成分写真の中だけにとどめる。
• tag-small は文字 #A88A5E × 背景 #FFFBF6 のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#896F4A、4.59:1）を使う。

Typography

• 見出しは明朝、本文はゴシックにする。
• 大見出しは数字や要の語だけを一回り大きくして強弱をつける。
• 英字の小見出しは字間を広げて和文見出しの上に置く。
• 本文は中央揃えにして 2〜3 行ごとに改行する。
• 注釈は米印の番号をつけて、セクションの末尾にまとめる。
• 縦書き明朝を製品写真の左右に添えて誌面のように見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分バブルは 3〜4 列、カラー比較は 2 列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地色や背景のテクスチャを切り替える。
• 特長は 01〜04 の番号円と横長の見出し帯で始める。
• 見出し、リード、図版、注釈の順に縦に並べる。
• 吹き出しカードは左右に少しずらして交互に置く。
• 製品写真の周りにはゆったり余白を取る。

Elevation & Depth

• 白カードには淡くぼかした影（0 4px 16px rgba(120,90,60,0.1)）をつける。
• 成分バブルはガラス玉のような光沢と内側の影で立体的に見せる。
• ほかの要素はほぼフラットにし、背景の光で奥行きを出す。

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分は円形、人物と製品は切り抜きか角なしの矩形
• セクション境界: 直線で切り替えるのが基本。解決パートの導入だけ下向きの浅い V 字にする。
• 帯ラベルは角なしか角を少しだけ落とした矩形にする。
• 番号は細い金線の円に入れる。
• 吹き出しには小さな三角のしっぽをつける。
• 細い金線の枠で動画やブロックを囲む。

Components

• ブラウン帯ラベル（label-band-dark）: 白い明朝を入れた横長の濃茶帯。2 段に重ねて訴求する。
• 番号付き特長見出し（feature-number-header）: 金線の円に 01 などの番号を入れ、その下に横長のベージュ帯と明朝見出しを置く。
• ガラス玉バッジ（glass-badge）: 半透明の円形バッジ。効果や機能を 2〜3 語で入れ、3 つ並べるか円環状に配置する。
• 口コミ吹き出し（voice-bubble）: 白い角丸カードに 2 行程度の感想を入れ、左右交互にずらして置く。
• 悩み吹き出し（worry-chip）: 人物写真の横に、半透明の白い角丸帯で悩みを 3 つ並べる。
• 成分バブル（ingredient-bubble）: 円形の成分写真の下に名前と注釈番号を入れる。新成分には NEW の文字を添える。
• 小見出しタグ（tag-small）: 淡ベージュ帯やブラウン台形の上に短い見出しを載せる。
• チェックリスト（check-list）: 金茶のチェックボックスアイコンと短い利点を並べる。
• 金線フレーム（gold-frame）: 動画や比較ブロックを囲む細い金茶の枠線。

Do's and Don'ts

Do - 淡い光のボケやシルクの質感を背景に敷き、艶を出す。 - 大見出しは明朝に金茶のグラデーションをかけて組む。 - 特長は番号と帯見出しで同じ型をくり返す。 - 成分は円形写真でそろえて並べる。 - 効果をうたう表現には米印の注釈を必ずつける。

Don't - 彩度の高い赤や青を広い面に使わない。 - 太いゴシックの極太見出しを多用しない。 - 強いドロップシャドウや立体的なボタンは使わない。 - 背景を真っ白のベタ塗りだけにしない。 - 角丸の大きいポップなカードは使わない。

Page Structure

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

1. ファーストビュー（商品の価値をひと目で伝える）: 左に明朝のキャッチと特長タグ 6 個、右に製品写真、角に丸い時期バッジを置く。
2. リニューアル告知（進化した点を伝える）: 光のボケの地にガラス玉バッジを 3 つ並べ、新成分 2 つを円形写真で紹介する。
3. 悩みの提起（共感を得る）: 青灰色の帯見出しの下に、モノトーンの人物写真と悩みの吹き出しを 3 つ置く。V 字の境界から解決へつなぐ。
4. 商品コンセプト（解決策を示す）: 斜めに置いた製品写真の左右に縦書きの明朝コピーを配し、丸いバッジを添える。
5. 使用動画（使い方の手軽さを見せる）: 金線枠の中に再生ボタン付きの動画サムネイルを置く。
6. お客様の声（第三者の評価で安心させる）: 英字ラベルと明朝見出しの下に、白い吹き出しを左右交互に置く。
7. 多機能訴求（1 本で何役もこなすことを示す）: ブラウン帯 2 段と人物写真を置き、機能名のガラス玉を円環状に配置する。
8. 特長 01 成分（スキンケア性を伝える）: 番号付き見出し帯の下に、効果別の小見出しタグと成分バブルを並べ、注釈を添える。
9. 無添加表示（安心感を補う）: 細い線の枠の中に、無添加の項目を横一列に並べる。
10. 特長 02 仕組み（効果の根拠を見せる）: 肌断面のイラスト図とチェックリストのカードを左右に並べる。
11. 特長 03 ブラシ（道具の良さを伝える）: ブラウンのタグ、白カードの説明、ブラシの写真を組み合わせる。
12. 特長 04 色展開（自分に合う色を選んでもらう）: 2 色の製品写真と色サンプルを並べ、欧文の色名とチェックリストを添える。そのあとに変色を 3 段階の写真で見せる。

Imagery

• 製品はハイキーで撮り、白〜ベージュの光沢のある背景に反射をつけて置く。
• 人物は素肌感のある女性を目を閉じた穏やかな表情で撮り、柔らかい光を当てる。
• 成分は花・植物・液体のマクロ写真を円形に切り抜く。
• 背景には光のボケ、シルクのドレープ、水面、液体の飛沫を淡く重ねる。
• 図解は淡い水色やベージュの色面に粒子を描いたシンプルなイラストにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにして、FV の製品写真をキャッチの下へ回す。
• 成分バブルは SP で 3 列にする。
• 仕組みの図とカードは SP で縦に積む。
• 縦書きコピーは SP でも残すが、字を小さくする。
• PC は中央 1000px 幅に収め、背景のテクスチャだけを全幅に広げる。

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