---
version: alpha
name: Candy Red Pop Collaboration Sweets LP
description: 真っ赤な地に、淡いピンク・水色の花柄を敷いたクリーム色の角丸パネルを縦に並べた、期間限定スイーツのコラボLP。白い太丸ゴシックと赤い吹き出し風ラベル、赤い枠のピル型ボタン、えんじ色の大きな価格表示で、かわいさと商品訴求を両立している。
colors:
  primary: '#DC1B33'
  background: '#FFFEF1'
  secondary: '#E50112'
  cta: '#FEFEFE'
  on-cta: '#E50616'
  text: '#7D1C17'
  text-body: '#6B3A30'
  tint-1: '#F3A9C4'
  tint-2: '#9FD8F6'
  accent-1: '#FEE99E'
  accent-2: '#E4007F'
  on-dark: '#FFFFFD'
  tint-1-accessible: '#E02368'
  secondary-accessible: '#D30111'
typography:
  display:
    fontFamily: M PLUS Rounded 1c
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 16px
    fontWeight: 800
    lineHeight: 1.3
  accent:
    fontFamily: Zen Kaku Gothic New
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.1
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.03em
rounded:
  sm: 8px
  md: 16px
  lg: 28px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 50px
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: 44px
  label-heading:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 64px
  card-product:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 900px
  price-block:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 70px
  bubble-flower:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 110px
  badge-new:
    textColor: '{colors.secondary}'
    rounded: '{rounded.full}'
    height: 50px
  banner-campaign:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.secondary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 70px
  note-text:
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    height: 40px
---

# DESIGN.md — 赤地×花柄クリームのポップなコラボスイーツLP（Candy Red Pop Collaboration Sweets LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型
- **キーワード**: 真っ赤な地・花柄クリームパネル・キャラクター・太丸ゴシック・期間限定・価格訴求
- **地の質感**: 赤地はベタ塗りにキラキラを少し散らす。パネルはクリーム地に淡い花柄を規則的に並べる。
- **形**: 大きな角丸パネル、ピル型のボタンとラベル、雲形・花形の吹き出し、写真用の丸い切り抜き
- **温度感**: 暖色寄り。赤とクリーム色が中心で、ピンクと水色で甘さを足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#DC1B33` | ページ全体の赤い地 |  | 画素の実測 |
| `background` | `#FFFEF1` | 商品パネルのクリーム地 |  | 画素の実測 |
| `secondary` | `#E50112` | 見出しラベル・ボタン枠の鮮やかな赤 |  | 画素の実測 |
| `cta` | `#FEFEFE` | 主ボタンの白い地 |  | 画素の実測 |
| `on-cta` | `#E50616` | ボタン文字 |  | 画素の主要色に補正 |
| `text` | `#7D1C17` | 価格の大きな数字 |  | 画素の実測 |
| `text-body` | `#6B3A30` | 本文・注釈 |  | 推定 |
| `tint-1` | `#F3A9C4` | 花柄・花形吹き出しのピンク |  | 推定 |
| `tint-2` | `#9FD8F6` | 雲形吹き出しの水色 |  | 画素の実測 |
| `accent-1` | `#FEE99E` | プレゼント告知の黄色パネル |  | 画素の主要色に補正 |
| `accent-2` | `#E4007F` | アプリ限定ラベルのマゼンタ |  | 推定 |
| `on-dark` | `#FFFFFD` | 赤地上の白文字 |  | 画素の主要色に補正 |
| `tint-1-accessible` | `#E02368` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#D30111` | AA を満たす補正値（計算） |  | 計算 |

- ページの地はすべて赤。商品はクリーム色の角丸パネルに入れて浮かせる。
- 見出しラベルは赤の塗りに白文字。ボタンは白地に赤枠と赤文字。
- 価格はえんじ色の極太数字。本文は茶色寄りの濃色にして柔らかく見せる。
- ピンク・水色は花柄と吹き出しにだけ使う甘さの差し色。
- プレゼント告知は黄色パネル＋赤文字で、商品パネルと見分けられるようにする。
- `bubble-flower` は文字 `#FFFFFD` × 背景 `#F3A9C4` のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#E02368`、4.55:1）を使う。
- `banner-campaign` は文字 `#E50112` × 背景 `#FEE99E` のコントラスト比が 4.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#D30111`、4.59:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 告知の特大コピー | 丸ゴシック | M PLUS Rounded 1c | 900 | 44px | 1.2 | 0.02em |
| `headline-lg` | 赤ラベル内の商品名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.3 | 0.02em |
| `headline-md` | 吹き出し・小見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.3 | 0.0em |
| `accent` | 価格の数字 | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.1 | 0.0em |
| `body-md` | 商品説明の本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.75 | 0.03em |
| `note` | ※ではじまる注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `label-button` | ボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 1.2 | 0.03em |

- 見出しはすべて太い丸ゴシック。細い書体は使わない。
- 円記号と価格数字は極太で大きくし、前に小さくサイズ名を添える。
- 本文は左揃えで、3〜4行に収める。
- 注釈は小さな文字で、※を頭にしてぶら下げる。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。価格だけ縦線で 2 分割する
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 50px、基本単位 8px、カード内 20px（375px 幅換算）
- 商品ごとに角丸パネルを 1 枚使い、赤地の上に縦に積む。
- パネル内は、赤ラベル見出し→写真→説明→価格→ボタン→注釈の順に並べる。
- 写真はパネルの端からはみ出すほど大きく見せてもよい。
- 裏面などの詳細は丸く切り抜いた写真＋矢印で添える。

## Elevation & Depth

- パネルに影は付けない。赤地との色の差だけで浮かせる。
- 写真の切り抜きには、軽い落ち影を付けてもよい。
- ボタンは平らに作り、赤い枠線で区切る。

## Shapes

- **角丸**: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
- **写真の切り抜き**: 商品は背景を抜いて切り抜く。詳細写真は赤い枠付きの円形にする。
- **セクション境界**: ファーストビューの下端は溶けたクリームのような波形。以降は角丸パネルの間に赤地の余白をとって区切る。
- 見出しラベルは赤塗りのピル型。
- 吹き出しは雲形か花形にする。
- プレゼント告知パネルの見出し帯は、下端をスカラップ状にする。

## Components

- **枠付きピルボタン**（`button-primary`）: 白地に赤い太枠と赤文字。右端に赤丸の矢印アイコンを付けることもある。
- **赤ラベル見出し**（`label-heading`）: 商品名を白い太丸ゴシックで2行にした赤いピル型ラベル。
- **花柄商品パネル**（`card-product`）: クリーム地に淡い花柄を敷いた大きな角丸パネル。
- **価格ブロック**（`price-block`）: 小さなサイズ名の下に極太の価格。2つのサイズは縦線で区切る。
- **花形・雲形吹き出し**（`bubble-flower`）: ピンクや水色の花形に、白文字でフレーバー名や特長を書く。
- **新作バッジ**（`badge-new`）: 白い円に赤文字で新作と入れ、小さな筆記体の英字を添える。
- **特典告知バナー**（`banner-campaign`）: 左に赤地白文字の数量表示、右に黄色地赤文字の特典内容を並べる横長の角丸バナー。
- **注釈**（`note-text`）: ※で始まる小さな茶色文字。ぶら下げインデントにする。

## Do's and Don'ts

**Do**
- 地は赤一色にし、商品はクリーム色の角丸パネルにまとめる。
- 見出しは赤ピル型ラベルに太い丸ゴシックで入れる。
- 価格は極太のえんじ色で大きく見せる。
- 花柄や吹き出しにピンク・水色を使い、甘いかわいさを出す。
- 各パネルの最後に枠付きピルボタンを置く。

**Don't**
- 黒やグレーのくすんだ色を広い面に使わない。
- 細い明朝や細いゴシックで見出しを書かない。
- パネルを角ばった四角にしない。
- 強い影や立体的なグラデーションのボタンにしない。
- 花柄を濃くして文字を読みにくくしない。

## Page Structure

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

1. **ファーストビュー**（コラボと期間限定であることを伝える）: 赤地にロゴ、期間を書いた雲形バッジ、大きな商品写真、キャラクター。下端は波形で区切る。
2. **商品ラインナップ**（対象商品を一覧で見せる）: 水玉・花柄の敷物の上に商品をまとめて並べた写真。
3. **特典告知バナー**（購入特典に気づかせ、下の詳細へ誘導する）: 赤と黄色に分けた横長の角丸バナー。右下に下向き矢印を付ける。
4. **新フレーバー紹介**（新しい味の魅力を伝える）: 大きなカップ写真に花形の吹き出しと新作バッジを添え、白い本文を左右交互に配置する。最後に詳細ボタン。
5. **商品紹介パネル（複数）**（商品ごとの価格と特長を伝える）: 花柄パネルに赤ラベル見出し、写真、裏面の丸い写真、説明、価格、ボタン、注釈を並べる。
6. **アプリ限定特典**（アプリ会員になる利点を伝え、ダウンロードを促す）: 雲形の水色の上に大きな見出し。下にストアバッジ2つと枠付きボタンを置く。
7. **プレゼント詳細**（特典の内容と対象商品を示す）: 赤い見出し帯の黄色パネルに特大の赤文字、ステッカーのイラスト、全種数を書いたピル、白枠の対象商品リストを入れる。
8. **フッター注釈**（販売条件などの注意事項を伝える）: 赤地に白い小さな文字で※の箇条書きと著作権表記。

## Imagery

- 商品は明るく均一な光で撮り、背景を抜いて大きく見せる。
- ガラスの器や紙カップを斜め上から撮り、ぷるっとした質感を出す。
- 下に水玉や花柄のペーパーを敷き、かわいさを足す。
- キャラクターのイラストは太い輪郭線のレトロでかわいいタッチにする。
- 赤地には白いキラキラを少しだけ散らす。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC画像はないため、SPの構成を基準にする。
- PCではパネルを最大幅約720pxで中央に置き、左右は赤地を見せる。
- PCでは商品写真と説明を2カラムにし、価格は横に並べたままにする。
- ファーストビューはPCで横長に組み直し、商品写真を左右に置く。

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