DESIGN.md — くすみピンク×金箔文字のエイジングクリームLP（Dusty Pink Gold Anti-Aging Cream LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: くすみピンク・金グラデーション文字・大きな明朝コピー・成分図解・ボケ光の背景・ビフォーアフター
• 地の質感: 柔らかいボケ光や泡の粒をのせたグラデーション背景。和紙のような細かい布目テクスチャも使う
• 形: 白い角丸カード、六角形・円形のバッジ、斜めに切った色帯、波形のセクション境界
• 温度感: 暖色寄り。ピンクとベージュを主にして、悩みパートだけ冷たいグレーにする

Colors

• 地の色はくすみピンクのグラデーションと白カードを交互に重ねる
• 見出しは濃茶。キービジュアルの大見出しだけ金のグラデーションにする
• 悩みの提起だけ全面グレーのモノトーンにして、解決パートのピンクと対比させる
• 主CTAはピンク地の上で目立つ緑の帯バナーにする
• 効果ごとにピンク・ベージュ・ラベンダーと地色を変えて区切る
• レビューは年代ごとにセージ・モーヴ・ミントの差し色を変える
• 価格の数字は大きなピンク、送料無料はダークの丸バッジに金文字
• cta-banner は文字 #F9FEFB × 背景 #0C9455 のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#0B864D、4.55:1）を使う。
• price-card は文字 #CE8F8A × 背景 #FEFEFE のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B75A52、4.53:1）を使う。

Typography

• 大見出しは明朝。強調語だけ太いゴシックにして混ぜる
• キービジュアルとレビューの見出しは縦書きを使う
• 強調語には下半分にピンクのマーカーを引く
• 効果番号は「効果」を小さく縦に置き、数字を大きな細ゴシックにして下線を引く
• 医薬部外品の効能には必ず※の注釈を小さく添える
• 小見出しは上下に細い罫線を引き、字間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（成分は 3 列の円形グリッド）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真と見出しは全幅の画像バナー的に組む
• 図解や説明は白カードで囲み、左右に 6% ほど余白をとる
• 成分は丸写真を 3 列に並べ、下に名称を置く
• レビューは縦書き見出しと写真を左右交互に配置する
• 購入ブロック（CTA）は冒頭・中盤・末尾で同じ型を繰り返す

Elevation & Depth

• 白カードには薄いソフトシャドウ
• 円形バッジは立体的な光沢とドロップシャドウ
• ビフォーアフターのカードは淡い影で浮かせる
• フラットな面とグラデーションを主体にして、強い影は使わない

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分写真は正円。人物は背景を切り抜いて大きく配置。レビュー写真は角丸の四角
• セクション境界: 波形カーブ、斜めの色帯、下向き三角の吹き出し
• CTAは角丸の帯バナーにし、中に小さなピル型ラベルを置く
• 訴求ポイントは六角形または円のバッジで 3 つ並べる
• 見出しの下に下向き三角を付けて次へ誘導する

Components

• 購入CTAバナー（cta-banner）: 緑の角丸帯。大きな白文字に、内容量ラベル・価格・送料無料の丸バッジを同居させる
• 告知帯（top-notice-bar）: ダーク帯にブランド名と商品名を置き、その下に金色の帯でキャンペーンを告知する
• 価格カード（price-card）: 白カードに商品写真、マーカー付き見出し、大きなピンクの価格、送料無料の丸バッジを載せる
• 訴求バッジ（badge-feature）: 金縁の六角形または光沢のある円に、効果を 2〜4 文字で入れる
• 効果番号（effect-number）: 淡いピンクの円の中に「効果」の縦書きと大きな数字
• 図解カード（diagram-card）: 白カードの中に肌断面のイラストとピル型ラベル、その下に説明文
• 悩み吹き出し（worry-bubble）: 濃いグレーの雲形吹き出しに白文字。悩みを短い言葉で 3 つ並べる
• レビュー（review-card）: 縦書きの見出し、角丸写真、年代タグ、星評価、本文、注釈。背景には斜めの色帯
• ビフォーアフター（before-after）: 白カードの左上に年代の吹き出しタグ、上に使用期間のダーク帯。before（濃グレー）とafter（ピンク）のラベルを付け、矢印でつなぐ

Do's and Don'ts

Do - くすみピンクと濃茶を基調にして、金はキービジュアルの強調に限定する - 効能の表現には※の注釈を必ず付ける - 悩みパートはモノクロ写真とグレー地で暗く見せる - CTAブロックはページ内で 3 回、同じデザインで繰り返す - 図解は淡いピンクとベージュのフラットなイラストで描く

Don't - 鮮やかなビビッドピンクや原色は使わない - 見出しをすべてゴシックにしない（明朝が基調） - CTAの緑をCTA以外に使わない - 余白を詰め込みすぎて白カードの枠をなくさない - 肌図解を写真やリアルなCGにしない

Page Structure

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

1. ファーストビュー（効果と成分を一目で伝える）: 告知帯の下に女性の大きな写真。金の縦書き大見出し、配合率の金メダル、六角形バッジ 3 つを置く
2. CTA・価格（お試し価格を提示する）: 緑のCTAバナーと、白カードに大きな価格を載せた購入ブロック
3. メディア掲載（権威付け）: ベージュのボケ光背景に誌面と表紙を並べ、金の円で囲む
4. 悩みの提起（年齢による肌悩みに共感させる）: グレーのひび割れ背景に雲形の吹き出し 3 つ、モノクロの肌アップ写真
5. 解決の提示（商品を解決策として示す）: ピンクのボケ背景にブランド名、縦書きのコピー、円形バッジ、製品写真
6. 成分の解説（主成分の説明）: 布目テクスチャの白地に、罫線付きの小見出しと太字の成分名
7. 効果1〜3（効果を図解で示す）: 効果ごとに地色を変え、番号の円、白抜きの明朝大見出し、白い図解カードを置く
8. 浸透力・処方（処方の優位性）: 泡の粒のピンク背景に大きな明朝、製品写真、7 つの成分フリーを打ち消し線入りの円で並べる
9. 配合成分（美容成分と植物成分の紹介）: 水色、続いて緑のボケ背景に丸写真を 3 列で並べる
10. CTA再掲（中盤で購入を促す）: ファーストビューとCTAブロックを再掲する
11. 専門家の声（プロの推奨）: 淡いブルーグレー地に、ロゴ・写真・コメントと区切り線
12. お客様の声（共感と信頼）: 縦書きの見出しと斜めの色帯。年代タグと星評価を付ける
13. ビフォーアフター（効果の実例）: 白カードを 3 枚縦に並べ、使用期間の帯とbefore/afterのラベルを付ける
14. 最終CTA・フッター（購入へ誘導）: ファーストビューと価格ブロックを再掲し、最後に白地で法務リンク

Imagery

• 人物は 30〜50 代の女性。柔らかい光で肌のツヤを見せる
• 背景にはボケた光の玉や泡の粒を重ねる
• 悩みパートはモノクロ写真にひび割れのテクスチャ
• 製品はピンクの容器と黒い蓋。白いクリームのテクスチャを添える
• 成分は正円に切り抜いたマクロ写真
• 肌断面はピンク・ベージュ・白のフラットなイラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像はないので、SPの縦長構成を中央 480〜600px 幅に固定し、左右はくすみピンクの地で埋めるのが推奨
• 図解カードや成分グリッドは PC で幅を広げすぎない
• 成分の丸写真は PC で 6 列に並べてもよい
• CTAバナーは中央に固定幅で置き、ホバー時に少し明るくする

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