---
version: alpha
name: Retro Chocolate Brown and Gold Campaign LP
description: 濃いチョコレートブラウンの地に、金のグラデーションボタン、クリーム色の紙面、赤いリボン見出しを重ねたクラシックなキャンペーンLP。アンティーク調の唐草罫線と封蝋バッジで「時を重ねた老舗」の雰囲気を出し、賞品カード・対象商品・応募手順・規約を順に案内する。
colors:
  primary: '#3B1E01'
  dark-section: '#351B01'
  background: '#FFF9ED'
  background-alt: '#F5EACE'
  surface: '#F9EAD5'
  secondary: '#856818'
  cta: '#D6C35B'
  on-cta: '#3C2004'
  accent-1: '#540205'
  accent-2: '#C9A867'
  line: '#9D9550'
  text: '#341A01'
  on-dark: '#F2E5D5'
  tint-1: '#EDE5B7'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: 0.1em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 11px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.08em
  body-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.7
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  label-button:
    fontFamily: Shippori Mincho
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.15em
rounded:
  sm: 4px
  md: 12px
  lg: 80px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 60px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    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.full}'
    height: 30px
  button-outline:
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 26px
  anchor-nav:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 22px
  ribbon-heading:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 40px
  wax-badge:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 75px
  prize-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 420px
  step-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.md}'
    height: 300px
  sub-heading-bar:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 18px
  ornament-heading:
    textColor: '{colors.accent-2}'
    typography: '{typography.headline-lg}'
    height: 40px
---

# DESIGN.md — チョコ茶×金のレトロなプレゼントキャンペーンLP（Retro Chocolate Brown and Gold Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: レトロ、上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型
- **キーワード**: チョコレートブラウン・金のグラデーション・クリーム色の紙・アンティーク唐草・封蝋バッジ・赤リボン
- **地の質感**: 濃茶の地に、うっすら紙の質感がある生成りのパネルを重ねる。金ボタンは光沢グラデーション。
- **形**: 上下が大きく丸いアーチ型カード、ピル型ボタン、リボン帯、円形の封蝋。
- **温度感**: 温かく深みのある暖色。ノスタルジックで落ち着いた印象。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#3B1E01` | メインの濃チョコ茶の地色 | 40% | 画素の実測 |
| `dark-section` | `#351B01` | やや明るい茶のセクション地 | 10% | 画素の実測 |
| `background` | `#FFF9ED` | 賞品パネル・規約の生成り紙面 | 17% | 画素の実測 |
| `background-alt` | `#F5EACE` | 対象商品セクションのクリーム地 | 9% | 画素の実測 |
| `surface` | `#F9EAD5` | 応募方法パネルの淡いベージュ | 9% | 画素の実測 |
| `secondary` | `#856818` | STEP見出し帯のオリーブゴールド | 3% | 画素の実測 |
| `cta` | `#D6C35B` | 金グラデーションの応募ボタン | 2% | 画素の実測 |
| `on-cta` | `#3C2004` | 金ボタン上の濃茶文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#540205` | リボン見出し・小見出し帯の深紅 | 2% | 画素の実測 |
| `accent-2` | `#C9A867` | セクション見出し・装飾罫の金 | 1% | 推定 |
| `line` | `#9D9550` | アーチ型カードのオリーブ枠線 | 1% | 推定 |
| `text` | `#341A01` | 紙面上の見出し・本文の濃茶 | 1% | 画素の主要色に補正 |
| `on-dark` | `#F2E5D5` | 濃茶地上の白〜生成り文字 | 1% | 画素の主要色に補正 |
| `tint-1` | `#EDE5B7` | 良い例の背景の淡い黄土 | 2% | 画素の実測 |

- 地は濃チョコ茶を基本とし、情報量の多いブロックは生成り・クリームの紙面パネルに載せる。
- 主CTAは必ず金のグラデーションのピルボタンにし、文字は濃茶にする。
- 深紅はリボン見出しと小見出し帯・封蝋バッジに限定する。
- 金の唐草罫線でセクションの区切りと見出しの左右を飾る。
- 濃茶地の文字は生成り、紙面上の文字は濃茶にし、黒は使わない。
- STEP帯はオリーブゴールドの地に白い大文字の欧文を載せる。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのキャンペーン名 | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.2 | 0.02em |
| `headline-lg` | セクション見出し（金色・唐草付き） | 明朝 | Shippori Mincho | 800 | 22px | 1.4 | 0.1em |
| `headline-md` | 賞品名・STEP番号 | 明朝 | Shippori Mincho | 700 | 22px | 1.4 | 0.08em |
| `headline-sm` | 賞品のキャッチ・リボン見出し | 明朝 | Noto Serif JP | 600 | 15px | 1.6 | 0.1em |
| `body-md` | セクションのリード文・仕様 | 明朝 | Noto Serif JP | 500 | 11px | 2.0 | 0.08em |
| `body-lg` | 応募手順の説明文 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.7 | 0.05em |
| `note` | 注釈・規約本文 | ゴシック | Noto Sans JP | 400 | 8px | 1.7 | 0.02em |
| `label-button` | 金ボタンの文字 | 明朝 | Shippori Mincho | 700 | 12px | 1.0 | 0.15em |

- 見出し・賞品名・ボタンは明朝体で格調を出す。
- 数字の当選人数は周りより大きくして強調する。
- リード文は中央揃えで短く改行し、行間を広く取る。
- 手順説明・規約はゴシックで読みやすくする。
- セクション見出しは字間を広めに取り、左右に唐草飾りを置く。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。対象商品だけ 2 カラムのグリッド。
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
- 賞品は紙面パネル内に縦に積み、1 賞品 1 カードにする。
- セクションの終わりごとに金CTAを中央に置く。
- 上部にアンカーナビの 2×2 ピルボタンを置く。
- 見出し→リード→パネルの順に中央揃えで並べる。
- 規約は高さ固定のスクロールボックスに収める。

## Elevation & Depth

- 賞品写真には柔らかいドロップシャドウを付ける。
- 歴史画像の背後にぼかした暖色の光を置く。
- 金ボタンは光沢グラデーションで立体感を出し、影は弱くする。
- 紙面パネルはフラットにして、外周を金の装飾枠で囲む。

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 80px。ボタンはピル型。
- **写真の切り抜き**: 賞品・商品は切り抜き。背景なしで影を付ける。
- **セクション境界**: 唐草模様の金の水平罫線。地色は直線で切り替える。
- 賞品カードは上下が大きく丸いアーチ型で、オリーブ色の二重線にする。
- STEPカードは角丸12px程度で、オリーブ金の太枠にする。
- リボン見出しは両端に切り込みを入れた赤い帯にする。
- 当選数のバッジは封蝋風の不定形な円にする。

## Components

- **金の応募ボタン**（`button-primary`）: 金のグラデーションのピル型ボタン。中央に明朝の文字、右端に矢印。
- **特設ページへのリンク**（`button-outline`）: 濃茶地に生成りの細い線のピル型ボタン。右端に矢印。
- **アンカーナビ**（`anchor-nav`）: クリーム地に金の縁取りのピルを2×2で並べる。右に小さなv字。
- **リボン見出し**（`ribbon-heading`）: 両端が燕尾形の深紅の帯に、生成りの明朝文字。応募口数の区分に使う。
- **封蝋バッジ**（`wax-badge`）: 深紅の封蝋風の円。賞の名前と当選数を2段で入れ、カードの左上に重ねる。
- **アーチ型賞品カード**（`prize-card`）: 生成り地にオリーブの二重線のアーチ枠。写真→キャッチ→賞品名→区切り線→仕様の順に並べる。
- **STEPカード**（`step-card`）: 上部はオリーブ金の帯に欧文のSTEP番号。下は生成り地に太字の説明とアイコン。
- **小見出し帯**（`sub-heading-bar`）: 全幅の深紅の細い帯に、白い小さな太字を中央に置く。
- **唐草付きセクション見出し**（`ornament-heading`）: 金の明朝見出しの左右に、アンティークの唐草飾りと細い線を置く。

## Do's and Don'ts

**Do**
- 金のCTAボタンは各セクションの終わりに繰り返して置く。
- 賞品は封蝋バッジとアーチ型カードの組み合わせで格を表す。
- 見出しには必ず唐草飾りを付け、クラシックな統一感を保つ。
- 地の色は濃茶とクリームの2トーンを交互にしてリズムを作る。
- 当選人数などの数字は大きな明朝体で強調する。

**Don't**
- 純黒や純白の大きな面を使わない。
- ビビッドな青や緑などの寒色を入れない。
- ボタンをフラットな単色の四角にしない。
- 丸ゴシックやポップな手書き体を使わない。
- 装飾のない細い1px罫線だけで区切らない。

## Page Structure

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

1. **ファーストビュー**（キャンペーン名・賞品・応募期間を一目で伝える。）: 板チョコの写真を敷いた上に大きな白抜きタイトルを置く。八角形の白パネル2枚に応募口数別の賞品を見せる。下部は赤リボン付きの深紅帯に応募期間を入れる。
2. **アンカーナビ**（各セクションへ移動しやすくする。）: 濃茶地にクリーム色のピルボタンを2×2で並べる。
3. **賞品紹介**（賞品の魅力と仕様を伝える。）: 唐草見出しとリードの下に、金枠の紙面パネルを置く。リボン見出しで口数を区分し、アーチ型カードを縦に積む。
4. **CTA**（応募へ誘導する。）: 濃茶地の中央に金のピル型ボタンを置く。
5. **ブランドストーリー**（歴史とこだわりで共感を生む。）: 暖色の光を背負った古い本の画像を置き、中央揃えの短い詩的な文章を続ける。続けて角丸の淡いベージュのカードに商品写真と素材の説明を入れる。
6. **対象商品**（購入対象の商品を明示する。）: クリーム地に商品パッケージを2カラムで並べ、下に名称と容量を入れる。背景にカカオの線画をうっすら置く。
7. **応募方法**（手順と注意点を説明する。）: ベージュのパネル内に深紅の小見出し帯と説明を置き、STEPカード3枚を縦に並べる。
8. **レシート撮影方法**（撮影の不備を防ぐ。）: 良い例は淡い黄土の地、悪い例はグレーの地に、レシートのイラストを並べる。
9. **応募規約**（条件を網羅して示す。）: 生成りのスクロールボックスに小さなゴシックで規約を入れ、見出しは濃茶の太字＋区切り線にする。
10. **お問い合わせ**（問い合わせ先を伝える。）: 濃茶地に金の細い枠のボックスを置き、金の見出しと生成りの文字で書く。

## Imagery

- 賞品はレトロな木目や真鍮の質感が出るように斜め上から撮り、切り抜いて柔らかい影を付ける。
- 背景には板チョコの凹凸を大きく写した写真を敷く。
- アンティークな金の唐草模様・額縁の飾りを多用する。
- 手順の説明は濃茶とオリーブ金の単純なフラットアイコンにする。
- クリーム地の装飾にはカカオの実の線画をうすく入れる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央の固定幅（約70%）に収め、左右には濃茶の地を広げる。
- PCの賞品カードは横長のアーチにし、左に文字、右に写真を置く。
- PCのSTEPカードは3カラムで横並びにする。
- PCのナビは4つのピルを1行に並べる。
- PCのFVは賞品を横長の深紅の帯に並べ、タイトルの横にパッケージを並べる。

## 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-3018f92e`（元 LP の URL から採番）
- **元 LP**: https://www.meiji.co.jp/products/brand/mchoco/cmp/close2602/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。