DESIGN.md — 紺×金の高級感ある美白スキンケアLP（Navy Gold Premium Whitening Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、信頼・誠実、情報量多め・訴求型、力強い・インパクト
• キーワード: 紺と金・明朝の大見出し・メダル・月桂樹・赤字とマーカーの強調・体験談カード・大理石・水滴の質感
• 地の質感: 白大理石・シルク・水滴・きらめきの写真質感。金文字はグラデーションと光沢付き
• 形: 四角いカードと帯見出しが基本。成分は円形バブル、特典は金のタイル
• 温度感: 紺で締めたややクールな基調に、金とピンクで温かみを足す

Colors

• 地は淡グレー、本文は白カードに載せる。
• 紺の帯・濃紺セクションで区切りと格を出す。
• 数字や実績は金グラデーション文字にする。
• 体験談見出しと注意を引く語は赤。
• 本文中の要点は黄色マーカーと赤太字で強調。
• CTAだけ緑で、他の要素に緑を使わない。
• 理由ごとにピンク・水色・金の淡い地で色分けする。

Typography

• 大見出しは明朝、本文と説明はゴシック。
• 見出し内で強調語だけ文字サイズを1.5〜2倍にする。
• 数字は金グラデーションの明朝で巨大化。
• 本文は14px前後、行間1.75で詰めて読ませる。
• 注釈は9px程度で各ブロック直下に置く。
• 英字ラベルはイタリック気味のセリフで薄く敷く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典・成分は 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右に約5%の余白を残す。
• 体験談は写真+左上の縦長ラベルを重ねる。
• 特典は2列×3段の金タイル。
• 成分は3列の円形バブル。
• 比較表は自社列を紺で強調。
• セクション冒頭に帯ラベル→大見出しの順。

Elevation & Depth

• 白カードに薄い影（0 2px 8px rgba(0,0,0,.12)）。
• CTAは下に濃い影と光沢ハイライト。
• 金メダル・特典タイルに軽い立体感。
• 製品写真は台上の映り込みや光で浮かせる。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。成分は円形の水滴バブル
• セクション境界: 直線の切り替え。一部に紺のV字・波状の境界
• カード・帯は角丸ほぼなし。
• CTAは角丸10px程度の横長ボタン。
• 割引バッジは赤い円形。
• 見出し帯は紺の長方形、上下に金細線を添えてもよい。

Components

• 申込CTA（button-primary）: 緑グラデの横長ボタン。左に再生矢印丸、割引額を黄色で大きく
• 紺の帯見出し（heading-band）: 紺の長方形に白文字の小見出し。セクション冒頭用
• 体験談カード（voice-card）: 写真上部に金の縦ラベル（番号・年代・肌質）。赤見出し＋マーカー本文
• Voiceラベル（voice-label）: ブロンズ地に白文字で年代を大きく、肌質を枠囲み
• 特典タイル（benefit-tile）: 淡金地に小さな茶色タブ、赤い大文字の特典内容
• 返金保証ボックス（guarantee-box）: 金枠の証書風ボックス、筆記体英字＋明朝見出し＋説明ボタン
• ランキングメダル（medal-badge）: 月桂樹付きの金・赤・緑メダルで第1位を3つ並べる
• 理由番号（reason-number）: 茶色の円に小ラベルと数字
• 価格ブロック（price-block）: 取消線の通常価格、赤い大きな初回価格、赤丸の割引率バッジ
• 安心チップ（trust-chip）: 赤枠白地の小ボックスを3つ並べる

Do's and Don'ts

Do - 実績・数字は金グラデの明朝で大きく見せる。 - 白カード＋淡グレー地で長文を整理する。 - 要点は赤字と黄色マーカーで二重に強調する。 - CTA直下に安心チップを3つ並べる。 - 各主張の直下に注釈を小さく添える。 - 価格セクションは濃紺地に白カードで締める。

Don't - 丸ゴシックやポップな手書き書体を使わない。 - 原色の多色使いでチープにしない。 - CTA以外を緑にしない。 - 余白を広げすぎて情報密度を落とさない。 - 大きな角丸やピル型でカジュアルにしない。 - 金文字をフラットな黄色で代用しない。

Page Structure

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

1. ファーストビュー（悩み部位と商品・実績を一目で伝える）: 濃紺地に悩み部位写真4枚、金メダル3つ、明朝の大キャッチ、製品と成分バブル
2. 専門家の推薦（医師の権威で信頼を得る）: 枠付き明朝見出し、医師写真と経歴、赤字強調入り本文
3. 販売実績（累計本数で人気を示す）: きらめき背景に金の巨大数字と製品の並び
4. SNS口コミ（第三者の評判を見せる）: 大理石風枠にSNS投稿カードのスライダー
5. ランキング（第1位の獲得を示す）: 月桂樹と金文字、3色メダル
6. お客様の声（体験で共感させる）: 紺の見出し帯、写真+金ラベルの体験談カードを縦積み
7. 返金保証（購入不安を除く）: 金枠の証書風ボックス
8. 価格とCTA（割引で申込を促す）: 濃紺シルク地に白カード、赤い価格、緑CTA、安心チップ
9. 特典（定期コースの得を並べる）: 金の月桂樹見出し、2列6枚の特典タイル
10. 悩みの提起（現状の不満を言語化）: 黒ラベル見出し、写真付き横長カード4枚で交互配置
11. 解決策と満足度（商品の発想と実感率を示す）: 3色の泡で機能を表現、水と製品写真、青い円に金の%
12. 3つの理由（成分の根拠を説明）: 茶色の番号丸、理由ごとに淡色地、図解と比較写真
13. 成分・多機能・比較（優しさと便利さを比べる）: 円形成分バブル3列、製品周りの機能バブル、紺強調の比較表
14. 開発ストーリー・品質管理（作り手と製造の安心を伝える）: 紺帯見出し、担当者写真、罫線入り便箋風本文、工場写真3枚

Imagery

• 製品は紺のチューブを光沢のある台や水面に置き、映り込みを付ける。
• 人物は30〜40代女性の自然光ポートレート、白や淡色の服。
• 背景に水滴・泡・シルク・白大理石・金の紙吹雪を使う。
• 成分は丸い水滴の中に植物写真を入れる。
• 金のメダル・月桂樹・王冠で実績を装飾。
• 医師・担当者は白衣やスーツで清潔感を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約750px幅でSPと同じ縦長構成を置く。
• 左右の余白は淡グレー地で埋める。
• 濃紺セクションのみ全幅で背景を広げる。
• 体験談カードは写真と本文を横並びにしてもよい。
• 特典タイルはPCで3列にできる。

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