---
version: alpha
name: Festive Red and Chocolate Brown Confectionery Collab LP
description: 鮮やかな赤とチョコ茶色の面を交互に重ね、白い角丸カードに商品と購入ボタンを入れた記念コラボ菓子の販売 LP。金色の帯見出し、筆記体のポイント番号、リスのキャラクターと花模様の装飾で、にぎやかなお祝い感を出す。
colors:
  primary: '#E60112'
  dark-section: '#581E12'
  surface: '#FFFFFF'
  background: '#FFFFFF'
  cta: '#E70012'
  on-cta: '#FFFFFF'
  background-alt: '#FFF9E9'
  secondary: '#D1B55E'
  text: '#4F2019'
  text-body: '#5A3A2E'
  accent-1: '#88261A'
  accent-2: '#2BA34A'
  marker: '#F7E21C'
  line: '#E70012'
  primary-accessible: '#C80110'
  accent-2-accessible: '#24873D'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
  headline-lg:
    fontFamily: Zen Maru Gothic
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.15em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Zen Maru Gothic
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Zen Maru Gothic
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Pacifico
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em
rounded:
  sm: 4px
  md: 12px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  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.full}'
    height: 48px
  product-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 420px
  section-band:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 80px
  point-heading:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    height: 60px
  badge-shipping:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 16px
  contents-list:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    height: 60px
  image-label:
    backgroundColor: '{colors.accent-1}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 20px
  speech-bubble:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 110px
  intro-box:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 160px
---

# DESIGN.md — 赤×チョコ茶のお祝い菓子コラボ LP（Festive Red and Chocolate Brown Confectionery Collab LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、力強い・インパクト、親しみ・手作り感
- **キーワード**: 記念コラボ・赤ベタ・チョコ茶・白カード・キャラクター・限定感
- **地の質感**: ベタ塗りの面に紙吹雪と花模様を散らす。商品写真は照りの強いシズル感。
- **形**: 白い角丸カード、赤いピル型ボタン、点線の区切り線、手描き風の吹き出し
- **温度感**: 暖色中心の温かくにぎやかなトーン

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#E60112` | ブランドの赤（FV・紹介・ポイント面） | 20% | 画素の実測 |
| `dark-section` | `#581E12` | 商品・購入エリアのチョコ茶地 | 13% | 画素の実測 |
| `surface` | `#FFFFFF` | カード地 | 36% | 画素の実測 |
| `background` | `#FFFFFF` | ページ基調の白 | 5% | 画素の実測 |
| `cta` | `#E70012` | 購入ボタン | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 |
| `background-alt` | `#FFF9E9` | 紹介文ボックス・内容リストのクリーム地 | 6% | 画素の実測 |
| `secondary` | `#D1B55E` | 見出し帯の金ベージュ | 5% | 画素の実測 |
| `text` | `#4F2019` | 見出し・価格のこげ茶文字 | 2% | 画素の主要色に補正 |
| `text-body` | `#5A3A2E` | 本文の茶文字 | 1% | 推定 |
| `accent-1` | `#88261A` | 画像注記ラベルのえんじ | 0% | 画素の主要色に補正 |
| `accent-2` | `#2BA34A` | 送料込みバッジの緑 | 0% | 推定 |
| `marker` | `#F7E21C` | ポイント見出しの黄色マーカー | 0% | 推定 |
| `line` | `#E70012` | 商品名下の赤点線 | 0% | 画素の主要色に補正 |
| `primary-accessible` | `#C80110` | AA を満たす補正値（計算） |  | 計算 |
| `accent-2-accessible` | `#24873D` | AA を満たす補正値（計算） |  | 計算 |

- 地は赤とチョコ茶を大きなブロックで交互に置く。
- 紹介・特長は赤地、商品購入はチョコ茶地にする。
- 情報は必ず白カードの上に載せ、地に直接本文を置かない。
- 購入ボタンは赤一色。白文字に右端の白丸矢印を付ける。
- 金ベージュはセクション見出しの帯だけに使う。
- 赤地の上の文字は白、カード内は茶系の文字にする。
- `point-heading` は文字 `#E60112` × 背景 `#F7E21C` のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C80110`、4.57:1）を使う。
- `badge-shipping` は文字 `#FFFFFF` × 背景 `#2BA34A` のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#24873D`、4.56:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV のロゴ風タイトル（黄色＋太い縁取り） | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.2 | 0.0em |
| `headline-lg` | セクション帯の見出し | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.4 | 0.15em |
| `headline-md` | ポイント見出し・赤地のリード | 丸ゴシック | M PLUS Rounded 1c | 700 | 19px | 1.5 | 0.03em |
| `headline-sm` | カード内の商品名 | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.5 | 0.05em |
| `body-md` | 本文・説明 | 丸ゴシック | Zen Maru Gothic | 500 | 14px | 1.9 | 0.03em |
| `note` | 税込表記・注釈・内容リスト | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em |
| `accent` | Point 番号の筆記体 | 欧文スクリプト | Pacifico | 400 | 32px | 1.1 | 0.0em |
| `label-button` | 購入ボタン文字・価格数字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.1em |

- 全体は丸ゴシックで、親しみやすくまとめる。
- 価格の数字は大きく太く、円と税表記は小さく添える。
- ポイント番号は筆記体の欧文を赤で書き、下に黄色マーカーを斜めに引く。
- 強調したい語には傍点を付ける。
- 吹き出しの文字は手書き風の書体にする。
- 本文は中央揃えで短く改行する。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。カード内の商品画像と価格は縦に積む
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
- カードは左右 6% の余白を取って地の上に浮かせる。
- カード同士は 16px 空けて縦に並べる。
- 購入ボタンはカードの下中央に、幅 75% 前後で置く。
- 商品名の下に赤い点線を引き、その下に内容リストを置く。
- 装飾のキャラクターや花は余白に散らし、本文には重ねない。

## Elevation & Depth

- カードは影なし。色の対比だけで浮かせる。
- 購入ボタンは下に濃い赤の影を 3px ほど付け、押せる立体感を出す。
- 商品写真には薄い落ち影を付ける。

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 商品パッケージとお菓子は切り抜き写真で使う。四角い枠には入れない。
- **セクション境界**: 直線で色を切り替える。見出しは上下に二重線を引いた金色の帯にする。
- カードは角丸 16px。
- ボタン・注記ラベルはピル型。
- 吹き出しは手描き風の太い線で、角丸を大きくする。
- バッジは角丸の小さい矩形にする。

## Components

- **購入ボタン**（`button-primary`）: 赤いピル型。中央に白い太字、右端に白丸の矢印アイコンを付ける。
- **商品カード**（`product-card`）: 白の角丸カード。商品写真、商品名、点線、内容リスト、価格、ボタンの順に並べる。
- **金帯の見出し**（`section-band`）: 金ベージュの帯に二重線を引き、茶色の太字見出しの左右にキャラクターのシルエットを置く。
- **ポイント番号見出し**（`point-heading`）: 赤い筆記体の番号に黄色マーカーを敷き、右に 2 行の太字見出しを置く。
- **送料込みバッジ**（`badge-shipping`）: 価格の左に置く緑の小さなラベル。文字は白。
- **セット内容ボックス**（`contents-list`）: クリーム地に中点付きの内容を小さく中央揃えで並べる。
- **画像注記ラベル**（`image-label`）: 比較写真の下に置く、えんじのピル型ラベル。
- **手描き吹き出し**（`speech-bubble`）: 白地に太い黒線で描いた吹き出し。キャラクターの台詞として限定感を伝える。
- **紹介文ボックス**（`intro-box`）: 赤地の上に置くクリームの枠。周りにお菓子と商品写真をはみ出させる。

## Do's and Don'ts

**Do**
- 赤とチョコ茶の面を大きく交互に使う。
- 購入カードはページの途中と最後の 2 回置く。
- キャラクターと花・紙吹雪は余白にだけ散らす。
- 価格は大きな数字と小さな税表記をセットで見せる。
- お菓子の断面写真で中身のとろけ感を見せる。

**Don't**
- 寒色や無彩色だけのセクションを作らない。
- 赤地に直接長い本文を置かない。
- 角が鋭いボタンや線だけのボタンを主 CTA にしない。
- 装飾で価格やボタンを隠さない。
- 金色を広い面に使わない。

## Page Structure

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

1. **ファーストビュー**（コラボ商品と限定数を一目で伝える）: 赤地の中央にロゴ風のタイトル。下にチョコが流れる写真と浮かぶお菓子を置き、右下に金のメダル型で限定数のバッジを付ける。
2. **コラボ紹介**（記念コラボの背景を語る）: 赤地にタイトルを再び置き、白の大見出しを続ける。その下にクリームの枠の紹介文、白文字の説明と断面写真を並べる。
3. **商品購入（1回目）**（単品と詰め合わせを売る）: チョコ茶地に白カードを 3 枚縦に並べる。各カードは写真・商品名・点線・内容・価格・赤ボタンの順。
4. **おすすめポイント見出し**（特長パートの始まりを示す）: 金ベージュの帯に二重線を引き、茶色の見出しの左右にリスのシルエットを置く。
5. **特長（ポイント1〜3）**（大きさ・食感・限定性を説明する）: 赤地に白カードを並べる。筆記体の番号見出しを付け、サイズ比較写真や断面の引き出し線注記を入れる。
6. **限定の訴求**（購入できる場所が限られることを伝える）: 線だけの吹き出しタグとキャラクターの手描き吹き出しで、限定感を伝える。
7. **商品購入（2回目）**（最後に購入を促す）: 最初の購入エリアと同じチョコ茶地のカード 3 枚をもう一度並べる。

## Imagery

- お菓子は照りの強いクローズアップで撮り、切り抜いて斜めに浮かせる。
- 断面を見せ、中のチョコのとろけ感を強調する。
- パッケージは正面の切り抜きにし、複数個は少し重ねて並べる。
- リスのキャラクターは厚塗りのリアルなイラストにし、旗やお菓子を持たせる。
- 背景には黄色やクリームの花模様、カラフルな紙吹雪を散らす。
- チョコが流れる液体表現で背景の奥行きを出す。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- 元の LP は PC でも幅 480px 前後の SP 型 1 カラムで中央に置き、左右の地色をそのまま伸ばしている。
- SP ではカード内の写真と商品名・価格を縦に積む。
- PC の単品カードは写真を左、商品名・価格を右に置く 2 カラムにしてもよい。
- SP では装飾キャラクターを縮め、本文と重ならない位置に置く。
- ボタンは SP で幅 80%、高さ 48px 以上を保つ。

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