DESIGN.md — 青×白の透明感エイジング化粧水 LP（Clinical Blue Aging-Care Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、上品・高級
• キーワード: 透明感・水のテクスチャ・成分訴求・明朝見出し・黄色マーカー・POINT番号
• 地の質感: 水滴やとろみ液の写真を背景にうっすら敷いた、光沢のある白〜水色のグラデーション地
• 形: 円形バッジ、六角形の成分写真、斜めにカットした帯、細い横罫線
• 温度感: やや寒色寄り。ランキング訴求と CTA だけは暖色

Colors

• 地は白と淡い水色を交互に使い、水の写真を薄く重ねる
• POINT などの区切り帯は濃い青の面に白文字を置く
• 大事なキーワードは赤文字か黄色マーカーで強調する。両方を同じ行に重ねすぎない
• 数字や成分名の強調には黄色文字を青帯の上で使う
• 暖色（赤・金）はランキングと使い方の帯だけに限る
• CTA は落ち着いたベージュで、高級感を保つ
• button-primary は文字 #FEF5E9 × 背景 #C1A28D のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#90694E、4.51:1）を使う。
• discount-badge は文字 #D7450C × 背景 #FFFFFF のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D5440C、4.51:1）を使う。

Typography

• 見出しは明朝、本文と成分名はゴシックで使い分ける
• 数字だけ大きく、斜体の明朝で目立たせる
• 上付きの注釈記号を付け、ページ下部に注釈をまとめる
• 英字見出しのすぐ下に日本語の小見出しを添える
• 本文は 13px 前後にし、行間は広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分アイコンは 4 列、効果バッジは 3 列、手順は 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに POINT 番号の円を帯の上端に重ねる
• 文章と写真を左右交互に並べる
• 無添加の項目は 2 列のグリッドで並べる
• 見出しは中央揃え、本文は左揃え

Elevation & Depth

• 円形バッジは銀色のリングと淡い影で立体感を出す
• カードは影をほぼ付けず白い面だけで区切る
• 六角形の写真には白い縁取りと薄い影を付ける

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分写真は六角形、効果は円形バッジ、商品は切り抜き
• セクション境界: 斜めのカットや水のグラデーションで区切り、帯は直線
• ボタンは角丸なしか小さい角丸
• 強調バッジは円形にする
• 取り消し線入りの四角で「入っていない成分」を表す

Components

• POINT 番号円（point-badge）: 白い円の中に POINT と 2 桁の数字を明朝で入れ、青帯の上端に重ねる
• 銀リングの効果バッジ（feature-circle）: 銀色のリングで囲んだ白い円。2 行の訴求を入れ、一部にマーカーを引く
• 青グラデの帯見出し（band-heading）: 画面幅いっぱいの青い帯に白い明朝の見出しを置く
• 悩みのチェックリスト（worry-check）: 赤いチェックボックスと一文を 4 行並べ、悩みの部分を赤文字にする
• 六角形の成分アイコン（hex-ingredient）: 六角形に切り抜いた写真の下に成分名を 2 行で添える
• 無添加項目のセル（free-from-cell）: 灰色の四角に斜めの取り消し線を引き、中央に成分名を置く
• 使い方ステップ（step-card）: 赤い STEP 番号と斜線、線画のイラスト、説明文を並べ、間に赤い三角の矢印を置く
• 購入ボタン（button-primary）: ベージュの長方形に白文字と右向きの矢印を入れる
• 割引の丸バッジ（discount-badge）: オレンジの線で描いた円に、割引額を小さな明朝で入れる

Do's and Don'ts

Do - 水滴やとろみ液の写真を背景に薄く重ね、透明感を出す - 成分ごとに注釈番号を付け、注釈をまとめて載せる - 訴求の中心となる語には黄色マーカーを引く - POINT 番号で特長を順に展開する - 明朝の見出しは中央揃えにし、余白をたっぷりとる

Don't - ビビッドなピンクやネオン色を使わない - 見出しを丸ゴシックにしない - カードに強い影や大きな角丸を付けない - 赤の強調を 1 段落に多用しない - CTA を派手な原色にしない

Page Structure

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

1. ファーストビュー（商品の価値と特長を一目で伝える）: 女性の肌の写真の上に明朝 3 行のコピーを置き、銀リングのバッジ 3 つと商品のボトルを添える
2. 実績訴求（人気の証拠で信頼を得る）: 赤い幕と金の装飾の背景に、受賞バッジ、ランキングの画像、大きな白い見出しを置く
3. 悩みの提起（読み手の課題に共感する）: 黒帯の明朝見出しの下に、チェック付きの悩みを 4 行並べる。ひび割れのテクスチャを地にする
4. 解決提示（商品を解決策として紹介する）: 青い丸の吹き出しでつなぎ、水の背景に商品写真、商品名、バッジを置く
5. 特長 POINT01（主成分を説明する）: 青帯に POINT 円を重ね、六角形の写真、本文、円形バッジ 3 つを並べる
6. 特長 POINT02（美肌成分を紹介する）: 成分写真を六角形にして左右交互に置き、赤い下線の小見出しを付ける
7. 技術訴求（浸透の仕組みを示す）: 特大の明朝見出しを置き、肌の断面図に赤い矢印を描く。青い逆三角で結果につなぐ
8. 特長 POINT03（その他の配合成分を見せる）: 六角形のアイコンを 4 列で 2 段並べる
9. 特長 POINT04（無添加で安心感を伝える）: 青帯に商品を添え、取り消し線入りのセルを 2 列で 8 つ並べる
10. クロージング（使ってみたい気持ちを高める）: 明朝で問いかける見出しを置き、商品と女性の写真を大きく見せる
11. 使用方法（使い方を示す）: 深紅の英字帯を置き、線画のステップを 2 列で並べる
12. 購入（まとめ買いを促す）: 青い英字帯の下に、細い枠のカード、価格、オレンジの割引表示、ベージュのボタンを置く

Imagery

• 白いボトルを明るい背景に切り抜いて置く
• 水滴やとろみ液、波紋の写真を淡い青で敷く
• 女性の写真は目を閉じ頬に手を当てたクローズアップにする
• 成分写真は白背景で鮮やかに撮り、六角形に切り抜く
• 使い方はモノクロの線画に、金の小さなきらめきを添える
• 仕組みの図はピンクの肌の層に赤い矢印を描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文幅を 750px 前後で中央に寄せ、両端を淡い水色の地にする
• 帯見出しは画面幅いっぱいに伸ばす
• 成分アイコンは PC でも 4 列のまま余白を広げる
• 使い方のステップは PC で横並びを保つ
• FV は PC で写真とコピーを左右に配置してもよい

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