DESIGN.md — 霧と生成りグレージュの化粧水 LP（Misty Pale Greige Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 霧・ミスト・余白・円形切り抜き・グレージュ・縦書き欧文・黄色CTA
• 地の質感: 霧や水面の柔らかい写真をセクション背景に敷く。その他は無地の白とグレージュでフラットに組む。
• 形: 写真もバッジも正円が中心。CTA はピル型。見出し帯は角丸なしの四角。
• 温度感: ややクールなニュートラル。黄と赤が温度を足す。

Colors

• 地の色は白とグレージュの 2 色を交互に使い、色数は増やさない。
• 強い色は黄（CTA と見出しラベル）と赤（価格・必須）だけに絞る。
• 本文は真っ黒にせずグレーにして、柔らかく見せる。
• ブランドの物語を語るセクションだけ黒地にして、雰囲気を切り替える。
• 写真は霧や水を使った低彩度のものにし、白い円パネルを重ねて文字を読ませる。

Typography

• 本文は行間 2.0 前後で、字間を少し広げる。
• セクション見出しは中央揃えにし、細めのゴシックで 2 行に組む。
• 欧文ラベルは極細で淡い色にし、左端に縦に 1 文字ずつ並べる。
• 価格の数字だけ極太にし、「円（税込）」は小さく添える。
• 強調したい語句には薄いグレージュのマーカーを敷く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は PC で 3 カラム、SP では縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの上下は広めに取り、静かな余白を作る。
• キャンペーン枠は同じ型でページ内に 3 回くり返す。
• 写真セクションは全幅で、文字は円形パネルに入れる。
• フォームは淡いグレーの面に白い入力欄を置き、ラベルは上に付ける。

Elevation & Depth

• 影はほとんど使わずフラットに組む。
• 初回価格のバナーだけ弱いドロップシャドウを付ける。
• 円形バッジは白地に細い線で縁取る。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物・商品・テクスチャ写真は正円に切り抜く。風景写真は全幅の長方形で使う。
• セクション境界: 直線で区切る。写真セクションは下端を白へ霧のようにフェードさせる。
• 円をくり返し使ってモチーフにする。
• 質問帯と見出しラベルは角丸なしの矩形にする。
• CTA は細い枠線付きの黄色いピル型にする。

Components

• 黄色ピル CTA（button-primary）: 中央に置く横長のピル型ボタン。黄色の地に濃い文字を載せ、細い枠線を付ける。
• キャンペーン黄ラベル（campaign-label）: 黄色の矩形に太字 2 行を入れ、下に小さな三角の吹き出しを付ける。
• 価格ブロック（price-block）: 通常価格は黒い小ラベルと取消の表現で示す。黄色の小見出しを挟み、赤い大数字の特別価格を置く。
• 円形特典バッジ（circle-badge）: 白い正円に細い枠を付け、送料無料などの特典を 2 行で入れる。
• 縦書き欧文ラベル（vertical-label）: セクション左端に英単語を 1 文字ずつ縦に並べる。淡い色で装飾として使う。
• アンケート質問帯（survey-bar）: グレージュの帯に質問を入れ、下段に回答を下線付きで、大きな % 数字を右寄せで置く。
• 円形写真カード（circle-photo-card）: 正円の写真の下に、小さな属性表記と短い本文を中央揃えで置く。
• 入力フォーム（form-field）: ラベルに赤い必須バッジを付け、白い入力欄に細い枠線を引く。

Do's and Don'ts

Do - 霧・水・肌など、柔らかい低彩度の写真を選ぶ。 - 写真やバッジに正円の切り抜きを何度も使う。 - 強い色は黄の CTA と赤の価格だけにする。 - セクションごとに縦書きの欧文ラベルを添える。 - キャンペーン枠は同じデザインで複数回置く。

Don't - 鮮やかな色を増やしてポップに見せない。 - 本文を真っ黒にしたり、太字にしたりしない。 - カードに強い影や太い枠線を付けない。 - 余白を詰めて情報を詰め込まない。 - CTA の色を黄色以外に変えない。

Page Structure

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

1. ファーストビュー（世界観と商品を一目で伝える）: 霧の山並みの写真に商品ボトルを置く。縦書きの大きな欧文ロゴを添え、左下に黄色の価格バナーを置く。
2. コンセプト（商品の位置づけを説明する）: 白地に中央揃えの見出しを置く。左に本文、右に手と水の円形写真を配置する。
3. キャンペーン（初回価格で申込を促す）: グレージュ地に黄ラベル・赤い大価格・円形の商品写真・特典バッジ・黄 CTA を並べる。
4. 特長（おすすめの肌やシーンを示す）: 線画アイコン・見出し・短文を 3 列に並べ、下に円形写真を置く。
5. 技術キーワード（成分や技術の根拠を見せる）: 水面や霧の全幅写真に白い円パネルを重ね、英字の大見出しや大きな % 数字で語る。
6. 悩み別おすすめ（自分ごと化を促す）: 小さな円形写真と、マーカー付きの悩み見出しのリストを 4 行並べる。
7. お客様の声（満足度で信頼を作る）: 質問帯と大きな % 数字を 3 問並べ、その下に円形の人物写真と感想を 3 列で置く。
8. 開発ストーリー（開発背景で信頼を高める）: 黒地に白文字を組み、モノクロの研究写真を重ねる。
9. 使い方（使い方の手順を示す）: STEP 番号と円形の線画イラストを 2 つ並べる。
10. 肌タイプ診断（自分に合う使い方を案内する）: 霧の写真の背景に、半透明の円を横に 5 つ並べて選べるようにし、吹き出しで説明を出す。
11. 申込フォーム（購入を完了させる）: 森の写真の見出しの下に商品サマリーを置き、淡いグレー面に入力欄を並べ、最後に黄 CTA を置く。
12. フッター（規約へのリンクを置く）: 白地に小さなリンクとコピーライトを並べる。

Imagery

• 霧や雲がかかった山・森の写真を、淡い色調で全幅に使う。
• 手・肌・水滴は白っぽい背景で、柔らかい光で撮る。
• 商品は白背景の正円内に置き、すりガラス風の質感を見せる。
• 人物は自然光のナチュラルな表情で撮り、正円に切り抜く。
• 使い方の図は細い線画の女性イラストにし、淡いベージュで着色する。
• 研究シーンはモノクロにして黒地になじませる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにし、3 列カードは縦に積む。
• 円形写真は SP では幅の約 60% にする。
• 縦書きの欧文ラベルは SP で小さくして左端に残す。
• 価格の数字は SP で 48〜56px にする。
• 肌タイプ診断は 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 行書くと起動時に読み込まれる。