DESIGN.md — くすみピンク×黒の上品ヘアケア LP（Rose Pink Salon Haircare Gel Shampoo LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、情報量多め・訴求型、やさしい・柔らかい、清潔・爽やか
• キーワード: くすみピンク・黒帯コントラスト・水滴と泡・明朝の大見出し・円形成分写真・サロン品質
• 地の質感: 水滴・泡・シルク布・毛髪の艶など、濡れた光沢のある写真テクスチャを背景全面に敷く
• 形: 円形の写真切り抜き、角丸の小さい白カード、斜めカットや波形のセクション境界
• 温度感: 暖色ピンク主体に、成分・安全性パートだけ水色系の寒色を差し込む

Colors

• 地はライトグレーと生成りを交互に置き、純白はカード面に使う
• くすみローズは帯・円バッジ・ラベルに使い、全面塗りは章の境目だけにする
• 強調語は深紅かローズレッドの文字色で、1文あたり1〜2語に絞る
• 黒帯は『問題提起』『理由』『専門家』の章でコントラストを作るのに使う
• 成分・安全性・国内生産の章だけ水色系に切り替えて清潔感を出す
• 受賞・監修のバッジにはゴールドを使う
• effect-grid は文字 #A3122F × 背景 #100D0E のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#CDC2C5、4.51:1）を使う。
• circle-ingredient は文字 #FFFFFF × 背景 #E6ADA3 のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C94E39、4.53:1）を使う。

Typography

• 大見出しは明朝とゴシックを章ごとに交互に使ってリズムを出す
• 見出し内の助詞は2/3程度に小さくし、キーワードを大きく見せる
• 見出しの上に『＼ ○○ ／』形式の小さなリード行を置く
• 英字の小見出し（セリフ体・薄色）を見出しの背後や上に添える
• 手書き風コピーは斜めに置き、見出しの横に添える
• 本文は13px前後・行間1.8、強調語は深紅の太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、効果ラベルは 3 列グリッド、成分写真は 2〜3 個の円を三角配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅で見せ、上に縦書き・横書きの大きなコピーを重ねる
• セクション間は余白より背景写真の切り替えで区切る
• 白カードは左右5%の余白で浮かせて置く
• 成分紹介は円写真と文章を左右交互に配置する
• 無添加項目は小さな円を3列で並べる

Elevation & Depth

• 白カードに薄い影（0 2px 8px rgba(0,0,0,0.08)）をつける
• 円形の成分写真には柔らかい外側の影と光沢をつける
• 黒帯や見出し板は影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は全幅の角版、成分・悩みは円形、ビフォーアフターは細枠つきの角版
• セクション境界: 斜めカット・波形・逆三角の吹き出し状の切り替え
• ラベル帯は角丸小か台形の板にする
• 価格枠・CTAは角丸ほぼなしの細枠ボタンにする
• 悩み・無添加は円で囲む
• バッジはメダル・王冠・月桂樹のモチーフにする

Components

• 購入CTA（button-primary）: 白地にローズの2px枠、ローズ文字と右矢印の横長ボタン
• 割引帯（price-badge）: ローズレッドで塗った帯に白文字で割引額を出し、下に大きな明朝の価格
• 効果ラベル表（effect-grid）: 黒い箱の中に白地・ローズ文字のラベルを3列×2段で並べる
• 茶系ラベル板（label-ribbon）: 『それなら』『さらに』の接続語を置く小さな濃茶・ローズの板
• 円形成分バッジ（circle-ingredient）: 円形写真の上にピンクのラベルで成分名を重ねる
• 監修・受賞メダル（gold-medal）: ゴールドや銀の月桂樹付きメダルに短い権威文言
• 使用者の声カード（voice-card）: 白カードに見出し、Before/Afterの2枚写真と丸ラベル、下に手書き風コメント
• Q&Aアコーディオン（faq-item）: 白カードに明朝のローズ大文字Qと質問、右にローズ円のマイナスアイコン、下線で回答を区切る
• 黒帯見出し（dark-headline-bar）: 黒い帯に白の太ゴシックで問題提起、角に黄色の吹き出しラベル

Do's and Don'ts

Do - 水滴・泡・髪の艶の写真を背景に敷いて潤い感を出す - 見出しのキーワードだけを大きく、ローズ系の色にする - 成分や効果は円形写真とラベルを組み合わせて見せる - 権威付け（監修・受賞・雑誌）はゴールドのメダルで示す - 注釈は※付きの小さいグレー文字で各主張のすぐ下に置く

Don't - 原色の鮮やかなピンクやビビッドな配色にしない - 角丸の大きいポップなピル型ボタンにしない - 背景を真っ白のフラットな面だけにしない - 強調色を1文に何か所も入れすぎない - 明朝とゴシック以外の装飾書体を多用しない

Page Structure

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

1. ファーストビュー（潤い・艶の印象と権威を一目で伝える）: ピンク光の人物写真に縦組み明朝の特大コピー、商品パッケージ、丸い特徴バッジと金メダル
2. 効果一覧（一本で得られる効果を要約する）: 明朝見出しの下に黒箱で効果ラベル3列×2段
3. オファー（セット価格を提示して購入を促す）: グレーカードに商品写真、取消線の通常価格、割引帯、大きな価格、枠線CTA、左上に金メダル
4. 悩みの提起（髪と頭皮の悩みを共感させる）: グレー写真地に白抜き大見出し、悩みを円形写真で6つ配置
5. 原因の多様性（悩みの原因は人それぞれと示す）: 黒帯の見出し、ピンク地に原因ワードを大小散らした背景と悩む人物
6. 解決提案（悩みに合わせて働く商品として紹介）: 水滴背景に明朝見出し、手書きコピー、監修メダル、大きな商品写真
7. 特長・処方（ジェルの仕組みと効果を説明）: 水色の強調見出し、円の吹き出し、Before/After比較、泡の人物写真
8. メディア・専門家（雑誌掲載と専門家推薦で信頼付け）: 白カードに雑誌表紙3枚と受賞バッジ、黒地にスタイリスト写真とプロフィール
9. SNS・お客様の声（口コミと満足度を示す）: ピンク地にSNS投稿風カードのグリッド、満足度の大数字、Before/Afterのスライダーカード
10. 成分紹介（主要成分と香りを説明）: 海の写真背景に円形成分写真と白文字説明を左右交互、香りは円写真3つ
11. 成分の理由（独自成分の働きを深掘り）: 黒い艶髪背景に白カード、ローズ帯見出しと金の雫イラスト
12. 安全性・品質（国内生産・無添加・テスト済みで安心させる）: 水色地に工場写真、無添加項目の円グリッド、チェック付きテスト表示
13. 締めのビジュアル（商品の印象を最後に刻む）: 商品写真に縦組み明朝の大コピーと手書き添え
14. よくある質問（使い方の疑問を解消）: 明朝のQ&A見出し、白カードのアコーディオンを縦に並べる

Imagery

• 人物は白い服の女性、ピンクや白の柔らかい逆光で艶髪を強調
• 水滴・泡・ジェルのしずくを接写し、背景に散らす
• 成分は植物・海藻・果実を円形に切り抜き、光沢と影をつける
• 髪の断面や頭皮はシンプルなイラスト図解にする
• 比較写真は同じ構図のBefore/Afterを並べ、矢印でつなぐ
• 安全性パートは研究器具・分子模型の線画を水色で薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 640px）のカラムを置き、左右はぼかした背景やグレーで埋める
• 全幅写真はカラム幅に収め、見出しの比率は維持する
• 効果ラベルや無添加グリッドは PC でも3列を保つ
• お客様の声スライダーは PC では左右の矢印を常に表示する

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