DESIGN.md — 生成り紙×モカ茶の無添加ペットフード LP（Natural Kraft Pet Food LP）

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

Overview

• 業種: ペット ／ 雰囲気: ナチュラル、やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型
• キーワード: 生成り紙・モカブラウン・無添加・ハーブの葉・波形境界・ライン別カラー
• 地の質感: うっすら繊維の見える和紙風テクスチャを地に敷き、木目テーブルの料理写真で温かみを足す
• 形: 角丸カード、円形の素材写真、雲形の吹き出し、波打つセクション境界、斜めに切ったバナー
• 温度感: 暖色寄り。茶とクリームを基調に、商品ラインの差し色だけ寒色も使う

Colors

• 地は生成り紙テクスチャ、ブランドの想いや素材紹介はモカブラウン帯に白文字で載せる
• 商品ラインごとにテーマ色（オレンジ・ブルー・グリーン）を決め、見出し帯・ラベル・詳細ボタンをその色でそろえる
• CTA は黄色地＋焦茶文字だけにし、他の要素に黄色の面は使わない
• 茶帯上の小見出しは淡い黄色で強調する
• 本文は黒ではなく焦茶を使う
• バリエーション紹介は斜めに分割した色面を製品ごとに替える
• button-skew は文字 #F9F3EA × 背景 #619ADA のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#2C71BD、4.53:1）を使う。
• line-label は文字 #E58D4D × 背景 #FFFFFE のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B95D1B、4.52:1）を使う。
• type-select-button は文字 #F9F3EA × 背景 #E58D4D のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B95D1B、4.52:1）を使う。

Typography

• 見出しは丸みのある太字にして、字間を 0.1em 前後空ける
• リード文は中央揃えで行間を広めにとる
• 写真の上の商品タイトルは白抜きの極太にし、末尾の補足語だけ小さくする
• 吹き出しの中は短い2行の太字にする
• 注釈は※付きの小さな文字で、ブロックのすぐ下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップと特長カードは 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 茶帯セクションは画面端から 8px 内側に寄せた角丸パネルで作る
• 商品と素材写真は左右に互い違いに配置して重ねる
• CTA は各商品ブロックの後に中央へ繰り返し置く
• 素材紹介は左に円形写真、右に見出しと説明を置いた行を縦に並べる
• ラインナップのカードは上に名前、色帯、画像、詳細リンクの順で積む

Elevation & Depth

• 白カードに薄くぼかした影（0 2px 8px rgba(0,0,0,.12)）を付ける
• 茶パネルにも軽い影を付けて紙から浮かせる
• 商品パッケージ写真には接地影を付ける
• 写真上の白文字には弱いドロップシャドウを付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 素材やパウダーは円形に切り抜く。猫の顔はゆがんだ楕円・ブロブ形に切り抜く。商品は背景を抜いた切り抜きにする
• セクション境界: ゆるい波線で区切る。バリエーション帯だけは斜めの分割にする
• CTA は角丸 8px の長方形にし、左に白丸のカートアイコン、右に＞を置く
• ラインラベルは角丸の小さな白ピルにする
• 詳細ボタンは平行四辺形に斜めカットする
• 吹き出しは雲形の楕円にし、細い曲線のしっぽを付ける

Components

• 購入CTA（button-primary）: 黄色の幅広ボタン。左に白丸のカートアイコン、右に＞を置く
• 斜めカット詳細ボタン（button-skew）: テーマ色または黄色の平行四辺形に白か焦茶の文字を載せ、＞を付ける
• 無添加丸バッジ（badge-additive-free）: 焦茶の円に白い縁取りを付け、中央に大きな見出し語、上に小文字、下に葉のアイコンを置く
• 雲形吹き出し（bubble-cloud）: 淡いセージ色の楕円に焦茶の太字を入れ、細い線のしっぽで写真を指す
• ラインラベル（line-label）: 写真の上に置く白ピル。中にテーマ色の小さな文字を入れる
• ラインナップカード（card-lineup）: 白カードに商品名、色帯のキャッチ、商品と素材の写真、詳細リンクを積む
• タイプ選択ボタン（type-select-button）: テーマ色の角丸ボタン。小さなカテゴリ名、ライン名、下向き矢印を縦に並べる
• こだわりポイントカード（point-card）: 白カードの左に斜線で挟んだ見出しラベルを置き、右に緑の番号タグと説明を置く
• テーマ色見出しパネル（panel-themed）: 上部にテーマ色の帯見出し、下に淡色地を敷き、円形写真と白い吹き出しを入れる

Do's and Don'ts

Do - 生成り紙テクスチャを地に敷き、ハーブの葉を余白に散らす - 商品ラインごとのテーマ色を見出し・ボタン・バナーで一貫させる - セクション境界は波線にしてやわらかくつなぐ - 主張点は無添加バッジと雲形吹き出しで写真に重ねる - CTA は同じ黄色ボタンを定期的に繰り返す

Don't - 真っ白なベタ地や黒文字を多用しない - CTA 以外に黄色の大きな面を使わない - 直線的で硬い区切りを多用しない - テーマ色を1ラインの中で混ぜない - 鋭い角や重い影を使わない

Page Structure

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

1. ファーストビュー（ブランドと無添加の主張を一目で伝える）: モカ茶地の左上にロゴと2行キャッチ、右に猫の切り抜き写真、下に商品と皿を置く。下端は波線、スライダーのドットを付ける
2. キャンペーン（購入のきっかけを示す）: 小見出しの下に横長バナー画像を置き、続けて黄色の CTA を置く
3. ブランドの想い（コンセプトを語る）: 大きなロゴとキャッチの下に木目テーブルの料理写真、その下の茶帯に白文字の中央揃えリードを置く
4. タイプ診断（ラインへ誘導する）: 茶帯の上に商品写真とテーマ色の選択ボタンを縦に並べる
5. 商品ライン紹介（ドライA）（特長を訴求する）: オレンジの波形帯に白ピルラベルと白抜き大見出し、楕円の猫写真、料理写真を置く。続けてリード、無添加バッジ、吹き出しを重ねる
6. 厳選素材（原材料の安心感を出す）: 茶パネルに黄色の見出しを置き、円形の素材写真と説明の行を縦に並べる
7. こだわりポイント（製法と品質を補足する）: アコーディオン帯、ポイントカード、2カラムの特長カードを並べる
8. ラインナップ（全商品を比較させる）: オレンジの見出しの下に2カラムの白カードを色帯付きで並べ、末尾に CTA を置く
9. 商品ライン紹介（ドライB）（別ラインを訴求する）: 青の波形帯をヒーローにし、テーマ色見出しパネルで味違いを2カラムで見せる
10. 商品ライン紹介（ウェット）（ウェット商品を訴求する）: 緑の波形帯をヒーローにし、紙地の上に共同開発ロゴ、パウチ、吹き出しを置く
11. バリエーション（味の違いを見せる）: 製品ごとに色を替えた斜め分割の帯に、パウチ、皿、猫写真、黄色の斜め詳細ボタンを置く
12. 動画（体験を補完する）: 白地に16:9の埋め込み動画を置く
13. 環境への取り組み（企業姿勢を示す）: 上部が茶帯見出し、下部が黄緑地の角丸パネルに、アイコンと説明を入れる
14. フッター（回遊と企業情報を示す）: 白地にシリーズ一覧のリスト（サムネイルと＞）、SNS の丸アイコン、企業ロゴ、コピーライトを置く

Imagery

• 料理写真は木目テーブルと木のスプーンを使い、やや上からの自然光で撮る
• 猫は舌を出す・見上げるなど表情豊かな寄りのカットを楕円に切り抜く
• 原材料は白背景で切り抜き、淡いピンクの円の中に置く
• オリーブ風のハーブの葉を余白の装飾として散らす
• パウダーは黒い石板の上で円形に切り抜き、質感を見せる
• バリエーション帯の猫は単色の背景で撮り、帯の色に合わせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 800px の固定幅で組み、左右の地はテクスチャで埋める
• PC のヘッダーは右上にナビゲーションを横並びにする
• PC のタイプ選択は3商品を横一列に並べる
• PC の素材紹介は円形写真を左右交互にジグザグ配置する
• PC のラインナップは3カラムにする
• PC のテーマ色パネルは、円形写真を中央、味違いを左右に置く3カラムにする

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