DESIGN.md — 緑×生成りのペット用デンタルケアLP（Fresh Green Pet Dental Care LP）

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

Overview

• 業種: ペット ／ 雰囲気: 清潔・爽やか、情報量多め・訴求型、親しみ・手作り感、ナチュラル
• キーワード: 鮮やかな緑・生成りの地・黄色マーカー・赤金の実績帯・白カード・犬猫写真
• 地の質感: 生成り地に薄い格子柄。写真は明るく柔らかい自然光
• 形: 角丸カード、緑の円バッジ、雲形吹き出し、上端が台形の見出しタブ
• 温度感: やや暖かく爽やか。緑で清潔さ、生成りで優しさを出す

Colors

• 地は白・生成り・淡ミントを交互に使い、格子柄で区切る
• 緑はセクション見出し帯・POINTタブ・バッジに限定する
• 実績訴求だけ深紅地×ゴールド文字で特別感を出す
• 悩みパートはくすみ青緑地に白い雲形吹き出しと黄色文字
• 強調語は黄色マーカーか緑文字で1文につき1か所
• 本文は黒でなく焦茶で柔らかくする
• heading-band は文字 #FFFFFF × 背景 #13A96A のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0F8754、4.55:1）を使う。
• badge-circle は文字 #FFFFFF × 背景 #13A96A のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0F8754、4.55:1）を使う。
• point-tab は文字 #FFFFFF × 背景 #13A96A のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0F8754、4.55:1）を使う。
• pill-label は文字 #FFFFFF × 背景 #13A96A のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0F8754、4.55:1）を使う。

Typography

• 大見出しは明朝、小見出しと本文はゴシックで組み合わせる
• 見出しは2行に分け、強調語だけ大きくする
• 数字は極太にして単位は小さくする
• 見出しの左右に斜線「＼ ／」を付ける
• 本文は中央揃えが基本、カード内は左揃え
• 注釈は※付きでブロック直下に小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、比較・味の紹介だけ内部で 2〜3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地色を切り替える
• カードは画面幅の90%で中央に置く
• POINT番号タブを見出しの上中央に重ねる
• 写真と説明カードを交互に縦に積む
• 注釈はセクション末尾にまとめる

Elevation & Depth

• 白カードはごく薄い影（0 2px 8px rgba(0,0,0,0.06)）
• 雲形吹き出しは影なしで白く抜く
• 写真は影なしでフラットに置く

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の四角、人物は円形、商品は切り抜き
• セクション境界: 直線で地色を切り替え、POINT帯は上端が台形のタブ形
• 実績バッジは緑の円
• 悩みは白い雲形吹き出し
• ラベルは緑のピル型

Components

• 緑の見出し帯（heading-band）: 白太字を載せた横長の緑帯。リボン風の切り込み付き
• 実績円バッジ（badge-circle）: 緑の円に白文字と黄色数字で実績を3つ並べる
• POINT番号タブ（point-tab）: 緑の半円タブにPOINTと2桁番号を入れ、下の見出し帯に重ねる
• お客様の声カード（voice-card）: 緑地の上の白カード。左に線画の顔アイコン、右に緑の見出しと本文
• 悩みチェック吹き出し（check-bubble）: 白い雲形にチェックボックスと短い悩みを入れて散らす
• 専門家コメント吹き出し（speech-box）: 白地に濃い枠線の吹き出し。強調語は緑文字＋黄色マーカー
• 成分ラベル（pill-label）: 緑のピル型に白文字で成分名を示す
• ステップカード（step-card）: 上に写真とSTEP番号＋見出し、下にイラストと説明を置く白カード
• 黄色マーカー（marker-text）: 強調語の下半分に黄色の帯を引く

Do's and Don'ts

Do - 緑・白・生成りを主にして清潔感を保つ - 強調は黄色マーカーと緑文字だけにする - 数字の実績は大きく、根拠を※注釈で添える - 犬と猫を必ずセットで見せる - POINTは番号タブと緑帯で統一する

Don't - 深紅×金を実績以外のセクションに使わない - 本文を真っ黒にしない - 角の尖った硬いカードを使わない - 注釈なしで効果をうたわない - 1ブロックに強調色を3色以上入れない

Page Structure

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

1. ファーストビュー（手軽さと効果を一瞬で伝える）: 白〜淡灰の地にロゴ、緑帯の見出し、大コピー、犬猫とごはん皿の写真、緑の実績円バッジ3つ
2. 実績（ランキングとリピート率で信頼を出す）: 深紅地に紙吹雪、金の月桂冠と特大の金数字、商品と犬猫イラスト
3. 専門家監修（専門家の共同開発で安心させる）: 淡緑地に緑帯見出し、人物の切り抜き写真と吹き出しを左右交互に
4. お客様の声（使った実感を伝える）: 緑地に薄い英字の透かし、白カード3枚を縦に
5. 悩みの提起（自分ごと化させる）: くすみ青緑地に雲形チェック吹き出しを5つ散らす
6. 問題の深刻さ（データで危機感を出す）: 黄色の大見出し、犬猫写真と円グラフ風の割合表示
7. 解決策の提示（商品を解決策として出す）: 緑の円バッジでつなぎ、皿と商品の写真、白抜き枠の結論コピー
8. 特長（3つのこだわりを説明する）: 格子柄の地にPOINTタブ付きの緑帯、写真・使用量の表・図解
9. 使い方（与え方のコツを示す）: 線画イラストと矢印の手順、注意アイコン付きの白カード
10. 成分・仕組み（効く理由を示す）: 成分写真の上に白カード、STEP1〜3のカードとピルラベル

Imagery

• 犬猫は口を開けた元気な表情を明るい背景で撮る
• ごはん皿に粉をふりかける瞬間をスプーンごと見せる
• 商品パッケージは白背景で切り抜く
• 使い方は細い黒の線画イラストにする
• 成分は卵・緑茶の粉などの素材写真をアップで
• 人物は笑顔の上半身を切り抜き
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも約950px幅の1カラムで中央に置き、SPのデザインをそのまま拡大する
• PCでは左右の余白に格子柄の地を見せる
• SPでは文字サイズをPCの約0.8倍にする
• SPでは使用量の表を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 行書くと起動時に読み込まれる。