DESIGN.md — 濃紺グラデ×白の上質シャワー家電 LP（Navy Gradient Premium Bath Appliance LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 上品・高級、清潔・爽やか、クール・先進的、信頼・誠実
• キーワード: 濃紺グラデーション・白ラベル見出し・金の欧文・大きな数値訴求・水と泡の透明感
• 地の質感: 濃紺〜青灰の滑らかなグラデーションの面に、艶のある製品写真と水しぶきの写真を重ねる。紙っぽさはなく、なめらかで光沢がある。
• 形: 四角い帯と矩形ラベルが基本。丸いバッジ、ピル型ラベル、角丸カードをアクセントに使う。
• 温度感: クールで静か。肌の写真と金色でほんの少しだけ温かみを足す。

Colors

• 濃紺グラデの帯と白・淡グレーの地を交互に並べ、セクションの区切りを色で示す
• 濃紺の地には白い矩形ラベルを置き、その中の文字は濃紺にする
• 金色は欧文サブタイトル・金額・NEW バッジだけに使う
• モデル別にチャコールと青灰で色を分け、ピルや見出しの色をそろえる
• 注釈は小さい灰色文字で、白地か濃紺地の下端に置く
• 赤は注意・警告の見出しだけに使う
• spec-table は文字 #FDFFFF × 背景 #8F949A のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら line-accessible（#71777D、4.51:1）を使う。

Typography

• 和文の見出しは字間を 0.1em 以上あけ、ゆったり見せる
• 欧文の見出しは大文字のサンセリフにし、和文の小さなルビを上に添える
• 数値は細めの斜体か大きなサイズで見せ、単位は小さくする
• ※記号は見出しの右下に小さく付ける
• 本文は短い行で中央揃えにし、2 行程度にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較写真は 2〜3 列、モード紹介は左テキスト・右画像
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右に約 4% の余白をとり、ほぼ全幅で置く
• 写真の直下に濃紺の帯を密着させ、成果の数値を白文字で載せる
• 見出し・リード・写真・注釈の順に縦に積む
• 比較画像は下にラベル帯（黒と白）を付けて並べる
• スペック表は 2 列で、左の見出しセルをグレーにする

Elevation & Depth

• 影はほとんど使わず、色面の切り替えで奥行きを出す
• 丸バッジや白カードにだけ、ごく薄い影を付ける
• 製品写真の光沢と反射で立体感を出す

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの矩形が基本。モード紹介の写真だけ角丸 16px
• セクション境界: 直線で切り替える。一部で下向き三角（V 字）の切り欠きを使う
• 見出しラベルは角丸なしの白い矩形にする
• モデル名や小見出しのラベルはピル型にする
• 丸いバッジに数値や特長を入れ、写真の角に重ねる
• 濃紺地の上に角丸 20px の白カードを浮かせる

Components

• 白矩形ラベル見出し（label-box-heading）: 濃紺地の上に置く白い矩形。中に濃紺の太字の小見出しを入れ、その下に白い大見出しを続ける
• ピルラベル（pill-label）: 濃紺またはチャコールのピル型に白文字を入れる。モデル名やテーマ名に使う
• 成果数値帯（result-band）: 写真の直下に付ける濃紺グラデの帯。白文字で数値の成果を大きく載せ、※を付ける
• 丸バッジ（circle-badge）: 濃紺または白の円の中に、特長や節水率を 2〜3 行で入れる
• 3 分割スペック帯（spec-strip）: 縦線で 3 つに区切った帯。特長を 2 行の白太字で並べ、下に注釈を置く
• モード紹介行（mode-card）: 左にモード名と説明、右に角丸の暗い写真。写真の左上に白い丸タグで使う部位を示す
• 比較ラベル帯（compare-label）: 比較画像の下に付けるラベル帯。使用前は黒地に白文字、使用後は白地に黒文字
• 仕様表（spec-table）: 左にグレーの見出しセル（白文字）、右に白地のセル。罫線は細いグレー
• 欧文モデル見出し（model-title）: 小さな和文ルビの下に大きな欧文。モデルごとに濃紺か青灰にする

Do's and Don'ts

Do - 濃紺グラデの帯と白地を交互に置き、メリハリをつける - 成果は数値＋※注釈＋グラフ・比較写真で根拠を示す - 金色は欧文と金額に絞って、上品に使う - 見出しの字間を広くとり、余白を多めにとる - 製品写真は艶と金属の光沢がわかるように見せる

Don't - 原色や蛍光色を使ったポップな配色にしない - 見出しに丸ゴシックや手書き書体を使わない - 濃い影や立体的なボタン装飾を使わない - 注釈を省いて誇大な数値だけを見せない - 金色を面積の大きい背景に使わない

Page Structure

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

1. ファーストビュー（ブランドとコンセプトを一言で伝える）: 濃紺グラデの背景に製品写真と水流を大きく置く。上部にロゴと欧文、白ラベルでモデル名を並べ、丸バッジを重ねる
2. モデル選択（2 つのモデルを紹介する）: 白地に製品の切り抜き写真を 2 群並べ、それぞれの下に色違いのピルラベルを付ける
3. モデル別紹介（各モデルの特長を示す）: 濃紺またはラベンダーの帯の上に白カードと欧文の大見出しを置き、下に 3 分割スペック帯を付ける
4. 利用シーン（使ったときの爽快感を想像させる）: 暗い背景で水しぶきを浴びる人物を全幅の写真で見せ、白い太字のコピーを重ねる
5. 技術解説（微細な泡の小ささを伝える）: V 字の切り欠きから濃紺セクションへ。白ラベル見出し、巨大な数値、泡と毛穴を円で比べる図を置く
6. 効果の実証（洗浄・保湿・温まりを数値で示す）: 写真＋濃紺の成果帯、棒グラフ、ビフォーアフター、サーモ画像の 3 列比較を、それぞれ注釈付きで並べる
7. 水流モード（切り替えられる機能を示す）: 濃紺の導入帯のあと、左にテキスト、右に角丸の写真を置く行を 4 つ縦に並べる
8. 付加機能（止水やバス用途を伝える）: 金色のピル見出し、全幅の写真、濃紺セクションの白ラベル見出しで構成する
9. 節約効果（経済的なメリットを示す）: 金色の大きな金額、水量の比較写真、白い円の中に年額の節約額を置く
10. 取り付け方法（導入の不安をなくす）: 濃紺地に白い角丸カードを置き、アダプター写真と 3 ステップ、赤い警告見出し、枠で囲んだリストを入れる
11. カラー展開（色の選択肢を見せる）: 大文字の欧文見出しの下に、ガラス玉と並べたイメージ写真と、色名入りの丸バッジを置く
12. 製品詳細（仕様を示す）: モデルごとに欧文見出し、製品写真、2 列の仕様表を並べる

Imagery

• 製品は白背景の切り抜き写真にし、金属リングの光沢をはっきり見せる
• 人物は目を閉じたリラックスした表情。明るい白系の背景か、暗いグレー背景で水しぶきを強調する
• 水流や泡は逆光で粒が光るように撮る
• カラーイメージは、ガラス玉や透明な球と並べた青紫系の静物写真にする
• 根拠には拡大写真やサーモ画像、シンプルな 2 色の棒グラフを使う
• 泡の大きさは、透明な球体のイラストを大小並べて示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、以下は推奨。PC では中央に幅 750px 前後のカラムを置き、左右に濃紺グラデか淡グレーの地を広げる
• モード紹介や比較画像は PC でも同じ並び方を保つ
• 3 分割スペック帯や 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 行書くと起動時に読み込まれる。