DESIGN.md — 青紫グラデと泡の透明感 歯磨き粉 LP（Clear Blue-Violet Gradient Oral Care LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 清潔・爽やか、上品・高級、情報量多め・訴求型、信頼・誠実
• キーワード: 透明感・青紫グラデーション・泡・シャボン玉・明朝見出し・六角形バッジ・清潔
• 地の質感: 白地に淡い泡、水しぶき、ひび割れ模様のような薄いテクスチャを重ねる。ベタ塗りは使わず、帯やバッジは青から紫へのグラデーションで塗る
• 形: 円形のPOINT番号、六角形のバッジ、片側を丸めた吹き出し帯、丸い玉のチップ
• 温度感: 寒色寄りで冷たく澄んだ印象。紫を混ぜて上品なやわらかさも出す

Colors

• 地は白と淡い水色を交互に使い、泡のテクスチャで透明感を出す
• 帯・バッジ・番号は青(#5074B6)から紫(#7E789D)への斜めグラデーションで塗る
• 見出しの中で強調したい語だけ青の文字にし、ほかは紺黒にする
• 悩み提起とランキング実績は暗い紺の地に白文字で、明暗の差を見せる
• 金色は実績の月桂樹と「第1位」だけに使う
• 本文の強調は太字の青文字で、赤やピンクは使わない
• badge-ranking-top は文字 #E9EEEC × 背景 #5074B6 のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#486BAC、4.51:1）を使う。
• badge-hexagon は文字 #E9EEEC × 背景 #5074B6 のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#486BAC、4.51:1）を使う。
• worry-bar は文字 #E9EEEC × 背景 #5074B6 のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#486BAC、4.51:1）を使う。
• heading-band は文字 #E9EEEC × 背景 #5074B6 のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#486BAC、4.51:1）を使う。
• point-number は文字 #E9EEEC × 背景 #7A75AC のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#6963A1、4.59:1）を使う。
• speech-pill は文字 #E9EEEC × 背景 #7A75AC のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#6963A1、4.59:1）を使う。

Typography

• 見出しは明朝体で、字間を広めにとる
• 本文・ラベル・バッジはゴシック体に統一する
• 見出しの強調語は青文字にし、文字を少し大きくする
• 数字は明朝体で特大にし、単位の文字は小さく添える
• 注釈は＊を付けて9px程度で近くに置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列（STEP・原因は 2〜3 列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは中央に置き、POINTの見出しは丸番号の右に左揃えで並べる
• STEPは 2×2 のグリッドにする
• 原因は縦長のカプセル型カードを 3 列に並べる
• 悩みは左側の帯にチェックを付けて並べ、右側に人物イラストを置く
• 効果は商品写真の周りに丸チップを散らして配置する

Elevation & Depth

• カードや帯には影をほぼ付けず、グラデーションと淡い地色で区切る
• 丸チップには内側に光るような球体の陰影を付ける
• 泡や球体には虹色の淡い縁取りで立体感を出す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸12px程度の長方形で切り抜く。比較写真は少し傾けて重ねる。商品は切り抜きで置く
• セクション境界: 基本は水平の直線で区切る。見出し帯の下辺はゆるいV字にする
• バッジは六角形にして、成分や特長を表す
• 番号は塗りつぶしの円にする
• 吹き出し帯は片側を丸めたピル型にする
• 7つのフリーは細い線の円に斜線を添える

Components

• 上部の実績リボン（badge-ranking-top）: ページ最上部のグラデーション帯。月桂樹の飾りで実績を示す
• 六角形の成分バッジ（badge-hexagon）: グラデーションの塗り、または太い枠線の六角形を 3 つ並べる
• STEP図解カード（step-card）: 白丸のSTEP番号を付けた断面イラスト。下に 2 行の説明を置く
• 原因カプセルカード（cause-capsule）: 上に紫の丸番号、淡い青の縦長カプセルの中に見出し・本文・線画アイコンを入れる
• 悩みチェック帯（worry-bar）: 左端から伸びる青い帯。チェックと白文字で悩みを書く
• 選ばれる理由の見出し帯（heading-band）: 画面幅いっぱいのグラデーション帯。下辺をV字にし、白い明朝体を置く
• POINT丸番号（point-number）: 青紫グラデーションの円の中に、POINTの文字と大きな数字を入れる
• 吹き出しリード（speech-pill）: 見出しの上に置く小さなピル型の吹き出し。下に三角の尾を付ける
• 効能の丸チップ（effect-orb）: 濃い青の球体に白文字を入れ、商品の周りに配置する
• 無添加の円（free-circle）: 白地に細い枠線の円。中に青の文字を入れ、斜線を添える

Do's and Don'ts

Do - 面はグラデーションか淡い色にして、透明感を保つ - 見出しは明朝体にし、強調語だけ青文字にする - 特長はPOINT番号で順番に並べ、図解やイラストを添える - 根拠のある表現には＊の注釈を必ず付ける - 泡や球体のモチーフを地に薄く散らす

Don't - 暖色の強い色をベタ塗りしない - 見出しをゴシックの極太体にしない - 濃い影や立体的なボタンは付けない - 装飾を詰め込みすぎて白地の余白をなくさない - 金色を実績以外に使わない

Page Structure

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

1. ファーストビュー（白さと効果を一目で伝える）: 笑顔の女性写真に縦書きの明朝コピーを重ねる。左に丸い効果チップ、下に六角形の成分バッジを 3 つ置く
2. ランキング実績（権威付け）: 紺の水しぶき背景に、白い明朝の見出しと金の月桂樹付きの大きな順位を置く
3. 販売実績（人気の証明）: 白地に、青グラデーションの大きな数字と月桂樹を置く。下に商品を並べた写真を入れる
4. 仕組みの図解（汚れが落ちる原理を説明する）: 青から紫へのグラデーション地に、STEPカードを 2×2 で並べる
5. 悩みの提起（見た目の不安をあおる）: 暗い紺の地に、ビフォーアフターの口元写真を傾けて並べる
6. 原因の解説（問題を理解してもらう）: カプセル型のカードを 3 列に並べ、線画アイコンを添える
7. 共感と解決の提示（悩みを並べて商品へつなぐ）: チェック付きの青い帯を 3 本並べ、右に悩む女性のイラストを置く。明朝のテキストで商品へ誘導する
8. 選ばれる理由（特長の全体像を見せる）: V字の帯見出しの下に、2 つの泡の円を×でつないだ図を置く
9. POINT 1〜5（特長を順に説明する）: 丸番号＋明朝見出し＋本文＋図解・写真の流れを繰り返す
10. 検証（実験で効果を見せる）: 吹き出しリードの下に実験写真を置く。結果はピル型の帯で伝える
11. 効能一覧（承認された効能を一覧で見せる）: 商品写真を中心に、濃い青の球体チップ 7 個を周りに散らす
12. 無添加訴求（安心感を出す）: 吹き出し見出しの下に、細い枠線の円を 4 個と 3 個の 2 段で並べる

Imagery

• 明るく白っぽいトーンで、歯を見せて笑う女性のポートレートを使う
• 商品は白いチューブを切り抜き、淡い影とクリームの質感を添える
• 図解はフラットなイラストで、歯は白、汚れは茶色にする
• シャボン玉のような半透明の球体を、虹色の縁取りで背景に散らす
• 人物は細い線の淡彩イラストで、紫系の服にする
• アイコンは青一色の線画とシルエットで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央を 640〜750px 幅に固定し、左右を淡い水色の地で埋める
• STEPや原因のグリッドはそのまま保ち、余白だけ広げる
• 画面幅いっぱいの帯はPCでも横幅いっぱいに伸ばす
• 文字サイズはSPの 1.2 倍程度を上限にする

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