DESIGN.md — 黄×白の安心訴求ペット用品 LP（Bright Yellow Pet Safety Goods LP）

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

Overview

• 業種: ペット ／ 雰囲気: 信頼・誠実、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 黄色の帯見出し・クリーム地・ペット写真・検査データ・専門家監修・比較表
• 地の質感: 紙のようなざらつきのある淡いベージュ地、薄いグリッド地、白い角丸カードを使う
• 形: ピル型ラベル、角丸カード、円形バッジ、角丸の吹き出し
• 温度感: 暖かく明るい。淡い緑やグレーで清潔感と落ち着きを足す

Colors

• 地は白とクリームを交互に使い、ところどころにベージュの紙地や薄いグリッド地を挟む
• 黄色は帯見出し・ロゴ風見出し・比較表の自社列だけに使い、広い面には塗らない
• 見出しのキーワードはオレンジか、黄色のマーカー下線で強調する
• 悩みや説明のボックスは淡グレーにし、黄色と競わせない
• 赤は認証マークと測定値の囲みだけに絞る
• 企業紹介のパートは淡い緑青のトーンにして落ち着かせる

Typography

• 見出しは極太のゴシックにし、強調語だけ字を大きくするかオレンジにする
• 商品名は黄色の正方形ブロックに1文字ずつ入れ、ロゴのように見せる
• 本文は中央揃えで短く改行し、行間を広めにとる
• 体験談や悩みは丸ゴシックで口語の調子を出す
• 疑問の見出しは末尾の「？」「！」を大きくする
• セクションの見出しには小さな欧文の筆記体を添えることがある
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長や比較は 2〜4 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 幅いっぱいの写真と、余白をとったカードを交互に並べる
• 悩みは人物イラストと吹き出しを左右交互に置く
• 特長バッジは商品画像の周りに4つの円で配置する
• 検査パートは書類の画像・拡大ルーペ・説明ボックスの3つを1組にする
• お客様の声は写真とテキストを左右交互に重ねて置く
• 最後に比較表を置き、自社列を黄色にする

Elevation & Depth

• 白カードには薄い影（0 2px 6px rgba(0,0,0,.08)）をつける
• お客様の声のカードは写真に少し重ねて浮かせる
• 帯見出しは影なしのフラットにする
• 比較表の自社列は少し上に飛び出させて目立たせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物は円形に切り抜く。風景や作業の写真は角丸の長方形。動物は切り抜いて重ねる
• セクション境界: 基本は直線で区切り、色面を切り替える。一部に三角旗のガーランドを飾る
• タグや帯見出しはピル型にする
• 悩みは角丸の吹き出しにする
• 特長は円形バッジに入れる
• 比較表は角を落としたシンプルな罫線にする

Components

• ロゴ風の商品名（logo-block-title）: 黄色の正方形ブロックに黒の極太文字を1字ずつ入れ、前に小さな文字を添える
• 黄色の帯見出し（pill-heading）: 幅いっぱいの黄色いピルに白抜きの見出し。上に小さなリード文を置く
• リスクのタグ（risk-tag）: アイコン付きの白いピルを3つ横に並べる
• 悩みの吹き出し（worry-bubble）: 淡グレーの角丸吹き出しに、人物イラストを交互に添える。キーワードに黄色のマーカーを引く
• 特長の円形バッジ（feature-circle）: 黄色やクリームの円の中に、アイコンと2行のラベルを入れる
• 認証・信頼のカード（trust-card）: 白カードにアイコンと太字の短いラベルを入れ、3列に並べる
• お客様の声のカード（voice-card）: 動物写真と、黄色の番号メダル付きの白カードを重ねる。名前はピル型のタグにする
• 比較表（compare-table）: 自社の列は黄色の見出しとクリームのセルにし、他社の列はグレーにして×印を重ねる
• 説明ボックス（info-box）: 淡グレーの面に中央揃えの説明文を置き、行ごとに点線で区切る

Do's and Don'ts

Do - 黄色は見出しの帯と強調にまとめて使う - 安全性の根拠は、書類・数値・専門家の写真で見せる - 犬と猫の写真を各セクションの区切りに入れる - 強調語には黄色のマーカー下線を引く - 円形や角丸で柔らかい印象を保つ - 白とクリームの地を交互にしてリズムを出す

Don't - 黒や濃紺の重いセクションを広く使わない - 黄色を背景の全面に塗らない - 鋭い角や細い明朝で冷たくしない - 赤を装飾に多用しない - 根拠のない誇張表現を並べない - 写真を暗く加工しない

Page Structure

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

1. ファーストビュー（商品とペットのリスクを一目で伝える）: 犬猫の写真、監修の円形バッジ、リスクのタグ3つ、ロゴ風の商品名
2. 信頼バッジ（認定や品質を最初に示す）: ベージュの紙地に白カードを3列並べる
3. 悩みの提起（飼い主の不安に共感する）: 黄色の帯見出しの下に、人物イラストと吹き出しを左右交互に4つ置く
4. 解決と特長（商品と4つの特長を示す）: 中央に商品画像、その周りに円形バッジを4つ配置する
5. 専門家の監修（専門家の裏付けを示す）: クリーム地に専門家の写真と本文、アイコン付きの特長リストとプロフィールを置く
6. 認定商品（業界団体の認定を示す）: スーツの人物写真、縦書きの大見出し、赤枠の適合証
7. 安全検査（溶出検査と耐久試験の結果を示す）: 黄色の帯見出し、書類の画像とルーペの拡大、測定値を赤で囲み、説明ボックスを添える
8. 耐熱設計（熱への強さを示す）: グリッド地のカードに素材のアップ写真、温度計アイコン、オレンジの大きな数値
9. 開発のきっかけ（利用者の声から生まれた経緯を語る）: 女性の写真と吹き出し、円形の人物写真2枚、自然光の写真
10. 企業紹介（会社の理念を伝える）: 縦書きのコピー、淡い緑青の円環図とアイコン
11. 品質管理（製造時の管理体制を示す）: 黄色の縦線つき見出し、工場の写真とテキストを交互に置く
12. お客様の声（実際の使用感を伝える）: ガーランドの装飾、番号メダル付きのカードを3件
13. 比較表（他社との違いを明確にする）: ロゴ風の見出しの下に、自社列を黄色にした3列の表

Imagery

• 犬猫は明るい室内の自然光で撮り、コードと一緒に写す
• 人物は白や淡色の服で、柔らかい表情にする
• 検査書類は斜めに置き、円形ルーペで数値を拡大する
• シンプルな線画のアイコンを黄色やグレーで描く
• 黄色の髪の女性など、フラットな人物イラストを使う
• 肉球のシルエット・王冠・星などの小さな装飾を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はスマホ幅の1カラムデザインを PC でもそのまま中央に表示している
• PC では本文幅を 400〜480px 程度に固定し、左右の余白は淡いグレーにする
• 比較表は SP でも3列のまま、文字を小さくして収める
• 円形バッジは SP で4つを菱形に配置する
• 縦書きのコピーは SP でも維持する

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