---
version: alpha
name: Chocolate Brown and Mustard Yellow Quiz Campaign LP
description: 板チョコ柄のファーストビューに、こげ茶・ベージュ・山吹色の帯セクションを重ねたLPです。太い茶色の縁取り文字、丸いアイコン付きカード、番号入りの特典カードで、気軽に参加できる無料オンライン検定の楽しさを伝えます。
colors:
  primary: '#4B2300'
  secondary: '#FAB802'
  background: '#ECD6A7'
  background-alt: '#FAEED8'
  surface: '#FEFEFE'
  cta: '#A30102'
  on-cta: '#FFFFFF'
  text: '#331C12'
  accent-1: '#FBB603'
  marker: '#FDFD9B'
  tint-1: '#E9E4E0'
  dark-section: '#331C12'
  line: '#331C12'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 36px
    fontWeight: 900
    lineHeight: 1.2
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.05em
  accent:
    fontFamily: Montserrat
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.0
  note:
    fontFamily: Zen Kaku Gothic New
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 8px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  label-pill-heading:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 48px
  intro-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 330px
  circle-info-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 260px
  benefit-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 230px
  number-badge:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 40px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 56px
  chocolate-frame-banner:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    rounded: '{rounded.sm}'
    height: 420px
  outline-band-title:
    backgroundColor: '{colors.primary}'
    typography: '{typography.accent}'
    height: 30px
---

# DESIGN.md — チョコ茶×山吹色のポップな検定キャンペーンLP（Chocolate Brown and Mustard Yellow Quiz Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、親しみ・手作り感、かわいい
- **キーワード**: 板チョコ柄・こげ茶の太縁・山吹色・丸いアイコンカード・番号付き特典・温かいベージュ
- **地の質感**: ファーストビューは板チョコを敷き詰めたリアルな写真パターン。それ以外は単色のベタ面で、フラットに仕上げる。
- **形**: 角丸カードに 2〜3px のこげ茶の線を付ける。円形の情報カード、ピル型の見出しラベルとボタン。溶けたチョコのような波形の境界も使う。
- **温度感**: 暖色だけでまとめた甘く温かい印象

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#4B2300` | チョコ色の地・縁取り | 10% | 画素の実測 |
| `secondary` | `#FAB802` | 特典セクションの山吹色の地 | 10% | 画素の実測 |
| `background` | `#ECD6A7` | 概要セクションのベージュ地 | 17% | 画素の実測 |
| `background-alt` | `#FAEED8` | 体験レポート部の淡いクリーム地 | 7% | 画素の実測 |
| `surface` | `#FEFEFE` | カード・円形カードの白 | 28% | 画素の実測 |
| `cta` | `#A30102` | 主ボタンのチョコ赤 | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `text` | `#331C12` | 見出し・本文のこげ茶 | 3% | 画素の主要色に補正 |
| `accent-1` | `#FBB603` | ¥0 などの数字・番号丸の黄色 | 1% | 画素の実測 |
| `marker` | `#FDFD9B` | 本文強調の黄色マーカー | 0% | 画素の実測 |
| `tint-1` | `#E9E4E0` | シェア・関連部のグレージュ地 | 8% | 画素の実測 |
| `dark-section` | `#331C12` | フッターのこげ茶地 | 4% | 画素の主要色に補正 |
| `line` | `#331C12` | カードの縁線 | 0% | 画素の主要色に補正 |

- 地色は セクション単位で切り替える。順番は チョコ茶 → ベージュ → 山吹色 → クリーム → グレージュ → こげ茶フッター。
- カードは必ず白地にこげ茶の線で縁取り、どの地色の上でもくっきり浮かせる。
- 黄色は数字・番号丸・見出しラベルなど、目を引く点だけに使う。
- ボタンはチョコ赤の面に白文字だけで作る。
- 本文の強調は淡い黄色マーカーを敷き、太字にする。
- 使う色は暖色系だけに限り、寒色は入れない。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ロゴ風の大見出し（白文字＋太い茶の縁取り） | 装飾・ディスプレイ | Dela Gothic One | 900 | 36px | 1.2 | 0.0em |
| `headline-lg` | セクション見出し（白い外縁付き） | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.4 | 0.02em |
| `headline-md` | カードタイトル | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.6 | 0.03em |
| `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 2.0 | 0.05em |
| `accent` | ¥0 などの大きな数字 | 欧文サンセリフ | Montserrat | 800 | 64px | 1.0 | 0.0em |
| `note` | 補足・注釈 | ゴシック | Zen Kaku Gothic New | 700 | 11px | 1.6 | 0.03em |
| `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.4 | 0.05em |

- 大見出しは白または茶の文字に太い縁取りを付け、ステッカーのように見せる。
- 本文は行間を 2.0 前後と広めにし、字間も少し空ける。
- 概要の説明文は中央揃え、カード内の本文は左揃えにする。
- 数字は大きな黄色で打ち出し、ラベルは数字の下に置く。
- 欧文の帯見出しは、白の線だけで描いたアウトライン文字にする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カードは縦に積む
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
- セクションは幅いっぱいの色帯で区切る。
- 円形カードの直径は画面幅の約 70% とし、中央に縦に並べる。
- 特典カードは左右 16px の余白を取り、間隔 20px で積む。
- セクション見出しは上に 64px ほどの余白を取る。
- 番号丸はカード上部の中央に置く。

## Elevation & Depth

- 影は基本的に使わず、こげ茶の太い縁線で立体感を出す。
- ファーストビューのカードは白いベタ面にし、チョコ柄の上に載せる。
- レポートの枠は板チョコの縁取りで囲み、額縁のように見せる。

## Shapes

- **角丸**: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 漫画やイラストは傾けて重ね、紙片のように見せる。サムネイルは細枠付きの長方形にする。
- **セクション境界**: チョコ柄から茶の地へは、溶けたチョコのような波形でつなぐ。それ以外の境界は直線の色帯。
- カードの縁線は 2〜3px のこげ茶にする。
- 見出しラベルは黄色のピル型にこげ茶の縁を付ける。
- 情報カードは真円にする。
- ボタンは完全なピル型にする。

## Components

- **ピル型見出しラベル**（`label-pill-heading`）: 黄色い面にこげ茶の縁と文字。白カードの上辺にまたがるように置く。
- **導入カード**（`intro-card`）: チョコ柄の上に置く白い角丸カード。本文の一部に黄色マーカーを敷く。
- **円形情報カード**（`circle-info-card`）: 白い円にこげ茶の縁。中に黄色の大きな数字かアイコン、太字のラベル、補足を入れる。
- **番号付き特典カード**（`benefit-card`）: 白い角丸カードにこげ茶の縁。上に黄色の番号丸、続いてタイトルと説明を置く。
- **番号丸**（`number-badge`）: 黄色の円の中にこげ茶の数字を入れる。
- **主ボタン**（`button-primary`）: チョコ赤のピル型ボタンに白文字。右端に矢印を付ける。
- **板チョコ枠バナー**（`chocolate-frame-banner`）: 板チョコ柄の縁で囲む。上段は黄色地に縁取り大見出しと漫画画像、下段は白地に本文とボタン。
- **欧文アウトライン帯**（`outline-band-title`）: セクションの境目に、白い線だけで描いた欧文を横幅いっぱいに置く。

## Do's and Don'ts

**Do**
- 見出しには必ず縁取りを付け、ポップな立体感を出す。
- 白カードは必ずこげ茶の線で縁取る。
- 数字やメリットは大きく、短い言葉で見せる。
- セクションごとに暖色の地色を切り替える。
- アイコンはこげ茶の線に黄色を差したシンプルな線画にする。

**Don't**
- 寒色や原色の青・緑を使わない。
- 細い明朝体や繊細な書体を使わない。
- 影やグラデーションを多用しない。
- 縁線のない白カードを置かない。
- 長文を詰め込まない。

## Page Structure

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

1. **ファーストビュー**（企画名とテーマを印象づける）: 板チョコ柄の背景に、縁取りロゴ風の大見出しとメダル風エンブレムを置く。
2. **導入説明**（企画の主旨と参加しやすさを伝える）: 白カードの上辺にピル型ラベルを載せる。下は溶けたチョコのような波形でこげ茶の地へつなぐ。
3. **概要**（無料・オンライン・問題数を示す）: ベージュ地に中央揃えのリード文を置き、円形カードを 3 つ並べる。
4. **特典**（合格者のメリットを示す）: 山吹色の地に、番号付きの白カードを 3 枚縦に積む。
5. **体験レポート誘導**（体験談で参加意欲を高める）: クリーム地に板チョコ枠のバナーを置き、漫画画像とチョコ赤のボタンを入れる。
6. **CTA**（本番ページへ誘導する）: チョコ赤のピル型ボタンを 1 つ、矢印付きで置く。
7. **シェア・関連コンテンツ**（拡散と回遊を促す）: グレージュ地に SNS アイコンを並べ、上下線で挟んだ見出しとバナーを 2 列で置く。
8. **フッター**（関連サイトとブランドを示す）: こげ茶地に白カードのバナーを 3 つ並べ、下に白ロゴを置く。

## Imagery

- 板チョコを真上から撮り、敷き詰めた写真を柄として使う。
- アイコンは太めのこげ茶線に黄色を差したフラットな線画にする。
- 漫画風の手描きイラストを紙片のように傾けて重ねる。
- 認定証などの紙もののモックを、少し傾けて添える。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はコンテンツ幅を約 800px に絞り、中央に寄せる。
- 円形カードは PC では横 3 列に並べる。
- 特典カードは PC では番号丸を左、テキストを右に置いた横長カードにする。
- 体験レポートのバナーは PC では横長にし、画像を右に置く。
- 関連バナーは PC では 3 列にする。

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