---
version: alpha
name: Pop Summer Character Collab Ice Cream Campaign LP
description: ベースは水色の斜めストライプ。その上に商品ごとに色を変えた白枠つきの角丸パネルを縦に並べる、キャラクターコラボのアイス販促 LP です。太い丸ゴシックで価格を大きく出し、黄色・マゼンタ・青・緑などの原色で元気な夏の楽しさを表現します。
colors:
  primary: '#54C4F1'
  background: '#FEFBEF'
  secondary: '#0081CC'
  cta: '#B83670'
  on-cta: '#F8F9F5'
  accent-1: '#FED201'
  background-alt: '#FDF382'
  tint-1: '#F4BCD5'
  accent-2: '#B83670'
  tint-2: '#C8E04A'
  accent-3: '#019944'
  surface: '#C4E0F5'
  marker: '#F07F01'
  text-body: '#5A3A2A'
  secondary-accessible: '#0077BD'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.35
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.1
  headline-sm:
    fontFamily: M PLUS Rounded 1c
    fontSize: 15px
    fontWeight: 800
    lineHeight: 1.35
    letterSpacing: 0.02em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.75
    letterSpacing: 0.04em
  note:
    fontFamily: Zen Kaku Gothic New
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 6px
  md: 12px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  nav-tile:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 64px
  product-panel:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 1400px
  heading-band:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-lg}'
    height: 70px
  price-block:
    textColor: '{colors.marker}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 110px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  badge-circle:
    backgroundColor: '{colors.background}'
    textColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 64px
  note-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 260px
  sticker-grid:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    height: 900px
---

# DESIGN.md — 水色ストライプ×商品別カラーのポップな夏アイス LP（Pop Summer Character Collab Ice Cream Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型
- **キーワード**: 水色ストライプ地・商品別カラーパネル・極太価格表記・ガーランドと風船・白フチ角丸・子ども向けの夏
- **地の質感**: 細い斜めストライプと縦ストライプの地に、フラットな単色パネルを重ねる。紙吹雪や星を散らしたにぎやかな質感。
- **形**: 大きな角丸パネル、ピル型ラベル、斜めにカットした見出し帯、円形や星形のバッジ。
- **温度感**: 明るく暖かい夏の温度感。寒色の地に暖色を強調色として差す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#54C4F1` | ページ地の水色ストライプ | 16% | 画素の実測 |
| `background` | `#FEFBEF` | 説明ボックス・注意書きなどの白地 | 9% | 画素の実測 |
| `secondary` | `#0081CC` | ナビボタン・見出し帯の青 | 4% | 画素の実測 |
| `cta` | `#B83670` | 詳細ボタン・強調のマゼンタ | 3% | 画素の主要色に補正 |
| `on-cta` | `#F8F9F5` | ボタン上の白文字 | 1% | 画素の主要色に補正 |
| `accent-1` | `#FED201` | ナビ帯・タイトル・矢印の黄色 | 9% | 画素の実測 |
| `background-alt` | `#FDF382` | ナビ・TVCM 帯の淡い黄色 | 7% | 画素の主要色に補正 |
| `tint-1` | `#F4BCD5` | ピンク商品パネルの地 | 6% | 画素の実測 |
| `accent-2` | `#B83670` | プレゼント枠の濃いマゼンタ | 7% | 画素の主要色に補正 |
| `tint-2` | `#C8E04A` | セット商品パネルの黄緑地 | 5% | 推定 |
| `accent-3` | `#019944` | セット商品・価格の緑 | 2% | 画素の実測 |
| `surface` | `#C4E0F5` | バラエティ商品パネルの淡い水色 | 12% | 画素の実測 |
| `marker` | `#F07F01` | 価格ラベル・価格文字のオレンジ | 2% | 画素の実測 |
| `text-body` | `#5A3A2A` | 本文の焦げ茶 | 2% | 推定 |
| `secondary-accessible` | `#0077BD` | AA を満たす補正値（計算） |  | 計算 |

- ページの地は水色の斜めストライプで統一する。ナビと末尾の動画エリアだけ淡い黄色の縦ストライプにする。
- 商品パネルは1商品ごとに地色を変える。順にピンク・紫・黄緑・黄色・淡い水色。
- 見出し帯・価格ラベル・価格の数字は、パネルごとに決めたテーマ色 1 色で揃える。
- 白は説明ボックス、パネルの縁取り、価格下の補足ピルに使う。
- 主ボタンは青かマゼンタの地に白文字にして、黄色の矢印を添える。
- 注意書きの文字は赤にして、注釈ブロックの中に入れる。
- `nav-tile` は文字 `#F8F9F5` × 背景 `#0081CC` のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#0077BD`、4.54:1）を使う。
- `badge-circle` は文字 `#0081CC` × 背景 `#FEFBEF` のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#0077BD`、4.51:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | キャンペーンロゴ風タイトル・プレゼント訴求 | 装飾・ディスプレイ | Dela Gothic One | 400 | 34px | 1.2 | 0.02em |
| `headline-lg` | 商品パネルの見出し帯 | 丸ゴシック | M PLUS Rounded 1c | 900 | 20px | 1.35 | 0.02em |
| `accent` | 価格（¥と数字） | 欧文サンセリフ | Montserrat | 900 | 40px | 1.1 | 0.0em |
| `headline-sm` | ナビボタンのラベル・吹き出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 15px | 1.35 | 0.02em |
| `body-md` | 商品説明の本文 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.75 | 0.04em |
| `note` | 注釈（※）・権利表記 | ゴシック | Zen Kaku Gothic New | 500 | 11px | 1.6 | 0.02em |
| `label-button` | ボタン・サイズラベル | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 1.2 | 0.05em |

- 見出しはすべて極太の丸ゴシックにする。細い書体は使わない。
- 価格は本文の約 3 倍の大きさにし、テーマ色でベタ塗りする。
- 「各」「スモール」などの補足語は、価格の左に小さく添える。
- プレゼント訴求は白フチ付きの青・白文字を 3 行で重ね、数字だけ黄色で大きくする。
- 本文は太めのゴシックで焦げ茶にし、行間を広くとる。
- 注釈は ※ で始め、本文より 2〜3px 小さくする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。ナビボタンと価格は 2 カラム、プレゼント一覧は 3 カラムのグリッド。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
- 商品パネルは左右 6% の余白をとり、地のストライプを見せる。
- 見出し帯はパネル左端からはみ出させ、左上に配置する。
- 商品写真はパネル幅いっぱいまで大きく置き、パネル外へ少しはみ出してもよい。
- 価格ブロックは、ラベルのピル→大きな価格→白い補足ピルの順に縦に積む。
- パネルとパネルの間は 40〜56px 空ける。

## Elevation & Depth

- 影はほぼ使わない。白い縁取り（4〜6px）でパネルを浮かせる。
- ナビボタンにだけ、下方向に濃い色のベタ影を 3px 付ける。
- 写真やキャラクターには、白いフチで切り抜いた感じを出す。

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 商品は背景を抜いた切り抜き写真にする。部分拡大は白フチの円形で見せる。
- **セクション境界**: 直線で切り替える。ナビ帯だけ上下に黄色の太線を入れる。
- 商品パネルは大きな角丸にして、白い太枠で囲む。
- 見出し帯は右端を斜めにカットした平行四辺形にする。
- サイズラベルや補足はピル型にする。
- バッジは円形・星形・ギザギザ形のいずれかにする。

## Components

- **商品ナビボタン**（`nav-tile`）: 青い角丸ボタン。左に商品の切り抜き、中央に白文字の商品名、右に黄色い丸の下向き矢印を置き、2 列に並べる。
- **商品パネル**（`product-panel`）: 商品ごとに色を変える角丸パネルで、白い太枠を付ける。中に見出し帯・写真・本文・価格をまとめる。
- **斜めカット見出し帯**（`heading-band`）: パネルの左上に、テーマ色の帯で商品名を白文字 2 行で入れる。右端は斜めにカットする。
- **価格ブロック**（`price-block`）: 2 列構成。テーマ色のピルにサイズ名を入れ、その下にテーマ色の極太価格、最下段に白い補足ピルを置く。
- **詳細ボタン**（`button-primary`）: マゼンタか青のピル型ボタン。白文字に黄色の右矢印を添え、白フチを付ける。
- **円形・星形バッジ**（`badge-circle`）: おトク感・付属品・種類数を示すバッジ。白地に青の文字か、赤地に白文字で作る。
- **注意書きボックス**（`note-box`）: 白地のボックス。見出しはリボン風にし、項目を点線で区切る。
- **特典一覧グリッド**（`sticker-grid`）: 濃いマゼンタの地に、正方形の特典カードを 3 列で並べる。代表の 2 枚は大きく傾けて置く。

## Do's and Don'ts

**Do**
- 商品ごとにテーマ色を 1 色決め、パネル・帯・価格をその色で統一する。
- 価格は極太で大きく出し、2 サイズを横に並べる。
- 風船・ガーランド・星・紙吹雪を、パネルの外側に散らす。
- パネルは白い太枠で地のストライプから切り離す。
- 商品写真は切り抜いて大きく使い、パネルからはみ出させる。

**Don't**
- 細い明朝や繊細なセリフ体は使わない。
- 全パネルを同じ色にしない。
- くすんだ色やグレー主体の配色にしない。
- 価格を本文と同じサイズで書かない。
- 地を無地の白にしない。ストライプの柄を残す。

## Page Structure

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

1. **ファーストビュー**（キャンペーン名と期間を伝え、キャラクターでわくわく感を出す）: 水色ストライプの地に、黄色と青の立体ロゴ風タイトルを置く。円形バッジで期間を示し、キャラクターを大集合させる。
2. **商品ナビ**（各商品へページ内ジャンプさせる）: 淡い黄色の地に、青い角丸ボタンを 2 列×4 段で並べる。最後の 1 つだけマゼンタにして動画への導線にする。
3. **新作フレーバー**（目玉の新商品を訴求する）: 黄色の斜め帯に商品名を入れ、商品写真を画面幅いっぱいに大きく置く。短い説明と青いピル型ボタンを続ける。
4. **商品パネル（カップ）**（デザインの種類と価格を見せる）: ピンクのパネル。A/B/C の黄色い円バッジを付け、裏面を円形の拡大写真で見せる。
5. **購入特典**（おまけの全種類を見せて購買意欲を上げる）: 濃いマゼンタの地に大きな訴求コピーを置き、特典カードを 3 列のグリッドで並べる。
6. **商品パネル（サンデー・セット）**（付属品と価格を伝える）: 紫・黄緑のパネル。ギザギザバッジや吹き出しを付け、サイズ表は白い 2 列ボックスで見せる。
7. **付属品の訴求**（共通の付属品をアピールする）: 大きな円形のビジュアルに、マゼンタと青の極太コピーと付属品の写真を配置する。
8. **商品パネル（ドリンク・ボックス）**（サイズ別のおトク感を見せる）: 黄色や淡い水色のパネル。入数ごとに色を変えた価格ブロックとおトクバッジを繰り返す。
9. **ケーキ**（外部ページへ誘導する）: 淡い黄色のパネルにオレンジの帯を付け、価格と、マゼンタのピル型ボタンを 2 商品分置く。
10. **動画・注意事項**（CM 動画を見せ、権利表記と注意を伝える）: 黄色の縦ストライプの地に、青の極太見出しと動画を置く。赤の注意書き、小さな注釈を続ける。

## Imagery

- 商品はやや俯瞰で撮り、背景を抜いた写真にする。高彩度で、つやを出す。
- キャラクターのイラストは白フチ付きで、ポーズのある全身を使う。
- 装飾は風船・三角ガーランド・星・紙吹雪・キャンディ。フラットに描く。
- 部分拡大は白フチの円形に入れ、曲線の矢印でつなぐ。
- おまけ類は正方形のカードにし、少し傾けて重ねて置く。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 版の画像は提供がないため、PC では本文の最大幅を 480〜640px に固定して中央寄せにする（推奨）。
- PC では左右の余白にも水色のストライプを敷き詰める。
- PC ではナビボタンを 4 列にする。
- 特典グリッドは PC では 5 列に広げる。
- 価格の 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-fe85d6a5`（元 LP の URL から採番）
- **元 LP**: https://www.31ice.co.jp/contents/topics/250801_02.html
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。