DESIGN.md — 水色×白の清潔感ペット家電訴求LP（Clean Aqua Pet Appliance Sales LP）

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

Overview

• 業種: ペット ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: 水色・清潔感・数値で証明・ペット写真・ティール帯・黄色マーカー
• 地の質感: 白と淡水色の平面に、水しぶき・光の粒のグラデーションを部分的に重ねる。問題提起部のみ黒板風の暗いテクスチャ。
• 形: 角丸の白カード、斜めリボン型のポイントラベル、四角いティール見出し帯、円形の月桂樹バッジ。
• 温度感: やや涼しめ。水色主体に赤と黄で温度を足す。

Colors

• 地は白と淡水色を交互にし、機能説明は淡水色地の上に白カードで載せる
• 問題提起だけ黒板調の暗色地にし、白文字と黄色強調で危機感を出す
• 数値・決め言葉は赤の太字で大きく表示する
• 本文の要点は黄色マーカーと赤文字の組み合わせで強調する
• ティールは見出し帯とラベルに限定し、ブランドの軸色として統一する
• お客様の声は生成り地＋オレンジ帯で温かみに切り替える
• point-ribbon は文字 #FEFEFD × 背景 #77A9B2 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4C7D86、4.54:1）を使う。
• heading-band は文字 #FEFEFD × 背景 #77A9B2 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4C7D86、4.54:1）を使う。
• marker-text は文字 #D8433C × 背景 #FBE36A のコントラスト比が 3.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BE2D26、4.54:1）を使う。

Typography

• 見出しは極太ゴシックで、キーワードだけ赤や水色で色替えする
• 数値は他の文字の2倍以上の大きさにする
• 見出しの漢字を丸枠で1文字ずつ囲む装飾を一部に使う
• 本文は左揃えで、1段落3〜4行に収める
• 注釈は※付きの小さいグレー文字でまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長・悩みは 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 機能ポイントは淡水色地の上に角丸白カードで区切る
• 悩みは写真付きで3列×2段のグリッドにする
• 特長サマリーはアイコン3つを縦線区切りで横並び
• 証拠資料（書類画像・グラフ）は見出し帯の下に中央配置
• お客様の声は写真と見出し帯を左右交互に配置する

Elevation & Depth

• 白カードは淡い影（0 2px 8px rgba(0,0,0,0.08)）で浮かせる
• レビュー画面風パネルは細い影付きで画面キャプチャ感を出す
• 問題提起の白カードは暗部上でフラットに置く

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の四角に切り抜き。人物は背景透過の切り抜き。
• セクション境界: 水平の直線切替が基本。一部で斜め・波状の水しぶき境界。
• ポイント番号はリボン型の斜めラベルでカード上端に重ねる
• 見出し帯は角の小さいベタ塗り長方形
• No.1訴求は月桂樹付き円形バッジ
• 話し言葉は角丸の吹き出しで表現

Components

• ポイント番号リボン（point-ribbon）: 筆記体で番号を書いたティールのリボン型ラベル。カード上端に重ねる。
• 機能説明カード（feature-card）: 淡水色地に置く大きな角丸白カード。見出し・写真・本文・注釈を縦に並べる。
• ティール見出し帯（heading-band）: 検査結果などの小見出しを白文字で載せる横長帯。
• No.1月桂樹バッジ（no1-badge）: 金色の月桂樹で囲んだ大きなNo.1表記と小さな根拠注釈。
• 特長アイコン3連（spec-icons）: 線画アイコン＋ティールのラベル＋数値を縦破線で区切り横に3つ並べる。
• 悩み写真グリッド（worry-grid）: 人物や生活写真と短い悩みを3列で並べる。
• お客様の声ブロック（review-card）: オレンジ帯見出し、ペット名と飼い主情報の枠、写真、赤字強調入り本文。
• 黄色マーカー強調（marker-text）: 本文中の要点に赤文字＋下半分の黄色マーカー。
• 評価パネル（rating-panel）: 星評価と分布バーを並べたモール画面風パネル。

Do's and Don'ts

Do - 主張には必ず数値・検査書類・グラフなどの根拠を添える - 機能ごとに番号付きカードで1つずつ説明する - ペットが水を飲む明るい写真を多用する - 強調は赤文字・黄色マーカー・大きな数値の3段で使い分ける - 問題提起は暗い背景で一度トーンを落とす

Don't - 水色系以外の寒色を主色に足さない - 長い本文をマーカーなしで並べない - 暗色背景を問題提起以外で多用しない - 数値を本文と同じサイズで埋もれさせない - 角の鋭い硬いカードにしない

Page Structure

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

1. ファーストビュー（商品と効果を一目で伝える）: ペットが飲む大写真に縦組みの太字コピー、No.1バッジと監修バッジを重ねる
2. 特長サマリー（主な3特長を要約）: アイコン3連を白地に横並び
3. 新登場の訴求（リニューアル点の提示）: 紙吹雪装飾と2×2の写真付き特長グリッド
4. 専門家監修（権威付け）: 人物写真とティールのキーワード帯、プロフィール文
5. 評価実績（満足度の証明）: 丸枠文字見出しと星評価パネル、犬猫切り抜き
6. 悩みの提起（現状のリスクを認識させる）: 黒板調暗色地に白カード、イラストで健康リスクを3つ
7. 購入時の不安（検討者の迷いを代弁）: 考える人物写真と吹き出し、悩み写真3×2グリッド
8. 解決提示（商品を解決策として提示）: 水しぶき背景に赤の大見出しと商品手持ち写真
9. 選ばれる理由（機能を順に証明）: 淡水色地に番号リボン付き白カードを4枚、数値・書類・グラフで裏付け
10. お客様の声（使用実感の共有）: 生成り地に肉球装飾、オレンジ帯見出しと写真を左右交互

Imagery

• 自然光の明るい室内でペットが水を飲む寄り写真
• 白い製品を手に持つ・食洗機に入れる生活シーン写真
• 背景を切り抜いた犬猫や人物を見出し横に配置
• 問題提起はゆるい線画の犬猫イラスト
• 検査書類やグラフは実物画像に赤枠・拡大を重ねる
• 水しぶき・光の粒の淡い装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅の縦長画像を中央固定で表示する構成
• PCではコンテンツ幅を480〜750px程度で中央に置き、左右は淡い単色地
• グリッド列数はPCでも変えず画像LPとして拡大表示する
• SPでは文字サイズを375px基準の推奨値で組む

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