DESIGN.md — チョコ茶×金箔の上品白髪染めヘアケア LP（Chocolate Brown Gold Luxe Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型、やさしい・柔らかい
• キーワード: チョコレートブラウン・シャンパンゴールド・明朝見出し・髪の艶・光の粒・大人上品
• 地の質感: 革やチョコを思わせるマットな茶の面と、金色のきらめき・ボケ光・水滴のオイル玉を重ねたリッチな質感
• 形: 角丸の写真カード、円形バッジ、月桂樹メダル、斜めや弧状のセクション境界、矢羽根型のステップ帯
• 温度感: 暖色寄り。茶・金・アイボリーで温かく、問題提起のみ灰色と黒で冷やす

Colors

• 暗い茶・黒の帯と明るいアイボリー帯を交互に配置し、縦のリズムを作る
• 大見出しの主要語は茶〜金のグラデーション文字にする
• 暗地では白文字＋ゴールドの強調語を使う
• ワインレッドは AFTER・強調語・数値など要点だけに限定する
• 悩み・ダメージ訴求のみグレー〜黒の冷たい色にして解決パートと対比させる
• 成分・香りなど各特長は植物の緑やピンクの淡い地で章を切り替えてよい
• badge-medal は文字 #FEFEFF × 背景 #B88A4A のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#956F3A、4.52:1）を使う。

Typography

• 見出しは明朝、本文はゴシックで分ける
• 見出し内で主要語を大きく、助詞を小さくするジャンプ率を付ける
• 英字の飾り文字を写真上に薄く大きく敷く
• 暗地の本文中は強調部分をゴールド太字にする
• 縦書きの短いコピーを写真の脇に置いてもよい
• 注釈は ※ 付きで小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は 2 列グリッドやコラージュも使う
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の帯にし、背景色や写真で区切る
• 見出しは中央揃えで、上に小さなリード語を置く
• 写真のコラージュは重なりや斜めずらしで動きを出す
• 本文ブロックは左右 20px 前後の余白
• 各特長は POINT 番号バッジ→見出し→図解→本文の順で揃える

Elevation & Depth

• 写真カードにうっすら影を付けて浮かせる
• ゴールドのバッジは光沢グラデーションで立体感を出す
• Q&A カードは影なしで地色差で区別する
• 円形バッジは白地に薄い影

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形、円形、片側だけ大きく丸めた半カプセル型
• セクション境界: 斜めカット・弧状の境界・写真が重なり合う境界
• タグはピル型で白地に茶文字
• 特長バッジは花形・円形のゴールドメダル
• 手順は矢羽根型の帯で並べる
• 見出し帯は角丸の茶〜金グラデーションの長方形

Components

• ゴールドメダルバッジ（badge-medal）: 円形または月桂樹付きの実績・受賞バッジ
• 茶金グラデ見出し帯（heading-band）: 見出しのリードを載せる角丸の帯
• POINT 番号バッジ（point-number）: 花形の中に POINT と 2 桁番号を明朝で入れる
• 効果タグ（tag-pill）: 効果や無添加項目を短い語で並べる白いピル
• 比較写真カード（before-after）: 左に灰色 BEFORE、右に赤枠 AFTER の 2 枚並び
• 悩み写真帯（worry-card）: 暗い写真に半カプセル型の切り抜きと短い悩み文を重ねる
• 使い方ステップ（step-card）: 茶地に左の縦書き STEP 番号と白い角丸写真カード
• Q&A カード（faq-item）: 茶の質問帯に大きな明朝 Q、下に白い回答欄
• 手書き風吹き出し（speech-tag）: 写真脇に斜めの短い感想コピーを置く

Do's and Don'ts

Do - 見出しの主要語を茶〜金のグラデーションで大きく見せる - 暗い帯と明るい帯を交互に並べてメリハリを付ける - 髪の艶やオイル玉、光の粒で高級感を足す - 実績はゴールドメダルや月桂樹で権威づけする - 効果写真には必ず小さな注釈を添える

Don't - 原色の青や緑をメインに使わない - 丸ゴシックやポップ体で見出しを作らない - ワインレッドを広い面に使わない - 余白を詰めすぎて写真の艶を潰さない - フラットな単色ベタだけで仕上げない

Page Structure

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

1. ファーストビュー（商品の世界観と実績を一目で伝える）: 女性のポートレートと商品、明朝の大見出し、実績メダル、効果を3つの茶色円で並べる
2. 共感コピー（理想像を提示する）: 笑顔の写真をコラージュし、中央に大きな明朝コピー
3. 秘密の提示（独自調合への興味づけ）: チョコの流れる茶背景に色名を縦書き英字で添えた髪写真
4. 専門家紹介（権威付け）: 人物写真に肩書きリスト、赤いピル型の話題ラベル
5. 独自技術・ビフォーアフター（効果の可視化）: 金のきらめき背景に商品と BEFORE/AFTER カード
6. 共同開発・実績（信頼性の強化）: 焦げ茶地に受賞メダル、ランキング画面を重ねた大きな数字
7. お客様の声風の写真（仕上がりの実感）: 髪写真のグリッドに吹き出しコピー
8. 悩みの提起（問題意識を高める）: 赤茶→グレーの地に悩みを3つ写真帯で並べる
9. 原因の説明（従来品のデメリット提示）: 黒地に矢羽根ステップと顕微鏡写真
10. 商品の誕生（解決策の提示）: 効果タグを並べ、オレンジ金の背景に巨大な明朝文字と商品
11. 5つの特長（機能を具体的に説明）: POINT 番号ごとに章の地色を変え、図解と本文を配置
12. 使いやすさ（不安の解消）: 白い大理石風地に縦書きコピーと写真
13. 使い方（手順の説明）: 茶地に英字大見出しと3ステップカード
14. よくある質問（疑問解消）: ベージュ地に茶の質問帯と白い回答欄のカードを縦並び

Imagery

• 艶のある茶髪のロングやボブを、柔らかい逆光で撮る
• 30〜50代の女性の自然な笑顔、白や生成りの服
• 金色のオイル玉、光のボケ、水しぶきで成分を表現
• チョコ・コーヒー豆など茶色の素材で色名を連想させる
• 毛髪断面や顕微鏡写真の図解で科学的な説得力を出す
• 植物成分は角丸の正方形写真でグリッド表示
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を 750px 程度の中央カラムに固定し、左右は背景色で埋める
• 写真コラージュは PC でも縦長の構成を保つ
• 見出しサイズは PC で 1.3 倍程度に拡大
• 成分グリッドは PC で 4 列のまま余白を広げる
• Q&A はカード幅を 640px 前後に抑える

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