DESIGN.md — 生成り×セージ緑のやさしいペットフード LP（Warm Cream & Sage Pet Food LP）

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

Overview

• 業種: ペット ／ 雰囲気: やさしい・柔らかい、ナチュラル、親しみ・手作り感、かわいい
• キーワード: 生成り・セージグリーン・丸ゴシック・吹き出し・手描きイラスト・角丸パネル
• 地の質感: マットな単色の面。グラデーションや光沢は使わず、白カードにごく薄い影だけを付ける
• 形: 大きく角丸にしたセクションパネル、ピル型の見出しラベル、もくもくした雲形の吹き出し
• 温度感: 暖色寄り。クリームとベージュが基調で、ミントの面で少し落ち着かせる

Colors

• 地はクリーム → ベージュ → ミント → クリームの順に入れ替え、各セクションは大きな角丸パネルで区切る
• 見出しと本文は黒にせず茶色系でまとめる
• 赤は価格・限定バッジ・悩みの文言だけに使う
• オレンジは購入ボタン専用にし、ほかの要素には使わない
• 緑はリボン・番号の円・タグなどブランド要素に使う
• メニュー違いは、商品色に合わせた細い縦線で見分ける
• button-primary は文字 #FFFFFF × 背景 #FE6D01 のコントラスト比が 2.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C45401、4.55:1）を使う。
• worry-bubble は文字 #F80201 × 背景 #FFFFFF のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#EE0201、4.52:1）を使う。
• price-card は文字 #F80201 × 背景 #FFFFFF のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#EE0201、4.52:1）を使う。

Typography

• 見出しはすべて太い丸ゴシックで、茶色にする
• セクション見出しは白いピル型ラベルの中央に置く
• 見出しの前置きは「＼ ／」で挟む
• 本文は中央揃えで短く改行し、行間を広めに取る
• 価格は数字を特大にし、「円」と「税込」は小さく添える
• 強調語はピンクのマーカーまたは緑の点線で示す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（メニューのみ 2 列グリッド）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに角丸パネルを左右 12px ほど内側に置く
• 特長は番号を中央に、テキストを左・写真を右に並べる
• 手順はイラストと文字を左右交互にジグザグ配置する
• 素材紹介は横スクロールのカルーセルにし、オレンジの丸い矢印を付ける
• 購入ボタンは各セクションの末尾に中央配置する

Elevation & Depth

• 白カードにはごく薄いぼかし影を付ける（8px 程度・不透明度 5%）
• ピル型ラベルにもごく弱い影を付ける
• 購入ボタンは影なしのフラットにする

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸 8px の長方形にする。商品と食材は切り抜きで置く
• セクション境界: 大きな角丸パネルで面の色を切り替える。波形や斜線は使わない
• 購入ボタンは角丸 8px 程度の長方形にする
• 見出しラベルは完全なピル型にする
• 悩みは雲形の吹き出しの中に入れる
• 限定バッジは赤い線の円で囲む

Components

• 購入ボタン（button-primary）: オレンジ地の左にカートアイコンの白丸、右に「＞」を置く
• ピル型見出し（heading-pill）: 白いピル型の中に茶色の太字見出しを置き、2 行のときは段組みにする
• リボン帯（ribbon-banner）: 端を燕尾に切った緑または赤のリボン帯に白文字を載せる
• 悩み吹き出し（worry-bubble）: 白い雲形の吹き出しに、緑の番号・点線・赤文字の悩みを入れて 2×2 で並べる
• 価格カード（price-card）: 緑の細い枠の白カードに、商品写真・赤い特大価格・円形の限定バッジをまとめる
• 番号円（number-circle）: 緑の円に白数字を入れ、左右にカラフルな点線を付ける
• 素材カード（ingredient-card）: 白い角丸カードに、素材名（緑）・英名（赤）・手描きイラスト・説明を入れる
• 時短テク枠（tip-box）: 緑地に白文字で、上辺に白ラベルを載せ、線画イラストを添える

Do's and Don'ts

Do - 見出しは茶色の丸ゴシックで、白いピル型ラベルに載せる - セクションの地はクリーム・ベージュ・ミントで交互に切り替える - 価格は赤、購入ボタンはオレンジだけに使う - 手描きのやわらかいイラストを添える - 余白を広く取り、中央揃えで組む

Don't - 黒文字や純黒の面を使わない - 角張ったシャープなボックスにしない - 原色の青や紫をベースの色にしない - 強い影やグラデーションのボタンにしない - 1 画面に情報を詰め込みすぎない

Page Structure

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

1. ファーストビュー（手軽さと限定感を伝える）: 赤枠のバッジと緑のリボンの下に、茶色の特大キャッチを置く。その下に犬の写真を全幅で入れ、写真の上に短いコピーを載せる
2. 商品紹介（商品パッケージと特徴を見せる）: クリーム地にパッケージを置き、ロゴと「無添加」の円形バッジを添える
3. 悩みの提起（飼い主の悩みに共感する）: ピル型見出しの下に、白い雲形の吹き出しを 2×2 で並べ、悩みを赤文字で書く
4. 解決提案・お試し価格（解決策を示し、お試し購入へ誘導する）: ベージュのパネルに、点線の下線付きの説明、変化を示す矢印図、リボン付きの価格カード、購入ボタンを順に置く
5. イメージ写真・動画（情緒的な共感を得る）: 全幅の犬の写真、動画の埋め込み、中央揃えの短い詩的な本文を並べる
6. メニュー紹介（種類を選べることを伝える）: ミントのパネルに商品を 2×2 で並べ、色付きの縦線ラベルを付けて、購入ボタンを置く
7. こだわり（特長）（品質の根拠を示す）: 白い大カードに、番号円・緑の小見出し・説明・写真を 3 つ縦に並べる
8. こだわりの素材（原材料の安心感を伝える）: 白カードのカルーセルに手描きの食材を入れ、ドットのページャーと購入ボタンを付ける
9. つくりかた（簡単さを手順で示す）: ベージュのパネルで、器のイラストと手順を左右交互に置き、注意枠と時短テク枠を添える
10. 価格・CTA（購入を後押しする）: ミント地にロゴを置き、価格カードを 2 枚と購入ボタンを並べる

Imagery

• 自然光の室内で、犬が食事を前にした穏やかな表情の写真。背景は明るいベージュでぼかす
• 食材は白背景で、柔らかい水彩風の手描きイラストにする
• 手順は山吹色の器を太めの線とフラットな塗りで描いたイラストにする
• 白い線画のゆるい手描きの添え絵を入れる
• 商品パッケージと料理は影を薄くした切り抜きで置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 700px 程度の幅に収め、背景色の帯は全幅に敷く
• PC のファーストビューは写真を全面に敷き、キャッチを左、商品を右に重ねる
• 悩みの吹き出しは PC で 4 つ横並びにする
• メニューと特長は PC で 4 列・3 列の横並びにする
• つくりかたは PC で横 1 行ずつのコンパクトな配置にする
• 価格カードは PC で 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 行書くと起動時に読み込まれる。