DESIGN.md — 若草緑×オレンジの愛犬用ダイエットフード LP（Leaf Green and Orange Pet Diet Food LP）

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

Overview

• 業種: ペット ／ 雰囲気: 親しみ・手作り感、ナチュラル、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 若草グリーン・オレンジ強調・手書き文字・犬の写真・Before/After・角丸カード
• 地の質感: 薄いドット柄やストライプ柄の地に、白・生成りのカードを重ねる。紙のような柔らかい質感。
• 形: 中くらいの角丸カード、円形の数値バッジ、帯状の見出しリボン、月桂樹の飾り
• 温度感: 暖かい。緑で健康的な印象、オレンジで食欲や元気を表す

Colors

• 地は生成りと白を基本にする。区切りとなる大きなセクションは若草緑で全幅に塗る。
• 数値・ランキング・成分タグ・Before/After の結果はオレンジで強調する。
• 緑の地の上には白か生成りのカードを置き、本文は濃い茶色にする。
• キーワードは黄色マーカー、または緑の帯の上に白抜き文字で目立たせる。
• 見出しリボンはこげ茶を使い、写真の上でも文字が読めるようにする。
• 注釈は薄いグレーの小さな文字で、ブロックの直下に置く。
• feature-tag は文字 #FFFFFF × 背景 #EB8F3C のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B45F12、4.58:1）を使う。
• result-badge は文字 #FFFFFF × 背景 #EB8F3C のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B45F12、4.58:1）を使う。

Typography

• 大見出しは極太のゴシックにし、キーワードだけ 1.5 倍に拡大して緑かオレンジにする。
• 感情を伝えるコピーや吹き出しには手書き風の書体を使う。
• 本文は 14px 前後、行間 1.8 で読みやすくする。
• 数値（kg・kcal など）は太いサンセリフで特大にする。
• 本文中の強調は、オレンジの太字か黄色マーカーにする。
• 英字ラベルを和文見出しの上に小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。タグや比較は 2〜3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 緑のセクションの中に、左右 12px ほど余白を空けた白カードを入れ子で置く。
• 写真は全幅、またはカード幅いっぱいに配置する。
• Before/After は横 2 枚の間に ▷▷▷ を置き、結果の円形バッジを重ねる。
• 特長タグは 3 等分で横に並べる。
• 注釈は各ブロックの直後に右寄せ、または左寄せで添える。

Elevation & Depth

• カードには薄く柔らかい影（0 2px 8px rgba(0,0,0,.08)）を付ける。
• 見出しリボンは影なしのフラットにする。
• 数値バッジは写真の上に重ねて、立体感を出す。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形が基本。人物は切り抜き、または円形にする。
• セクション境界: 直線で色を切り替える。下向き三角の矢印や点線を区切りに使う。
• タグは角丸 6〜8px の長方形にする。
• 結果の数値は円形バッジにする。
• 見出しリボンは端を斜線柄で飾った帯にする。
• ランキングは月桂樹の飾りで囲む。

Components

• 特長タグ（feature-tag）: 特長を短い言葉で 3 つ横に並べた角丸の帯。オレンジ版と白版がある。
• 減量結果の円形バッジ（result-badge）: 期間・減量値・前後の体重を入れたオレンジの円形バッジ。
• こげ茶の見出しリボン（heading-ribbon）: 端を斜線柄にしたこげ茶の帯に、手書き文字の見出しを載せる。
• 理由番号ラベル（reason-label）: 点線で挟んだ英字の番号と、緑ボックスのキーワード、オレンジの大見出しを組み合わせる。
• 質問の吹き出し（speech-bubble）: 白地に緑の枠を付けた吹き出し。手書き文字で悩みを問いかける。
• 専門家カード（expert-card）: 人物の写真、肩書きの帯、コメント、本文で構成する。
• 悩みチェックリスト（check-list）: 暗い半透明の面に、黄色いチェックと白文字の項目を 4 行並べる。
• FAQ カード（faq-card）: オレンジの円に Q を入れた質問と、点線で区切った回答を白カードに入れる。緑の地に置く。

Do's and Don'ts

Do - 緑とオレンジの 2 色を主役にして、白・生成りの面で休ませる。 - 犬の写真を多めに使い、表情が明るいものを選ぶ。 - 数値は大きなオレンジ文字か円形バッジで見せる。 - 主張には必ず※注釈を近くに添える。 - 手書き風の書体で、感情的なコピーに温かみを出す。

Don't - 寒色や黒を主役にしない。 - 角のとがった硬いカードを使わない。 - 本文を手書き書体で長く組まない。 - 写真の上に地を敷かずに細い文字を置かない。 - オレンジを本文の地色に広く使わない。

Page Structure

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

1. ファーストビュー（利点と体験の結果を一目で伝える）: 緑の地に白タグを 3 つ置き、極太の大見出しと商品画像を添える。その下に Before/After と減量バッジを置く。
2. 体験談と実績（利用者の多さを示す）: 体験談カードの後に愛犬写真のグリッドを置き、大きな数値の実績を見せる。
3. 専門家の監修（信頼性を示す）: 緑とピーチの 2 段に分け、イラストの人物と大きな見出しを置く。
4. 選ばれた理由ランキング（購入の決め手を伝える）: オレンジの地に大見出しを置き、月桂樹で囲んだ 1〜3 位を並べる。
5. メディア掲載（第三者の評価を示す）: ピーチの地に雑誌の画像と誌面を並べる。
6. 悩みの提起（読み手に自分ごととして感じさせる）: 暗い写真の上に、チェックリストを 4 行置く。
7. 商品紹介（商品と種類を見せる）: 手書きの大見出し、商品 3 袋、種類の帯、特長タグを並べる。
8. 獣医師の推薦（専門家の言葉で後押しする）: 水色の見出しの後に、吹き出しと人物写真、本文カードを置く。
9. 3 つの理由（特長を詳しく説明する）: 緑の地に理由ラベル、質問の吹き出し、解決の手書き文字、成分カードを並べる。
10. お客様の声（効果を実例で示す）: ストライプの地に、手書きの見出し帯、Before/After、減量バッジ、感想を置く。
11. 製法・品質のこだわり（安心感を伝える）: グレーのカードの中に緑の帯見出しを並べ、図解とタグを置く。
12. 全年齢対応（対象の広さを示す）: 多くの犬種の集合写真と、手書きの大見出しを組み合わせる。
13. よくある質問（購入前の不安を解消する）: 緑の地に FAQ カードを縦に並べる。
14. 開発ストーリー（作り手の想いで締めくくる）: 白く透ける写真の上に、中央揃えの文章を置く。強調はオレンジの帯。最後にロゴ。

Imagery

• 室内の自然光で撮った、小型犬の生き生きした写真。
• Before/After は同じ構図で並べる。
• 専門家は白衣姿で、正面を向いた笑顔の写真か、線画イラストにする。
• 食材や成分は明るく寄りで撮る。
• 肉球やキラキラなどの小さな手描き装飾を散らす。
• クラフト袋の商品画像を白背景に置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はない。PC では中央に 640px 前後の 1 カラムを置き、左右は緑か生成りの地で埋めることを推奨する。
• 写真グリッドは 4〜6 列に広げる。
• FAQ や成分カードは 2 列にしてもよい。
• 文字サイズは 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 行書くと起動時に読み込まれる。