---
version: alpha
name: Warm Cream Chocolate Sweets Brand LP
description: 淡いクリーム色の地に、チョコ茶の文字と赤いピル型ボタンを合わせたお菓子ブランドサイト。丸い写真と波線の括弧見出し、手書き風のポイントラベルで「まるい幸せ」を感じる、やさしくて親しみのある雰囲気。
colors:
  background: '#F9F5D2'
  background-alt: '#FEFCE7'
  surface: '#FDF5CB'
  primary: '#5A2A1A'
  line: '#8E402F'
  cta: '#D41522'
  on-cta: '#F8F8EF'
  accent-1: '#F4D44B'
  tint-1: '#FAE795'
  accent-2: '#D6BA83'
  accent-3: '#FFBD9A'
  text-body: '#6B3A28'
typography:
  display:
    fontFamily: Zen Maru Gothic
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  accent:
    fontFamily: Montserrat
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.15em
  headline-md:
    fontFamily: Zen Maru Gothic
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.06em
  headline-sm:
    fontFamily: Zen Maru Gothic
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.04em
  note:
    fontFamily: Zen Kaku Gothic New
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Klee One
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.02em
rounded:
  sm: 6px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  heading-bracket:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 70px
  label-ribbon:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 28px
  product-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 300px
  point-callout:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 90px
  info-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 220px
  carousel-arrow:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.primary}'
    rounded: '{rounded.full}'
    height: 32px
  badge-scallop:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 64px
  nav-bar:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 44px
---

# DESIGN.md — クリーム地×茶×赤の丸いお菓子ブランドLP（Warm Cream Chocolate Sweets Brand LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: やさしい・柔らかい、かわいい、親しみ・手作り感、ポップ・元気
- **キーワード**: クリーム色・チョコ茶・丸モチーフ・赤ピルボタン・波括弧見出し・ドット線
- **地の質感**: フラットな淡黄の地に、薄い円・チェック柄・半円パターンを重ねて質感を出す
- **形**: 円形写真・丸ドット・角丸カード・ピル型ボタン
- **温度感**: 暖色。黄〜ベージュ〜茶でまとめ、赤は差し色

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#F9F5D2` | ページ全体の地色 | 30% | 画素の実測 |
| `background-alt` | `#FEFCE7` | セクション交互の淡黄地 | 13% | 画素の実測 |
| `surface` | `#FDF5CB` | 商品カードの面 | 11% | 画素の実測 |
| `primary` | `#5A2A1A` | 見出し・本文のチョコ茶 | 3% | 推定 |
| `line` | `#8E402F` | カード枠線・区切りの茶線 | 2% | 画素の主要色に補正 |
| `cta` | `#D41522` | 詳細ボタン・ナビ帯の赤 | 4% | 画素の実測 |
| `on-cta` | `#F8F8EF` | 赤ボタン上の文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#F4D44B` | 見出しラベル・矢印ボタンの黄 | 3% | 画素の実測 |
| `tint-1` | `#FAE795` | 装飾円・特集パネルの黄 | 7% | 画素の実測 |
| `accent-2` | `#D6BA83` | キャラ・装飾の金ベージュ | 5% | 画素の主要色に補正 |
| `accent-3` | `#FFBD9A` | 装飾の淡いピンク円 | 1% | 画素の実測 |
| `text-body` | `#6B3A28` | 本文の茶 | 2% | 推定 |

- 地はクリーム色と淡黄を交互に使い、白は使わない
- 文字は黒ではなくチョコ茶で統一する
- 赤は主ボタンとナビ帯だけに使う
- 黄はセクション見出しのラベルと丸い矢印ボタンに使う
- カードは淡黄の面と細い茶線で囲む
- 装飾円は黄・ピンク・ベージュを低彩度で散らす

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクション大見出し | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.4 | 0.08em |
| `accent` | 見出し上の英字小ラベル | 欧文サンセリフ | Montserrat | 700 | 11px | 1.2 | 0.15em |
| `headline-md` | リード見出し・カード見出し | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.5 | 0.06em |
| `headline-sm` | 商品名・黄ラベル見出し | 丸ゴシック | Zen Maru Gothic | 700 | 15px | 1.5 | 0.08em |
| `body-md` | 本文・説明文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.9 | 0.04em |
| `note` | 内容量など注記 | ゴシック | Zen Kaku Gothic New | 400 | 10px | 1.6 | 0.02em |
| `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.2 | 0.05em |
| `headline-lg` | ポイントの手書き風ラベル | 手書き・筆 | Klee One | 600 | 14px | 1.3 | 0.02em |

- 見出しは中央揃えで、上に英字の小ラベルを置く
- 大見出しの左右に波線の括弧装飾をつける
- 本文は中央揃えで短く改行する
- 見出しも本文もチョコ茶色
- 手書き風フォントはポイント番号などの添え物だけに使う
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品カードは 2 列グリッドも可
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
- コンテンツは中央寄せで最大幅を狭めに保つ
- 主力商品は大きい横長カードに、それ以外は 2 列の小さいカードに
- 特長は中央の商品写真から点線で円形写真のポイントにつなぐ
- カルーセルは左右に黄色い丸矢印、下にドットのページ送りを置く
- セクションごとに地色を切り替えて区切る

## Elevation & Depth

- 影はほぼ使わずフラット
- カードは細い茶線か淡黄の面で浮かせる
- 写真の上に重ねた円形のサブ写真は白縁で区別する

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: お菓子の写真は円形か角丸に切り抜く。パッケージは切り抜きで配置
- **セクション境界**: 直線で地色を切り替える。チェック柄や半円パターンの帯もある
- ボタンはすべてピル型
- 見出しラベルは両端を丸めた黄色の帯
- 装飾は円とドットが中心
- カードの角は12〜20px

## Components

- **赤ピルボタン**（`button-primary`）: 赤い面に白文字、右に矢印アイコン。商品詳細などに使う
- **波括弧の見出し**（`heading-bracket`）: 英字小ラベルと大見出しを、左右の波線括弧で挟む
- **黄色いラベル見出し**（`label-ribbon`）: 茶の細枠がついた黄色いピル帯で、小見出しを中央に置く
- **商品カード**（`product-card`）: 淡黄の角丸面に、パッケージ写真・商品名・注記・赤ボタンを縦に並べる
- **ポイント円写真**（`point-callout`）: 円形写真と手書き風の番号ラベル。中央の商品写真と赤い点線でつなぐ
- **茶枠の情報ボックス**（`info-box`）: 太めの茶線で囲った角丸ボックス。上辺に黄色ラベルを重ねる
- **丸矢印ボタン**（`carousel-arrow`）: 黄色の円の中に茶色の矢印。下に赤と茶のドットでページ送り
- **波形円バッジ**（`badge-scallop`）: 黄色い波形の円に茶文字。横長バナーの左端に置く
- **赤いナビ帯**（`nav-bar`）: ヒーロー直下に横一列の赤い帯を置き、白文字でメニューを並べる

## Do's and Don'ts

**Do**
- 地色はクリーム系、文字はチョコ茶にする
- 写真は円や角丸で柔らかく切り抜く
- ボタンは赤のピル型に右矢印をつける
- 見出しは英字ラベル＋波括弧で統一する
- 余白を広めにとって中央揃えで組む

**Don't**
- 純白や純黒を大きく使わない
- 赤をボタンとナビ帯以外で多用しない
- 鋭い角や重い影をつけない
- 寒色を持ち込まない
- 本文を左右いっぱいに広げない

## Page Structure

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

1. **ファーストビュー**（ブランドの幸せ感を一目で伝える）: 黄色い装飾円の上に大きな円形の商品写真と、周りに小さな円形写真。中央にロゴ、上に短いコピー
2. **ナビゲーション**（各コンテンツへ誘導）: 赤い帯に白文字のメニューを横並び。その下に黄色いSNS誘導バナー
3. **ブランド紹介**（商品の特長を説明）: 波括弧見出しとリード文。中央の商品写真の周りに円形ポイント写真を3つ置き、点線でつなぐ
4. **深掘りバナー**（おいしさの詳しい解説へ誘導）: 茶枠の横長バナー。左に波形バッジ、右に断面写真、中央に赤ボタン
5. **パッケージの秘密**（ブランドの物語）: 茶枠ボックスに黄ラベル。2列で写真・見出し・中央揃えの本文
6. **製造紹介**（工場見学への誘導）: 茶枠ボックス。左に文章と赤ボタン、右に製造ラインの写真
7. **商品ラインアップ**（定番商品を一覧で見せる）: 主力は大カード、それ以外は2列の淡黄カードグリッド
8. **限定商品**（季節の商品を紹介）: 斜めのNEWバッジつきカードを横に流すカルーセル。黄色い丸矢印
9. **周年企画**（キャンペーンを訴求）: 黄色い角丸の大パネル。赤い点線の円の中に写真、赤リボンのサブ見出し
10. **活動紹介**（ブランドの社会活動を紹介）: 3列のサムネイルカード。イラストや写真に見出しと短い本文
11. **レシピ**（アレンジの提案）: チェック柄の地に、写真カードのカルーセルと、茶枠の横長レシピカード2枚

## Imagery

- お菓子は暖かい自然光で、木のテーブルの上でシズル感を出して撮る
- 断面や素材（クリーム・卵・チョコ）のアップを円形に切り抜く
- パッケージは背景を切り抜いて少し傾けて置く
- 背景に黄・ピンク・ベージュのぼかした円を散らす
- 活動紹介などには、やさしい線のフラットな人物イラストを使う
- チェック柄や半円パターンを薄く敷いて地に変化をつける
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SPでは商品グリッドを1〜2列に減らす
- ヒーローの周囲の円写真は数を減らして小さくする
- ナビ帯はハンバーガーメニューか横スクロールにする
- 2列の情報ボックスは縦積みにする
- カルーセルは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-97acb543`（元 LP の URL から採番）
- **元 LP**: https://www.lotte.co.jp/products/brand/chocopie/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。