DESIGN.md — 白×ブルーグレーの静かな家電紹介 LP（Quiet Gray Minimal Appliance LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: シンプル・ミニマル、清潔・爽やか、上品・高級、ナチュラル
• キーワード: 静けさ・余白・ブルーグレー・自然光・細い字・機能の1テーマ1セクション
• 地の質感: フラットな白とライトグレーの面。光のにじみや柔らかなグラデーションをファーストビューだけに使う。
• 形: 四角の写真を全幅で置く。ピル型ラベル、細線の枠、上だけ角丸のパネルを使う。
• 温度感: やや寒色寄りのニュートラル。木の床や生成りの写真で温かみを足す。

Colors

• 地は白と淡いグレーを交互に使い、セクションを分ける。
• 見出しは黒ではなくブルーグレーで、静かな印象を保つ。
• 黒地は風の可視化など迫力を出す機能 1 か所だけに使う。
• 黄緑は省エネの数値だけに使い、多用しない。
• シアンとオレンジは冷房/暖房の比較ラベル専用にする。
• ラベル帯はスレートグレーの面に白文字を乗せる。
• pill-label は文字 #989C9B × 背景 #EBECED のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#676C6B、4.51:1）を使う。
• eco-balloon は文字 #A7C64B × 背景 #FEFFFE のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#687E28、4.55:1）を使う。
• number-badge-circle は文字 #80838A × 背景 #E2F5FA のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6B6D74、4.59:1）を使う。

Typography

• 大見出しは細めの字にし、字間を広めに取る。
• 見出しは小見出し→大見出しの 2 段で中央に揃える。
• 数値は太い欧文にし、単位は小さくする。
• 本文は 2〜3 行に収め、中央揃えにする。
• 欧文はセクションの英字見出しとカラー名だけに使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能アイコン写真は 3〜4 列、比較図は 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左右いっぱいの全幅で置く。
• 見出しの前後に大きく余白を取る。
• 比較図や機能カードは 2 列グリッドにする。
• 注釈はセクションの最後に小さくまとめる。
• 仕様は 2 列の表に罫線で区切る。

Elevation & Depth

• 影は基本的に使わず、フラットにする。
• 立体感は写真と面の色の差だけで出す。
• 数値バッジは白い半透明の面を写真の上に重ねる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角のない長方形。全幅か等幅グリッドで並べる。重さのバッジは円形にする。
• セクション境界: 直線で切り替える。グレーのパネルは上だけ大きく角丸にする。
• ラベルはピル型か細線の四角にする。
• 吹き出しは細線で、下向きの三角を付ける。
• 円形バッジは数値を見せるときだけ使う。

Components

• ピル型の小見出し（pill-label）: 淡いグレーのピル型に、機能名を中央揃えで入れる。
• 2 段見出し（heading-two-tier）: 小さな小見出しの下に、細字の大見出しを置く。
• ラベル帯（slate-tab）: スレートグレーの帯に白文字で、比較の見出しや要素名を入れる。
• 黒地の数値ボックス（spec-box-dark）: 黒い写真の上に白線の四角を置き、数値を太字で見せる。
• 省エネ吹き出し（eco-balloon）: 黄緑の線の吹き出しに、電球アイコンと大きな％数値を入れる。
• 細線の機能カード（outline-card）: 細いグレー線の枠の中に、写真・機能名・2 行の説明を入れる。
• 円形の数値バッジ（number-badge-circle）: 写真の角に淡い水色の円を重ね、数値を入れる。
• 仕様表（spec-table）: 左の項目列を淡いグレーにし、行は細線で区切る。

Do's and Don'ts

Do - 見出しは細い字とブルーグレーにし、余白を大きく取る。 - 機能は 1 セクションに 1 テーマで、写真を全幅で見せる。 - 数値は太い欧文で大きく見せ、注釈は※で添える。 - 写真は明るい自然光と木の床・白い壁の室内で統一する。 - 白と淡いグレーの地を交互に並べてリズムを作る。

Don't - 見出しを真っ黒の極太ゴシックにしない。 - 赤や派手な原色を CTA や強調に使わない。 - 影やグラデーションのボタンで装飾しすぎない。 - 黒地のセクションを何度も繰り返さない。 - 本文を左揃えの長い段落にしない。

Page Structure

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

1. ファーストビュー（商品の佇まいと静音の世界観を伝える）: 光がにじむ淡い背景に、大きな欧文セリフのタイトルと製品写真を重ねる。下にカラーバリエーションを並べる。
2. 刷新ポイント（主な改良点を短く示す）: 欧文見出しの下に、罫線で区切った 3 行の箇条を中央に置く。
3. イメージ訴求（暮らしの中で使う情景を見せる）: 全幅のインテリア写真の上に、2 行の大きな細字コピーを白抜きで重ねる。
4. 機能一覧（機能の全体像を見せる）: 欧文の見出しの下に、写真と機能名の 3 列・4 列グリッドを置く。
5. 機能詳細（首振り）（動きの機能を説明する）: 2 段見出し、全幅写真、矢印付きの製品図、細線のラベルで角度を示す。
6. 機能詳細（パワー）（風の強さを印象づける）: 黒地に風の写真を置き、白線のボックスで数値を見せる。
7. 使い方提案（併用の効果を示す）: 上を角丸にしたグレーのパネルに、省エネ吹き出しと色分けラベル付きの部屋図を 2 列で並べる。
8. 静音設計（静かさを数値で示す）: 写真の左上に dB 値のバッジを重ね、騒音の目安を枠付きで添え、羽根の説明を置く。
9. モード機能（睡眠時の配慮を伝える）: ピル型ラベルの下に、OFF/ON の比較写真を 2 列で置き、帯ラベルを付ける。
10. 省エネ比較（電気代の差を示す）: グレーの横棒の比較図と、黄緑の円形バッジで削減率を見せる。
11. お手入れ（分解の簡単さを示す）: グレーの地に、部品名を引き出し線で指した分解図を置く。
12. その他の機能・軽量（細かな便利機能を補足する）: 細線カードを 2 列に並べ、円形の重さバッジを付けた全幅写真を置く。
13. カラー展開（色の選択肢を見せる）: 欧文のカラー名と小さな和名を添え、色ごとに写真を大 1・小 2 枚で並べる。
14. 商品仕様（スペックを確認させる）: 製品と付属品の写真の下に、2 列の罫線表を置く。

Imagery

• 白い壁と明るい木の床がある北欧風の部屋を、自然光で撮る。
• 人物は落ち着いた服装の女性で、くつろいだり運んだりする姿を撮る。顔は強く見せない。
• 製品の単体は白背景の正面と斜めから撮り、柔らかな影を付ける。
• 風は黒背景に白い煙で見せる。
• 部屋の使い方はアイソメトリックの 3D 間取り図で、色付きの気流を描く。
• 夜のシーンは暖色の間接照明で、ほの暗く撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央の 750px 前後の幅に収め、左右に淡いグレーの地を見せる。
• 機能グリッドは PC でも 4 列までにする。
• 全幅写真は PC ではコンテンツ幅いっぱいにする。
• 見出しサイズは 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 行書くと起動時に読み込まれる。