DESIGN.md — 深緑×セージの国産ペットフード LP（Deep Green Sage Fresh Pet Food LP）

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

Overview

• 業種: ペット ／ 雰囲気: ナチュラル、信頼・誠実、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 深緑・セージグレー・丸い器・縦書き見出し・余白多め・カラフルなメニュー
• 地の質感: フラットな単色面。淡い方眼の背景と、うっすら見える大きな欧文の透かし文字を重ねる
• 形: 角丸の写真、円形の器の写真、丸いアイコン枠、ピル型の CTA
• 温度感: 落ち着いた中間からやや温かめ

Colors

• 地はセージグレーと白を交互に使い、セクションを区切る
• ページの最初と最後は深緑で挟んで締める
• 会社紹介だけを生成り色の大きな角丸ボックスに入れる
• メニューカードは商品ごとにくすんだ多色で塗り分ける
• 黄色は CTA ボタン専用にする
• 強調する語には緑の文字と下線を使う
• menu-card は文字 #FFFFFF × 背景 #8FB1AF のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#577D7B、4.54:1）を使う。

Typography

• 見出しの上に、小さな大文字の欧文ラベルを字間を広げて置く
• FV の見出しは縦書きにし、白い帯の上に黒文字で載せる
• 本文は細めにし、行間を広く取る
• 特長の番号は緑の大きな数字で示す
• 大きな欧文を薄い色で斜めに透かして入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メニューは横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しと本文は左寄せを基本にし、余白を広めに取る
• メニューのセクションだけ中央揃えの見出しにする
• 特長は写真、番号、小見出し、本文の順に縦に並べる
• 手順は丸いアイコン、番号、説明文の行を 3 つ並べる
• お客様の声は写真付きカードを横に並べる

Elevation & Depth

• カードには薄い影を付ける（0 2px 8px rgba(0,0,0,.08)）
• 会社紹介の項目は白い帯に軽い影を付ける
• 器の写真には柔らかい落ち影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 8〜24px。器は真上から撮った円形の切り抜き
• セクション境界: 直線で区切り、地の色の切り替えで分ける
• FV の写真は大きな角丸で切り抜く
• 会社紹介のボックスは角丸 24px にする
• アイコンは深緑の角丸正方形の中に置く

Components

• 追従 CTA ボタン（button-primary）: 黄色のピル型ボタン。左側に赤い丸バッジ、右端に矢印を付ける
• メニューカード（menu-card）: 色面の上に器の写真と商品名を置き、上部に小さなタグを付ける。下に白地の説明文を続ける
• 番号付き特長（feature-block）: 角丸の写真の下に、緑の番号と下線付きの小見出しを置く
• 手順の行（step-row）: 深緑の角丸アイコン、番号付きの見出し、説明文を横に並べる
• 口コミカード（review-card）: 犬の写真、星の評価、名前、感想を縦に並べた白いカード
• 番号付きの実績帯（number-list-item）: 橙の四角い番号と太字の一文を並べた白い帯
• 欧文アイブロウ（eyebrow-label）: 見出しの上に置く小さな大文字の英字
• 評価の円形ロゴ（rating-badge）: 星と点数を、円に沿った欧文で囲む

Do's and Don'ts

Do - 深緑、セージ、白を中心にし、余白を広く取る - 器の写真は真上から撮り、円形で見せる - 見出しの上には欧文ラベルを必ず置く - メニューごとにくすんだ色で塗り分ける - CTA は黄色のピル型にそろえる

Don't - 原色や蛍光色を広い面に使わない - 黄色を CTA 以外に使わない - 太すぎる見出しや装飾の多い書体を使わない - 背景の写真に文字を直接載せない

Page Structure

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

1. ファーストビュー（愛犬への想いを一目で伝える）: 深緑の地に角丸の大きな料理写真を置き、右側に縦書きの見出し帯を載せる。左下には円形の器を重ねる
2. コンセプト導入（安心できる食事であることを伝える）: 中央揃えの 2 行のコピーと、器の写真を散らしたレイアウト
3. 開発の想い（ブランドの姿勢を伝える）: 白地に左寄せの見出しと本文を置き、犬の写真を添える
4. 商品とは・特長（商品の価値を 3 点で示す）: 左に説明文と緑枠の補足、右に番号付きの写真カードを縦に 3 つ並べる
5. メニュー一覧（種類の豊富さを見せる）: 方眼の白地に、多色カードを横スクロールで並べる
6. はじめかた（購入までの流れを示す）: 食器の写真を添え、アイコン付きの 3 ステップを並べる
7. お客様の声（利用者の評価で信頼を得る）: 評価の円形ロゴと、写真付きの口コミカード 3 枚
8. サポート（問い合わせ先を示す）: 左に写真、右に電話とメールのアイコン付きの行
9. 会社紹介（運営会社の実績を示す）: 生成り色の角丸ボックスに、番号付きの実績帯を 5 本並べる
10. メディア掲載（第三者からの評価を示す）: 白いロゴ枠を横に並べる
11. フッター・CTA（購入へ誘導する）: 深緑の地にロゴと SNS アイコンを置き、黄色の追従 CTA を表示する

Imagery

• 木のテーブルの上の手作りフードを、自然光で撮る
• 器は真上から撮り、円形に切り抜く
• 白い小型犬を明るい室内で撮った自然な写真
• 新鮮な野菜や肉を白い背景で撮った素材写真
• アイコンは白の線画で、深緑の四角に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は 2 カラムの左右配置。SP では 1 カラムに縦積みする
• FV の縦書き見出しは SP でも右上に残し、写真幅を 100% にする
• メニューは SP で 1.5 枚が見える横スクロールにする
• 口コミカードは SP で横スクロールにする
• CTA は SP で画面下に固定し、幅を 90% にする

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