--- version: alpha name: Chinese Festive Red and Gold Food Campaign LP description: 朱赤と深い臙脂を地色にし、金のグラデーション見出しと中華の雷文フレーム、青海波パターンを重ねた祝祭感のある食品キャンペーン LP。白い角丸カードに情報をまとめ、STEP やミッション形式で応募の流れを順番に見せる。 colors: primary: '#C32B25' dark-section: '#841A1E' secondary: '#E8B789' background: '#FFFFFF' background-alt: '#FFF5E9' cta: '#EE2132' on-cta: '#FFFFFF' accent-1: '#04CA54' accent-2: '#FDFD03' text: '#3B2D2F' accent-3: '#BC1B21' tint-1: '#FDF2FB' marker: '#FDEC54' on-dark: '#FEFBF9' cta-accessible: '#EB1224' accent-1-accessible: '#038939' typography: display: fontFamily: Shippori Mincho fontSize: 48px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' ribbon-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.dark-section}' typography: '{typography.headline-md}' height: 36px button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-gold: backgroundColor: '{colors.secondary}' textColor: '{colors.dark-section}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px cta-large: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px button-line: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 250px mission-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 36px date-frame: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 44px advice-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 170px --- # DESIGN.md — 朱赤×金の中華風 食品キャンペーン LP（Chinese Festive Red and Gold Food Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 中華風・朱赤と金・雷文フレーム・青海波パターン・白カード・ステップ解説 - **地の質感**: 赤地に青海波・雲文の薄い地紋、きらめきの星。金はグラデーションで箔のような光沢を出す - **形**: 白カードは大きめの角丸。見出しラベルは両端を斜めに切った六角形の金リボン - **温度感**: 暖色一色で熱気とお祝い感が強い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C32B25` | FV・キャンペーン帯の朱赤地 | 20% | 画素の実測 | | `dark-section` | `#841A1E` | レシピ・規約の臙脂地 | 17% | 画素の実測 | | `secondary` | `#E8B789` | 金リボン・金見出し | 5% | 画素の主要色に補正 | | `background` | `#FFFFFF` | カード内の白地 | 33% | 画素の実測 | | `background-alt` | `#FFF5E9` | ミッション欄の生成り地 | 12% | 画素の実測 | | `cta` | `#EE2132` | 店舗一覧などの主ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#04CA54` | LINE 連携ボタンの緑 | 1% | 画素の実測 | | `accent-2` | `#FDFD03` | ボタン内・吹き出しの黄色強調 | 0% | 画素の実測 | | `text` | `#3B2D2F` | カード内の濃い見出し文字 | 1% | 画素の実測 | | `accent-3` | `#BC1B21` | カード内の赤い小見出し・数値 | 0% | 画素の主要色に補正 | | `tint-1` | `#FDF2FB` | イラスト背景の淡いピンク円 | 2% | 画素の実測 | | `marker` | `#FDEC54` | キーワード下の黄色マーカー | 0% | 画素の実測 | | `on-dark` | `#FEFBF9` | 赤地上の白見出し | 1% | 画素の実測 | | `cta-accessible` | `#EB1224` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#038939` | AA を満たす補正値（計算） | | 計算 | - 地色は朱赤→臙脂→生成り→臙脂の順に切り替え、セクションの境目に金の雷文帯を入れる - 情報は必ず白カードに載せ、赤地に直接本文を置かない - 金は見出し・リボン・フレームだけに使い、本文には使わない - 主ボタンは赤ピル、LINE 関連だけ緑ボタンにする - 強調語には黄色マーカーか黄文字を使う - `cta-large` は文字 `#FFFFFF` × 背景 `#EE2132` のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#EB1224`、4.52:1）を使う。 - `button-line` は文字 `#FFFFFF` × 背景 `#04CA54` のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#038939`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し（金グラデ） | 明朝 | Shippori Mincho | 800 | 48px | 1.2 | 0.02em | | `headline-lg` | セクション大見出し | 明朝 | Shippori Mincho | 800 | 32px | 1.4 | 0.05em | | `headline-md` | カード見出し・金リボン内ラベル | 明朝 | Noto Serif JP | 700 | 20px | 1.4 | 0.08em | | `headline-sm` | カード内の赤い小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `body-md` | 本文・材料・手順 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.03em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | - 見出しは太い明朝で中華の格式を出し、本文はゴシックで読みやすくする - FV と金見出しは上が明るく下が濃い金グラデーションにする - 数字は見出しよりひと回り大きくして目立たせる - 強調語は色替えか黄色マーカーで示す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。手順アイコンは 2 列 - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは左右 9% ほどの余白をとって中央に置く - カード上辺に金リボン見出しを半分はみ出させて重ねる - カード同士の間隔は 16〜24px - 材料表は点線の区切りで左に項目、右に赤字の分量を置く ## Elevation & Depth - 白カードはごく薄い影か影なし。地色とのコントラストで浮かせる - 金リボンには細い濃金の縁取りとわずかな影をつける - ボタンは下に濃い色の影をつけて押せる感じを出す ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 料理写真は角丸の長方形。イラストは淡ピンクの正円に入れる - **セクション境界**: 金の雷文の帯を水平に引き、地色をまっすぐ切り替える - 見出しラベルは両端を斜めに切った六角形 - STEP 番号は濃紺の装飾枠付きバッジ - 大きな CTA は角丸 12px の横長矩形 ## Components - **金リボン見出し**（`ribbon-heading`）: 両端を斜めに切った六角形の金グラデラベル。カード上辺に重ねる - **赤ピルボタン**（`button-primary`）: 右端に黄色い丸矢印をつけた臙脂のピルボタン - **金ピルボタン**（`button-gold`）: 金グラデの幅広ピル。下向き矢印でページ内リンクにする - **大型 CTA と吹き出し**（`cta-large`）: 赤い横長ボタンの上に黄色いピル型の吹き出しを重ねる。ボタン文字は黄色と白の2行 - **LINE 緑ボタン**（`button-line`）: 外部連携用の緑の大型ボタン。強調語は黄色 - **STEP カード**（`step-card`）: 白カードの中央に淡ピンク円のイラスト、下に短い説明とマーカー強調を置く - **ミッション見出し**（`mission-label`）: 赤地に金縁の六角形ラベル。数字だけ金色 - **期間の雷文フレーム**（`date-frame`）: 両端に雷文の飾りがある細い金枠の帯。期間を明朝で載せる - **アドバイス枠**（`advice-box`）: 生成り地の角丸ボックス。赤い小見出しと本文 ## Do's and Don'ts **Do** - 赤地には青海波や雲文の地紋を薄く敷く - セクションの区切りには金の雷文帯を使う - カード見出しは金リボンでカード上辺に重ねる - 応募の流れは STEP 番号とイラストで1つずつ見せる - 強調語は黄色マーカーで示す **Don't** - 寒色を背景に使わない（LINE の緑だけは例外） - 赤地に小さな本文を直接置かない - 金を本文の文字色に使わない - 角のとがった四角カードにしない - 見出しを細いゴシックにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名と参加の呼びかけ）: 朱赤地に雲文と雷文の飾り、金グラデの明朝タイトル、左右に料理写真の切り抜き、左上に縦書きの帯 2. **期間表示**（開催期間を伝える）: 雷文フレームの帯に明朝で日時を載せる 3. **参加導線カード**（食べに行く・作ってみるの2つの導線）: 白カードに左イラストと右の見出し・赤ピルボタン。上辺に金リボン 4. **賞品訴求**（当選数と賞品をアピール）: 白と金の大きな明朝。数字を大きくし、両脇に斜線の飾り 5. **応募誘導**（詳細へ誘導する）: 写真2枚を並べたカードと金ピルボタン 6. **レシピ**（家庭で作る方法を紹介）: 臙脂地に角丸写真とアイコン付きのスペック、白カードに材料表・手順・栄養表 7. **キャンペーン概要**（応募方法と期間・当選発表）: 白カードに LINE アイコンと見出し、金の小ラベル付きの日程表 8. **参加ステップ**（応募手順を3段階で説明）: STEP の金リボンと白カードを縦に並べ、ピンク円のイラストを置く 9. **ミッション詳細**（条件を順に解説）: 生成り地にミッションラベルと白カード、2列の STEP アイコン、大型 CTA と緑ボタン 10. **応募規約**（規約を掲載する）: 臙脂地に金見出し帯付きの白いスクロール枠 11. **お問い合わせ・フッター**（事務局の連絡先）: 臙脂地に金の小見出しと白い本文、最下部にコピーライト ## Imagery - 料理写真は真上寄りから撮り、白い皿にソースのつやを見せる。暖色の照明にする - 人物・店舗・スマホは線のないフラットなイラスト。赤と黄色を基調にする - イラストは淡ピンクの円に入れる - 装飾は中華の雲文・雷文・青海波・金のきらめき星 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は上部にナビゲーションを追加する - PC では導線カードと STEP カードを横に2〜3列で並べる - PC のレシピは写真と情報を左右2カラム、材料と手順も2カラムにする - PC の栄養表は横一列の5分割にする - PC のミッション2・3は横に2枚並べる ## 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-b42a1918`（元 LP の URL から採番） - **元 LP**: https://www.kagome.co.jp/foodservice/gaisyoku/machichuka_kikaku_2024_cp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。