---
version: alpha
name: Japanese Pattern Seasonal Ice Cream LP
description: 深紅・紫・紺の地に麻の葉や結び紐の和柄をちりばめた、季節限定のアイスを紹介する縦長 LP。明朝の縦書きコピー、扇形に切り抜いた写真、雲形の面を組み合わせて、上品で華やかな和モダンにまとめている。
colors:
  primary: '#9B0216'
  secondary: '#6A2E6D'
  dark-section: '#092B45'
  accent-1: '#B3444B'
  background: '#FFFFFF'
  background-alt: '#E4DED0'
  cta: '#BB844B'
  on-cta: '#FEF9E9'
  accent-2: '#DAAF85'
  accent-3: '#1D5B2C'
  text: '#3C201A'
  text-body: '#5F4F4B'
  tint-1: '#F2B4B9'
  on-dark: '#DFC4D6'
  cta-accessible: '#976939'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 500
    lineHeight: 2.3
    letterSpacing: 0.06em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
  accent:
    fontFamily: M PLUS Rounded 1c
    fontSize: 11px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.05em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.06em
rounded:
  sm: 4px
  md: 12px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 52px
  badge-limited:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 56px
  title-cartouche:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 110px
  card-framed:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 170px
  label-number-fan:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 64px
  heading-medallion:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.dark-section}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 130px
  review-cloud:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 260px
  pattern-medallion:
    rounded: '{rounded.full}'
    height: 110px
---

# DESIGN.md — 紅×紫×紺の和柄モダン季節限定アイス LP（Japanese Pattern Seasonal Ice Cream LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: 和風、上品・高級、やさしい・柔らかい
- **キーワード**: 和モダン・麻の葉文様・扇形・雲形・季節限定・明朝縦書き
- **地の質感**: 深紅や紫の地に細い線の和柄を同系色で重ね、布のような質感を出す。白い地には薄いざらつきがある。
- **形**: 扇形の写真枠、波打つ雲形の面、角を落とした和風の額縁、円形の和柄メダリオン。
- **温度感**: 暖色寄り。深紅と金茶に紫と紺を加え、落ち着いた華やかさを出す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#9B0216` | 麻の葉柄の深紅セクション地 | 14% | 画素の実測 |
| `secondary` | `#6A2E6D` | 紫の締めセクション地・限定バッジ | 13% | 画素の実測 |
| `dark-section` | `#092B45` | お客様の声の紺の雲形面 | 7% | 画素の実測 |
| `accent-1` | `#B3444B` | お客様の声の赤茶の雲形面 | 6% | 画素の実測 |
| `background` | `#FFFFFF` | 特長セクションの白地 | 19% | 画素の実測 |
| `background-alt` | `#E4DED0` | ファーストビューのグレージュ地 | 6% | 画素の主要色に補正 |
| `cta` | `#BB844B` | 金茶のピル型ボタン | 1% | 画素の実測 |
| `on-cta` | `#FEF9E9` | ボタンの文字 | 0% | 画素の実測 |
| `accent-2` | `#DAAF85` | 扇形ラベルの金色・和柄の金 | 3% | 画素の主要色に補正 |
| `accent-3` | `#1D5B2C` | 番号ラベルの深緑 | 1% | 画素の実測 |
| `text` | `#3C201A` | 見出しの焦げ茶 | 1% | 画素の実測 |
| `text-body` | `#5F4F4B` | 本文の濃茶 | 1% | 画素の実測 |
| `tint-1` | `#F2B4B9` | 声見出しのピンクの八角メダリオン | 1% | 画素の実測 |
| `on-dark` | `#DFC4D6` | 濃い地の上の文字（白・薄ピンク） | 0% | 画素の実測 |
| `cta-accessible` | `#976939` | AA を満たす補正値（計算） |  | 計算 |

- 地色はファーストビューの淡いグレージュから、深紅、白、紺・赤茶・紫の順に切り替えて場面を変える。
- 濃い地には必ず同系色で細線の和柄を薄く重ね、べた塗りにしない。
- 金茶（#A97A45〜#DAAF85）は CTA と番号ラベル・扇の縁取りに限定して使う。
- 装飾の和柄メダリオンは赤・紺・紫・金を混ぜ、地色とは違う色を置く。
- 白地の文字は焦げ茶にし、真っ黒は使わない。濃い地の文字は白か薄いピンクにする。
- `button-primary` は文字 `#FEF9E9` × 背景 `#BB844B` のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#976939`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの縦書きキャッチ（色は緑紫のグラデーション） | 明朝 | Shippori Mincho | 600 | 38px | 1.3 | 0.08em |
| `headline-lg` | 特長セクションの見出し | 明朝 | Shippori Mincho | 600 | 24px | 1.6 | 0.05em |
| `headline-sm` | 額縁カード内の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.05em |
| `body-lg` | 深紅の地のリード文（中央揃え） | ゴシック | Zen Kaku Gothic New | 500 | 15px | 2.3 | 0.06em |
| `body-md` | 特長の本文・お客様の声 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.9 | 0.04em |
| `note` | 注釈（＊付き） | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em |
| `accent` | 番号ラベルの見出しと大きな数字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 11px | 1.2 | 0.05em |
| `label-button` | CTA ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.2 | 0.06em |

- キャッチと特長見出しは明朝、本文はやわらかいゴシックに分ける。
- ファーストビューのキャッチは縦書きで 2〜3 行にし、右から左へ読ませる。
- リード文は短い行で改行し、中央揃えで行間を広め（2.2 以上）にとる。
- 特長の見出しは左揃えと右揃えを交互にして、紙面にリズムをつける。
- 注釈は本文の右下に小さく置き、＊で始める。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真と装飾は画面端からはみ出させる
- **本文ブロックの幅**: 画面幅の約 84%
- **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
- 本文は左右に約 30px の余白をとる。
- 扇形の写真は画面端まで寄せ、テキストブロックと交互に置く。
- 和柄メダリオンは画面端で半分切れるように置く。
- セクションの切り替えは波形や雲形で重ね、直線では区切らない。
- 商品のカップ画像はセクションの境目にまたがるように置く。

## Elevation & Depth

- 影はほぼ使わず、平面的に作る。
- 商品カップの画像にだけ、ごく薄い落ち影をつける。
- CTA ボタンには下側にわずかな影をつけて立体感を出す。

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 扇形・半円の窓に写真を切り抜き、金色の細い縁をつける
- **セクション境界**: 波打つ雲形や大きな曲線で前後のセクションを重ねる
- 額縁カードは角を内側に切り込んだ和風の形にし、二重線の枠をつける。
- 見出しラベルには八角形や扇形を使う。
- 限定バッジは紫の円の中に 2 行の白文字を置く。
- ボタンはピル型で、右端に矢印をつける。

## Components

- **金茶のピル型 CTA**（`button-primary`）: 紫の地に置く横長のボタン。白の太字に右向きの矢印を添える。
- **期間限定の丸バッジ**（`badge-limited`）: 紫の円の中に白文字を 2 行で置く。商品写真の右上に配置する。
- **商品名の和風額縁**（`title-cartouche`）: 雲の形をした白い額縁。上に小さな欧文の弧文字を載せ、枠線は緑と赤のグラデーションにする。
- **素材説明の額縁カード**（`card-framed`）: 深紅の地に浮かせる白いカード。二重線の和風の枠で囲み、右上に素材の円形写真を重ねる。
- **扇形の番号ラベル**（`label-number-fan`）: 深緑か金の扇形の中に、小さな見出しと大きな数字を置く。
- **お客様の声の八角見出し**（`heading-medallion`）: ピンクの八角形の中に金の細い円枠を入れ、和文と欧文の 2 段で見出しを組む。
- **雲形の声ブロック**（`review-cloud`）: 紺・赤茶・紫の雲形の面を重ね、それぞれに短い感想を薄いピンクの文字で載せる。
- **和柄メダリオン**（`pattern-medallion`）: 麻の葉・七宝・結び紐を円の中に描いた装飾。画面端で半分切れるように置く。

## Do's and Don'ts

**Do**
- 濃い地には必ず細線の和柄を同系色で敷く。
- 写真は扇形や半円の窓に入れ、金の縁取りをつける。
- セクションの境目は曲線にし、商品画像を境目にまたがせる。
- 本文は短い行で改行し、行間をたっぷりとる。
- 装飾の和柄メダリオンは画面端に置き、配色は 3〜4 色に絞る。

**Don't**
- 四角い写真を画面幅いっぱいに並べるだけにしない。
- 原色の赤や青のポップな配色にしない。
- 見出しを太いゴシックにしない。
- 強い影やグラデーションのボタンを多用しない。
- 和柄を濃く大きくして、文字が読みにくくならないようにする。

## Page Structure

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

1. **ファーストビュー**（季節感と商品の世界観を一目で伝える）: 木漏れ日の影が落ちるグレージュ地に、ドリンク写真と和柄の皿を置く。右側に明朝の縦書きキャッチ、左下に額縁の商品名、右に限定バッジを配置する。
2. **商品紹介リード**（味の魅力を短くまとめて伝える）: 麻の葉柄の深紅地に、白文字の 4 行のリードを中央揃えで置く。上に商品カップをまたがせる。
3. **素材の説明**（原料のこだわりを説明する）: 白い額縁カードに小見出しと本文を入れ、右上に素材の円形写真を重ねる。
4. **おいしさの秘密 1**（味わいの特長を伝える）: 扇形に切り抜いたアイスの写真に、緑の扇形の番号ラベルをつける。下に左揃えの明朝見出しと本文を置く。
5. **おいしさの秘密 2**（もう一つの素材のこだわりを伝える）: 金縁の扇形にミルクの写真を入れ、金の扇形の番号ラベルをつける。見出しと本文は右揃えにし、注釈を添える。
6. **お客様の声**（実際の感想で共感を得る）: 紺・赤茶・紫の雲形の面を重ね、ピンクの八角見出しと 2 件の感想を載せる。
7. **締めの CTA**（関連商品のページへ誘導し、シェアを促す）: 和柄の紫地に商品カップを大きく置き、その下に金茶のピル型ボタンと SNS の丸アイコン 3 つを並べる。

## Imagery

- 商品とドリンクは自然光で撮り、窓辺の葉の影を落としてやわらかく見せる。
- 九谷焼のような色鮮やかな和皿や茶葉など、産地を感じる小物を添える。
- ミルクが渦を巻く様子などのシズル写真は、暖かい茶色のトーンで寄りで撮る。
- 装飾は麻の葉・七宝・結び紐・菊などの和柄を細い線のベクターで描く。
- 商品カップは切り抜きにして、セクションの境目に浮かせる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC でも SP と同じ約 375〜430px 幅の 1 カラムを中央に置く。
- PC の左右の余白には、ファーストビューと同じ木漏れ日の写真と和柄メダリオンを広げて敷く。
- ファーストビューより下では、PC の左右の余白を白にする。
- 文字サイズと余白は 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-67752e8f`（元 LP の URL から採番）
- **元 LP**: https://www.haagen-dazs.co.jp/products/special/kaga-bo-hojicha-latte/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。