---
version: alpha
name: Golden Caramel Seasonal Cafe Menu LP
description: バナナやキャラメルを思わせる黄金色とクリーム色の地に、こげ茶の文字と金グラデの立体欧文ロゴを重ねたカフェの季節限定 LP。商品の切り抜き写真に落ち影をつけ、商品名・価格・説明・ボタンを 1 カラムで繰り返す。セクションの境目は波形でつなぐ。
colors:
  primary: '#E5C37B'
  background: '#EBD9B3'
  background-alt: '#F3E7CF'
  surface: '#FFF8E6'
  text: '#47281D'
  cta: '#540A02'
  on-cta: '#FFEDA7'
  on-primary: '#FEFEFD'
  dark-section: '#9E5319'
  accent-1: '#EEC450'
  accent-2: '#0A1E02'
  line: '#4D2C1F'
  on-dark: '#FEF8E6'
typography:
  display:
    fontFamily: Alfa Slab One
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.3
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.45
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Montserrat
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.3
  body-lg:
    fontFamily: Noto Serif JP
    fontSize: 17px
    fontWeight: 500
    lineHeight: 2.6
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.04em
rounded:
  sm: 4px
  md: 12px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 120px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    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: 40px
  button-light:
    backgroundColor: '{colors.on-primary}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 50px
  button-outline:
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  text-link-underline:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 28px
  logo-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 90px
  feature-card-dark:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 1000px
  date-badge:
    backgroundColor: '{colors.on-primary}'
    textColor: '{colors.accent-2}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 75px
  product-block:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 620px
  tag-outline:
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 20px
---

# DESIGN.md — 黄金キャラメル色のカフェ季節限定メニュー LP（Golden Caramel Seasonal Cafe Menu LP）

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

## Overview

- **業種**: 飲食店・レストラン ／ **雰囲気**: 上品・高級、やさしい・柔らかい、ナチュラル
- **キーワード**: 黄金色・とろける質感・キャラメル・大人のデザート・季節限定・切り抜き商品写真
- **地の質感**: なめらかな布やクリームのようなグラデーション。ベタ塗りの地と、柔らかい落ち影の写真を組み合わせる
- **形**: ピル型ボタン、角丸 12px 前後のカード、波形のセクション境界
- **温度感**: 暖色。黄・ベージュ・こげ茶でまとめる

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#E5C37B` | メインの黄金色の地（ドリンクセクション） | 18% | 画素の実測 |
| `background` | `#EBD9B3` | フードとカードセクションのベージュの地 | 22% | 画素の実測 |
| `background-alt` | `#F3E7CF` | コーヒーセクションの淡いクリームの地 | 15% | 画素の実測 |
| `surface` | `#FFF8E6` | グッズセクションの明るいクリームの地 | 13% | 画素の実測 |
| `text` | `#47281D` | 見出しと本文のこげ茶の文字 | 3% | 画素の主要色に補正 |
| `cta` | `#540A02` | 商品詳細ボタンの深いこげ茶 | 1% | 画素の実測 |
| `on-cta` | `#FFEDA7` | こげ茶ボタン上の黄色の文字 | 0% | 画素の実測 |
| `on-primary` | `#FEFEFD` | 黄金色の地の上の白ボタン | 1% | 画素の実測 |
| `dark-section` | `#9E5319` | コーヒー紹介カードのブラウンの地 | 3% | 画素の実測 |
| `accent-1` | `#EEC450` | 金グラデのロゴの中心の黄 | 2% | 画素の主要色に補正 |
| `accent-2` | `#0A1E02` | 別メニューカードの深緑の地 | 2% | 画素の実測 |
| `line` | `#4D2C1F` | アウトラインボタンの枠と下線 | 0% | 画素の実測 |
| `on-dark` | `#FEF8E6` | 暗いカード上の白文字 | 0% | 画素の主要色に補正 |

- セクションごとに地を黄金色→ベージュ→クリーム→淡クリームの順で切り替え、境目は波形にする
- 文字はこげ茶に統一し、純粋な黒は使わない
- 主ボタンはこげ茶の地に黄色の文字。黄金色の地の上では白ボタンにこげ茶の文字
- 見出しの欧文ロゴは黄から橙茶への金グラデにして立体感を出す
- 特に推したい商品だけ、ブラウンや深緑の暗いカードで囲んで目立たせる
- 一覧への誘導はこげ茶の枠線だけのアウトラインボタンにする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの欧文ロゴ見出し（斜体で金グラデ） | 装飾・ディスプレイ | Alfa Slab One | 400 | 56px | 1.0 | 0.02em |
| `headline-lg` | ファーストビューの手書き風キャッチ | 明朝 | Shippori Mincho | 700 | 32px | 1.3 | 0.0em |
| `headline-md` | 商品名 | ゴシック | Noto Sans JP | 700 | 20px | 1.45 | 0.02em |
| `headline-sm` | 価格表記 | 欧文サンセリフ | Montserrat | 600 | 18px | 1.3 | 0.0em |
| `body-lg` | コンセプトのリード文（明朝で行間を広く） | 明朝 | Noto Serif JP | 500 | 17px | 2.6 | 0.1em |
| `body-md` | 商品説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em |
| `note` | ※から始まる注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.0 | 0.04em |

- セクション見出しは日本語ではなく欧文の装飾ロゴにし、少し斜体や遠近をつけて金グラデで塗る
- リード文だけ明朝体を使い、行間 2.5 倍以上で中央揃えにする
- 商品名・価格・説明は左揃えのゴシック体にする
- 価格は欧文の数字で大きめにする
- 注釈は 11px で、商品ブロックのすぐ下に置く
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム
- **本文ブロックの幅**: 画面幅の約 82%
- **余白**: セクション間 120px、基本単位 8px、カード内 24px（375px 幅換算）
- 商品 1 点ごとに写真→商品名→価格→説明→ボタンの順で縦に並べる
- 商品ブロック同士は 80〜100px 空ける
- セクションの最後に一覧ページへのアウトラインボタンを置く
- 暗いカードは左右 16px の余白を残し、画面の端まで広げない
- ファーストビューは写真の上に文字を直接重ね、余白を多めにとる

## Elevation & Depth

- 切り抜いた商品写真の右下に柔らかい落ち影をつける
- ボタンとカードには影をつけず、平らにする
- 欧文ロゴは影とグラデーションで立体的に見せる

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 商品は背景を抜いて落ち影をつける。カード画像は角丸の長方形。比較用の画像は丸く切り抜く
- **セクション境界**: なだらかな波形のカーブ
- ボタンはすべてピル型にする
- 特集カードは角丸 12px 前後
- セクションの境界に直線を使わず、波形で色を切り替える

## Components

- **商品詳細ボタン**（`button-primary`）: こげ茶の地に黄色の文字のピル型ボタン。幅は画面の約 50%
- **白ピルボタン**（`button-light`）: 黄金色の地や暗いカードの上に置く白いボタン。幅は約 65%
- **一覧誘導ボタン**（`button-outline`）: こげ茶の 1px の枠線だけのピル型ボタン。中は透明
- **下線テキストリンク**（`text-link-underline`）: アレルゲン情報などへのリンク。こげ茶の文字に下線
- **金グラデ欧文見出し**（`logo-heading`）: セクション名を太い欧文の斜体にし、黄から茶へのグラデで塗る
- **暗色特集カード**（`feature-card-dark`）: ブラウンや深緑の角丸カード。中に写真、白文字の説明、白ボタンを入れる
- **発売日バッジ**（`date-badge`）: 白い円の中に深緑の欧文で日付と曜日を入れ、カードの左上に重ねる
- **商品ブロック**（`product-block`）: 切り抜き写真、商品名、価格、説明、詳細ボタンのセット。右上に丸い認証マークを置く
- **属性タグ**（`tag-outline`）: 価格の横に置く、白い細い枠の小さなタグ

## Do's and Don'ts

**Do**
- 地は黄・ベージュ・クリーム系だけで切り替える
- セクションの境界は波形でつなぐ
- 商品写真は切り抜いて落ち影をつけ、大きく見せる
- 商品ブロックの並び順は全セクションで同じにする
- ボタンはすべてピル型にし、役割に合わせて塗り・白・枠線を使い分ける

**Don't**
- 寒色や鮮やかな原色をベースの色にしない
- セクション見出しをただの日本語ゴシックにしない
- ボタンを四角くしたり、影をつけたりしない
- 文字に純粋な黒を使わない
- 1 つの商品ブロックに複数のボタンを並べない

## Page Structure

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

1. **ファーストビュー**（新作の世界観を一目で伝える）: 布のようなグラデーションの背景に、浮かぶドリンクと人物の写真を重ねる。明朝の斜めのキャッチと金グラデの欧文商品ロゴを置く
2. **コンセプトのリード**（商品の情緒的な価値を語る）: グラデーションの地に、明朝の中央揃えで 5 行ほど。行間は広くとる
3. **素材の特長**（味の構成要素を 2 つ見せる）: 写真のアップ、素材の欧文ロゴ、短い説明文を左右交互に置く
4. **取り組みの紹介**（原材料の背景や社会的な価値を伝える）: 太字の見出し 2 行と、中央揃えの本文 4 行
5. **メイン商品**（商品の詳細へ誘導する）: 切り抜き写真、商品名、価格、注釈、白いピルボタンの順に並べる
6. **関連ドリンクのカード**（同じシーズンのほかのドリンクを紹介する）: ブラウンや深緑の暗い角丸カード。線画の装飾、欧文ロゴ、日付バッジを入れる
7. **フード**（関連するフードを紹介する）: 波形の境界のあとに金グラデの欧文見出しを置き、商品ブロックを 3 つ繰り返す。最後に一覧ボタン
8. **コーヒー豆**（豆の商品を紹介する）: 淡いクリームの地に商品ブロックを 1 つと、一覧ボタン
9. **グッズ**（シーズン限定のグッズを紹介する）: 明るいクリームの地。色違いを丸い枠で見せたり、セット内容を＋でつないで見せたりする
10. **カード**（プリペイドカードのデザインを紹介する）: ベージュの地に、角丸のカード画像と中央揃えの商品名、注釈、ボタン
11. **デジタルカード**（デジタル版のカードへ誘導する）: 星形のビジュアルと、一覧へのアウトラインボタン

## Imagery

- 商品は白背景で撮って切り抜き、右下にベージュの柔らかい落ち影をつける
- ファーストビューは布やクリームがうねるような質感のグラデーションの背景にする
- 素材はアップで撮り、とろりと垂れる様子を見せる
- 暗いカードにはコーヒーの枝葉の線画を薄く敷く
- 特集カードの写真は、葉や木の台などを使った舞台のような演出にする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では本文の幅を 960px ほどに収めて中央に置き、外側にも地の色を敷く
- PC では商品ブロックを 2〜3 列のグリッドにする
- ファーストビューは 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-540ac386`（元 LP の URL から採番）
- **元 LP**: https://www.starbucks.co.jp/cafe/banana/
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。