DESIGN.md — 黄×赤の中華食堂風ペットおもちゃ LP（Chinese Diner Pop Pet Toy LP）

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

Overview

• 業種: ペット ／ 雰囲気: ポップ・元気、かわいい、レトロ、力強い・インパクト
• キーワード: 中華食堂・お品書き・雷文・ビビッド黄・朱赤・遊び心
• 地の質感: ベタ塗りの黄色地に、赤い卓上の物撮りと白い切り抜き犬写真を重ねる。紙の札や巻物風の装飾で印刷物っぽさを出す
• 形: 四角い写真ブロック、縦長の短冊札、角丸の価格帯、雲・提灯のイラスト
• 温度感: 暖色一色の高温。にぎやかで陽気

Colors

• 地は全面ビビッド黄で切り替えない
• 写真の背景は朱赤の卓上で統一し、黄地との2色で中華感を出す
• 見出し・本文の文字は赤系で、黒は価格枠内だけに使う
• セクション区切りは赤×金の雷文ラインを細く引く
• CTA だけ補色の青緑にして目立たせる
• 白は札・キャンペーン枠・吹き出しに限定
• button-primary は文字 #E3E0E1 × 背景 #14857A のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#116F66、4.59:1）を使う。
• price-tab は文字 #E3E0E1 × 背景 #E31B28 のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C51723、4.55:1）を使う。
• bonus-label は文字 #E3E0E1 × 背景 #E31B28 のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C51723、4.55:1）を使う。

Typography

• 商品名は白い短冊札の中で縦書きの筆文字にする
• 本文は赤の丸ゴシックで、行間はやや詰める
• 価格の数字だけを大きく太くし、円・税込みは小さく
• 擬音（パリ、ピー等）は赤の手書き文字で写真の横に散らす
• 吹き出しの中は縦書きの小さな黒文字
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と縦書き札を左右に重ねる
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 各商品は 写真ブロック＋縦書き札＋番号付き説明＋切り抜き犬写真 の一式
• 札は写真の左右どちらかに交互に配置して重ねる
• 商品ごとに雷文ラインで区切る
• キャンペーンは白地に赤枠のボックスでまとめる
• 最後に中央揃えのメッセージ文を足跡柄で囲む

Elevation & Depth

• 影はほぼ使わずフラット
• 切り抜き写真をブロックからはみ出させて立体感を出す
• キャンペーン枠の下に赤い三角を付けてボタンへ誘導

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理写真は四角形の赤背景ブロック。犬とおもちゃは輪郭で切り抜く
• セクション境界: 赤と金の雷文（ギリシャ雷紋）ラインを横一列に引く
• CTA は角丸小さめの横長長方形
• 価格帯は右端を大きく丸めたタブ形
• 札は白地に赤の二重枠の長方形で、上に紐の点を付ける
• 番号は赤丸の線囲みの漢数字

Components

• 申込ボタン（button-primary）: 青緑の横長ボタン、白文字、右端に黒丸の三角アイコン
• 縦書き品書き札（menu-tag）: 白地に赤の二重枠、筆文字で商品名を縦書き。上部に紐の黒点
• 巻物見出し（scroll-heading）: 金の軸の付いた赤い巻物に白文字のセクション名
• 漢数字番号（number-badge）: 赤い線の丸の中に漢数字、説明文の左に置く
• FV 価格帯（price-tab）: 赤地の角丸タブに白字で月額価格。白い丸吹き出しを添える
• 犬の吹き出し（speech-bubble）: 白い縦長の吹き出しに縦書きで犬の気持ちを書く
• キャンペーン枠（campaign-box）: 赤い見出し帯付きの白ボックスを赤枠で囲み、旧価格→矢印→新価格を縦に並べる
• 雷文ライン（divider-fret）: 赤×金の雷紋を横一列に並べた区切り
• おまけラベル（bonus-label）: 赤い吹き出し型の小ラベル＋赤枠で囲んだ特典名

Do's and Don'ts

Do - 黄地×赤卓上写真の2色構成を全商品で守る - 商品名は縦書き札で統一する - 犬の切り抜き写真をブロックの外にはみ出させる - 雲・提灯・雷文など中華モチーフを各セクションに散らす - 擬音や吹き出しで遊び心を足す

Don't - 地色を白や淡色に変えない - 青や緑を CTA 以外に使わない - 写真を角丸カードにしない - 本文を黒の明朝にしない - 装飾を省いて余白だけの構成にしない

Page Structure

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

1. ファーストビュー（中華食堂の世界観と商品を一目で伝える）: 黄地に赤卓上の料理風おもちゃと犬、丸い店ロゴ、縦書きキャッチ。下に赤の価格タブ
2. あいさつ（コンセプトと 7 種構成を説明）: 雷文ラインで挟み、赤の見出しと赤文字の本文
3. お品書き見出し（商品紹介の開始）: 赤い巻物に白文字の見出し
4. 商品紹介（7品）（各おもちゃの遊び方を伝える）: 赤背景写真＋縦書き札＋漢数字説明＋犬の切り抜きと吹き出しを繰り返す
5. パッケージ紹介（届く箱の楽しさを見せる）: 雲飾り付き見出しの下に白い箱の切り抜きを散らして配置
6. キャンペーン価格（定期便の価格と特典を提示）: 赤枠白ボックス、旧価格→矢印→大きな赤い新価格、全商品の切り抜き一覧
7. おまけ特典（継続特典の訴求）: おまけラベル＋赤枠の特典名、使い方を黄色矢印で図解
8. CTA（申込へ誘導）: ボックス下の赤三角から青緑の横長ボタン
9. ブランドメッセージ（想いを伝えて締める）: 中央揃え赤文字、左右に赤い足跡柄、下に犬の切り抜きとハートを並べる

Imagery

• 料理風のぬいぐるみを赤い紙の卓上と中華食器で真上〜斜めから撮る
• 白い小型犬を背景を抜いた切り抜きで、おもちゃで遊ぶ姿を使う
• 白い雲（瑞雲）と赤い提灯のフラットなイラストを角に置く
• 擬音・動き線・ハートを赤の手描きで添える
• パッケージは白地に赤のロゴ入り箱を切り抜き
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央 1 カラムで、幅を広げて同じ構成を保つ
• PC の FV は横長写真にし、価格は赤い円バッジでロゴ下に置く
• PC のあいさつ文は中央揃えで行を長くする
• キャンペーンの価格行は PC で旧価格→新価格を横一列にする
• おまけ特典名は PC で一行に収める

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