DESIGN.md — 白×黒×金箔の高級ヘアケア LP（Silk White and Black Gold Luxury Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: シルクの光沢・金箔グラデーション・白黒の対比・明朝の見出し・サロン品質
• 地の質感: 白と黒のサテン布・大理石・金のリボン線などを背景写真に使う。光沢のある面で質感を出す
• 形: 四角いカードと細い金線の円バッジ。ボタンだけは大きなピル型
• 温度感: 白い面はやや冷たく清潔に、黒い面は温かい金で艶っぽく見せる

Colors

• 白ラインの商品は白・グレーのシルク地、黒ラインの商品は黒サテン地で見せる。この 2 つをブロック単位で交互に置く
• 大きな見出しは金のグラデーション文字にする。単色のベタ塗りの金は使わない
• キャッチコピーは黒い帯に白抜き文字で、1 行ずつ帯を分けて段にする
• 金は線・バッジ・ラベル帯・CTA だけに使う。広い面には塗らない
• 主 CTA は金グラデーション、サブ CTA はグレーにして優先度をはっきり分ける
• 注意書きはベージュ地に小さめの文字で置く
• button-primary は文字 #FFFFFF × 背景 #C9A24A のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#91722B、4.52:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #9A9A9A のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#767676、4.54:1）を使う。

Typography

• 見出しは明朝で、本文はゴシックで組む
• 英字の飾りは大きく薄い色で、和文見出しの背後に重ねる
• 本文は中央揃えにして行間を 2.0 前後まで広く取る
• 見出しの一部の文字（数字・キーワード）だけを大きくして強弱をつける
• Inner care のような小さな英字ラベルは字間 0.4em 以上に広げる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分アイコンは 3 列か 2 列、植物オイルは横スライダー
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは左右どちらかに寄せ、金の細線の外枠をずらして重ねる
• 商品写真はカードの端からはみ出させて立体感を出す
• 円バッジは 3 つを少しずつ重ねて横に並べる
• 購入ブロックは左に商品写真、右に価格ボタンを縦に 2 つ置く
• 口コミは黒い見出し帯と白い本文カードの 2 段構成にする

Elevation & Depth

• 白カードに薄く広いドロップシャドウを付ける
• FAQ の帯と口コミカードは右下に軽い影を付ける
• 商品ボトルには写真上の柔らかな接地影を付ける

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 成分写真は正円、商品は切り抜き、オイル写真は角のある矩形
• セクション境界: 布のドレープ写真や金のウェーブ線でつなぐ。上部に波型の金縁を付けることもある
• カードは角丸なしの四角にする
• CTA は大きなピル型にし、右端に > を置く
• バッジは金の細線 1px の正円にする
• 香りのピラミッドは三角形を 3 段に分ける

Components

• 金グラデの定期購入ボタン（button-primary）: 金のメタリックなグラデーションのピル型。プラン名・価格・2 ヶ月目以降の条件を 3 段で入れる。右上に割引率の円バッジを重ねる
• 単品購入ボタン（button-secondary）: グレー一色のピル型。白文字で価格を見せる
• 割引率の円バッジ（badge-discount）: 白地に金の縁取りの小さな円。CTA の右上に重ねる
• 金線の特長サークル（circle-feature）: 金の細線の円に、明朝 2 行で特長を入れる。3 つを少し重ねて並べる
• 黒帯の白抜きキャッチ（catch-black-band）: 1 行ごとに黒い矩形の帯を敷き、白い明朝で段組みにする
• 金のラベル帯（label-gold）: 金茶のグラデーション帯に白い小さな文字。成分の分類や販売状況を示す
• かぎ括弧枠の英字見出し（heading-bracket）: 金の細線のかぎ括弧で、英字セリフと小さな和文を囲む
• 口コミカード（card-review）: 上は黒地に金ドットの帯で、正方形の顔写真・白い太字タイトル・金の属性を載せる。下は白カードに本文
• 金サテンの FAQ 帯（faq-accordion）: 金のサテン写真の帯に白い太字で Q と質問、右端に +。開くとベージュ地に回答を出す

Do's and Don'ts

Do - 白ラインと黒ラインを交互に置き、どちらも同じ構成で見せる - 大見出しは金グラデーション明朝で、背後に英字の飾りを重ねる - 布・泡・クリームなど質感がわかる写真を背景に敷く - 特長は 2〜4 文字の短い言葉にして円バッジに入れる - 成分の脚注は※番号でまとめて小さく示す

Don't - 原色やビビッドな色を使わない - 角丸の大きいポップなカードにしない - 金を広い面のベタ塗りにしない - 丸ゴシックや手書きの書体を使わない - 余白を詰めて本文を左揃えで密に並べない

Page Structure

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

1. ファーストビュー（高級感と核となる価値を一目で伝える）: 白黒のサテン地に 2 本のボトルを斜めに置く。縦書き明朝の大コピーと金の円バッジ 3 つを添える
2. コンセプト（サロン品質を家で使えると打ち出す）: 金の二重線で挟み、金グラデーションの大見出しと 1 行の副コピーを置く
3. ライン選択と購入 CTA（2 種類から選ばせて申込に誘導する）: 大きな英字 2 語を or でつなぐ。商品ごとの購入カードに金とグレーのピル型ボタンを置く
4. ブランドストーリー（次世代のケアだと印象づける）: モノクロの人物写真に金グラデーションの大見出しを重ねる
5. 独自成分（シルク成分 3 種の効果を説明する）: 黒サテン地に円形の成分写真、金ラベル、白文字の説明を交互に配置する
6. ステップ解説（白）（シャンプーとトリートメントの役割を伝える）: 白カードに英字の飾り、STEP 番号の縦書き、黒帯のキャッチ、中央揃えの本文、円バッジを置く
7. 共通成分（配合成分の豊富さを見せる）: 円形の写真を 3 列×2 段に並べ、太字の成分名と一言を添える。植物オイルは横スライダーにする
8. ステップ解説と成分（黒）（黒ラインの特長を伝える）: 白ラインと同じ構成を黒地で繰り返す
9. 泡・仕組み図解（使ったときの体験と作用を直感的に伝える）: 泡の写真に巨大な金の 2 文字を置く。前後比較の図解を白カードで見せる
10. 動画（世界観を動画で補う）: 埋め込み動画を横幅いっぱいに置く
11. 香り紹介（香水のような香りを訴求する）: バスルームの写真に商品を置き、金ラベルと明朝の見出しを添える。香りはトップ・ミドル・ラストのピラミッドで示す
12. お客様の声（使用者の実感で信頼を作る）: かぎ括弧枠の英字見出しの下に、黒帯と白カードの口コミを 3 件並べる
13. 著名人の推薦（権威付けをする）: 黒帯の白抜き見出し、人物写真、短いコメントで構成する
14. よくある質問（不安を解消して申込条件を伝える）: 金サテンのアコーディオン帯。回答はベージュ地に出す

Imagery

• 白と黒のサテン布を大きくドレープさせた光沢のある写真を背景に使う
• 商品ボトルは切り抜き、斜めの構図や接地影で立体的に見せる
• テクスチャーは金や黒の液体・クリームのストロークを白地に置いて撮る
• 成分は水滴・オイル・カプセルなどの接写を正円で切り抜く
• 香りは果実・白い花・キャンドルのある高級なバスルームで世界観を作る
• 金のリボン線やウェーブ線を飾りとしてあしらう
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後の 1 カラムに SP デザインを収め、左右に布の背景写真を広げる
• 成分グリッドは PC で 4〜6 列に広げてよい
• 購入カードは PC で写真とボタンを横並びにし、余白を広げる
• 英字の飾り見出しは PC で 80px 程度まで拡大する

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