DESIGN.md — くすみローズ×金箔のサロン系ヘアケアLP（Dusty Rose Salon Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: くすみローズ・金箔・明朝見出し・縦書きコピー・サロン品質・定期便訴求
• 地の質感: 水面・泡・花びらの淡いボケ写真と、金のグラデーション箔。白カードには薄い影をつける
• 形: 四角いカードと帯見出しが中心。CTAはピル型、成分は丸いバッジで見せる
• 温度感: 暖かく柔らかい。ピンク寄りの暖色に、ところどころ黒グレーの締め色を入れる

Colors

• 地は白・淡ローズ・ピンクベージュを交互に使い、セクションを分ける
• 価格ブロックはくすみローズの面に白カードを置く
• CTAはページ内で唯一の深緑。ほかの部品に緑は使わない
• 強調したい本文はローズ色の太字にする。マーカーは淡ピンクで最小限に
• 金グラデーションはバッジ・番号・帯だけに使い、高級感を出す
• 単品購入のサブ導線はグレーで控えめに見せる
• band-heading は文字 #FFFFFF × 背景 #CA7486 のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BD5369、4.56:1）を使う。
• check-tag は文字 #FFFFFF × 背景 #C4AB7C のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#8C713F、4.62:1）を使う。

Typography

• 見出しは明朝で字間を広めにし、助詞だけを小さくして強弱をつける
• 情緒的なコピーは写真の上に縦書きで置く
• 価格数字はセリフ体で大きくし、円や税込は小さく添える
• 本文はゴシック、強調語だけローズの太字にする
• 英字のPoint表記は細めのセリフ体と横線で飾る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイント一覧は 4 列の縦書き、声は 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約16pxの余白をとって中央に置く
• 写真は画面幅いっぱいか、片側に寄せて文字と重ねる
• 価格ブロックを冒頭・中盤・末尾の3回置く
• Point番号のリストは点線で区切って縦に並べる

Elevation & Depth

• 白カードには薄くぼかした影（0 2px 8px rgba(0,0,0,.08)）をつける
• CTAボタンには下向きの影をつけて立体的に見せる
• バッジは金のグラデーションで光沢感を出す

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 四角い切り抜きが基本。香りの素材や成分は円形に切り抜く
• セクション境界: 基本は直線。ときどき斜めのピンク面や、V字の金リボンで区切る
• カードは角丸をほぼつけない
• CTAとサブボタンはピル型にし、右端に丸い矢印アイコンを置く
• 帯見出しは角丸なしの長方形にする

Components

• 深緑ピルCTA（button-primary）: 幅いっぱいの深緑ピル型ボタン。右端に白丸の矢印をつける
• 単品購入グレーボタン（button-sub）: 商品名と価格を並べた濃グレーのピル型ボタン
• 価格カード（price-block）: ローズの地に白カードを置き、商品写真・通常価格の取消線・OFFの丸バッジ・大きな定期価格を並べる
• 金箔Point番号（point-badge）: 金グラデーションの四角に、Pointの文字と2桁の数字をセリフ体で入れる
• 帯見出し（band-heading）: ローズまたは金の帯に白文字の明朝。行ごとに帯を分けて重ねる
• お客様の声カード（review-card）: 白カードを2列で互い違いに配置し、強調語をローズの太字にする
• 成分リスト枠（ingredient-box）: 金ベージュの細線で囲み、□付きのローズ色見出しで成分を列挙する
• チェック付きタグ（check-tag）: 白丸チェックアイコンと短い語を入れた金または白の帯タグを縦に重ねる

Do's and Don'ts

Do - 明朝の見出しは字間を広く、余白を十分にとる - ローズ・白・金の3色を軸にまとめる - 価格カードは同じ形で何度もくり返す - 注釈は※番号つきで小さく、灰色で添える - 情緒的なコピーは縦書きで写真の上に重ねる

Don't - CTA以外に緑を使わない - 原色の赤や彩度の高いピンクを使わない - 大きな角丸のポップなカードにしない - 見出しを太いゴシックで強く主張させない - 金の面を広い範囲に塗らない

Page Structure

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

1. ファーストビュー（上質な世界観と権威を伝える）: 花と水のボケ写真の上に商品2本を置き、金の月桂冠バッジと明朝2行コピーを重ねる
2. 価格オファー（冒頭から購入を促す）: ローズ地の白カードに半額価格と深緑CTAを置き、セット購入と単品購入の導線を続ける
3. 定期便の安心ポイント（定期購入の不安を減らす）: 金箔の番号つきで4項目を点線区切りの白カードにまとめる
4. 実績・お客様の声（社会的証明を示す）: ランキングバッジと縦書きの販売数、帯見出し、2列の声カードを並べる
5. 専門家推薦（プロの権威で信頼をつくる）: 人物写真に肩書きの帯を重ね、下に枠付きのコメントカードを置く
6. 解決提示（商品の価値を要約する）: モデル写真と斜めのピンク面に、ローズ強調の明朝コピーとチェックタグを重ねる
7. ブランドストーリー（歴史と専門性を伝える）: サロン写真と枠付きテキスト、「しかし」「そこで」の接続バッジで物語風に進める
8. 悩みの図解（ダメージの仕組みを理解させる）: 番号つき3段階のイラスト、グラデーションバー、円グラフ、黒背景の強調でつなぐ
9. 共感と解決（悩みへの共感から解決策へ移る）: 水紋の暗い写真に縦書きの白文字。続けてピンク地に金リボンと2STEPの商品写真
10. 4つの特長（商品のこだわりを詳しく説明する）: 縦書き4列の目次のあと、Point.01〜04を写真・帯見出し・成分枠で個別に説明する
11. 締めのビジュアル（気持ちを高めて購入に移らせる）: モデルが商品を持つ写真に、縦書きの明朝コピー
12. 最終CTA（購入へ導く）: 冒頭と同じ価格カードと安心ポイントをくり返す

Imagery

• 商品は淡いピンクのボトルを白い明るい場所で、柔らかい自然光で撮る
• モデルは黒髪ロングの女性。肌は白く飛ばし気味に、笑顔か横顔で撮る
• 背景は水面・泡・花びら・シルクの布のボケで、淡いピンクに寄せて加工する
• 香りの素材は円形に切り抜き、白縁のバッジにする
• 図解は髪のキューティクルを茶系の簡潔なイラストで描く
• 金の月桂冠と王冠でランキングや推薦を飾る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCもSPと同じ縦長1カラムで、中央に約750px幅で置く
• PCは左右の余白を淡グレーで埋める
• 文字・画像の比率はSPのまま拡大して使う
• PCで多カラムにするなら、声カードと香りバッジを3〜4列に広げる

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