DESIGN.md — ローズピンク×金茶の訴求型スキンケアLP（Pink Gold Clinical Beauty Cleansing LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 情報量多め・訴求型、上品・高級、清潔・爽やか
• キーワード: ローズピンク・金茶ボトル・明朝の大見出し・断面図解・月桂冠バッジ・光の粒
• 地の質感: 白地に淡いボケ光・水滴・泡のテクスチャ。悩みパートはざらついたコンクリ調のグレー。
• 形: 四角い帯ラベル、円形の成分写真、波形のセクション境界、細い枠線のカード。
• 温度感: やや暖かい。ピンクとベージュが主で、要所だけ寒色グレーやネイビーで締める。

Colors

• 地は白と淡グレーを基本にし、ピンク・ベージュの淡色地で区切る。
• 強調語はローズピンク文字にし、1見出しにつき1〜2語に絞る。
• 帯ラベルはピンク地に白文字、または墨色地に白文字にする。
• 権威・受賞・導入帯には金茶とシャンパンゴールドを使う。
• 悩み・問題提起だけ暗いグレー地にし、文字は淡い金にする。
• 本文の要点はピンク文字か黄色マーカーで強調する。
• award-medal は文字 #9A6A3A × 背景 #F0D1B8 のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#7B542E、4.61:1）を使う。

Typography

• 大見出しは明朝とし、強調語だけピンクで一段大きくする。
• 助詞は小さくして、キーワードのサイズ差をつける。
• 帯ラベルはゴシックの太字で短くまとめる。
• 英字見出しはセリフ体で添え、下にカナ読みを小さく入れる。
• 本文は13px前後とし、要点はピンク太字かマーカーにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分やタグは 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃えにし、帯ラベル→大見出し→図解の順に縦に積む。
• 図解は画面幅いっぱいに置き、余白を取らない。
• 成分は円形写真と説明文を左右交互に並べる。
• カードは白地に細枠と影をつけ、中は左揃えの本文にする。
• 注釈は図の右下に小さく置く。

Elevation & Depth

• 白カードには薄い影（0 4px 12px rgba(0,0,0,.08)）をつける。
• 受賞メダルは金のグラデーションで立体感を出す。
• 円形の成分写真には柔らかい影を入れる。
• バナーとボタンは影を控えめにし、フラット寄りにする。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分・肌アップは正円で切り抜く。人物は角丸の矩形か、背景に溶け込ませる。
• セクション境界: 直線を基本にし、悩みパートの入口は波形、FVの下は緩いカーブにする。
• 帯ラベルは角丸なしか2px程度の矩形にする。
• 丸いバッジ・メダルで実績を表す。
• 下向きの小さなシェブロンでセクションをつなぐ。
• 比較画像は左右2枚の角丸カードにし、下にラベルの帯を置く。

Components

• ピンク帯ラベル（label-band）: 見出しの上に置く短いリード文の帯。
• 金茶帯ラベル（label-band-gold）: 『その秘密は』のような話の転換を示す帯。
• 受賞メダル（award-medal）: 金の丸メダルや月桂冠で No.1・テスト済みを3つ並べる。
• 在庫状況の行（stock-row）: 左に墨色かピンクの矢羽ラベル、右に状況テキストを置く行を3段重ねる。
• 数値実績カード（stat-card）: ピンクの小ラベルに『使用者の◯%』、その下の枠付き白カードに結果を書く。
• 成分の円形写真（ingredient-circle）: 円形の写真に成分名を重ねるか、下に添える。
• 効果タググリッド（tag-grid）: ピンク地に白文字の短いタグを3列×2段で並べる。
• 安全性チェックリスト（check-card）: 枠付きの白カードにピンクのチェックボックスで3項目を並べ、説明文を添える。
• ビフォーアフター円（before-after）: 肌の拡大写真を2つの円で並べ、ピンクの矢印と下のラベルでつなぐ。

Do's and Don'ts

Do - 見出しごとに帯ラベルを置き、リズムを揃える。 - 断面図や比較図で仕組みを視覚化する。 - 受賞・数値には必ず※注釈を添える。 - 商品ボトルは金キャップ×茶のボトルを光の中に置き、主役にする。 - 悩みパートは暗い地に切り替え、解決パートで明るい地に戻す。

Don't - ピンクを広い面に使いすぎない。帯と強調語に限る。 - 角丸の大きいポップなボタンや丸ゴシックは使わない。 - 黒の純色地を多用しない。暗部はグレーかネイビーにする。 - 強調色を3色以上同じ見出しに混ぜない。 - 注釈を省略しない。

Page Structure

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

1. ファーストビュー（使用感と商品を一目で伝える）: 女性のアップ写真に帯コピーと大きな筆文字のコピー、テクスチャ写真と商品を置き、ピンクの地に受賞メダルを3つ並べる。
2. 在庫訴求（緊急性を出す）: 白地の中央見出しに黄色マーカーを引き、在庫状況の行を3段重ねる。
3. 受賞実績（権威づけ）: ピンク帯タグと明朝の大見出しを置き、金メダルを3つ並べる。
4. 第三者評価（効果の数値化）: 左に商品、右に数値実績カードを縦に3つ並べる。
5. 技術の仕組み（独自テクスチャを説明する）: ベージュの光の地に番号付きの3段階を写真付きで縦に並べ、断面図とビフォーアフターを入れる。
6. 浸透成分（成分の優位性）: カプセルの大写真、サイズ比較の円、浸透の図解、棒グラフを入れる。
7. 悩みの提起（共感）: 波形で入る暗いグレー地に、淡い金の明朝見出しを置き、肌悩みの円形写真を散らす。
8. 原因の解説（問題を構造化する）: コンクリート調の地に毛穴の断面イラストを置き、悩みの円ラベルで囲む。
9. 商品紹介（解決策の提示）: 研究者の写真から商品の大写真につなぎ、英字ロゴ見出しと効果タググリッドを置く。
10. 使用者の声（実感の共有）: ピンク地に円形の人物写真と明朝の吹き出し見出しを左右交互に置き、注釈を添える。
11. 成分紹介（天然成分の安心感）: ピンクの帯見出しの下に、円形の成分写真と説明を左右交互に並べる。
12. 安全性・香り（不安の解消）: チェックリストのカードと、香りのノートを示す3つの円の図を置く。
13. 開発ストーリー（信頼）: 研究室の写真カードと、ネイビーのひび割れ地に淡い金の見出しを置く。

Imagery

• 女性の肌アップは明るく柔らかい自然光で撮り、白背景にする。
• 商品は金キャップ×茶ボトルにし、光のボケやプリズムの中に置く。
• テクスチャ（ジェル・泡・クリーム）は接写して円形に切り抜く。
• 断面図は肌色・ピンク・ベージュのフラットイラストで描く。
• 悩みの写真はモノクロ寄りの寒色トーンにする。
• 装飾は水滴・気泡・ピンクの分子模型を余白に散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅750px前後のSPレイアウトを置き、左右を淡色の背景で埋める。
• 図解と写真はPCでも縦積みを維持する。
• 成分の交互配置はPCでもそのまま、余白だけ広げる。
• 見出しサイズはPCで1.2倍程度までにとどめる。

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