DESIGN.md — 生成り×黄色×焦茶の愛犬ごはん定期LP（Warm Beige Pet Food Subscription LP）

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

Overview

• 業種: ペット ／ 雰囲気: 情報量多め・訴求型、やさしい・柔らかい、親しみ・手作り感、ポップ・元気
• キーワード: 愛犬ごはん・定期便・生成り・黄色キャンペーン・吹き出し・赤い価格
• 地の質感: 大理石調の白地、紙吹雪、金の箔・リボン、ぼかした室内写真など装飾的な質感を重ねる
• 形: 角丸カード、ピル型ラベル、円形バッジ、雲形吹き出し、ギザギザ境界
• 温度感: 暖色寄りで家庭的。黒・紺の帯で引き締める

Colors

• 白・生成り・淡ベージュを交互に敷きセクションを区切る
• オファー直前の特典帯は黄色ベタで目立たせる
• 価格・割引・重要語は赤、割引率は黄の円バッジ
• CTAだけ緑の立体ボタンにして他色と競合させない
• 焦茶はピル型ラベルや見出し帯に限定
• 紺・黒の帯は健康理論など説得パートの転換に使う
• button-primary は文字 #FFFFFE × 背景 #1E9A2E のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1B8929、4.51:1）を使う。
• ribbon-pink は文字 #FFFFFE × 背景 #F3016D のコントラスト比が 4.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#E60167、4.6:1）を使う。

Typography

• 情緒的な見出しは明朝、実利的な訴求はゴシック太字
• 価格は大きなセリフ数字で赤、単位と税込は小さく添える
• 見出しの強調語だけ文字を大きくする
• 本文は中央揃えで2〜3行に収める
• 英字の小見出し（reason, USER VOICE）を和文見出しの上に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、特徴は 2×2、食材は 4 列アイコン
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• オファーブロックは白の角丸大カードにまとめる
• 理由はカードを縦に並べ番号バッジを上辺中央に重ねる
• ステップは左に番号バッジ、右に焦茶ラベル
• オファーはページ中盤と末尾の2回配置
• 点線で小ブロックを区切る

Elevation & Depth

• カードに薄いぼかし影（0 2px 8px rgba(0,0,0,.08)）
• CTAは上部ハイライト付きグラデと下影で立体化
• 口コミカードは白地に軽い影で浮かせる
• フラット面と写真背景の上の白カードを組み合わせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き、食材は円形、理由は角丸なしの横長
• セクション境界: 直線を基本にギザギザ・波形・下向き三角を混ぜる
• ラベルや特徴語はピル型
• 割引・送料無料は円形バッジ
• 悩みは雲形の白吹き出し
• CTAは角丸12px程度の横長

Components

• 緑の立体CTA（button-primary）: 左に赤い円の「縛りなし」バッジ、右端に丸矢印
• 割引率バッジ（badge-discount）: 黄色の円に太字で割引率
• 焦茶ラベル（label-pill-dark）: ステップ名や条件を白抜きで示す
• ピンク吹き出し帯（ribbon-pink）: 下に三角が付いた導入帯
• 理由カード（reason-card）: 上に黄色円の番号、見出し・本文・写真
• 悩み吹き出し（speech-cloud）: 白い雲形にゴシック太字で短い悩み
• キーワードピル（pill-keyword）: 黄のピルを×でつなぐ
• FAQ行（faq-item）: 白角丸にQ明朝と右端の茶丸＋

Do's and Don'ts

Do - 犬の写真は笑顔の正面か全身にする - 価格周りは通常価格の打消し線・赤い大数字・税込表記を揃える - 特典は番号付きで商品画像と金額を並べる - 背景色を数セクションごとに変えてリズムを出す - オファーは中盤と末尾に繰り返す

Don't - CTAを緑以外にしない - 寒色をメインの地色にしない - 長文を左右いっぱいに詰めない - 装飾のない無機質なカードだけにしない - 写真の上に読みにくい細字を置かない

Page Structure

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

1. ファーストビュー（実績と主張で惹きつける）: 紙吹雪背景に犬の笑顔写真、金の月桂樹実績、下に3つのピンク花形バッジ
2. オファー（お試し価格を提示）: 金粉の焦茶帯見出し→白大カードに円バッジ・商品3点・赤価格・緑CTA・注釈
3. 限定特典（クーポンで後押し）: 黄色地にピンク帯、金のチケット画像、番号付き特典カード
4. 定期便の説明（届く内容と価格を明示）: 生成り地にStep番号＋焦茶ラベル、商品並び、価格行、点線区切りの安心アイコン2つ
5. 商品紹介（人気レシピと食材を見せる）: 明朝見出し、大きな器の写真、円形食材アイコンのスライダー、成分表
6. 特長（4つの特長を整理）: ベージュ地に番号付き白カード2×2
7. 悩みの提起（共感を得る）: 焦茶地の点線枠見出し、雲形吹き出し、悩む女性写真
8. 解決と理由（選ぶ理由を6つ提示）: ギザギザ境界から白地、黄色番号の理由カードを縦並び
9. 健康理論（サプリ特典の必要性を説明）: 黒地に明朝の白文字と犬写真、紺枠内に1〜5の流れカード
10. 特典サプリ（成分訴求）: 黄色光彩地に写真付き成分カード、金色のビタミン粒イラスト
11. お客様の声（信頼を補強）: 犬写真と蛍光下線付きテキストの交互配置、横スライド口コミカード
12. オファー再掲（最終申込）: 中盤と同じオファー・特典・定期便説明を繰り返す
13. よくある質問（不安解消）: 料理写真背景にQ&A大見出し、白角丸の開閉リスト

Imagery

• 明るい背景で笑顔の犬を正面から撮る
• ごはんは白い器に盛り真上か斜め上から自然光で
• 商品パッケージは切り抜きで並べる
• 食材は白丸の中に単品で配置
• 線画の人物・犬イラストや手描き風アイコンを添える
• 紙吹雪・金箔・リボン・光のきらめきで祝祭感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約750px幅のSPレイアウトを置き左右に背景色を延長
• 特長カードはPCで4列にしてもよい
• 口コミスライダーはPCで3枚同時表示
• CTAは最大幅480px程度に抑える
• 文字サイズはPCで1.2倍程度にする

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