---
version: alpha
name: Warm Rose Bokeh Seasonal Dessert LP
description: くすんだローズピンクの地に、玉ボケの光を散らしたコンビニ季節スイーツの新商品LP。中央にはクリームからオレンジへのグラデーションのパネルを置き、こげ茶の丸ゴシックと唐草飾りで素材の魅力を語る。CTAは黄色地のピル型ボタンで、末尾には関連商品のバナーを縦に並べる。
colors:
  primary: '#DD6679'
  background: '#FFFADD'
  background-alt: '#FDBE8D'
  secondary: '#FEF29C'
  cta: '#FEED94'
  on-cta: '#240500'
  text: '#4A2418'
  accent-1: '#77402F'
  on-dark: '#FFFAFA'
  surface: '#FEFDFD'
  accent-2: '#D35E78'
  dark-section: '#370F11'
  tint-1: '#FFFADD'
typography:
  display:
    fontFamily: M PLUS Rounded 1c
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.2
  headline-lg:
    fontFamily: Zen Maru Gothic
    fontSize: 24px
    fontWeight: 700
    lineHeight: 2.0
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Zen Maru Gothic
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.9
    letterSpacing: 0.05em
  accent:
    fontFamily: Klee One
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 18px
    fontWeight: 900
    lineHeight: 1.3
  label-button:
    fontFamily: Zen Maru Gothic
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  sm: 4px
  md: 10px
  lg: 200px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 50px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 40px
  button-secondary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    rounded: '{rounded.full}'
    height: 30px
  release-band:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 44px
  concept-panel:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 1500px
  ornament-divider:
    textColor: '{colors.accent-1}'
    height: 30px
  ingredient-circle:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 340px
  price-tag:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 70px
  related-banner:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 180px
---

# DESIGN.md — ローズピンク×クリーム色の季節スイーツLP（Warm Rose Bokeh Seasonal Dessert LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、やさしい・柔らかい、親しみ・手作り感
- **キーワード**: ローズピンク・玉ボケ・クリーム色グラデ・円形の素材写真・こげ茶文字・季節限定
- **地の質感**: ピンク地に白や黄の玉ボケを散らした、暖かい光の質感
- **形**: 円形の写真フレーム、縁がギザギザの紙風パネル、ピル型ボタン
- **温度感**: 暖色。秋らしい甘く温かい雰囲気

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#DD6679` | ページ地のローズピンク | 35% | 画素の実測 |
| `background` | `#FFFADD` | 紹介パネルのクリーム色 | 12% | 画素の実測 |
| `background-alt` | `#FDBE8D` | パネル下部の淡いオレンジ | 8% | 画素の主要色に補正 |
| `secondary` | `#FEF29C` | 発売日帯の黄色 | 4% | 画素の実測 |
| `cta` | `#FEED94` | 店舗検索ボタンの黄色 | 1% | 画素の主要色に補正 |
| `on-cta` | `#240500` | ボタン文字のこげ茶 | 0% | 画素の実測 |
| `text` | `#4A2418` | 見出しと本文のこげ茶 | 2% | 推定 |
| `accent-1` | `#77402F` | 唐草飾りと×印のこげ茶 | 0% | 画素の主要色に補正 |
| `on-dark` | `#FFFAFA` | ピンク地の手書き風白文字 | 1% | 画素の実測 |
| `surface` | `#FEFDFD` | サブボタンの白 | 1% | 画素の実測 |
| `accent-2` | `#D35E78` | 注記帯の濃いローズ | 5% | 画素の実測 |
| `dark-section` | `#370F11` | 関連商品バナーの濃いブラウン | 5% | 画素の主要色に補正 |
| `tint-1` | `#FFFADD` | 円形フレームの淡いクリーム | 6% | 画素の実測 |

- ページ地はローズピンクで統一し、白と黄色の玉ボケを重ねる
- 中央の紹介パネルは、上がクリーム色、下が淡いオレンジの縦グラデーションにする
- 文字は黒を避けてこげ茶にする。ピンク地の上だけ白文字にする
- 黄色は発売日帯とCTAだけに使い、目線を集める
- 末尾の関連商品バナーは、商品ごとに背景色を変えた写真帯にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの商品名ロゴ（白フチ付き） | 丸ゴシック | M PLUS Rounded 1c | 900 | 34px | 1.2 | 0.0em |
| `headline-lg` | パネル内のコンセプト文 | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 2.0 | 0.05em |
| `headline-md` | 円形写真の上の素材説明 | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.9 | 0.05em |
| `accent` | ピンク地の弧状に並ぶ手書き風メッセージ | 手書き・筆 | Klee One | 600 | 22px | 1.6 | 0.05em |
| `headline-sm` | 発売日帯と価格表示 | ゴシック | Zen Kaku Gothic New | 900 | 18px | 1.3 | 0.0em |
| `label-button` | CTAボタンの文字 | 丸ゴシック | Zen Maru Gothic | 700 | 19px | 1.2 | 0.05em |
| `note` | 税と取扱いに関する注記 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em |

- 見出しも本文も丸ゴシックで柔らかくそろえる
- コンセプト文は短い句で改行し、中央揃えでゆったり見せる
- 価格は数字を大きく、単位や税区分を小さくして差をつける
- 関連商品名は白文字に濃い色のフチを付け、写真の上で読めるようにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、中央揃え
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 50px、基本単位 8px、カード内 24px（375px 幅換算）
- 紹介パネルは左右に約4%の余白を空けて置く
- 素材写真の円形フレームは2つを縦に並べ、間を×印でつなぐ
- CTAはメイン商品写真の下部に重ねる
- 関連商品は全幅のバナーを縦に積む

## Elevation & Depth

- 影はほぼ使わず、写真と玉ボケで奥行きを出す
- CTAボタンにはこげ茶の細い枠線を付ける

## Shapes

- **角丸**: 小 4px ／ 中 10px ／ 大 200px。ボタンはピル型。
- **写真の切り抜き**: 主役商品は切り抜き写真。素材は大きな円形に収める
- **セクション境界**: パネルの縁を細かいギザギザにする。他は直線で切り替える
- 円形フレームは画面幅の約85%の大きさにする
- 唐草飾りはパネル文の上下に左右対称で置く

## Components

- **店舗検索ボタン**（`button-primary`）: 黄色地にこげ茶の枠線。左に丸い矢印アイコン、右に店舗アイコンを置く
- **情報リンクボタン**（`button-secondary`）: 白地のピル型。左に黒丸の矢印アイコンを置く
- **発売日帯**（`release-band`）: 全幅の黄色帯に、太字で日付を中央に置く
- **グラデ紹介パネル**（`concept-panel`）: クリームからオレンジへのグラデーション地。縁はギザギザで、玉ボケを散らす
- **唐草飾り罫**（`ornament-divider`）: こげ茶の渦巻き模様の横罫。文の上下に置く
- **素材の円形カード**（`ingredient-circle`）: 淡いクリーム色の円。上に説明文、下に素材写真をはみ出し気味に置く
- **価格表示**（`price-tag`）: 白フチ付きの大きな数字。税込価格は丸括弧で囲む
- **関連商品バナー**（`related-banner`）: 商品ごとに背景色を変えた全幅写真に、フチ付きの商品名を重ねる

## Do's and Don'ts

**Do**
- 地はローズピンクにし、玉ボケで温かみを出す
- 素材は円形フレームで見せ、×印で組み合わせを表す
- 文字はこげ茶の丸ゴシックで統一する
- CTAは黄色にして、ピンク地の上で目立たせる

**Don't**
- 純黒や寒色を使わない
- 角張った硬いゴシックで見出しを組まない
- 黄色を装飾に乱用しない
- パネル内の文字を詰め込みすぎない

## Page Structure

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

1. **ファーストビュー**（商品名・ビジュアル・価格を一目で伝える）: 玉ボケのピンク地に切り抜き商品写真を置く。上にフチ付きの商品名、右に縦書きのキャッチと価格を配置する
2. **発売日**（いつ発売かを伝える）: 全幅の黄色帯に太字の日付を置く
3. **コンセプト**（商品の成り立ちを伝える）: グラデーションのパネルに中央揃えの短文を置き、唐草飾りで上下を挟む
4. **素材紹介**（2つの素材のこだわりを伝える）: 円形カード2枚を×印でつないで縦に並べる
5. **来店訴求とCTA**（購入行動へ誘導する）: 弧状の手書き風白文字、大きな商品写真、黄色ボタン、白いサブボタンの順に置く
6. **注記**（税や取扱い条件を示す）: 濃いローズ地に白い小さな文字で並べる
7. **関連商品**（他商品へ回遊させる）: 黄色の見出し帯の下に全幅バナーを3本積む

## Imagery

- スイーツは白背景で撮って切り抜き、断面や層が見える角度で見せる
- 素材は割った断面をクローズアップし、蜜の照りを強調する
- 背景には白・黄・ピンクの玉ボケを散らす
- 関連商品は、布のドレープやカーテンなど劇的な背景の上で撮る
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に約1000px幅で置き、背景のピンクを全幅に広げる
- PC の FV は商品写真の両脇に素材写真を置き、商品名を左下に配置する
- PC では素材の円形カード2枚を×印を挟んで横に並べる
- PC では関連商品バナーを3列に並べる

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