DESIGN.md — クラフト茶×生成りの猫用品 LP（Warm Kraft Beige Pet Goods LP）

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

Overview

• 業種: ペット ／ 雰囲気: ナチュラル、やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
• キーワード: クラフト茶・生成り・木目・猫写真・字間広め・POINT バッジ
• 地の質感: マットで紙っぽい質感。グラデーションはほぼ使わず、単色の帯と写真で組む
• 形: 四角い帯と白カード、丸いアイコン・バッジ、ピル型ラベル
• 温度感: 暖色寄りで、穏やかなぬくもりがある

Colors

• 生成り地を基本にして、セクションの切り替えはクラフト茶の全幅帯で行う
• 茶帯の上は白文字だけにし、字間を広めにとる
• 強調語には太字とベージュのマーカーを付ける。赤などの強い色は使わない
• 比較表では自社側の列を茶のヘッダーにし、他社側はこげ茶かグレーにして差を見せる
• グラフや凡例で使う色は、自社をクラフト茶、他社をピンクと紫系にする
• point-badge は文字 #BC9963 × 背景 #FFF7EC のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8C6D3C、4.53:1）を使う。
• section-band-heading は文字 #FEFCF2 × 背景 #BC9963 のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8C6D3C、4.51:1）を使う。
• step-number は文字 #FEFCF2 × 背景 #BC9963 のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8C6D3C、4.51:1）を使う。

Typography

• 見出しは字間 0.1em 以上で、ゆったり組む
• 見出しの下に白またはベージュの点線を引く
• 大きな数字は細めの欧文で極太にはせず、上品に見せる
• 助詞は小さくし、要の語を大きくしてリズムを作る
• 本文はこげ茶、行間 1.8 で読みやすくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品バリエーションと写真グリッドは 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 茶帯の見出しセクションは全幅で、上下に 40px 前後の余白をとる
• 口コミカードには人物イラストを付け、左右交互に置く
• 比較表は項目列を狭くし、2 列で比べる
• サイズ図は写真に寸法線と数値を添える
• 手順は番号の丸、写真、説明の順で縦に並べる

Elevation & Depth

• カードには影をほとんど付けず、細い罫線か白地で区切る
• 口コミカードにだけ、ごく薄い影を付けてもよい
• 丸アイコンは白の円に、柔らかい影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの四角で全幅、または 2 カラムのグリッドに切り抜く。商品単体は背景を抜いた切り抜きにする
• セクション境界: 直線で色を切り替える（茶帯と生成り）
• POINT 番号は円形のバッジにする
• カラー名などのラベルはピル型にする
• 比較表と商品カードは角丸を小さく
• 特長アイコンは白い円の中に線画で描く

Components

• POINT 番号バッジ（point-badge）: 生成りの円に細い枠と「POINT」の文字、2 桁の番号を入れる。茶帯見出しの上に置く
• 茶帯の見出し（section-band-heading）: クラフト茶の全幅帯に白文字の 2 行見出しを置き、下に点線を引く
• 特長の丸アイコン（feature-icon-circle）: 白い円の線画アイコン 4 つを茶帯の上に並べ、下に白文字で 2 行のラベルを付ける
• 口コミカード（review-card）: 白カードに太字のタイトルと本文を入れ、強調語にマーカーを引く。横に人物と猫のイラストを添える
• 番号付きの特長リスト（numbered-list）: 枠で囲んだ「1.」の番号と、マーカー付きの見出し、2 行の説明を並べる
• 比較表（comparison-table）: 項目列はグレージュ。自社列は茶のヘッダーで◎を付け、他社列は△や×で示す
• チェックリストのピル（check-pill）: 白いピルの枠に緑のチェックと短い症状を書き、縦に 2 つ並べる
• カラー名ラベル（color-label）: 写真の下に白い半透明のピルを置き、欧文の大文字でカラー名を書く
• 手順の番号（step-number）: クラフト茶の円に白い数字を入れ、手順写真の左上に置く

Do's and Don'ts

Do - 地の色は生成りとクラフト茶の 2 色に絞る - 猫がくつろぐ写真を大きく使う - 見出しの字間を広めにとり、上品に見せる - 数値の根拠はグラフ・表・寸法図で見せる - 強調にはマーカーと太字を使う

Don't - 原色の赤や黄色で煽るような強調をしない - 黒い面を広く使わない（商品色の見本は除く） - 見出しを詰め組みにしない - 強いグラデーションや光沢のある装飾を使わない - 角丸を大きくしすぎてポップにしない

Page Structure

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

1. ファーストビュー（商品の使い方と実績を一目で伝える）: 部屋でくつろぐ猫の写真の上に、2 行のコピーを下線付きで置く。右上に月桂樹付きの丸い実績バッジ、下に茶帯と丸アイコン 4 つを並べる
2. 新色の告知（新しいカラーを訴求する）: グレーの背景で 2 色の商品と猫を並べ、下にピル型のカラー名を置く。キラキラの装飾を添える
3. 実績の訴求（累計販売数で信頼を作る）: 巨大な細い数字を月桂樹と王冠で挟み、立ち上がった猫の写真と組み合わせる
4. お客様の声（使った人の評価を示す）: 茶帯の見出しの下に、白カードとイラストを左右交互に 3 件並べる
5. ラインナップ（カラーとサイズの選択肢を見せる）: カラー名のヘッダーを付けたカードを 2 カラムで並べ、中に切り抜き商品を置く
6. 特長（形状・素材・耐久性を説明する）: POINT バッジと茶帯の見出しを置き、図解・番号リスト・比較グラフで説明する
7. 交換の案内（替えの購入をうながす）: 新品と古い状態の素材写真を比べ、チェックリストのピルを並べる
8. サイズ（選びやすくする）: 猫が乗った写真に寸法線と大きな数値を付け、2 カラムで並べる
9. 写真ギャラリー（暮らしの中のイメージを見せる）: 4 枚の写真を余白なしの 2×2 グリッドで並べる
10. ブランド紹介（作り手の思想を伝える）: 写真と、丸いロゴ・短い文章を左右に組み、茶の枠で囲む
11. 比較表（一般品との違いを示す）: 6 項目を◎・△・×で比べる表にする
12. 組み立て方（使う前の不安をなくす）: グレーのパネルに番号の丸・写真・説明を 3 ステップ並べる

Imagery

• 自然光の入る明るい室内で、猫がくつろぐ様子を撮る
• 床は木目かジュートのラグにして、暖かく柔らかいトーンにする
• 商品単体は背景を抜いた斜め上からのカットにする
• 人物は線の柔らかいフラットなイラストで、猫を抱いた姿にする
• アイコンは細い線画で 1 色にする
• 月桂樹・王冠・キラキラは金茶色でさりげなく添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元 LP は PC でも中央寄せの縦長 1 カラムで、SP と同じ構成
• SP では見出しを 22〜24px にし、2 カラムのグリッドはそのまま残す
• 比較表は SP でも 3 列のまま、文字を 12px に下げる
• PC では本文幅を 480〜750px に抑え、両側を背景色で埋める
• 口コミカードは SP ではイラストを小さくして、幅いっぱいに置く

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