DESIGN.md — ラベンダー×白の泡感オーラルケア機器LP（Lavender Bubble Oral Care Device LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 清潔・爽やか、上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: ラベンダー・微細な泡・水しぶき・数値訴求・清潔感・美容×健康
• 地の質感: 泡や水滴が浮かぶ透明感のある写真と、メタリックな銀のグラデーション面
• 形: 角丸なしの四角い帯と枠、数値や効能を入れる円形バッジ
• 温度感: やや寒色寄りで、落ち着いた涼しさ

Colors

• 地は白・淡いラベンダー・銀グレーを交互に使い、セクションの区切りを色で示す
• 強調の帯やラベルはくすみ紫に白抜き文字にする
• 見出しと数値は濃紺。純粋な黒は使わない
• 黄緑のマーカーはキーフレーズの下半分だけに引く
• 比較では『なし』を淡い紫、『あり』を濃い紫紺にして差を見せる
• 暖色は歯茎の写真以外には使わない
• label-band は文字 #FCFEFF × 背景 #8C85C0 のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#746CB3、4.57:1）を使う。
• point-tag は文字 #FCFEFF × 背景 #8C85C0 のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#746CB3、4.57:1）を使う。
• feature-split は文字 #FCFEFF × 背景 #8C85C0 のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#746CB3、4.57:1）を使う。

Typography

• 見出しの中の助詞（の・も・で）は 6 割程度の大きさに落とし、要語を目立たせる
• 数値は Montserrat で本文の 3〜4 倍に、単位は小さくする
• 英字のラベルは大文字にして字間を広くとる
• 見出しはどれも字間 0.08em 以上で広めにする
• ※の注釈は小さく、本文より淡い色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能紹介は写真と文字の 2 分割、または 2 列カード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 18px（375px 幅換算）
• 写真は画面幅いっぱいか、左右に 5% の余白を残して置く
• 見出しは中央揃え、本文は左揃えにする
• セクションの最後に注釈ブロックを置く
• 英字を縦に配置して透かしの装飾にする
• 数値は円グラフと 2 段の数値リストで並べる

Elevation & Depth

• 影はほとんど使わない平面的な構成にする
• 円形バッジにだけ、ごく弱いぼかし影とメタリックなグラデーションを付ける
• 奥行きは写真の透明感で出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角形で切り抜き、要所に円形のバッジやアイコンを重ねる
• セクション境界: 背景色を直線で切り替える
• カードとラベルは角丸なしの四角にする
• 効能や数値は白〜銀の円形バッジに入れる
• 部位のラベルは角丸の大きな紫のタブにしてもよい
• 枠は 1px の細い線にする

Components

• 紫の帯ラベル（label-band）: 見出しの一部や部位名を、紫の四角い帯に白抜きで入れる
• マーカー見出し（marker-heading）: 主見出しの下半分に黄緑のマーカーを引く
• 円形の効能バッジ（circle-badge）: 白〜銀のグラデーションの円に、効能や数値を 2 行で入れる
• 口コミカード（voice-card）: 細い枠のカード。枠の上に VOICE と大きな細い番号を載せ、文中にマーカーを引く
• POINT 番号ブロック（point-tag）: 上半分が紫、下半分が白の正方形に、POINT と番号とアイコンを入れる
• 機能紹介の分割カード（feature-split）: 左に写真、右に紫地でアイコン・見出し・説明を置く
• 価格表示（price-block）: 濃紺の四角に送料無料などのバッジを入れ、横に大きな細い数字の価格を置く。下に保証の枠を付ける
• Q&A（faq-item）: Q は濃紺の丸、A は淡い紫の丸。項目の間は細線で区切る
• 詳細へのリンクボタン（button-outline）: 細い枠と山括弧の矢印を付けた、小さな四角いボタン

Do's and Don'ts

Do - 泡や水しぶきの写真で、透明感と清潔感を出す - 効果は大きな数値と円グラフ・棒グラフで見せ、すぐ近くに注釈を添える - セクションの頭に英字の大文字ラベルを細い字で置く - 比較はなし／ありを色の濃淡で対にする - 紫の濃淡だけで階層を作る

Don't - 赤やオレンジのボタン、派手な原色を入れない - 角丸の大きなポップなカードにしない - 太い影や立体的なボタンを使わない - 明朝体を本文に使わない（明朝はキャッチだけ） - 黄緑のマーカーを面の塗りに広げない

Page Structure

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

1. ファーストビュー（製品の独自性と専門家の推奨を一目で伝える）: 紫の泡の写真の上に、明朝のキャッチと製品写真、円形バッジを置く。下に数値の帯を付ける
2. 技術の紹介（核となる技術を短く伝える）: 紫地に細い線の枠と英字ラベル、白抜きの見出しとマーカーを置き、続けてイメージ写真を入れる
3. 副次効果（もう一つの効果を数値で見せる）: 人物写真に、帯ラベルの見出しと数値の円形バッジを重ねる
4. 専門家の推奨（信頼を得る）: 人物の切り抜き写真と肩書きの一覧を並べ、下の紫帯にコメントを入れる
5. 満足度データ（実感の数値を示す）: 円グラフと 2 段の数値リストを置き、横に製品写真を並べる
6. お客様の声（使用感を伝える）: 番号付きの枠カードを 3 枚並べ、文中にマーカーを引く
7. 悩みの提起（磨き残しの課題を見せる）: 銀の地に、部位を写した円形の写真 3 枚と、チェック付きの悩み 4 つを紫の枠で並べる
8. 特長（仕組みと効果を説明する）: POINT ブロック、サイズ比較の円、棒グラフ、ビフォーアフターで構成する
9. ブランドの思い（情緒的な価値を伝える）: 淡い紫の地に詩的なコピーを置き、ポートレートに縦書きの英字を重ねる
10. 使いやすさ（仕様のメリットを伝える）: 写真と紫地を左右に分けたカードと、2 列カードで見せる
11. カラー展開・価格（購入の判断材料を出す）: 色違いの製品写真に英字のラベルを付け、ロゴ・パッケージ写真・大きな価格・保証の枠を続ける
12. 返金保証（不安を取り除く）: 銀の地に白い見出しボックスを置き、問い合わせ先と枠線のボタンを並べる
13. 使い方（手順を示す）: 藤色の地に白いカードを置き、大きな細い番号、線画のイラスト、POINT の枠を入れる
14. よくある質問（疑問を解消する）: 白地に Q と A の丸アイコンを置き、細線で区切って並べる

Imagery

• 紫の光を当てた背景に、微細な泡と水しぶきが舞う高速シャッター風の写真
• 白い製品を明るいグレーの地に置き、透明な円盤やガラス球を添えた静物写真
• 白〜銀の 3DCG の歯に、紫の汚れの粒が飛ぶ説明図
• 素肌感のある女性のポートレート。白シャツや淡い背景に合わせる
• 使い方は細い線の単色線画で描く
• アイコンは細い線で紫か白の単色にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP のレイアウトを幅約 37% の中央カラムにそのまま置く
• PC の左右の余白には、紫の泡と水しぶきの写真を固定背景として敷き詰める
• PC でも文字サイズや構成は変えず、カラムの比率を保つ
• 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 行書くと起動時に読み込まれる。