DESIGN.md — くすみローズ×ココア茶の上品ヘアケア LP（Dusty Rose Salon Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
• キーワード: くすみローズ・生成り・ココアブラウン・サロン品質・成分訴求・艶感
• 地の質感: マットな単色の面に、艶のある写真とやわらかいグラデーションを重ねる
• 形: 角丸は控えめな白カードとピル型ラベル。境界は直線とV字の切り込み
• 温度感: 暖かめ。ピンクベージュ寄りのやさしい温度感

Colors

• 地色は生成り・くすみローズ・ベージュの 3 色をセクションごとに切り替える
• 文字は黒ではなくこげ茶で統一する
• 強調したい一文は濃茶の帯に白文字で載せる
• 2 タイプの比較はローズとテラコッタで色分けし、全体で一貫させる
• 数字の大きな強調はテラコッタかローズで塗る
• ピンク地の上の見出しは白文字にする
• type-pill は文字 #FEFDFB × 背景 #CF929A のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B55864、4.55:1）を使う。
• stat-ring は文字 #CF929A × 背景 #FEFDFB のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B55864、4.55:1）を使う。

Typography

• 見出しは中央揃えで 2 行に分ける
• 英字ラベルは小さく字間を広めにし、和文見出しの上に置く
• 特長番号は細い欧文の大きな数字にする
• 注釈は 9px 前後で小さくまとめ、セクションの末尾に置く
• 実績の数字だけ明朝体を使い格調を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分カードだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地色を替え、全幅で切り替える
• 白カードは左右 16px ほどの余白を空けて並べる
• 写真は全幅か、幅 90% の角丸なしで配置する
• 本文は中央揃えを基本にし、長い説明だけ左揃えにする
• 特長は番号、見出し、説明、2 枚の成分カードの順に繰り返す

Elevation & Depth

• 影はほとんど使わず、地色の差でカードを浮かせる
• 白カードに付ける影は、ごく薄いぼかし影だけにする
• 商品写真は映り込みと光沢で立体感を出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。商品は円形の背景に載せることもある
• セクション境界: 基本は直線。悩みセクションの下だけ V 字に切り込む
• タイプ名ラベルは横長のピル型にする
• 悩みの項目は半透明の暗いピルにチェックアイコンを付ける
• 成分カードの角は小さい角丸か直角にする
• アイコンは細い線の丸枠で囲む

Components

• 濃茶の強調帯（emphasis-band）: 本文中の一文を濃茶の帯に白文字で載せる。複数行のときは行ごとに帯を付ける
• タイプ名ピル（type-pill）: 2 処方を色で分けるピル型の見出しラベル
• 悩みチップ（concern-chip）: 写真の上に置く半透明のピル。チェックアイコンと短い悩みの言葉を入れる
• 特長番号見出し（feature-number）: 小さな英字ラベルの下に大きな 2 桁の数字を置き、その下に和文見出しを続ける
• 成分カード（ingredient-card）: 白カードに正方形の写真、英字名、成分名、線アイコン、対象タイプのタグを入れる
• 詳細ボタン（button-secondary）: 濃茶の長方形ボタン。右端に＋アイコンを置く
• 効果番号バッジ（effect-badge）: 濃茶のピルに英字と番号を入れ、カードの上端中央に置く
• 配合率リング（stat-ring）: 大きな配合率の数字と、商品写真を囲むドーナツグラフを並べる

Do's and Don'ts

Do - 地色を 3 色でリズミカルに切り替える - 文字と濃い面はこげ茶でそろえる - 2 タイプの色分けはページ全体で一貫させる - 成分の根拠は注釈で丁寧に添える - 英字ラベルと和文見出しを組で使う

Don't - 純黒の文字や彩度の高い原色は使わない - 影を強くしたり、立体的なボタンにしたりしない - ポップな手書き文字やイラストは入れない - 1 セクションに地色を何色も混ぜない - 角丸を大きくしすぎて幼い印象にしない

Page Structure

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

1. ファーストビュー（商品の世界観と価値を一目で伝える）: ピンクのグラデーション地に水の渦と商品ボトルを置き、上に大きなコピー、下にロゴと短い説明文を並べる
2. ブランドの考え方（ケアの考え方を共有する）: モデル写真の下に生成り地を置き、ピル枠の小見出しとスキンケア写真のコラージュを並べる
3. 誕生ストーリー（開発の背景を語る）: ローズ地に白文字で書き、要点は濃茶の帯で強調する
4. 実績（ランキングとレビューで信頼を得る）: パール調の光の背景に明朝の大きな数字、メダルのグリッド、星評価を並べる
5. ラインナップ（2 タイプを紹介する）: 円形の背景に商品を載せ、色の違うタイプ名と髪質タグを添える
6. 悩みの提起（共感を得る）: 後ろ姿の写真に悩みのピルを 4 つ重ね、下端は V 字に切り込む
7. 原因の説明（悩みの根本原因を示す）: 髪の断面図をラベルで囲み、左揃えの説明文を添える
8. 成分の強み（配合率で差をつける）: 配合率リングとビフォーアフターの断面図を並べ、注釈を付ける
9. 独自処方（技術を可視化する）: 商品の周りに悩みの丸バブルを配置し、線アイコンを円環状に並べる
10. 特長（悩み別に成分を解説する）: ベージュ地に番号見出しを置き、成分カードを 2 カラムで並べて 5 回繰り返す
11. タイプ選び（髪質や香りから選んでもらう）: 白カードに商品、価格、対象を箇条書きし、香りはピラミッド図で見せる
12. 効果（使い続けたときの実感を示す）: 番号バッジ付きのカードに写真か CG と説明を入れる
13. 容器・使い方（付け替えの仕組みを説明する）: 浴室の写真とステップ番号付きの手元写真を並べる
14. コンセプト・価格の考え方（ブランドの美学で締める）: モデル写真、生成り地の左揃えの長文、ローズ地に写真を重ねたメッセージの順で置く

Imagery

• 商品ボトルはピンクの背景で艶と映り込みを強調して撮る
• モデルは目を閉じた横顔か後ろ姿で、髪の流れを見せる
• ビーカーや雫、泡、ジェルのテクスチャーを淡いピンク系で撮る
• 成分は青・金・ピンク系の CG マクロで表現する
• アイコンはこげ茶の細い線画を丸枠で囲む
• 香りの素材写真は自然光で撮った果実や花を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の SP レイアウトを置き、左右を地色で埋める
• PC で広げる場合、成分カードは 3〜4 カラムにする
• ファーストビューは PC では写真とコピーを左右に分ける
• 注釈の文字サイズは PC で 11px 程度に上げる

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