---
version: alpha
name: Spring Watercolor Fruit Sweets LP
description: 白地に桜色の水彩にじみと細い額縁線を重ねた、春らしく上品な季節限定の商品紹介LP。商品パッケージと果物の切り抜き写真を大きく浮かせ、明朝体の見出しと短い説明文で味ごとに紹介していく。
colors:
  background: '#FFFFFF'
  primary: '#ED8593'
  on-primary: '#FFF3F4'
  secondary: '#8D4999'
  text: '#2E2A2E'
  text-body: '#3E314B'
  tint-1: '#FEE5EB'
  tint-2: '#FEEDF5'
  line: '#928576'
  accent-1: '#1DA1F2'
  accent-2: '#FDA34C'
  accent-3: '#9AAD7D'
  primary-accessible: '#DA2039'
  accent-2-accessible: '#B15802'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.1
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.15em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.05em
  accent:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.05em
  label-button:
    fontFamily: Pacifico
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.1
rounded:
  sm: 2px
  md: 4px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 60px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  flavor-tag:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 30px
  badge-circle:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 110px
  feature-panel:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    height: 240px
  product-block:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-lg}'
    height: 560px
  sns-link:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 60px
  page-top:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 56px
  title-ribbon:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 30px
---

# DESIGN.md — 桜色水彩の春限定フルーツ菓子 LP（Spring Watercolor Fruit Sweets LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: かわいい、やさしい・柔らかい、ナチュラル、上品・高級
- **キーワード**: 春の季節感・水彩にじみ・額縁フレーム・果物の切り抜き・明朝見出し・余白多め
- **地の質感**: 白地にピンクの水彩にじみを置き、ところどころに線画の植物を添える。紙のように軽い質感。
- **形**: 細い二重の額縁線で全体を囲む。斜めに傾けたラベル札、円形バッジ、角を少し斜めに切った台形の色面。
- **温度感**: 暖かく柔らかい。桜色と果物の自然な色が主役。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FFFFFF` | ページの地色 | 45% | 画素の実測 |
| `primary` | `#ED8593` | 強調面（特長ボックスの桜ピンク） | 8% | 画素の実測 |
| `on-primary` | `#FFF3F4` | ピンク面上の白文字 | 1% | 画素の実測 |
| `secondary` | `#8D4999` | 円形バッジのぶどう紫 | 2% | 画素の実測 |
| `text` | `#2E2A2E` | 見出しの濃い墨色 | 1% | 推定 |
| `text-body` | `#3E314B` | 本文の濃いグレー | 2% | 画素の主要色に補正 |
| `tint-1` | `#FEE5EB` | 水彩にじみの淡いピンク | 10% | 画素の実測 |
| `tint-2` | `#FEEDF5` | 最も淡いピンクの地 | 5% | 画素の実測 |
| `line` | `#928576` | 額縁の細い線・ラベル枠 | 1% | 画素の主要色に補正 |
| `accent-1` | `#1DA1F2` | SNSアイコンの青 | 0% | 推定 |
| `accent-2` | `#FDA34C` | ページトップ丸ボタンの橙 | 0% | 画素の実測 |
| `accent-3` | `#9AAD7D` | ロゴ周りの若葉グリーン | 3% | 画素の主要色に補正 |
| `primary-accessible` | `#DA2039` | AA を満たす補正値（計算） |  | 計算 |
| `accent-2-accessible` | `#B15802` | AA を満たす補正値（計算） |  | 計算 |

- 地は白を基本にし、淡いピンクの水彩にじみを背景に不規則に散らす。
- 強い色の面は特長訴求の1ブロックだけにし、桜ピンクで塗る。
- 紫は円形バッジなどの小さな強調に使う。
- 見出しと本文は黒ではなく少し紫みのある濃いグレーにする。
- 果物の色は写真で出し、UIの色数は増やさない。
- 額縁線とラベル枠は細いグレーブラウン1色にする。
- `feature-panel` は文字 `#FFF3F4` × 背景 `#ED8593` のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DA2039`、4.56:1）を使う。
- `page-top` は文字 `#FFF3F4` × 背景 `#FDA34C` のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#B15802`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの季節の大文字（にじみ文字） | 明朝 | Shippori Mincho | 500 | 56px | 1.1 | 0em |
| `headline-lg` | 味ごとの商品名見出し | 明朝 | Shippori Mincho | 600 | 30px | 1.3 | 0.08em |
| `headline-md` | ピンク面の特長見出し | ゴシック | Zen Kaku Gothic New | 400 | 24px | 1.4 | 0.08em |
| `headline-sm` | SNS誘導の文言・タイトル上の小見出し | ゴシック | Zen Kaku Gothic New | 500 | 20px | 1.4 | 0.15em |
| `body-md` | 商品説明の本文 | 明朝 | Noto Serif JP | 400 | 12px | 2 | 0.05em |
| `accent` | 円形バッジ内の文言・ラベル札 | 明朝 | Noto Serif JP | 500 | 15px | 1.5 | 0.05em |
| `label-button` | ページトップの欧文手書き | 欧文スクリプト | Pacifico | 400 | 11px | 1.1 | 0em |

- 見出しと本文は明朝で統一し、上品さを出す。
- 商品名見出しは中央揃えで大きく、字間を少し空ける。
- 本文は小さめで行間を2.0前後に広く取る。
- ピンク面の中だけは細いゴシックの白文字にする。
- 太字や袋文字は使わない。
- 1段落は3〜4行に収める。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム（額縁線の内側）
- **本文ブロックの幅**: 画面幅の約 86%
- **余白**: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
- 画面の左右端から約12pxの位置に細い縦線を引き、額縁の中にすべてを収める。
- 商品写真 → 商品名見出し → 説明文の順を味ごとに繰り返す。
- 果物の切り抜き写真を額縁線からはみ出させ、端に浮かせる。
- 本文は左揃え、見出しは中央揃え。
- 特長ボックスは左右どちらかに寄せ、画面外まで伸ばす。

## Elevation & Depth

- 商品パッケージに柔らかく大きめのドロップシャドウを付けて浮かせる。
- 果物の切り抜きにも薄い影を付ける。
- ボックスやボタンには影を付けず、平面のままにする。

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
- **写真の切り抜き**: 商品と果物は背景を消して切り抜き、斜めに少し傾けて散らす。人物も背景なしの切り抜き。
- **セクション境界**: 区切り線は使わず、水彩にじみと余白で区切る。
- ラベル札は細い線の長方形を数度傾けて手作り感を出す。
- 強調バッジは正円にする。
- 特長ボックスは片側の角を斜めに切った変形四角にする。
- ページトップボタンは水彩風の丸にする。

## Components

- **額縁フレーム線**（`frame-border`）: ページ全体を囲む細い二重線。上部に飾りタイトル帯を重ねる。
- **傾いたラベル札**（`flavor-tag`）: 白地に細枠、明朝の味名を入れ、少し傾けて商品の下に並べる。
- **円形強調バッジ**（`badge-circle`）: 紫の正円に白い明朝2行。周りに手書きの集中線を添える。
- **特長ボックス**（`feature-panel`）: 桜ピンクの変形四角に白文字の見出しと説明文を入れる。
- **味別紹介ブロック**（`product-block`）: 影付き商品写真＋果物切り抜き、その下に中央の明朝見出しと左揃え本文。
- **SNS誘導**（`sns-link`）: 四角いSNSアイコンの右に、字間を広げた2行のゴシック文言。
- **ページトップボタン**（`page-top`）: 右下に固定する水彩風の橙の丸。欧文手書きの白文字。
- **タイトル上の小見出し帯**（`title-ribbon`）: 額縁上辺に重ねた白抜き帯に、小さなゴシックと飾り記号。

## Do's and Don'ts

**Do**
- 白地と淡いピンクの水彩にじみで、春の柔らかい空気を作る。
- 商品と果物は切り抜いて影を付け、画面の端からはみ出させる。
- 見出しは明朝で、味ごとに同じ型を繰り返す。
- 濃い色の面は1か所に絞る。
- 桜の枝や線画の葉など、小さな季節の装飾を四隅に置く。

**Don't**
- 原色の太い帯や大きな購入ボタンで騒がしくしない。
- 角丸の大きいカードを並べない。
- 太いゴシックや袋文字の見出しにしない。
- 背景をベタ塗りのピンクで埋めない。
- 果物写真を四角い枠のまま置かない。

## Page Structure

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

1. **ファーストビュー**（季節限定の新商品であることを伝える）: 額縁上辺に小見出し帯、水彩の季節文字と商品ロゴ、手書き風の吹き出しを重ねる。
2. **ラインナップ一覧**（味の種類をひと目で見せる）: パッケージ3つを少し重ねて並べ、下に傾けたラベル札を置く。
3. **商品紹介（1つめの味）**（味の特徴を説明する）: 大きな商品写真と果物の切り抜き、中央の明朝見出し、左揃えの本文。
4. **特長訴求**（改良点を印象づける）: 人物の切り抜きと紫の円形バッジ、その下にピンクの変形ボックスで見出しと説明。
5. **商品紹介（2つめの味）**（別の味を同じ型で紹介する）: 商品写真の左右に果物を散らし、見出しと本文を繰り返す。
6. **商品紹介（3つめの味）**（最後の味を紹介する）: 同じ型。背景に水彩ピンクのにじみを置く。
7. **SNS誘導**（公式アカウントへ誘導する）: SNSアイコンと2行の文言を横に並べる。
8. **フッター**（ページを締めて先頭へ戻す）: 果物の切り抜きを下端に寄せ、右下に丸いページトップボタンを置く。

## Imagery

- 果物は丸ごとと断面の両方を白背景で撮り、きれいに切り抜く。
- 果汁でみずみずしく、彩度は高めで明るく仕上げる。
- 人物は白い服で明るい笑顔、指さしポーズの切り抜き。
- 背景には桜色の水彩にじみ、桜の花びら、線画の葉やつるを添える。
- 小さな果物片や丸い粒を周りに散らしてリズムを作る。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央固定幅の額縁内で、商品写真と説明文を左右交互に並べる。
- PCではタイトルとラインナップを横長にまとめ、吹き出しを右に置く。
- PCの見出しは左揃え、SPは中央揃え。
- 果物の切り抜きはPCでは額縁の外側に大きく散らす。
- SNS誘導はPCでは1行に横並びにする。

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