DESIGN.md — 水色×ピンクの泡ときらめきヘアケア LP（Iridescent Bubble Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型、上品・高級
• キーワード: シャボン玉・水面のきらめき・パステルグラデーション・明朝見出し・商品別カラー・成分訴求
• 地の質感: シャボン玉・水滴・水面の写真を薄く敷き、透明感のある光沢を出す。悩みのパートだけはダークな石目テクスチャ。
• 形: 丸く切り抜いた写真、角丸の白カード、骨形（ドッグボーン形）の見出しプレート、円形のバッジ。
• 温度感: 涼しげな水色と温かいピンク・コーラルの中間。明るく軽やか。

Colors

• 地の色は白・淡い水色・クリーム色を基本にし、シャボン玉の写真を重ねて透明感を出す。
• シャンプーはピンク、トリートメントは水色、オイルはオレンジと商品ごとに色を固定する。カード見出し・チェックアイコン・購入ボタン・香りのピラミッドまで同じ色でそろえる。
• 悩みの提起だけはダークな地に白文字にし、明るい解決パートとの明暗差をつける。
• 本文中の強調語は、その商品の色（オレンジなど）の太字にする。
• 見出しプレートやステップの帯は、ピンク→水色のグラデーションにする。
• ボタンはピンクを主に使い、商品別のボタンはその商品の色のグラデーションにする。
• button-primary は文字 #FFF7F7 × 背景 #E0607E のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D62F56、4.52:1）を使う。
• product-card は文字 #BB6D80 × 背景 #F6F4EB のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AE5168、4.56:1）を使う。
• badge-rank は文字 #FFF7F7 × 背景 #BB6D80 のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AE5168、4.53:1）を使う。
• heading-plate は文字 #BB6D80 × 背景 #FFFFFF のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AE5168、4.58:1）を使う。
• numbered-card は文字 #D27D1D × 背景 #FFFFFF のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AA6517、4.58:1）を使う。
• fragrance-pyramid は文字 #FFF7F7 × 背景 #BB6D80 のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#AE5168、4.53:1）を使う。
• step-bar は文字 #FFF7F7 × 背景 #F5A7AD のコントラスト比が 1.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#E21A29、4.51:1）を使う。

Typography

• 大見出しは明朝にする。かな・助詞は小さく、キーワードは大きくして、文字サイズに強弱をつける。
• キーワードにはピンク→水色→オレンジのグラデーションや、商品色の文字色を使う。
• 英字ラベル（Point.01、LINE UP など）は細い欧文サンセリフで字間を広く取る。
• 手書き風の導入文字（「だから」「さらに」に当たる語）を見出しの上に添える。
• 本文は小さめのゴシックで行間を広く取り、強調は色付きの太字にする。
• ※の注釈は小さく、該当箇所のすぐ下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カード・成分紹介は 2 カラムのグリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約 6% の余白を取り、背景の写真を見せる。
• 成分は丸い写真と短い説明文を 2 つ並べる。
• 特長カードは大きな細字の番号を左上にはみ出させ、カードを左右交互にずらす。
• 比較グラフは 2×2 のグリッドに並べる。
• 見出しは中央揃え、カードの本文は左揃えにする。
• セクションごとに背景の色・テクスチャを切り替えて区切る。

Elevation & Depth

• 白カードには薄く柔らかい影（0 4px 16px rgba(0,0,0,.08)）をつける。
• ボタンにはわずかに下向きの影をつけ、浮いた感じを出す。
• 商品写真の足元に淡い映り込みや影を入れる。
• シャボン玉は半透明に重ね、奥行きを出す。

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物・成分の写真は正円に切り抜き、悩みの写真は点線の円枠で囲む。
• セクション境界: ファーストビューの下端は波形のカーブ。それ以外は背景の切り替えで区切り、一部に下向き三角の切り欠きを入れる。
• 見出しプレートは中央がくびれた骨形（ドッグボーン形）にする。
• 特長バッジは光沢のある円形にする。
• ボタンはピル型にし、右に ▶ を付ける。
• フリー項目は斜線入りの円アイコンで並べる。

Components

• CHECK・購入ボタン（button-primary）: ピル型。商品色のグラデーション地に白い太字と ▶ を載せる。
• 商品セットカード（product-card）: 白い角丸カードに、商品写真・商品名（ピンク）・内容を入れ、下端にボタンを重ねる。2×2 で並べる。
• 人気No.1バッジ（badge-rank）: カードの右上にはみ出すピンクの円形バッジ。中に黄色の文字。
• シャボン玉の特長バッジ（feature-bubble）: 虹色に光る円の中に、短いキーワードを明朝で大きく入れる。3 つ並べる。
• 骨形の見出しプレート（heading-plate）: 白、またはピンク→水色のグラデーションの骨形に、見出し語を色文字で入れる。
• 悩みのチェックリスト（worry-checklist）: ダークな地に、半透明の黒い帯と白いチェックアイコン、白文字の悩みを縦に 5 つ並べる。
• 番号付きの特長カード（numbered-card）: 大きな細字の番号と、オレンジの見出し、強調色入りの本文を収めた白い角丸カード。
• 香りのピラミッド図（fragrance-pyramid）: 三角形を TOP・MIDDLE・LAST の 3 段に分け、商品色の濃淡で塗る。
• ステップ帯（step-bar）: 水色→ピンクのグラデーション帯に、Step 番号を白抜きで入れる。
• 成分表（spec-table）: グレーの罫線の表。左に商品写真、項目名の列は中央揃えにする。

Do's and Don'ts

Do - シャボン玉・水滴・水面のきらめきを背景に繰り返し使う。 - 商品ごとの色（ピンク・水色・オレンジ）を、すべての部品で一貫させる。 - 大見出しは明朝にし、サイズの強弱とグラデーションで華やかにする。 - 成分・特長は丸い写真か円形のバッジで見せる。 - ※の注釈を小さく添え、根拠がある印象を出す。

Don't - 原色の赤や黄色を広い面に使わない（バッジの文字などを除く）。 - 四角く硬い写真の切り抜きを多用しない。 - ダークな地を悩みのパート以外で連続させない。 - 本文を太く大きくしすぎて、繊細な印象を崩さない。 - 商品の色を入れ替えたり、混在させたりしない。

Page Structure

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

1. ファーストビュー（商品と効果のイメージを一瞬で伝える）: 空を背景にした笑顔の人物と浮遊する商品。波形の下端で切り、その下にグラデーションの大コピーと、シャボン玉バッジ 3 つを置く。
2. ブランドコンセプト（ブランドの思想を伝える）: ターコイズのグラデーション地に泡を散らし、白い明朝の見出し・中央揃えの本文・商品の集合写真を置く。
3. 夜と朝の効果（使用中と使用後の変化を見せる）: 白カードに丸い写真を 2 つ並べ、矢印でつなぐ。
4. 商品セットの選択（早い段階で購入につなげる）: パステルの泡模様の地に、白カードを 2×2 で並べ、CHECK ボタンと人気バッジを付ける。
5. 悩みの提起（読み手の悩みに共感する）: 石目調のダークな地に、明朝の見出しとチェックリストを置く。季節の悩みは点線の円形写真 4 枚で見せる。
6. 解決策の提示（独自の処方を紹介する）: 手書き風の導入文字、明朝の見出し、骨形のグラデーションプレート。商品写真と円形の説明バブルを交互に置く。
7. 効果のイメージ（使用後の理想の状態を見せる）: 朝の光の人物写真の上に、縦書きの大見出しを白い帯に入れて重ねる。
8. 特長1（成分詳細）（主成分の効果を詳しく説明する）: ピンクの泡の地に、Point 番号・骨形プレート・オレンジの円形バッジ 4 つ・番号付きの白カード 4 枚を置く。
9. 特長2（比較データ）（データで根拠を示す）: ターコイズの地に、シャボン玉のキーワード・白帯に入れたコピー・2×2 の棒グラフを置く。
10. 配合成分（成分を網羅的に紹介する）: 淡い水色の地に、円形の番号・明朝の見出し・丸い成分写真の 2 カラム。
11. 無添加の訴求と不安の解消（不安を払拭する）: 琥珀色の水面写真に、濃い茶色の帯見出し。続けてダークな地に手書き風の疑問文を並べ、ピンクの泡の地で答える。
12. ラインナップ（各商品の詳細を見せて購入につなげる）: 商品色の白カードに、チェックリスト・香りのピラミッド・フリー項目アイコン・購入ボタンを入れる。
13. 香り・使い方（使用感と使い方を伝える）: 大理石調の地に香りのピラミッド図。使い方はグラデーションのステップ帯とコーラルの Special 枠で見せる。
14. 成分表（全成分を開示する）: 罫線の表に、左側の商品写真を添える。

Imagery

• 空や朝の光を背景に、自然な笑顔の女性を明るく軽いトーンで撮る。
• 商品ボトルは切り抜きにし、少し傾けて浮遊感を出す。
• シャボン玉・虹色の泡・水滴・水面の写真を、背景のテクスチャとして薄く重ねる。
• 成分は質感がわかる寄りの写真（ジェル・ゴマ・花など）を円形に切り抜く。
• 悩みのパートは、モノクロの石目やブラシ・コテといった小物の写真で暗いトーンにする。
• 香りの説明には、果物や花の写真を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はない。PC では中央に 480〜600px 幅のコラムを置き、左右は淡い背景で埋めることを推奨する。
• PC で幅を広げる場合、商品カードは 4 列、成分は 3〜4 列を推奨する。
• PC でもファーストビューの人物と商品を左右に並べ、波形の下端は保つことを推奨する。
• PC では本文を 15〜16px に上げ、行の長さは 40 字以内に収めることを推奨する。

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