DESIGN.md — 桜ピンクと泡質感のヘアケア LP（Soft Sakura Pink Foam Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: やさしい・柔らかい、かわいい、清潔・爽やか
• キーワード: 桜ピンク・泡の質感・ふんわり・季節限定・2商品比較・香りの図解
• 地の質感: 白い泡やシルクのような柔らかい写真を背景に敷き、ぼかしと透け感で空気感を出す
• 形: 角の大きい角丸カード、正円バッジ、ピル型ボタン、波形のセクション境界、波線の見出し罫
• 温度感: 暖かめの淡いピンクとクリーム色。黄とビビッドピンクを商品色として差す

Colors

• 地は白を基本に、桜セクションは淡いピンクの泡写真、お客様の声は淡いラベンダーで区切る
• 見出しは桜ピンク、本文はグレーで全体のコントラストを低めに保つ
• 商品ボタンは商品の容器色に合わせて色分けする（コーラル・モーブ・黄・ビビッドピンク）
• 本文中の強調は黄〜オレンジの文字と下線で示す
• 香りピラミッドは同じ色相を上から下へ濃くする 3 段階で塗る
• 濃い色の面は使わない。いちばん暗いのはロゴのブラウングレー
• page は文字 #7A7A7A × 背景 #FFFFFF のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#767676、4.54:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #D6838C のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C54F5C、4.52:1）を使う。
• badge-limited は文字 #FFFFFF × 背景 #E27FA6 のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D23A76、4.56:1）を使う。
• tag-outline は文字 #E27FA6 × 背景 #FFFFFF のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D23A76、4.56:1）を使う。
• voice-card は文字 #7A7A7A × 背景 #FFFFFF のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#767676、4.54:1）を使う。
• circle-badge は文字 #FFFFFF × 背景 #E27FA6 のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D23A76、4.56:1）を使う。

Typography

• 見出しは字間を 0.1em 前後と広めにとり、ゆったり見せる
• 英字ラベルは薄いベージュかグレーで小さく、和文見出しの上に置く
• お悩みとお客様の声はキーワードに下線を引いて強調する
• 注釈は * 付きの小さなグレー文字で本文の直下にまとめる
• 商品名は 2 行に分け、中央揃えの太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードだけ 2 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックの左右には約 7% の余白をとる
• セクションの間は大きく空け、空気感を出す
• 商品比較は左右 2 列の対称レイアウトにする
• 写真ブロックは片側を画面端まで裁ち落とすことがある
• テキストは中央揃えが基本。ポイントの本文だけ左揃え

Elevation & Depth

• 影はほぼ使わず、フラットな面と透け感で構成する
• 商品ボトルの写真だけ足元にやわらかい落ち影をつける
• お客様の声カードは白い面をラベンダー地に浮かべ、影はつけない

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 12px の長方形か正円。商品写真はアーチ型の上辺で切り抜く
• セクション境界: 大きくうねる波形の境界と、見出しの上下の波線
• タグは白地にピンクの細枠をつけたピル型
• 限定バッジは桜の花形
• ポイントの番号は泡のような正円
• 成分の説明は重なり合う 3 つの淡い円で図にする

Components

• 商品ボタン（button-primary）: 商品の容器色で塗ったピル型。白い太字で商品を見るよう促す
• 2 列商品カード（product-card-pair）: 泡写真の上にボトル・ブランド名・商品名・価格・ボタンを縦に並べ、左右 2 つ置く
• 桜形の限定バッジ（badge-limited）: ボトルの右上に重ねる、ピンクの花形の中に白文字
• 悩みのタグ（tag-outline）: 白地にピンクの細枠をつけたピル型。悩みを 3 つ横に並べる
• 香りのピラミッド（fragrance-pyramid）: 三角形を 3 段に分けてトップ・ミドル・ラストを示す。脇に果実や花の写真を添える
• 波線見出し（heading-wave）: 英字ラベル＋細身の和文見出しを、上下の波線ではさむ
• お客様の声カード（voice-card）: 白の角丸カード。左上に年代の円バッジ、右下に泡の装飾を置き、横スクロールで見せる
• 効果の円バッジ（circle-badge）: ピンクのグラデーションの正円に、白の太字で効果を書く
• 商品スペック表（spec-table）: 左列は淡いグレー地の項目名、右列は白地。細い罫線で区切る

Do's and Don'ts

Do - 地には淡いピンク・クリーム・ラベンダーと、泡の質感の写真を使う - 商品ボタンは商品の容器色にそろえ、ピル型にする - セクションの境界は波形にし、柔らかさを出す - 商品比較の 2 列カードは、ページの途中で何度もくり返して置く - 香りは 3 段のピラミッド図で見せる

Don't - 黒や濃紺など暗い大面積の色を使わない - 角の尖ったボタンや四角いバッジにしない - 本文を濃い黒にしすぎない（グレー基調を守る） - 太い直線の区切りを多用しない - 原色の赤や青を新しく持ち込まない

Page Structure

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

1. ファーストビュー（商品とその質感を印象づける）: ピンクの花と泡の写真の上にボトル 2 本を置き、香りの円バッジと大きな丸ゴシックのコピーを配置する。スライダー形式
2. 限定品の告知（季節限定の香りを知らせる）: ピンクの中央揃え見出しの下に、角丸カード 2 枚を置く。カードには効果の円バッジ・香りピラミッド・成分を載せる
3. 限定品の購入導線（限定品の購入へ誘導する）: 斜線で囲んだ見出し、オレンジの波線つきサブ見出し、悩みタグ 3 つを並べ、その下に 2 列の商品カードを置く
4. 定番品の購入導線（定番の 2 商品へ誘導する）: 泡写真の地にロゴを置き、2 列の商品カードと容器色のボタンを並べる
5. ブランドの紹介（コンセプトを伝える）: 波形で区切った泡写真の地に、グレーの細い文字を中央揃えで詩のように並べる
6. 特長（4 つのポイント）（商品の利点を示す）: 角丸の写真と短い本文に、黄色の下線で強調を入れる。番号は泡の円、成分は 3 つの円で図にする
7. 悩みの提起（共感を呼ぶ）: 淡い地に白くぼかした円を散らし、下線つきの悩み文を左右交互に置く
8. 成分の説明（配合成分の根拠を示す）: 波線見出しの下に、ボトルと円形の成分写真を並べる。成分カードは枠線つきで、× 印でつなぐ
9. お客様の声（評判を示す）: ラベンダー地に白の角丸カードを横スクロールで並べ、年代の円バッジをつける
10. 商品詳細（仕様と香りを詳しく示す）: 枠線つきの見出しの下に、アーチ型の商品写真・スペック表・香りピラミッドのカードを商品ごとに置く
11. フッター（ブランドとリンクを示す）: ピーチからピンクへのグラデーションの地に、ロゴと小さな英字リンクを中央揃えで置く

Imagery

• 白いもこもこの泡や、シルクのような柔らかい布を、淡いピンク系でぼかして背景に使う
• ボトルは正面から撮り、白背景に切り抜いてやわらかい落ち影をつける
• 桜・ユリ・バラ・果実などの香りの素材を、切り抜いてボトルの周りに添える
• シャボン玉のような虹色の透明な球を装飾として散らす
• 人物は顔を見せず、手元や後ろ姿を明るい自然光で撮る
• 成分は水滴や気泡のマクロ写真を正円に切り抜いて使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文の最大幅を約 600〜750px にして中央に置き、左右は淡いピンクの地か写真で埋める
• PC では商品カードの 2 列を保ったまま、余白を広げる
• PC ではポイントの写真と本文を左右 2 カラムに並べてもよい
• PC ではお客様の声を横スクロールにせず、3 列のグリッドに並べてよい

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