DESIGN.md — 白×ミントグリーンの清潔な家電紹介LP（Clean Mint Appliance Feature LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、シンプル・ミニマル
• キーワード: 清潔感・ミントグリーン・機能訴求・大きな数字・英字ラベル・写真全幅
• 地の質感: 白〜淡いグレーのグラデ背景にソフトな影。水しぶきや布の写真で質感を出す
• 形: 円形バッジ、角丸小さめの帯ラベル、細い線の枠組み
• 温度感: やや寒色寄りでクールかつ爽やか

Colors

• 地は白と淡いグレーを交互にしてセクションを区切る
• ミントグリーンは帯見出し・大きな数字・バッジに限って使う
• ダークティールは円形の機能バッジと強めのラベルに使う
• 第二グループの区分には水色帯を使い、ミントと区別する
• 本文は黒、英字ラベルと注釈はグレーで小さく置く
• 赤などの暖色はほぼ使わず寒色でまとめる
• badge-circle は文字 #49BAA0 × 背景 #DBEDEC のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2C7463、4.58:1）を使う。
• band-heading は文字 #FBFEFD × 背景 #49BAA0 のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2C7463、4.54:1）を使う。
• model-tag は文字 #FBFEFD × 背景 #8D7C5B のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#827254、4.62:1）を使う。
• before-after は文字 #A0A0A0 × 背景 #FFFFFF のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• 各セクションは点線＋英字ラベル＋和文見出しの順で始める
• 機能名は極太ゴシックで大きく、上に小コピーを添える
• 数値は欧文で大きく、単位と「約」は小さくする
• 本文は短い行で3〜4行にまとめる
• 注釈は※付きの小さいグレーでまとめて置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能カードは 3 列、比較は 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は全幅で敷き、文字や図解を重ねる
• 見出しは中央揃え、機能紹介は左見出し＋右本文
• 3つの要素は横3列カードで並べる
• ビフォーアフターは左右2列で並べる
• 比較は2つの大きな数字を矢印でつなぐ

Elevation & Depth

• 基本はフラットで影なし
• 製品写真にだけ床に落ちる柔らかい影を付ける
• 写真の上の白いカードは半透明にして浮かせる

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角い全幅。機能写真は小さな四角いサムネイル
• セクション境界: 直線の切り替え。背景色の変化か点線の縦線で区切る
• 機能バッジは正円で、ミントかティールで塗る
• 帯ラベルの角はほぼ直角
• カードは細い線枠と小さな角丸
• 大きな半円や円を写真の端からはみ出させてアクセントにする

Components

• 英字ラベル見出し（section-label）: 短い縦点線の下に字間の広い英字、その下に和文の大見出し
• 円形機能バッジ（badge-circle）: 淡いミントやティールの正円に2〜4文字の機能名
• 帯見出し（band-heading）: 幅いっぱいのミント帯に白抜き文字でグループ名
• 機能カード（feature-card）: 上にミントのラベル、中に写真、下に説明文を並べた3列カード
• コース名カード（course-card）: ミントの線枠で、上段にコース名、下段に短い説明
• 大きな数値表示（stat-number）: ミントの大きな数字に小さな単位、横に比較の値を添える
• モデル区分タグ（model-tag）: グレーやブラウンの小さな四角タグで対象モデルを示す
• ビフォーアフター比較（before-after）: 英字のBEFORE/AFTERラベルを付けた2列の写真比較

Do's and Don'ts

Do - 白とグレーの地にミントを少量効かせる - 機能ごとに英字ラベルと太い見出しを同じ型で繰り返す - 数値は大きく見せ、条件は注釈に必ず書く - 製品写真は白い背景で明るく撮る - 3点セットの情報は3列カードで並べる

Don't - 赤や黄色の派手な暖色を主役にしない - ピル型の目立つボタンを多用しない - 明朝体や手書き書体を混ぜない - 背景に柄やノイズを入れない - 本文を長い段落で詰め込まない

Page Structure

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

1. ファーストビュー（製品と自信のコピーを見せる）: 淡いグレーの曲面背景に製品の真上写真、下に欧文ロゴと製品区分
2. おすすめポイント（3つの強みをまとめて見せる）: 大見出しの数字をミントにし、生活写真の上に円バッジを3つ重ねる
3. ラインナップ（タイプ違いを並べる）: 3台の製品を横に並べ、上に色違いのモデルタグ
4. 主要機能の紹介（洗浄の仕組みを説明する）: 極太見出しと右の本文、水しぶきの写真から点線で3つの機能カードへつなぐ
5. 実証（効果を実例で示す）: 全幅の人物写真に大きな白文字の見出し、続けてビフォーアフター2列
6. 自動化機能（手間が減ることを伝える）: 見出し＋本文、3つの節約を3列カードで並べ、手元の写真に円バッジ
7. 使いやすさ（寸法と形の工夫を示す）: 人物写真に寸法矢印、ティールの円バッジで要点
8. 内部構造（タンク構成を図解する）: 製品写真にティールのラベル、下に使い方パターンの図
9. 省エネ・数値比較（電気代・水量・運転音を数値で比べる）: 見出し＋点線＋小見出し、ミントの大きな数字と比較の図
10. コース一覧（機能の幅広さを示す）: ミント帯と水色帯の下にコース名カードを3列で並べ、組み合わせの数を大きく出す
11. 追加機能（乾燥など付加機能の紹介）: 全幅の生活写真に太い見出しと、下に仕様の表

Imagery

• 製品は白背景か淡いグレー背景で、正面と真上から撮る
• 人物は白い服で自然光の明るい室内に置く
• 水しぶきや渦の写真で清潔さを表す
• 寸法は細い矢印と数値を写真の上に重ねる
• 植物の葉をぼかして画面端に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPCでも狭い1カラムの縦長構成なので、SPでもほぼそのまま使える
• SPでは3列カードを維持し、文字は13px以上を保つ
• 見出しと本文の横並びは、SPでは縦に積んでもよい
• PCでは中央に約740px幅のカラムを置き、左右は淡いグレー

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