DESIGN.md — くすみピンク×水色の上品ヘアケアLP（Soft Pink Personalized Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、情報量多め・訴求型、清潔・爽やか
• キーワード: くすみピンク・パーソナライズ・字間広め・筆記体アクセント・価格訴求・透明感
• 地の質感: 白〜淡いグレーの地にマット質感。ソフトフォーカスの製品写真と水色の背景写真で透明感を出す
• 形: 角丸の小さいカード、ピル型ラベル、細線の枠と斜めに入る区切り線、円形の吹き出し
• 温度感: やや暖色寄り（ピンク・グレージュ）に、寒色の水色を差して爽やかさを加える

Colors

• 地は白と淡いグレーを交互にし、ピンク帯は価格・特典の区切りに限る
• 強調語はローズピンク文字に淡ピンクのマーカー下線を敷く
• 主CTAはダークグレーのピル、割引CTAはセージグリーンで差別化
• 悩み・成分訴求は水色の写真背景で清涼感を出す
• グレージュの帯はステップ見出しなど上質さを出したい箇所に使う
• 赤系は価格数字と注意喚起のみに使い多用しない
• button-discount は文字 #FFFFFF × 背景 #7CBBAA のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#438170、4.55:1）を使う。
• band-heading は文字 #FFFFFF × 背景 #CC6963 のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C4514A、4.54:1）を使う。
• pill-label は文字 #FFFFFF × 背景 #E0607A のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D83758、4.56:1）を使う。
• feature-card は文字 #CC6963 × 背景 #F4E3E3 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C4514A、4.57:1）を使う。

Typography

• 見出しは字間0.1em前後を基本に、ゆったり組む
• 鍵になる語だけ文字を大きくし、ピンク色にする
• セリフは全角の“ ”で囲み、引用符を大きめに見せる
• 価格の数字は大きく、円と（税込）は小さく添える
• 欧文の筆記体は飾りとして見出しの上に重ねる
• 注釈は※付きの小さいグレー文字で各ブロックの直下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較やアイコンは 2〜3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃え、ステップ見出しは左揃え
• 製品写真は全幅か左右に余白を残した大判で配置する
• 価格ブロックは白カードにまとめ、CTAを直下に置く
• ステップ説明は左に縦線を通して流れを示す
• 注釈は右寄せの小さい文字で置く

Elevation & Depth

• 基本はフラットで影なし
• 比較カードはごく薄い影か白地とグレー地の差で浮かせる
• スマホモックは実機フレームで立体感を出す

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形が基本。人物は斜めにずらして重ねる。悩みは円形の線で囲む
• セクション境界: 直線の切り替えが基本。V字の細線や下向き三角で次へ誘導する
• ラベル・CTAはピル型
• 特長カードは角丸10px前後の淡ピンク面
• 細い枠線の白ボックスに見出しを入れて写真に重ねる
• 円形バッジで数値や特典を示す

Components

• 主CTAピルボタン（button-primary）: ダークグレーのピル。上部に白い小ラベルを重ね、右端に矢印を付ける
• 割引CTA（button-discount）: セージグリーンのピル。左に割引率の円バッジ、上に吹き出しラベルを付ける
• ピンク帯見出し（band-heading）: 全幅のくすみピンク帯に白文字で記念や特典を告知する
• 価格比較ブロック（price-block）: 通常価格に取り消し線を引き、三角矢印の先に大きな初回価格を置く。下にキャンペーン帯を付ける
• ピルラベル（pill-label）: ピンクやグレージュのピルに白文字で小見出しを入れる
• 淡ピンク特長カード（feature-card）: 淡ピンクの角丸カードに小文字1行と大きなピンク文字を置く。右上に円形バッジを重ねる
• お客様の声カード（voice-card）: 淡ピンクの地に番号の円バッジ、レーダーチャート、BEFORE/AFTER写真を並べる
• 番号付き注意点（caution-number）: 大きな明朝数字と、ピンクで一部を強調した見出しを横に並べる
• 購入前注意バー（dark-notice）: 濃グレーの細い横帯に白文字と＋印を置く。開閉式の注意事項に使う

Do's and Don'ts

Do - 強調語にはピンク文字と淡ピンクのマーカーを併用する - 見出しは字間を広くとり、上品な余白を保つ - 価格とCTAのセットを中盤と終盤で繰り返す - 数値や実績には※注釈を必ず添える - 筆記体の欧文を見出しのアクセントに使う

Don't - 原色の赤や黄を広い面に使わない - 太く角ばったディスプレイ書体を使わない - 影の強いボタンやグラデーションのボタンにしない - 本文を詰めて組まない - ピンク帯を連続して並べない

Page Structure

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

1. ファーストビュー（セット登場と限定性を伝える）: 白とピンクの地に製品群の写真を置く。上に明朝の大見出し、写真の上に円形バッジで数値を重ね、下にロゴ
2. 実績・コンセプト（研究年数と顧客数で信頼を示す）: 月桂樹の飾りに実績を入れ、イラストのタイル格子の上に円形吹き出しを×で結ぶ
3. 悩みの提起（複合的な悩みへの対応を示す）: 水色の写真背景に製品を置き、悩みを細線の円で囲んで6つほど周囲に配置する
4. 共感（利用者の悩みに寄り添う）: グレー地に、横にスクロールする吹き出しカードとイラストを並べる
5. 診断体験（パーソナライズの流れを見せる）: 人物写真とスマホモックを置き、中央揃えの短文でつなぐ
6. 注文前の注意点（限定性と希少性を伝える）: Caution の筆記体ラベルの下に番号付き見出しを3つ並べ、それぞれ写真を添える
7. セット価格・CTA（購入へ誘導する）: ピンク帯の見出し、製品写真と価格注記、ピルの特典3つ、価格比較、割引CTAの順に置く
8. お試しプラン（低価格の入口を用意する）: グレー地に白カードを置き、価格比較と濃グレーのピルCTAを入れる
9. 定期の安心ポイント（定期購入の不安を解消する）: 淡ピンクの角丸カードを3つ縦に並べ、円形バッジを添える
10. 製品ステップ解説（各アイテムの機能を説明する）: グレージュ帯の見出しの後、STEP番号・ピルラベル・枠付き見出しボックスを写真と組み合わせる
11. サロン比較・サポート（コスパと専任サポートを示す）: 2列の比較カードの中央に円形ラベルを置く。人物写真と相談手段の3つのアイコンを並べる
12. 定期サービス（継続特典を訴求する）: 空と海の写真にボトルを置く。チェックリストにピンクのマーカーを敷く
13. お客様の声（効果を実感させる）: 筆記体の見出しの下にVOICEカードを3つ並べ、レーダーチャートとBEFORE/AFTER写真を入れる
14. 専門家・海外実績（権威性を補強する）: 明朝見出しの下に写真をコラージュし、斜線やドットの装飾と吹き出しを添える

Imagery

• 製品は白い大理石やトレイの上に置き、柔らかい自然光で撮る
• ボトルの淡いピンク・水色・黄色の透け感を活かす
• 人物は白い服の女性を自然光で撮り、髪のツヤを見せる
• 細線の淡い色の女性イラストで悩みを表現する
• 成分や構造は3Dの概念図で見せる
• 花びらやボケを入れたピンクの抽象背景を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 450px）のカラムを固定し、左右に淡色の背景を敷く想定
• PC で広げる場合も価格ブロックは 1 列のまま中央に置く
• 比較カードや声カードは PC で 2〜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 行書くと起動時に読み込まれる。