DESIGN.md — マゼンタ×金の白髪ケア通販 LP（Magenta Gold Mature Haircare Direct Response LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 情報量多め・訴求型、上品・高級、力強い・インパクト
• キーワード: 実績訴求・金メダル・マゼンタ帯・明朝大見出し・定期通販・写真背景
• 地の質感: 光沢のある金グラデーション、キラキラのボケ光、髪の艶写真。セクションごとに赤幕・木目調ブラウン・緑・深海ブルーなど写真質感の背景を切り替える。
• 形: 斜めカットのマゼンタ帯、円形メダル・円形バッジ、角丸小さめの白カード、立体感のある緑ボタン。
• 温度感: 暖色寄り。マゼンタと金で華やかに、白地で清潔感を保つ。

Colors

• 白とクリーム金の地を基本に、実績・成分などの節目だけ写真質感の濃色背景を挟む
• 価格・割引・特典の数字はマゼンタで大きく
• 実績・ナンバーワン系は金グラデーション＋月桂樹で表現
• 購入ボタンは緑のみ。他の要素に緑ボタンを使わない
• 口コミ本文の要点は黄色マーカーとマゼンタ太字
• 濃色背景上の見出しは白か金文字
• button-color-select は文字 #FFFFFF × 背景 #3FA82A のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#338722、4.54:1）を使う。

Typography

• 見出しは明朝、本文と説明はゴシック
• 見出し内の訴求語だけ文字を大きくし、マゼンタか金にする
• 数字は明朝で他文字の約2倍に拡大
• 注釈は※付きの小さいグレー文字で各ブロック直下に置く
• 金文字はグラデーションと細い影で立体感を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メダルや比較は2〜5列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは全幅背景で区切る
• カードは左右約5%の余白
• 写真と見出しを重ねる構成を多用
• 購入ブロックは2回（中盤・最後）配置
• 特典は帯ラベル付きの白カードを縦に7段

Elevation & Depth

• 白カードに薄くぼかしたドロップシャドウ
• 緑ボタンは上下グラデーションと影で立体的に
• メダル・円形バッジは光沢と影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は角なしの四角、成分・素材は正円、比較写真は四角並べ
• セクション境界: マゼンタ帯は下辺をV字や斜めにカット。他は直線で背景切替
• ラベルは角丸小の帯か吹き出し
• 訴求ポイントは円形バッジ
• 解約訴求は金の二重枠の四角
• FAQはQ/Aの大文字付き白カード

Components

• 色選択購入ボタン（button-color-select）: 緑のグラデーションボタン。左に髪色の円形サンプル、右に白い再生マーク
• マゼンタ訴求帯（band-magenta）: 全幅のマゼンタ帯に白と金の文字。下端は斜めカット
• 金メダル（medal-gold）: 年号と順位を入れた金の円形メダルを格子状に並べる
• 特典カード（benefit-card）: 左上にマゼンタの特典番号ラベル、白地に大きなマゼンタ数字
• 口コミカード（review-card）: 上に人物写真、マゼンタ円の名前年齢バッジ、マゼンタ見出しとマーカー入り本文
• 価格ブロック（price-block）: 商品写真と通常価格、マゼンタの割引ラベル、明朝の大きな価格、グレー条件タグ
• 円形訴求バッジ（badge-circle）: 白や半透明の円に明朝で特長を2〜3行
• FAQカード（faq-card）: 明朝のQとマゼンタのA、間に区切り線
• ポイント番号（point-label）: 金の円にイタリックの英字と数字

Do's and Don'ts

Do - 実績系の数字は金＋月桂樹で権威づけする - 価格と割引率はマゼンタ明朝で大きく - 効果写真には※注釈を必ず添える - 濃色写真背景と白地を交互に置きリズムを作る - 購入導線は色ごとのボタンにする

Don't - マゼンタ・金・緑以外の強調色を足さない - 見出しを全部ゴシックにしない - ボタンをフラットな細線ボタンにしない - 注釈を省略しない - 余白を広げすぎて訴求密度を下げない

Page Structure

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

1. ファーストビュー（悩みと解決を一目で伝える）: 上部マゼンタ帯、グレーヘア写真に縦書き明朝大見出し、下に実績帯と金ロゴ
2. 販売実績（信頼獲得）: 金色の背景と商品の大量並べ、明朝の大数字
3. 受賞・連続実績（権威付け）: 赤幕背景に金リボン見出し、金メダルを格子に並べる
4. 使用経過（効果の可視化）: 髪の背景に回数ラベル付き写真3枚を矢印でつなぐ
5. リニューアル訴求（新しさを伝える）: 深緑背景に商品と金の六角バッジ
6. オファー・購入（初回割引で申込）: マゼンタ帯、価格ブロック、色選択の緑ボタン5つ、解約OKの金枠
7. 特典（定期の魅力強化）: クリーム金地に月桂樹見出し、番号ラベル付き白カード7段
8. 悩みの提起（共感）: グレーのコンクリ背景にチェック付き悩みカードと写真
9. 解決提示（手軽さ訴求）: マゼンタ帯から艶髪写真へ、縦書き明朝大見出し
10. お客様の声（社会的証明）: 金のキラキラ背景に口コミカード3枚
11. こだわり（成分・技術の根拠）: ポイント番号ごとに金・青・緑の背景、円形成分写真
12. 使い方（不安解消）: ステップ番号と写真の白カード縦並び
13. よくある質問（疑問解消）: Q/A白カード
14. お届けサイクル・最終CTA（最終申込）: 回数別カードとトラック矢印、再び価格ブロックと緑ボタン

Imagery

• 40代前後の女性が笑顔で振り向く明るいハイキー写真
• 艶のある黒髪・グレーヘアの後ろ姿を大きく
• 成分は植物・素材の接写を正円で切り抜く
• 金の月桂樹・リボン・メダル・キラキラ光の装飾
• 研究者・工場など白衣の写真で信頼感
• オイルの滴りや水滴で質感を演出
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約750px）のカラムを置き、左右は淡い背景で埋める
• メダルや成分グリッドの列数は維持
• 大見出しは PC で1.3倍程度まで
• ボタンは最大幅480pxで中央揃え

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