DESIGN.md — チャコール×金の男性向け白髪ケア LP（Dark Charcoal Gold Men's Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、情報量多め・訴求型
• キーワード: チャコール地・金文字・ベージュ茶の帯・ビフォーアフター・黄色マーカー・通販訴求
• 地の質感: 暗い石目・グリッド・集中線などのテクスチャ背景と、金属的な金グラデーションのメダル
• 形: 角張った帯見出しとカード、円形メダルと円形素材写真
• 温度感: 暗く重い地に金とベージュでやや温かみ

Colors

• 地はチャコールと白・生成りを交互に切り替え、暗い面を多めにする
• ブランド感は金グラデーション文字とベージュ茶の帯で出す
• 赤ピンクは限定帯・価格・割引バッジだけに使う
• 緑は申込ボタン専用
• 強調語は黄色マーカーか黒地白抜き
• ビフォーアフターの矢印は赤
• button-primary は文字 #FFFFFF × 背景 #3FA535 のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#33862B、4.58:1）を使う。
• limited-band は文字 #FFFFFF × 背景 #FD024C のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#EB0247、4.53:1）を使う。
• heading-band は文字 #FFFFFF × 背景 #A89480 のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#88735D、4.51:1）を使う。

Typography

• 見出しは1行内でキーワードだけ大きく・金色にするジャンプ率を使う
• 高級感の見出しは明朝の金、訴求見出しは極太ゴシック
• 価格数字は特大の赤ピンクで単位は小さく
• 帯見出しの白文字は斜体にして動きを出す
• 本文は中央揃え、口コミは左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、写真グリッドのみ 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右に約4%の余白を残して配置
• 暗地セクションと白地セクションを交互に
• オファーブロックは同じ型を複数回繰り返す
• ビフォーアフターは写真を左右に段違いで重ねる
• 本文段落は細罫で区切る

Elevation & Depth

• カードは薄いドロップシャドウ
• メダル・バッジは金属的なグラデーションと影
• 帯見出しは影なしのフラット

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角、素材写真は円形切り抜き
• セクション境界: 直線区切り、下向きの赤い三角矢印で次へつなぐ
• オファーカードは上部だけ大きめ角丸
• CTAは角丸小の横長ボタンに右端の丸矢印
• 特典は円形の金メダル

Components

• 申込ボタン（button-primary）: 緑グラデーションの横長ボタン。左に商品画像、右に白丸矢印、角に割引バッジ
• 限定帯（limited-band）: 全幅の赤ピンク帯に白太字
• 帯見出し（heading-band）: ベージュ茶の帯に白斜体文字
• オファーカード（offer-card）: 金ヘッダー付き白カードに商品・旧価格・特価・割引円バッジ
• 特典メダル（medal-badge）: 金の円メダルに番号、横に黄マーカー付き特典文
• 体験談カード（before-after-card）: 年齢名札、BEFORE/AFTER写真、暗地のコメント欄に黄下線
• 悩み吹き出し（speech-bubble）: 線画アイコン丸＋白い角丸吹き出し
• 悩みチェックリスト（check-list）: 白カードに緑チェックで悩みを5つ

Do's and Don'ts

Do - 暗いチャコール地を基調に金とベージュで品を出す - 強調語は黄色マーカーと文字サイズ差で目立たせる - オファーブロックをページ内で繰り返す - ビフォーアフター写真で変化を見せる - 注釈は小さくオファー直下にまとめる

Don't - パステルや淡い配色を主役にしない - 赤ピンクを装飾に乱用しない - CTAを緑以外にしない - 細い書体だけで見出しを組まない - 金色を平坦な黄色で代用しない

Page Structure

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

1. ファーストビュー（ターゲットと新発想を一目で伝える）: 上部に黒地白文字の帯、男性ポートレートに金明朝の大コピー、縦書き白コピー、金メダル3つ
2. 商品紹介（商品の特徴と変化を示す）: 暗地に商品ボトル、茶丸バッジ3つ、日数経過の3×2写真グリッド
3. 共感ストーリー（第三者の声で問題を提起）: インタビュー風画像、赤三角、黒地白抜き強調
4. ビフォーアフター（効果の可視化）: 左右に写真、AFTERは金枠
5. オファー（価格と特典で申込へ）: 赤限定帯、オファーカード、緑CTA、3大特典メダル、注釈
6. 開発背景（開発の理由を語る）: 帯見出し、細罫区切りの中央揃え段落
7. 体験談（実例で信頼）: 年齢名札付きBEFORE/AFTERカードを3件
8. 悩みの提起（自分ごと化）: 暗い写真背景に白カードのチェックリスト、集中線で解決宣言
9. データと解決（数字と比較で納得）: 赤の大きな%数字、吹き出し、赤ラベル
10. 製造・実績（信頼性）: 工場写真、グリッド地に黄マーカー箇条書き
11. お客様の声（口コミで後押し）: 線画アイコン＋茶の年齢札、白とグレー交互
12. こだわり・成分（細部の価値を示す）: 石目の暗地に白カード、帯見出し、円形素材写真と引き出し線
13. 使い方（手順説明）: 暗地にイタリック欧文STEP、白ラベル付き写真

Imagery

• 中高年男性の陰影の強いモノクロ寄りポートレート
• 白髪の毛束を日数ごとに白背景で撮影
• 頭髪の後ろ姿・つむじのBEFORE/AFTER実写
• 成分は円形に切り抜いたマクロ写真
• 人物アイコンはグレー丸に線画イラスト
• 背景は石目・グリッド・集中線のテクスチャ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約750px）のカラムを置き、左右は暗い地で埋める
• 写真グリッドは PC でも 3 列のまま
• 見出しサイズは PC で 1.3 倍程度に
• CTA ボタンは最大幅 600px に制限

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