---
version: alpha
name: Navy and Cream Patisserie Product LP
description: 生成りの地に深い紺のグラデ帯と焦げ茶を合わせ、ケーキの切り抜き写真を大きく見せるスイーツ新商品LPです。欧文の幾何学サンセリフ見出しに日本語の小見出しを添え、細線の枠で上品にまとめています。
colors:
  primary: '#112973'
  dark-section: '#021C56'
  background: '#FEFBF2'
  surface: '#FEFDF9'
  secondary: '#49221A'
  text: '#150D08'
  on-dark: '#FCFEFE'
  background-alt: '#F3EBDB'
  tint-1: '#E5E5E4'
  cta: '#162F81'
  on-cta: '#ECFAFF'
  line: '#231815'
typography:
  display:
    fontFamily: Josefin Sans
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.04em
  accent:
    fontFamily: Josefin Sans
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.04em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  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}'
  section-band-heading:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 200px
  outlined-intro-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 240px
  product-panel:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 700px
  cross-section-diagram:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 300px
  size-chip:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 24px
  price-underline:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 32px
  release-badge:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 64px
  allergy-table:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 330px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 56px
---

# DESIGN.md — 紺×生成りの上品なアイスケーキ新商品LP（Navy and Cream Patisserie Product LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、信頼・誠実、シンプル・ミニマル
- **キーワード**: 紺グラデ・生成り地・切り抜きケーキ写真・断面図の引き出し線・欧文見出し・細線枠
- **地の質感**: フラットな単色面と、紺の斜めグラデーション。紙のような生成りの地。
- **形**: 四角を基本に細い黒線の枠。ボタンだけピル型、表と見出し帯は小さい角丸。
- **温度感**: 落ち着いた冷色の紺に、暖色のケーキと焦げ茶を合わせた中間の温度感。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#112973` | ブランド紺（セクション帯・商品パネル） | 22% | 画素の実測 |
| `dark-section` | `#021C56` | グラデーションの濃い側の紺 | 10% | 画素の実測 |
| `background` | `#FEFBF2` | 生成りのページ地 | 40% | 画素の実測 |
| `surface` | `#FEFDF9` | 表のセル・白面 | 6% | 画素の実測 |
| `secondary` | `#49221A` | 焦げ茶の商品名帯 | 4% | 画素の実測 |
| `text` | `#150D08` | 見出し・本文の濃い焦げ茶黒 | 3% | 画素の実測 |
| `on-dark` | `#FCFEFE` | 紺の上の白文字 | 2% | 画素の実測 |
| `background-alt` | `#F3EBDB` | サイズ表記のベージュ帯 | 1% | 画素の実測 |
| `tint-1` | `#E5E5E4` | サイズ表記のグレー帯 | 1% | 画素の実測 |
| `cta` | `#162F81` | ピル型ボタン | 1% | 画素の実測 |
| `on-cta` | `#ECFAFF` | ボタン文字 | 0% | 画素の実測 |
| `line` | `#231815` | 枠線・表罫線・価格下線 | 1% | 推定 |

- 地は生成りで統一し、純白は表セルなど小さい面だけに使う。
- セクション見出しの帯と商品説明パネルは、左上が明るく右下が濃い紺の斜めグラデーションにする。
- 焦げ茶はアレルギー表の商品名帯だけに使い、チョコの色とつなげる。
- 表で該当する項目は紺で塗って白抜きにし、強調色を増やさない。
- ボタンはすべて紺のピル型で白文字にする。赤やオレンジは使わない。
- サイズ表記の帯は淡いベージュかグレーにして控えめにする。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの英字見出し | 欧文サンセリフ | Josefin Sans | 700 | 30px | 1.2 | 0.02em |
| `headline-lg` | 商品名の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.3 | 0.08em |
| `headline-sm` | 英字見出し下の日本語サブ見出し、ベースフレーバー名 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.4 | 0.08em |
| `body-md` | 商品説明・枠内の本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.8 | 0.04em |
| `accent` | 価格表記 | 欧文サンセリフ | Josefin Sans | 700 | 20px | 1.2 | 0.03em |
| `note` | ※注釈・断面図のラベル | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.04em |
| `label-button` | ピル型ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.3 | 0.05em |

- 英字見出しの下に短い横線を入れ、日本語の小見出しを添える 3 段構成にする。
- 商品名は数字と名前を太いゴシックで書き、小さなルビを添える。
- 価格は欧文の太字にして、下に細い下線を長く引く。
- 本文は字間を少し広げ、行間 1.8 前後でゆったり組む。
- 枠内の本文は中央揃え、説明パネルの本文は左揃えにする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。アレルギー表は 4 列のグリッド
- **本文ブロックの幅**: 画面幅の約 89%
- **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
- 紺の帯セクション（英字見出しのみ）は全幅で高さ約200px。
- 商品写真は紺パネルから上にはみ出させ、パネルは左右20px内側に置く。
- 商品ブロックは商品名、サイズ帯、価格、写真、説明、断面図、注釈の順に並べる。
- ABOUT と HOW TO は細線の四角枠で囲み、英字見出しを上の線にまたがせる。
- 注釈は各ブロックの直後に左揃えで小さく置く。

## Elevation & Depth

- 基本はフラットで影を使わない。
- 切り抜きのケーキ写真だけ、右下に柔らかい落ち影を付けて紺パネルから浮かせる。
- 動画の埋め込みには小さい角丸を付けるだけにする。

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
- **写真の切り抜き**: ケーキは背景を抜いて斜め俯瞰で見せる。断面は正面から写した四角い切り抜きにする。
- **セクション境界**: 直線で切り替える。紺帯と生成り地が水平に接する。
- 枠線は1px程度の黒の細線。
- 見出し帯と表は小さい角丸で囲む。
- ボタンは完全なピル型で、右端に細い山括弧を付ける。
- 点線と見出しを組み合わせた区切りを予約エリアに使う。

## Components

- **紺グラデの英字見出し帯**（`section-band-heading`）: 全幅の紺グラデ帯。中央に白い英字見出し、短い横線、日本語サブ見出しを置く。
- **細線枠の説明ボックス**（`outlined-intro-box`）: 黒い細線の四角枠。上辺に英字見出しをまたがせ、中央揃えの本文を入れる。
- **紺の商品パネル**（`product-panel`）: 切り抜きケーキを上にはみ出させ、白文字の説明と断面図を載せる紺グラデのパネル。
- **断面図と引き出し線**（`cross-section-diagram`）: 断面写真の右側に白い細線で層の名前を並べる。
- **サイズ表記帯**（`size-chip`）: 縦×横×高さを淡い帯に入れ、中央に置く。
- **価格と下線**（`price-underline`）: 写真の左上に太い欧文の価格を置き、細い下線を右へ伸ばす。
- **発売日の丸バッジ**（`release-badge`）: 紺の円に白文字で日付と発売を入れ、価格の横に置く。
- **アレルギー表**（`allergy-table`）: 上に焦げ茶の商品名帯を置き、4 列の罫線表を続ける。該当項目のセルは紺塗りの白文字にする。
- **ピル型の紺ボタン**（`button-primary`）: 紺のピル型で白文字、右端に山括弧を付ける。予約ボタンは左に白丸アイコンを入れる。

## Do's and Don'ts

**Do**
- 生成りの地と紺グラデの帯を交互に並べ、リズムを作る。
- 商品写真は大きな切り抜きにして、パネルから上にはみ出させる。
- 見出しは英字、短い線、日本語の順で統一する。
- 商品ごとにまったく同じ構成を繰り返す。
- 注釈は※付きの小さい文字で各ブロックの直後に置く。

**Don't**
- 赤や黄色など派手な強調色やセール風の装飾を使わない。
- 純白をページの地にしない。
- 角丸の大きいカードや強い影を使わない。
- 手書き風や丸ゴシックの書体を混ぜない。
- 写真に背景や小物を足して切り抜きの清潔さを崩さない。

## Page Structure

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

1. **ファーストビュー**（新商品の発売を印象づける）: 紺地に商品を並べた全面写真。左上にロゴの白パネル、右上に発売日の円形バッジ、左下に白帯の斜めキャッチを置く。
2. **ブランド紹介**（シリーズのコンセプトを伝える）: 細線枠のボックスに英字見出しと中央揃えの短い本文を入れる。
3. **商品一覧の見出し**（商品紹介の始まりを示す）: 全幅の紺グラデ帯に白い英字見出しを置く。
4. **商品紹介（繰り返し）**（各商品の味・価格・構造を伝える）: 商品名、サイズ帯、価格、はみ出し写真の紺パネル、説明、断面図、注釈の順に並べ、3 商品分繰り返す。
5. **食べ方の案内**（おいしく食べる手順を伝える）: 細線枠に中央揃えの手順文を入れ、下に注釈を置く。
6. **動画**（CMで話題性を伝える）: 紺グラデ帯に英字見出しと角丸の動画埋め込みを置く。
7. **アレルギー情報**（原材料の安心情報を伝える）: 商品ごとに焦げ茶の名前帯と 4 列の表を並べ、該当項目を紺で塗る。
8. **予約 CTA**（購入行動へ誘導する）: 情報ボタンの下に点線付きの見出しを置き、ネット予約と店舗予約の 2 つのピルボタンを並べ、税込の注釈で締める。

## Imagery

- ケーキは白背景で撮って切り抜き、斜め上 30〜45 度の俯瞰で層とトッピングを見せる。
- 断面写真は真横から撮り、層がはっきり分かるようにする。
- ファーストビューは紺と金茶の布の上に商品を斜めに並べた明るい物撮りにする。
- 写真の右下に柔らかい落ち影を付けて立体感を出す。
- アイコンは紺地に白い線画の簡単なものにする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では内容を幅 960px 前後で中央に置き、紺の帯は全幅のまま残す。
- 商品紹介は写真と説明を左右 2 カラムにしてもよい。
- アレルギー表は 3 商品を横に並べるか、6 列に広げる。
- 予約ボタンは横に並べ、それぞれ幅 300px 程度にする。
- 英字見出しは 48px 前後に拡大する。

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