---
version: alpha
name: Retail Catalog Summer Beverage Campaign LP
description: 通販の季節特集ページ。太い色枠で区切った商品ブロックを縦に積む。マゼンタと黄の見出し、氷と水しぶきの写真、赤い価格表示、橙と青のボタンで、カタログ型の売り場を作っている。
colors:
  primary: '#E50180'
  secondary: '#74B1DA'
  background: '#FBFDFE'
  background-alt: '#FEFFFD'
  cta: '#E44B02'
  on-cta: '#FFFFFF'
  accent-1: '#1B4F9C'
  accent-2: '#E60012'
  accent-3: '#FAF415'
  tint-1: '#FEF6B9'
  tint-2: '#D8EEF9'
  dark-section: '#200D05'
  surface: '#F4EDDB'
  text-body: '#333333'
  cta-accessible: '#D24502'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 36px
    fontWeight: 900
    lineHeight: 1.2
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 900
    lineHeight: 1.4
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.7
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
rounded:
  sm: 3px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 20px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 44px
  button-secondary:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 40px
  section-frame:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading-underline:
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 32px
  number-badge:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 22px
  price-block:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-2}'
    typography: '{typography.accent}'
    height: 60px
  purchase-row:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 56px
  toc-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-sm}'
    height: 200px
  dark-product-box:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.headline-lg}'
---

# DESIGN.md — マゼンタ×水色枠の夏の飲料通販特集 LP（Retail Catalog Summer Beverage Campaign LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: 情報量多め・訴求型、清潔・爽やか、ポップ・元気
- **キーワード**: 夏の特集・色枠ブロック・氷と水しぶき・赤い大きな価格・通販カタログ・目次カード
- **地の質感**: ベタ塗りの色枠に、氷や結露の写真、光沢グラデーションのボタンを重ねる。少し前の EC らしい立体的な質感。
- **形**: 角が立った長方形の枠が基本。ボタンと吹き出しだけ角を 3〜4px 丸める。番号は円形バッジ。
- **温度感**: 冷たい青と水色が地。マゼンタ・赤・橙の暖色で売り込む。全体は涼しさと元気さを兼ねる。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#E50180` | 冒頭の目次枠と見出しのマゼンタ | 5% | 画素の実測 |
| `secondary` | `#74B1DA` | 商品セクションを囲む水色の太枠 | 6% | 画素の実測 |
| `background` | `#FBFDFE` | セクション内側の白地 | 26% | 画素の実測 |
| `background-alt` | `#FEFFFD` | セクションの間に見えるページ地のグレー | 4% | 画素の実測 |
| `cta` | `#E44B02` | 購入ボタンのオレンジ赤 | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#1B4F9C` | 「詳しく見る」系サブボタンの青 | 2% | 推定 |
| `accent-2` | `#E60012` | 価格と強調に使う赤 | 1% | 推定 |
| `accent-3` | `#FAF415` | 大見出しに使う黄色 | 1% | 画素の実測 |
| `tint-1` | `#FEF6B9` | 購入行の淡い黄色の帯 | 6% | 画素の実測 |
| `tint-2` | `#D8EEF9` | 補足ボックスの淡い水色 | 6% | 画素の実測 |
| `dark-section` | `#200D05` | 高級感を出す焦げ茶の商品セクション | 6% | 画素の実測 |
| `surface` | `#F4EDDB` | デザート特集の生成り地 | 5% | 画素の実測 |
| `text-body` | `#333333` | 本文のダークグレー | 2% | 推定 |
| `cta-accessible` | `#D24502` | AA を満たす補正値（計算） |  | 計算 |

- 商品カテゴリごとに太い色枠（マゼンタ、水色）で囲み、枠の色で区切りを示す。
- 枠の内側は白地を基本にする。購入行だけ淡い黄色の帯にする。
- 価格は必ず赤の太字で、ほかの文字より一段大きくする。
- 購入ボタンはオレンジ赤、詳細や登録変更の導線は青。役割で色を分ける。
- 高価格帯の商品だけ焦げ茶地に金文字のセクションにして、格の違いを出す。
- 見出しのキーワードは一部だけマゼンタや赤に変えて目立たせる。
- `button-primary` は文字 `#FFFFFF` × 背景 `#E44B02` のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D24502`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 冒頭の特集タイトル（黄の太字＋縁取り） | 装飾・ディスプレイ | Dela Gothic One | 900 | 36px | 1.2 | 0em |
| `headline-lg` | 商品セクションのリード見出し（明朝） | 明朝 | Noto Serif JP | 500 | 22px | 1.35 | 0.02em |
| `headline-md` | 下線付きの小見出し、特集のポップな見出し | ゴシック | Noto Sans JP | 900 | 18px | 1.4 | 0em |
| `headline-sm` | 番号付きポイントの見出し、商品名 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0em |
| `body-md` | 商品説明の本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0em |
| `note` | 送料、注意書き、調理例の表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0em |
| `accent` | 価格の数字（赤の極太、白縁取り） | 欧文サンセリフ | Montserrat | 900 | 40px | 1 | -0.02em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.02em |

- リード見出しは明朝、売り込みの見出しは極太ゴシック。2 種類を使い分ける。
- 価格の数字は極太にし、「円」と「（税込）」は小さく添える。
- 見出しは 2 行に収め、キーワードだけ色を変える。
- 本文は 13px 前後で、1 段落 3〜5 行にする。
- ポップな特集見出しは赤・紫の文字に白い縁取りと影を付ける。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品比較は 2 列、商品一覧は 2〜3 列のグリッドにする
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 20px、基本単位 8px、カード内 12px（375px 幅換算）
- セクション全体を 8〜10px の色枠で囲み、枠と枠の間にグレーの隙間を 16〜20px 空ける。
- セクションの中は、見出し → 写真とリード → 番号付きポイント → 価格表 → 購入行の順に並べる。
- 購入行は左にラベル、右にボタンを置く横並び。SP では縦に積む。
- 価格表は白い枠のカードに罫線で区切り、数量ごとの価格を並べる。
- 冒頭は特集の目次として、各商品カードとサブボタンをタイル状に並べる。

## Elevation & Depth

- ボタンは上が明るく下が暗い光沢グラデーションにし、下に 1〜2px の影を付ける。
- 価格の数字には白縁取りと淡いドロップシャドウを付ける。
- カードは影を付けず、1px のグレー線で区切る。

## Shapes

- **角丸**: 小 3px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 商品写真は角版か切り抜き。氷や水しぶきの写真は見出しの背景に敷く
- **セクション境界**: 直線。色の太枠とグレーの隙間で区切る
- ボタンは角を少しだけ丸めた横長の長方形。左端に三角矢印を付ける。
- 番号は黄色い円形バッジに数字を入れる。
- 「イチオシ」などのバッジは橙の円形や星形。
- 1 本あたりの価格は赤い吹き出しで示す。

## Components

- **購入ボタン**（`button-primary`）: オレンジ赤の光沢グラデーション。左に三角矢印、白い太字。
- **詳細リンクボタン**（`button-secondary`）: 青の光沢ボタン。黄色の三角矢印と白文字。詳細ページや登録変更への導線に使う。
- **色枠セクション**（`section-frame`）: 8〜10px の水色またはマゼンタの太枠で、白地の商品ブロックを囲む。
- **下線付き小見出し**（`heading-underline`）: 極太ゴシック。キーワードはマゼンタで、下にマゼンタの細線を引く。
- **番号付きポイント**（`number-badge`）: 黄色の丸い番号の横に、青の太字見出しと説明文を置く。
- **価格表示**（`price-block`）: 赤の極太数字に（税込）を小さく添える。数量の違いは罫線で区切って並べる。
- **購入行の帯**（`purchase-row`）: 淡い黄色の帯。左に対象者のラベルと矢印、右に購入ボタンを 2 つ並べる。
- **目次商品カード**（`toc-card`）: マゼンタ枠の中に白いカードを並べる。商品写真、短い説明、青ボタンで構成する。
- **焦げ茶の商品セクション**（`dark-product-box`）: 焦げ茶地に金色の明朝タイトルを置き、中に白い価格比較の表を入れる。

## Do's and Don'ts

**Do**
- 商品ブロックはすべて太い色枠で囲み、カタログのような区切りにする。
- 見出しの背景には氷・結露・水しぶきの写真を使い、涼しさを出す。
- どの商品ブロックも最後は価格と購入ボタンで締める。
- 価格は赤の極太数字で、税込表記を必ず添える。
- 購入はオレンジ赤、詳細は青と、ボタンの色を役割で揃える。

**Don't**
- 淡いパステルだけでまとめない。マゼンタ・赤・橙の強い色を残す。
- 価格を小さく、または黒で書かない。
- ボタンをフラットなピル型にしない。光沢のある角版にする。
- セクションの間に色枠もグレーの隙間も置かず、区切りを曖昧にしない。
- 余白を広く取りすぎて、情報の密度を下げない。

## Page Structure

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

1. **ファーストビュー兼目次**（特集のテーマを伝え、各商品へ誘導する）: マゼンタ地に黄の極太タイトルと白のサブコピー。下に商品カードを 3 枚＋2 枚のタイル状に並べ、それぞれに青ボタンを付ける。
2. **主力商品の紹介**（商品の魅力を写真と短い文で伝える）: 水色枠の中で、氷の写真を敷いた明朝の 2 行見出しを置く。マシンとグラスの写真を左、リード文を右に置く。
3. **特長（番号付き）**（選ぶ理由を 3 つに絞って示す）: 下線付き小見出しの下に、黄色の番号バッジ、太字見出し、説明文を 3 組並べる。
4. **価格と購入**（その場で購入させる）: 商品写真と数量別の赤い価格表を置き、淡い黄色の購入行にオレンジ赤のボタンを 2 つ並べる。
5. **定期便の利用者向け導線**（既存の会員を変更・追加の手続きへ誘導する）: 青ボタンと注釈ボックスを置き、手順を小さな文字で添える。
6. **使い方の手順**（おいしい作り方を見せて使う場面を想像させる）: 4 つの手順写真を横に並べ、丸数字と短い説明文を付ける。
7. **高価格帯の商品比較**（まとめ買いや定期便を提案する）: 焦げ茶地に金の明朝タイトル。中の白い 2 列表で種類を比べ、緑と橙の申込ボタンを置く。
8. **関連商品の特集**（食品・デザートでまとめ買いを促す）: 黄や生成りの地に、赤や紫の縁取り付き極太見出し。料理写真、説明文、社員の体験談、価格と購入ボタンを並べる。

## Imagery

- 冷えたグラスや氷、結露の写真を寄りで撮る。背景は明るい水色か白。
- 見出しの背景には、氷や水しぶきの写真を淡くトリミングして敷く。
- 商品パッケージは白背景の切り抜きで、カードや価格の横に置く。
- 料理やデザートは真上か斜め上から撮り、湯気やツヤを見せる。「調理例」と表記する。
- 体験談には社員の人物写真を角版で添え、名前と肩書きを入れる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- 元は PC 760px 幅の固定レイアウト。SP では色枠を 4〜6px に細くし、1 カラムで組む。
- 目次カードは、SP では 2 列または 1 列に並べ替える。
- 購入行の左ラベルと右ボタンは、SP では縦に積み、ボタンを全幅にする。
- 3 列の商品グリッドは、SP では 2 列にする。
- 写真の横に文を置く組み方は、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-44af6523`（元 LP の URL から採番）
- **元 LP**: https://rdlp.jp/archives/otherdesign/lp/4501
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-18、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。