---
version: alpha
name: Festive Red Yellow Food Campaign LP
description: 赤・黄・オレンジのグラデーション地に金のきらめきを散らした、にぎやかな食品メーカーのプレゼントキャンペーン LP。極太のポップな見出しと、赤と青のコース分けカード、白い規約パネルで情報量をまとめている。
colors:
  primary: '#EF1E00'
  dark-section: '#9B2226'
  background: '#FEFACA'
  background-alt: '#F6992E'
  secondary: '#F7ED54'
  surface: '#FEFEFE'
  accent-1: '#0B6BAC'
  tint-1: '#DAE9F5'
  accent-2: '#F9F06A'
  cta: '#1E5BB0'
  on-cta: '#FFFFFF'
  text: '#333333'
  line: '#CCCCCC'
  primary-accessible: '#E71D00'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.2
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.35
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.7
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
  accent:
    fontFamily: Montserrat
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1.0
rounded:
  sm: 4px
  md: 12px
  lg: 28px
  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}'
  course-card:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 220px
  badge-winners:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 64px
  anchor-nav:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 56px
  heading-band:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 36px
  step-label:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    height: 28px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 44px
  present-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 320px
  info-table:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 200px
---

# DESIGN.md — 赤×黄の祭り感ある食品キャンペーン LP（Festive Red Yellow Food Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型
- **キーワード**: お祭り感・赤と黄・きらめき・極太見出し・商品パッケージ大量・コース分け
- **地の質感**: ストライプ地や金の星きらめき、紙吹雪とリボンを散らした賑やかな質感。本文エリアは白でフラット。
- **形**: 角丸カード、白縁取りの太字見出し、ピル型ラベル、四角い白パネル。
- **温度感**: 暖色中心の高温。赤とオレンジで食欲と熱気を出す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#EF1E00` | ブランド赤（ナビ帯・後半セクション地） | 18% | 画素の実測 |
| `dark-section` | `#9B2226` | 濃い赤のナビ帯・影 | 2% | 画素の主要色に補正 |
| `background` | `#FEFACA` | 上部の淡い黄〜オレンジのグラデ地 | 25% | 画素の実測 |
| `background-alt` | `#F6992E` | オレンジ地（グラデ下端） | 8% | 画素の実測 |
| `secondary` | `#F7ED54` | 黄色セクション地 | 10% | 画素の実測 |
| `surface` | `#FEFEFE` | 規約・手順の白パネル | 23% | 画素の実測 |
| `accent-1` | `#0B6BAC` | Bコースの青カード・STEPラベル | 3% | 画素の実測 |
| `tint-1` | `#DAE9F5` | STEP見出しの淡青帯 | 1% | 画素の実測 |
| `accent-2` | `#F9F06A` | 強調の黄色文字（赤地上） | 1% | 画素の主要色に補正 |
| `cta` | `#1E5BB0` | ダウンロード等のボタン | 1% | 推定 |
| `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 |
| `text` | `#333333` | 本文の黒 | 3% | 推定 |
| `line` | `#CCCCCC` | 表の罫線 | 0% | 推定 |
| `primary-accessible` | `#E71D00` | AA を満たす補正値（計算） |  | 計算 |

- 地は淡黄→オレンジの縦グラデ、黄、赤とセクションごとに切り替える。
- 赤は見出しの文字・ナビ帯・後半の地に使い、ブランドの主役にする。
- 赤地の上の強調語は黄色、本文は白。
- 2コース比較は赤カードと青カードで対比させる。
- 規約や手順は白パネルに黒文字でまとめ可読性を確保。
- 金色のきらめき装飾は背景のみに散らし、文字に重ねない。
- `badge-winners` は文字 `#EF1E00` × 背景 `#FEFEFE` のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E71D00`、4.55:1）を使う。
- `present-card` は文字 `#EF1E00` × 背景 `#FEFEFE` のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E71D00`、4.55:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | キャンペーン名・大見出し（白縁取り＋影） | 装飾・ディスプレイ | Dela Gothic One | 400 | 34px | 1.2 | 0.0em |
| `headline-lg` | セクション見出し・プレゼント名 | 装飾・ディスプレイ | Dela Gothic One | 400 | 26px | 1.3 | 0.02em |
| `headline-md` | コースカード見出し・期間表示 | ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.35 | 0.0em |
| `headline-sm` | 赤帯見出し・STEP ラベル | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.1em |
| `body-md` | 応募方法などの本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em |
| `note` | 応募規約・注意事項 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em |
| `label-button` | ボタン・バッジ | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em |
| `accent` | 当選数バッジの数字 | 欧文サンセリフ | Montserrat | 800 | 28px | 1.0 | 0.0em |

- 大見出しは極太書体に白フチと濃い影を付けて立体的に。
- 見出しの一部の語を大きくし、助詞は小さくしてリズムを出す。
- 日付は太字で曜日を括弧付きで小さめに。
- 本文・規約は細めのゴシックで行間広め。
- 赤地では白文字＋黄色の強調語。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。コースカードは縦積み、STEP は 1 列。
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
- 上部に3つのアンカーナビを赤帯で配置。
- 手順・規約は中央の白パネルに集約。
- 当選数は丸バッジでカード右上に重ねる。
- 商品パッケージを横一列に敷き詰めて帯にする。
- 情報表は2列（項目名／内容）の罫線表。

## Elevation & Depth

- コースカードは濃色のドロップシャドウで浮かせる。
- 見出し文字は影付きで立体感。
- 白パネルは影なしでフラット。
- 後半のプレゼントカードは大きな角丸の白でシャドウなし。

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 28px。ボタンは角丸の長方形。
- **写真の切り抜き**: 商品は切り抜き、イベント写真は角丸四角。人物は角丸の横長枠。
- **セクション境界**: 背景色の直線切り替え。
- 当選数バッジは正円。
- カード上部見出しラベルはピル型で縁取り。
- ボタンは小さい角丸四角。
- 赤帯見出しは角なし帯。

## Components

- **コースカード**（`course-card`）: 赤と青で色分けした応募コース。極太見出しと商品画像、当選数バッジ。
- **当選数バッジ**（`badge-winners`）: 白または黄の正円に当選人数を大きく表示。
- **アンカーナビ**（`anchor-nav`）: 赤帯に白文字3項目と下矢印。
- **赤帯見出し**（`heading-band`）: 白パネル内の横長赤帯に白文字。
- **STEP ラベル**（`step-label`）: 淡青帯に青文字で手順番号。
- **ダウンロードボタン**（`button-primary`）: 青地白文字にアイコン付き。
- **プレゼントカード**（`present-card`）: 赤地上の大角丸白カード。上辺にピル型の条件ラベルを重ねる。
- **情報表**（`info-table`）: 白地に罫線の2列表、項目名は太字。

## Do's and Don'ts

**Do**
- 赤・黄・オレンジの暖色で全体をまとめる。
- 背景に金のきらめきや紙吹雪を散らす。
- 見出しは極太＋白フチ＋影で目立たせる。
- 当選数は丸バッジで大きく見せる。
- 細かい規約は白パネルにまとめる。

**Don't**
- 寒色を主役にしない（青はコース対比と手順だけ）。
- 細い明朝体で見出しを作らない。
- 装飾を本文の上に重ねない。
- 余白の多いミニマルな構成にしない。
- 規約を色地に直接置かない。

## Page Structure

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

1. **ファーストビュー**（キャンペーン名と全体像の提示）: オレンジのストライプ地に極太ロゴ風見出し、商品の帯、2つの企画カード。
2. **アンカーナビ**（3企画への誘導）: 赤帯に3項目と下矢印。
3. **応募企画の見出し**（応募条件と期間の提示）: 赤い極太見出しに商品画像、青で期間を太字。
4. **コース紹介**（賞品と当選数の比較）: 赤と青のカードを並べ、丸バッジで当選数。
5. **応募方法**（手順の説明）: 白パネル内に赤帯見出しとSTEP 1〜3、図解、ダウンロードボタン。
6. **対象商品・賞品詳細**（対象と賞品の明示）: 罫線表と商品の小画像。
7. **応募規約**（注意事項）: 白パネルに小さい文字の箇条書き。
8. **誰でも応募企画**（別企画の告知）: 黄色地に紙吹雪と商品画像、極太見出し、人物写真、当選バッジ。
9. **イベント告知**（記念日イベントの案内）: 赤地に白文字と黄色強調、白い情報表、昨年の写真2枚。
10. **来場特典**（特典の訴求）: 大角丸白カードにピルラベルと極太赤見出し。
11. **SNS 誘導**（投稿の促進）: 白抜き見出しと丸いSNSアイコン。
12. **お問い合わせ**（事務局連絡先）: 白地中央寄せに大きな電話番号。

## Imagery

- 商品パッケージを切り抜いて大量に並べる。
- 金色の四芒星きらめきを背景に散らす。
- リボンや紙吹雪、星で祭り感を出す。
- 賞品は白背景の切り抜き写真。
- 謎の賞品は「？」のシンプルな箱イラスト。
- イベント写真は明るい屋外の賑わい。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央約700px幅、SP は1カラム。
- コースカードは PC 横2列、SP 縦積み。
- STEP は PC 3列、SP 縦積み。
- アンカーナビは SP でも3分割を保ち文字を小さく。
- 見出しは SP で幅いっぱいに縮小。

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