DESIGN.md — くすみブルー×白の清潔感ある電動歯ブラシLP（Dusty Blue Clean Oral Care Device LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル、情報量多め・訴求型
• キーワード: くすみブルー・白とライトグレー・清潔感・機能訴求・円形バッジ・製品物撮り
• 地の質感: マットでフラット。光沢のある白い製品写真と、淡い水しぶき・タイル壁の背景
• 形: 円形バッジ、角丸カード、ピル型ラベル、帯状のブルー面
• 温度感: やや寒色寄りで落ち着いている

Colors

• 地はライトグレーと白を交互に置き、数セクションに1回ブルーの帯を入れて区切る
• 見出しは濃いグレーにして、キーワードだけブルーにする
• ブルー面の上は白文字にし、大見出しだけクリーム色で強調する
• 暖色は使わない。歯茎の写真など写真の中の色だけにとどめる
• ラベルや帯には濃紺を使い、primaryより一段濃くする
• badge-circle は文字 #E3F3FB × 背景 #6A87AE のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#526F96、4.54:1）を使う。
• ribbon-band は文字 #E3F3FB × 背景 #637896 のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#5C6F8B、4.51:1）を使う。
• icon-feature は文字 #6A87AF × 背景 #FAFAFA のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#5675A0、4.52:1）を使う。
• check-list は文字 #E3F3FB × 背景 #6A87AE のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#526F96、4.54:1）を使う。

Typography

• 見出しは極太のゴシックにし、キーワードは1.2倍の大きさでブルーにする
• 数字は大きくし、単位は小さく添える
• 本文の中で強調したい語はブルーの太字にする
• 見出しの前置きは斜線で挟んだ小さいリード文にする
• 注釈は米印を付けて右下に小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は3列、写真は2列、表は2列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地色を切り替えて区切る
• 写真と文字のブロックは左右に半分ずつ分けて置く
• 特長は3列のテキスト列にして、縦線で区切る
• 見出しは中央揃え、本文は左揃え
• 表は左列に英字ラベルを右寄せで置き、右列に説明を書く

Elevation & Depth

• 白カードに薄くぼかした影を付ける
• 円形バッジはフラットにする
• 製品写真は台座の影で立体感を出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 四角か角丸で切り抜く。防水訴求の写真は横長のピル型マスク
• セクション境界: 直線の切り替え。地色を変えるだけで区切る
• 機能訴求は正円バッジに入れる
• ラベルは左右が尖ったリボン帯かピル型にする
• カードの角丸は12px前後

Components

• 円形機能バッジ（badge-circle）: ブルーの正円に白文字で機能を短く書き、3つ重ねるように置く
• 白ピルのリード（label-pill）: FV上部の白いピルに、短い前置きを入れる
• リボン帯ラベル（ribbon-band）: 濃紺の帯の両端を切り欠き、推奨の一言を白文字で入れる
• 専門家コメントカード（expert-card）: 丸い顔写真とブルーの見出しタブを付けた白カード。本文の強調語はブルー
• 3列の特長（feature-columns）: 小見出しと短い説明を縦線で区切って3列に並べる
• 線画アイコン特長（icon-feature）: ブルーの線画アイコンの下に、ブルーのラベルと説明を置く
• モード一覧表（mode-table）: 英字のモード名と説明を縦線で区切った2列の表
• チェックリスト（check-list）: ブルー面の上に、白いチェック記号付きの短文を並べる

Do's and Don'ts

Do - 地色はグレーと白とブルーの3つに絞る - 強調語だけブルーにして、メリハリを付ける - 製品は白背景か明るい浴室の中で撮る - 機能は短い言葉にして、アイコンか円に入れる - 数字は大きく見せる

Don't - 赤やオレンジなどの暖色を強調に使わない - 細い明朝体を使わない - 一段落に長文を詰め込まない - ブルー面の上に濃い文字を置かない - 派手なグラデーションや強い影を付けない

Page Structure

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

1. ファーストビュー（製品の印象と主な訴求を見せる）: 斜めの光が入る淡い地に、白い製品を台座に載せる。大コピーと推奨リボン、円バッジ3つを置く
2. 主要機能（一番の性能を訴求する）: リード付きの大見出しと、ブラシのクローズアップ写真。数値を注記する
3. 専門家の推奨（信頼性を補強する）: 顔写真の丸アイコンとブルーのタブを付けた白カード
4. ブラシの特長（設計のこだわりを説明する）: 角丸写真を2枚並べ、その下に3列の特長を置く
5. 付加機能（副次的な機能を見せる）: ブルーの帯に、左は文字、右は製品写真
6. 交換時期の案内（消耗品について知らせる）: 比較写真を矢印でつなぎ、替えブラシを円の中に入れる
7. 軽さ・形（使いやすさを訴求する）: 左に生活シーンの写真、右にブルー面とチェックリスト
8. モード紹介（機能の幅を見せる）: 製品の縦長写真と、2列のモード表
9. 便利機能アイコン（細かな仕様をまとめる）: 線画アイコンを3列に並べる
10. 防水訴求（安心して使えることを伝える）: ピル型にマスクした水しぶき写真に、白文字を重ねる
11. 関連商品（一緒に買う商品を提案する）: ブルーの帯に商品写真を置き、成分を円バッジで示す

Imagery

• 白い製品を白い台座に置き、柔らかい自然光で撮る
• 白タイルの洗面台など、清潔な生活シーンの写真
• ブラシ毛のマクロ写真と水しぶき
• 歯の構造を描いた3DCG風の図解
• ブルーの単色の線画アイコン
• 専門家は円形に切り抜いた顔写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に固定幅（約480〜750px）を置き、左右はグレー地にする
• PCでは写真とテキストの左右配置を広げる
• 特長の3列はそのまま維持する
• 見出しのサイズはPCで1.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 行書くと起動時に読み込まれる。