DESIGN.md — ボルドー×金箔の白髪染め通販LP（Botanical Gray Hair Color Sales LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 情報量多め・訴求型、上品・高級、ナチュラル、力強い・インパクト
• キーワード: ランキング実績・まとめ買い価格・泡・天然植物エキス・比較表・3ステップ
• 地の質感: 金箔の光沢、泡やしずく、ぼかした植物の背景、白タイルの浴室など、写真を重ねた質感
• 形: 角丸の吹き出しカード、正円の成分写真、ピル型ボタン、斜線で挟んだ見出し
• 温度感: 暖色寄り。ボルドー・茶・金で高級感を出し、緑で自然さを足す

Colors

• 価格まわりは濃い茶の帯、白いカード、赤い数字の3つで構成する
• 強調する語だけボルドーか赤にし、残りは黒で書く
• 主CTAは光沢のある緑のピル型ボタンに統一する
• 悩みのセクションはチャコール地にして、前後と明るさで区切る
• 比較表では自社側の列に淡い黄色をしき、ボルドーの見出し列を組み合わせる
• 後半は白タイルや植物写真の明るい地にする
• button-primary は文字 #FEFFFE × 背景 #029B02 のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#028902、4.57:1）を使う。

Typography

• 見出しは明朝体で書き、強調語だけ1.5倍ほどに大きくする
• 価格は太い明朝の巨大数字にし、「円」と「税込」は小さく添える
• 本文はゴシック体で短く改行する
• 見出しの前置きは「＼ ／」で挟む
• 要所に手書き風の添え文字を斜めに置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分の丸写真は5列か3列で並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションはすべて画面幅いっぱいの背景で切り替える
• 価格カードは左右に4%の余白を取った白い箱にする
• Stepの写真と文章は左右を交互に入れ替える
• 画像と文字を重ねて密度を高くする

Elevation & Depth

• 悩みカードにはうっすら影を付ける
• 購入ボタンにはグラデーションと上面の光沢を付ける
• ビフォーアフター写真は白枠で囲み、影を付けて傾ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 成分と悩みの写真は正円に切り抜く。モデル写真は角張った四角
• セクション境界: 直線で切り替える。下向き三角で次へつなぐこともある
• バッジは正円か角丸の小さな四角にする
• 悩みカードは片側を写真の円に重ねる
• 吹き出しには三角の尻尾を付ける

Components

• 購入ボタン（button-primary）: 光沢のある緑のピル型。右端に白丸の矢印を置く
• セット価格カード（price-card）: 茶の見出し帯、商品写真、取り消し線付きの通常価格、黄色の1本単価、赤い大きな価格を順に並べる
• 人気順位バッジ（badge-rank）: 金の縁取りがある円形バッジ。明朝で順位を入れる
• 割引・送料無料バッジ（badge-discount）: ボルドーの丸と角丸の四角。白文字で書く
• 悩みカード（worry-card）: グレーの角丸カード。頭にチェックボックスを置き、悩みの語を赤で強調する。脇に円形写真を添える
• 比較表（compare-table）: ボルドーの項目列、黄色の自社列、白の他社列。◎×で評価し、列の上に吹き出しを付ける
• 特長タグ（tag-feature）: ボルドーの角丸タグに白文字。横に並べる
• 使い方ステップ（step-block）: 細いStep番号と下線、ボルドーの明朝見出し、短い説明、角形のモデル写真で組む

Do's and Don'ts

Do - 価格は通常価格・単価・セット価格の3段で見せる - 強調語は赤かボルドーにして、サイズも大きくする - ボタンは価格カードごとに置く - 成分は円形写真とラベルで並べる - セクションごとに地の色をはっきり変える

Don't - 余白の多いミニマルな構成にしない - CTAの緑を他の用途に使わない - 見出しをすべてゴシック体にしない - 寒色をメインに使わない - 注釈を省かない

Page Structure

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

1. ファーストビュー（使用前後の変化と手軽さを伝える）: 髪の比較写真を左右に分け、矢印・円形の使用写真・花のリースを重ねる
2. ランキング実績（人気を示して信頼を得る）: 金背景にトロフィーと月桂樹、赤いリボン見出し、ランキング画面を重ねて置く
3. セット価格オファー（まとめ買いで購入を促す）: 茶の帯と白い価格カードを2つ縦に並べ、それぞれにCTAを付ける
4. 特長（泡）（使いやすさを伝える）: 泡の背景に大きな明朝の1文字を置き、手の写真と円形の頭皮写真を並べる
5. 成分（髪へのやさしさを伝える）: 金と黄緑の光の背景に、円形の成分写真をグリッドで並べる
6. 商品イメージ（仕上がりを想像させる）: ぼかした緑の背景、花、商品ボトル、立体的なキャッチ文字で構成する
7. 悩みの提起（共感してもらう）: チャコール地に悩みカードを4つ並べる
8. 比較（他タイプとの違いを示す）: 生成り地に比較表を置き、結果の見出しを大きく見せる
9. 特長まとめ（5つの効果を一覧にする）: 商品のまわりに金縁の円を5つ並べる
10. 試験結果（効果を裏付ける）: 淡い青灰の地に染める前後の写真と書類画像を置き、注釈を添える
11. カラー展開（色を選んでもらう）: 楕円の見出しの下に髪の写真2枚とラベル帯を並べる
12. 使い方（手順の簡単さを伝える）: 白タイルの背景で3ステップを交互に配置し、最後にビフォーアフターを置く

Imagery

• 使用前後の髪をアップで撮り、左右に並べる
• 花・葉・果実など成分の写真を正円に切り抜く
• 泡、しずく、オイルの写真を装飾に使う
• 50代女性モデルが笑顔で使っている写真を使う
• 背景に白タイルやぼかした緑を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版の画像はないため、以下は推奨として書く
• PCでは幅480〜750pxの中央カラムに画像を縦に並べ、両脇は無地にする
• 成分グリッドとステップは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 行書くと起動時に読み込まれる。