DESIGN.md — 黒×金×黄の頭皮ケア美容機器 LP（Dark Charcoal Gold Tech Device LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、信頼・誠実、情報量多め・訴求型
• キーワード: ダーク・金アクセント・黄色の特典強調・精密機器・男性向け・保証訴求
• 地の質感: マットな黒とチャコールの無地。光沢のない落ち着いた面。
• 形: 角の小さいカードと細い罫線。ボタンだけピル型。
• 温度感: 冷たく硬い。金色でほんの少し温かみを足す。

Colors

• 地は黒#141414とチャコール#242424をセクションごとに交互にし、境目は直線にする
• 金色はセクション見出しと購入ボタンにだけ使う
• 黄色は特典の数字や詳細ボタンなど、お得さを伝える所だけに限る
• 使い方とFAQだけ生成りの明るい地にして、読みやすさで変化をつける
• 赤は注意書きの下線だけに少量使う
• 比較表は薄いグレーの面に置き、自社の列を金色の文字で目立たせる
• button-primary は文字 #F6F5F3 × 背景 #B8904A のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8A6B36、4.55:1）を使う。

Typography

• 見出しの上に小さなグレーのリード文を置く 2 段組にする
• 数字は本文の 3 倍ほどの大きさで黄色にして強調する
• 特典見出しは 1 文字ずつ白い箱と黄色い箱に入れる
• 傍点や赤い下線でキーワードを強調する
• 本文は中央揃えにし、行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、悩みと写真カードは 3 列から縦並びへ
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは中央揃えの見出しから始める
• 特典ボックスは中央に置き、白い＋記号で 3 つをつなぐ
• 特長は左に写真、右に金色の小見出しと本文を並べる（SP では縦に積む）
• 主要なセクションの後ろには毎回、金のピル型購入ボタンを置く
• FAQ は 2 列のアコーディオン（SP では 1 列）

Elevation & Depth

• 影はほとんど使わず、面の色の違いで階層をつける
• カードは細い枠線で区切り、影は付けない
• FV の製品写真だけ暗い背景に柔らかい光を当てる

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。製品は切り抜きで暗い地に置く
• セクション境界: 直線。地の色を切り替えるだけ
• 悩みカードは角丸 10px で枠線だけにする
• ボタンはすべてピル型にする
• 特典ボックスは角丸なしの四角にする
• 比較表のセルは角丸 2px で白にする

Components

• 金のピル型購入ボタン（button-primary）: カートアイコン付きで、幅は約 300px
• 黄色の詳細ボタン（button-benefit）: 特典ボックス内に置く小さなボタン
• 購入特典ボックス（benefit-box）: 灰色の四角い箱に 3 つの特典を＋でつなぎ、数字を黄色の特大文字にする
• 箱文字見出し（heading-box-chars）: 見出しの漢字を 1 文字ずつ白や黄色の正方形に入れる
• 悩みカード（worry-card）: 線画アイコンと 2 行の短い悩みを、枠線だけのカードに入れる
• 比較表（compare-table）: グレーの見出しセルと白いセルの表。自社の列を金色の文字にする
• FAQ アコーディオン（faq-accordion）: Q の印と下向き矢印が付いた白い行
• 受賞バッジカード（award-card）: 白い円の中にロゴを入れ、下に短い説明を付ける

Do's and Don'ts

Do - 黒とチャコールを交互にしてセクションを区切る - 金色は見出しとボタンにだけ使う - 保証や割引の数字は黄色で大きくする - 製品写真は暗い背景になじませる - 主要なセクションのたびに購入ボタンを繰り返す

Don't - パステル色や鮮やかな青・緑は使わない - 大きな角丸やかわいいイラストは使わない - 金色と黄色を同じ要素の中で混ぜない - 強い影やグラデーションのボタンは作らない - 明るい地のセクションは 2 つより多くしない

Page Structure

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

1. ファーストビュー（製品と保証を一目で伝える）: 暗いグラデーションの地に、細い欧文ロゴ、月桂樹の保証バッジ、右側の製品写真を置く
2. 購入特典（公式で買う理由を示す）: 箱文字見出しの下に、3 つの特典を縦に重ねた灰色のボックスを置く
3. 悩みの提起（共感を得る）: チャコールの地に、線画アイコン付きの枠線カードを 3 枚並べる
4. 解決策の提示（製品で解決できると示す）: 金色の 2 行見出し、短い本文、写真付きカード 3 枚、購入ボタンの順に並べる
5. 選ばれる理由（メリットと他の方法との比較）: 左に写真、右に金色の小見出しを付けた 4 項目を並べ、その下に比較表と購入ボタンを置く
6. 技術解説（科学的な根拠を示す）: 製品のアップ写真と本文、研究背景の文章と白い背景の装置写真を並べる
7. 受賞・実績（権威付け）: 白い円のロゴバッジを 3 列に並べ、下に購入ボタンを置く
8. セット商品（客単価を上げる）: 製品写真のバナーに、割引額と送料無料のバッジを重ねる
9. 使い方（手軽さを伝える）: 明るい地に、重ねた写真 2 枚と金色の番号付き 3 ステップを置く
10. よくある質問（不安を解消する）: 明るい地に、2 列のアコーディオンを並べる
11. クロージング特典（最後のひと押し）: 冒頭の特典ボックスをもう一度載せる
12. フッター（会社情報）: 黒い地に、白いロゴとリンクを小さく置く

Imagery

• 製品は黒いマットな質感で撮り、暗い背景で側面から光を当てる
• 使用シーンは無地の背景に人物を置き、低い彩度で撮る
• 技術を表すカットは青い光を点在させてテクノロジー感を出す
• アイコンは白い細い線画にする
• 毛髪や頭皮はクローズアップで、モノクロ寄りに撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅約 540px のコンテンツ列を置き、地の色は全幅に伸ばす
• SP では 3 列のカードを縦 1 列（または横スクロール）にする
• 特長の左右 2 列は、SP では写真の下に文章を置く
• FAQ は 2 列から 1 列にする
• SP では右上の購入ボタンを固定表示にしてもよい

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