---
version: alpha
name: Sweet Potato Yellow-to-Purple Seasonal Donut LP
description: 秋限定の焼き菓子を紹介する LP。地色は黄色のグラデーションで、下に行くほど紫いも色へ移る。ロゴ見出しは手描き風の丸い紫文字。商品は切り抜き写真で、クリーム色の大きな角丸パネルに縦に並べる。ボタンは白いピル型で、静かな詳細リンクにしている。
colors:
  primary: '#B53190'
  background: '#FDEE9B'
  background-alt: '#FFE151'
  surface: '#FFFCD7'
  dark-section: '#933A66'
  on-cta: '#FFFEFE'
  cta: '#602532'
  text: '#2B2420'
  accent-1: '#FAC424'
  line: '#EFDB9E'
  accent-2: '#C58B7E'
  primary-accessible: '#AD2F8A'
  dark-section-accessible: '#D28DAF'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.1em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.08em
  accent:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.05em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
rounded:
  sm: 6px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  hero-visual:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 470px
  notice-box:
    backgroundColor: '{colors.on-cta}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 85px
  slash-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 30px
  logo-heading:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 60px
  product-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 3500px
  price-block:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 45px
  button-pill:
    backgroundColor: '{colors.on-cta}'
    textColor: '{colors.cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  video-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    rounded: '{rounded.lg}'
    height: 340px
  footer-links:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 44px
---

# DESIGN.md — 黄から紫へ移る秋の芋スイーツ限定 LP（Sweet Potato Yellow-to-Purple Seasonal Donut LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、親しみ・手作り感
- **キーワード**: 秋限定・紫いも・黄色グラデーション・切り抜き写真・手描き風ロゴ・クリーム色パネル
- **地の質感**: 水彩のようににじむ黄の面に、うっすら大きな丸い色斑を重ねる。紙のような柔らかい質感。
- **形**: 大きな角丸パネルと白いピル型ボタン。芋や落ち葉のフラットなイラストを散らす。
- **温度感**: 暖色寄りで、ほっこり甘い秋の温度感。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#B53190` | ロゴ・大見出しの紫いも色 | 2% | 画素の実測 |
| `background` | `#FDEE9B` | ページ上部の淡い黄色地 | 25% | 画素の主要色に補正 |
| `background-alt` | `#FFE151` | 中盤の濃い黄色グラデーション地 | 18% | 画素の実測 |
| `surface` | `#FFFCD7` | 商品パネルのクリーム色 | 34% | 画素の実測 |
| `dark-section` | `#933A66` | 下部の紫いも色地 | 9% | 画素の実測 |
| `on-cta` | `#FFFEFE` | 白いピルボタン・注意書きボックス | 6% | 画素の実測 |
| `cta` | `#602532` | ボタン文字と矢印のこげ茶 | 1% | 画素の主要色に補正 |
| `text` | `#2B2420` | 本文・商品名の黒茶 | 2% | 推定 |
| `accent-1` | `#FAC424` | 落ち葉・芋の断面のオレンジ黄 | 4% | 画素の実測 |
| `line` | `#EFDB9E` | パネル内の点線区切り | 0% | 画素の主要色に補正 |
| `accent-2` | `#C58B7E` | 黄から紫へ移る中間の焼き芋色 | 4% | 画素の実測 |
| `primary-accessible` | `#AD2F8A` | AA を満たす補正値（計算） |  | 計算 |
| `dark-section-accessible` | `#D28DAF` | AA を満たす補正値（計算） |  | 計算 |

- 地色は上から淡黄→濃黄→焼き色→紫へ縦グラデーションでつなぐ。
- コンテンツはクリーム色の角丸パネルに載せ、地のグラデーションから浮かせる。
- 紫はロゴ見出しとイラストだけに使い、本文には使わない。
- ボタンは白地にこげ茶の文字。目立つ色のボタンは作らない。
- ファーストビューは写真の背景に黄と紫のグラデーションを敷き、ページ全体の色の流れを先に見せる。
- `hero-visual` は文字 `#B53190` × 背景 `#FFE151` のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#AD2F8A`、4.55:1）を使う。
- `footer-links` は文字 `#602532` × 背景 `#933A66` のコントラスト比が 1.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#D28DAF`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ロゴ風の大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.3 | 0.05em |
| `headline-lg` | キャッチの見出し（スラッシュで挟む） | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.1em |
| `headline-md` | 商品名 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.1em |
| `body-md` | 本文・導入文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.0 | 0.08em |
| `accent` | 価格（ラベル＋数字） | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.05em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.05em |
| `label-button` | ピルボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 12px | 1.4 | 0.1em |

- 大見出しは画像化した手描き風の丸い紫文字にし、太く弾むような形にする。
- 本文は字間を広めにとり、行間は 2.0 前後でゆったり組む。
- 導入のコピーは中央揃えにし、短い行を積み重ねる。
- 商品名と価格は中央揃え、説明文は左揃え。
- 価格の数字はラベルより一回り大きくする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品は縦に 1 列で並べる
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
- 商品パネルは画面幅の約 88%。左右に地色が細く見えるようにする。
- 1 商品の並びは、写真→商品名→価格→点線→説明→注釈→ボタン。
- 商品と商品の間は 60px 前後あけ、区切り線は入れない。
- パネルの上部に、ロゴ見出しと点線区切りを置く。
- 末尾にはピルボタンを 3 つ縦に並べる。

## Elevation & Depth

- ピルボタンには薄い茶系の線と、ごく弱い影をつける。
- パネルには影をつけず、地色との差だけで浮かせる。
- 切り抜き写真には落ち影を付けず、そのまま浮かせる。

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 商品は背景を抜いた切り抜き。断面は小さな円形にし、右上に重ねる
- **セクション境界**: 直線の境目は作らず、背景のグラデーションで連続させる
- パネルは大きめの角丸（20px 前後）。
- ボタンは完全なピル型にし、右端に細い山形の矢印を置く。
- 注意書きのボックスは白地に小さい角丸と細い枠線。

## Components

- **ファーストビューの合成ビジュアル**（`hero-visual`）: グラデーション背景にロゴ見出しと商品の切り抜き 5 点を散らし、手書きの商品名ラベルを添える。
- **注意書きボックス**（`notice-box`）: 白い角丸の箱に、※の注釈を 4 行並べる。
- **スラッシュ挟み見出し**（`slash-heading`）: 短いキャッチの左右を斜線で挟み、その下にアプリ導線のバナーを置く。
- **紫の手描きロゴ見出し**（`logo-heading`）: セクションの大見出し。紫の丸い装飾文字に、小さな芋のアイコンを添える。
- **商品一覧パネル**（`product-panel`）: クリーム色の大きな角丸パネル。中に商品を縦に並べる。
- **価格表記**（`price-block`）: 持ち帰りと店内飲食の税込価格を 2 行で中央揃えにし、下に点線を引く。
- **詳細ピルボタン**（`button-pill`）: 白地のピル型。こげ茶の文字を中央に置き、右端に矢印を付ける。
- **動画パネル**（`video-panel`）: クリーム色の角丸パネルにロゴ見出し、点線、動画のタイトル、16:9 の埋め込みを並べる。
- **末尾リンクボタン群**（`footer-links`）: 紫の地に白いピルボタンを 3 つ縦に並べ、芋のイラストを添える。

## Do's and Don'ts

**Do**
- 地色は黄から紫へのグラデーションで物語のようにつなぐ。
- 商品写真は背景を抜いて大きく見せ、断面の円を添える。
- 紫いも・落ち葉・焼き芋のフラットなイラストを余白に散らす。
- 本文は字間と行間を広くとり、やさしい印象を保つ。
- 見出しには手描き風の丸い装飾文字を使う。

**Don't**
- 赤や緑など、秋の芋色から外れる強い色を使わない。
- ボタンを原色で塗りつぶさない。
- 商品写真を四角い枠で切り抜かない。
- パネルに強い影や太い枠線をつけない。
- 明朝体などの硬い書体を見出しに使わない。

## Page Structure

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

1. **ファーストビュー**（季節限定の新商品を一目で伝える）: 黄から紫へのグラデーションに、ロゴ見出しと商品の切り抜き 5 点を散らす。下に注釈を添える。
2. **注意事項**（販売条件を事前に知らせる）: 白い角丸ボックスに、※の注釈を 4 行並べる。
3. **注文導線**（ネット注文へ誘導する）: スラッシュで挟んだ見出しの下に、アイコン付きの白いバナーボタンを置く。
4. **導入コピー**（商品の世界観と期待感をつくる）: 中央揃えの短文を 3 段落に分け、下に芋と落ち葉のイラストを並べる。
5. **特長**（生地のこだわりを説明する）: 大きな切り抜き写真、紫のロゴ見出し、左揃えの本文の順に置く。
6. **ラインナップ紹介**（種類の豊富さを伝える）: 5 商品を集合写真のように配置し、2 行の紫見出しと本文を続ける。
7. **商品一覧**（各商品の価格と特徴を示す）: クリーム色のパネルに、写真・商品名・価格・説明・ボタンのセットを縦に繰り返す。
8. **動画**（CM で商品の情緒を補強する）: クリーム色のパネルにロゴ見出しと 16:9 の動画を置く。
9. **関連リンク**（栄養情報や他の商品へ回遊させる）: 紫の地に白いピルボタンを 3 つ並べ、イラストで締める。

## Imagery

- 商品は真上から少し斜めに撮り、背景を抜いた切り抜きにする。
- 断面の写真は小さな円形にし、白いフチを付けて右上に重ねる。
- イラストは紫いも・落ち葉・焼き芋の断面を、フラットな 2〜3 色で描く。
- ファーストビューでは商品を浮遊感のある配置にし、手書きのラベルを添える。
- 背景にはにじんだ大きな丸い色斑を薄く重ねる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC のファーストビューは横長にし、ロゴを左、商品を右に並べる。
- PC の特長セクションは写真と文章の 2 カラムにし、左右を交互に入れ替える。
- PC の商品一覧は、左に写真、右に商品名・価格・説明・ボタンを置く横並びにする。
- PC では導入コピーの左右にイラストを散らす。
- 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-2e689ca4`（元 LP の URL から採番）
- **元 LP**: https://www.misterdonut.jp/m_menu/new/260902_autumn_donut/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/11 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。