DESIGN.md — ローズピンク×金の年齢肌コスメ LP（Rose Pink Gold Anti-Aging Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、やさしい・柔らかい
• キーワード: ローズピンク・金箔バッジ・明朝大見出し・ビフォーアフター・赤い価格訴求・花びら・光のきらめき
• 地の質感: 淡いピンクのグラデーション地に光の玉・花びら・金のきらめきを散らす。グレー肌テクスチャ面で悩みを暗く見せる。
• 形: 斜めカットのセクション境界、円形の機能バッジ、金のリボン帯、角丸カード。
• 温度感: 暖かく華やか。悩みパートのみ寒色グレー。

Colors

• 地は白と淡ピンクを交互にし、ピンクのグラデーションで華やかさを出す。
• 見出しはローズ〜マゼンタの明朝体で書き、要所に金帯を合わせる。
• 価格・割引・OFF 表記だけ赤を使う。
• CTA は緑の立体ボタンにして、ピンク系の中で目立たせる。
• 悩み提起パートはグレー／黒の面に白文字で暗く見せる。
• メーカー紹介だけ青を使い、信頼感を出す。
• button-primary は文字 #FEFEFE × 背景 #3FA83A のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#32862E、4.54:1）を使う。
• bubble-badge は文字 #CB8878 × 背景 #FDFAF2 のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B25A45、4.53:1）を使う。

Typography

• 情緒的な大見出しは明朝、機能や価格は極太ゴシックで書く。
• 見出し内のキーワードは一回り大きくし、色を変える。
• 価格の数字は本文の 3 倍以上にして、単位と税込は小さく添える。
• 欧文イタリックを和文見出しの上に小さく添える。
• 悩みパートは縦書き明朝の白黒帯を使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ビフォーアフターと機能リストは 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅で敷き、テキストやバッジを重ねる。
• カードは左右 6% 余白で中央に置く。
• オファーブロックは本文中盤と末尾の 2 回置く。
• 注釈は該当要素の直下に小さく右寄せで置く。

Elevation & Depth

• カードには柔らかい影（0 4px 16px rgba(0,0,0,.08)）をつける。
• CTA は下側に濃い影とハイライトを入れた立体表現にする。
• 写真のポラロイド枠には白縁と軽い影をつける。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形、円形の顔写真、傾けたポラロイド枠
• セクション境界: V 字・斜めカット、ピンクのグラデーションで溶かす境界
• 機能はシャボン玉風の円形バッジで並べる。
• 金リボン・ロゼット型のバッジで実績を示す。
• 効果は六角形の線枠で 3 つ並べる。

Components

• 緑の立体 CTA（button-primary）: 再生アイコン付き、上に小バッジを載せた大型ボタン
• 価格オファーカード（offer-card）: 商品写真＋通常価格の取り消し＋赤い大きな価格＋OFF の円バッジ
• 金帯の理由見出し（gold-ribbon-heading）: 番号と斜めの筆記体ロゴを添えた金グラデーションの帯
• 円形機能バッジ（bubble-badge）: 白〜ピンクの光沢円に機能名を明朝で書く
• ポイントカード（point-card）: Point 番号タブ＋チェックボックスと手書き見出し＋本文＋写真
• お客様の声（voice-card）: 番号イタリック＋ピンク見出し＋ビフォーアフター写真＋年齢の丸バッジ
• 特典リスト（privilege-list）: 金の月桂冠番号付きの行を罫線で区切る
• チェック 2 列リスト（check-grid）: 赤いチェックアイコンと短い機能語を 2 列で並べる
• 縦書き悩み帯（vertical-worry）: 写真上の黒帯に白の縦書き明朝で悩みを書く

Do's and Don'ts

Do - 見出しのキーワードは色とサイズで強調する。 - 実績・効能のバッジは金色で統一する。 - 効果はビフォーアフターの左右比較で見せる。 - オファーは中盤と末尾で同じデザインを繰り返す。 - 効能表現には※注釈を必ず添える。

Don't - ピンク以外の原色を見出しに使わない。 - CTA を地の色と同系色にしない。 - 余白を広げすぎてミニマルにしない。 - 悩みパート以外で暗い背景を多用しない。 - 明朝とゴシック以外の書体を増やしすぎない。

Page Structure

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

1. ファーストビュー（効果と実績を一目で伝える）: 女性の顔写真に商品と大きな明朝コピーを重ね、上部に金の実績バッジを並べる
2. 動画（使用感を見せる）: ピンクのグラデーション地に動画枠、金帯のキャプションを置く
3. 多機能紹介（1 本で複数役を担うことを示す）: 手に持った商品の周りに円形バッジを配置する
4. オファー（初回価格で購入を促す）: 価格カードと緑 CTA、特典 5 項目のリストを置く
5. SNS 反響（社会的証明）: スマホ画面風の投稿写真を傾けて重ね、吹き出しと肩書きラベルを添える
6. 悩みの提起（年齢肌の悩みに共感する）: V 字境界、鏡を見る写真、縦書きの黒帯、グレーの肌テクスチャ面
7. 選び方のポイント（選ぶ基準を教える）: Point 番号付きのカード 3 枚とグラフ
8. 商品紹介（解決策として提示する）: 光あふれる背景に商品と機能の丸バッジ、ビフォーアフター
9. お客様の声（実感を伝える）: 左右交互の写真配置とポラロイド風の比較写真
10. メディア掲載（権威付け）: 雑誌の表紙を傾けて重ね、きらめく背景に置く
11. 選ばれる理由（機能を詳しく説明する）: 暗い背景に金帯の番号見出し、図解、成分写真
12. 無添加・メーカー（安心と信頼）: 円形の無添加バッジ、青帯の見出し、研究室の写真
13. CTA（再掲）（最終的な購入を後押しする）: 冒頭と同じ価格カードと緑ボタン

Imagery

• 40〜50 代女性が肌に触れる柔らかい光の顔アップ写真。
• ピンクメタリックのボトルを主役に、花びら・光の玉・クリームのストロークを添える。
• 悩み写真は彩度を落とし、グレー寄りにする。
• 成分はハーブ・果実・花の接写写真で見せる。
• ビフォーアフターは同じ構図の左右比較にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 幅で SP デザインをそのまま見せ、左右は淡ピンク地にする。
• 2 列リストは PC でも 2 列のままにする。
• 見出し文字は画像化を前提とし、PC で拡大しすぎない。
• CTA は 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 行書くと起動時に読み込まれる。