--- version: alpha name: Chinese Diner Pop Pet Toy LP description: ビビッドな黄色の地に中華の朱赤を合わせ、雷文ラインや吹き流し雲、提灯で中華食堂のメニュー表に見立てたペット用おもちゃの定期便 LP。料理風おもちゃを赤い卓上で撮った写真と切り抜いた犬の写真を組み合わせ、縦書きの品書き札と漢数字の番号で 1 品ずつ紹介する。 colors: background: '#FEF301' primary: '#E31B28' secondary: '#9B151A' text: '#E31B28' surface: '#FFFEFE' cta: '#14857A' on-cta: '#E3E0E1' accent-1: '#F1C06D' marker: '#FDFD6B' text-body: '#34312F' text-muted: '#555555' tint-1: '#E1C6A7' cta-accessible: '#116F66' primary-accessible: '#C51723' typography: display: fontFamily: Klee One fontSize: 26px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Klee One fontSize: 20px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.1em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 34px fontWeight: 800 lineHeight: 1.1 note: fontFamily: M PLUS Rounded 1c fontSize: 10px fontWeight: 500 lineHeight: 1.5 label-button: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 46px menu-tag: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.display}' height: 200px scroll-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 70px number-badge: textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 36px price-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 85px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 70px campaign-box: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 1100px divider-fret: backgroundColor: '{colors.accent-1}' height: 12px bonus-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.md}' height: 26px --- # DESIGN.md — 黄×赤の中華食堂風ペットおもちゃ LP（Chinese Diner Pop Pet Toy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ペット ／ **雰囲気**: ポップ・元気、かわいい、レトロ、力強い・インパクト - **キーワード**: 中華食堂・お品書き・雷文・ビビッド黄・朱赤・遊び心 - **地の質感**: ベタ塗りの黄色地に、赤い卓上の物撮りと白い切り抜き犬写真を重ねる。紙の札や巻物風の装飾で印刷物っぽさを出す - **形**: 四角い写真ブロック、縦長の短冊札、角丸の価格帯、雲・提灯のイラスト - **温度感**: 暖色一色の高温。にぎやかで陽気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEF301` | ページ全体の地色（ビビッド黄） | 48% | 画素の実測 | | `primary` | `#E31B28` | 中華の朱赤。写真背景・見出し帯・札の枠 | 9% | 画素の主要色に補正 | | `secondary` | `#9B151A` | 濃い赤。巻物見出し・雷文ライン・影 | 3% | 画素の主要色に補正 | | `text` | `#E31B28` | 本文・見出しの文字色（赤） | 4% | 画素の主要色に補正 | | `surface` | `#FFFEFE` | キャンペーン枠・札の白 | 12% | 画素の実測 | | `cta` | `#14857A` | 申込ボタンの青緑 | 1% | 推定 | | `on-cta` | `#E3E0E1` | ボタン上の白文字 | 0% | 画素の実測 | | `accent-1` | `#F1C06D` | 雷文ラインの金茶 | 2% | 画素の主要色に補正 | | `marker` | `#FDFD6B` | 価格下の淡黄マーカー | 0% | 画素の実測 | | `text-body` | `#34312F` | キャンペーン内の黒文字 | 1% | 画素の実測 | | `text-muted` | `#555555` | 注釈の灰色文字 | 0% | 推定 | | `tint-1` | `#E1C6A7` | おもちゃ素材の生成り | 4% | 画素の主要色に補正 | | `cta-accessible` | `#116F66` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#C51723` | AA を満たす補正値（計算） | | 計算 | - 地は全面ビビッド黄で切り替えない - 写真の背景は朱赤の卓上で統一し、黄地との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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 品書き札の縦書き商品名 | 手書き・筆 | Klee One | 600 | 26px | 1.2 | 0.05em | | `headline-lg` | あいさつ見出し・パッケージ紹介見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.05em | | `headline-md` | キャンペーン内の筆文字コピー・巻物見出し | 明朝 | Klee One | 600 | 20px | 1.5 | 0.1em | | `headline-sm` | 縦書きのサブコピー | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.3 | 0.05em | | `body-md` | 商品説明・あいさつ本文 | 丸ゴシック | M PLUS Rounded 1c | 500 | 13px | 1.6 | 0.03em | | `accent` | 価格数字 | 欧文サンセリフ | Montserrat | 800 | 34px | 1.1 | 0.0em | | `note` | 注釈・吹き出しの小文字 | 丸ゴシック | M PLUS Rounded 1c | 500 | 10px | 1.5 | 0.0em | | `label-button` | 申込ボタン | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.2 | 0.05em | - 商品名は白い短冊札の中で縦書きの筆文字にする - 本文は赤の丸ゴシックで、行間はやや詰める - 価格の数字だけを大きく太くし、円・税込みは小さく - 擬音（パリ、ピー等）は赤の手書き文字で写真の横に散らす - 吹き出しの中は縦書きの小さな黒文字 - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-8532d3d3`（元 LP の URL から採番） - **元 LP**: https://www.felissimo.co.jp/contents/inu7hanten/inu7hanten_fc.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。