---
version: alpha
name: Butter Cookie Checkered Ice Cream Flavor LP
description: 濃い焼き色ブラウンの地と、バター色のギンガムチェック地を交互に重ねたアイスクリーム新作フレーバーのLP。境目は溶けたクリームが垂れるような曲線にする。素材の写真をあちこちに散らし、黄色マーカーの見出しと太い丸みゴシックで、甘くて楽しいシズル感を出す。
colors:
  primary: '#9C5502'
  secondary: '#A2600B'
  background: '#FEE49B'
  background-alt: '#FEE49B'
  marker: '#FED501'
  accent-1: '#FFE718'
  dark-section: '#814507'
  accent-2: '#CD7B2C'
  surface: '#FEFEFE'
  on-dark: '#FFFEF8'
  text: '#753F0D'
  text-muted: '#A8A8A8'
  line: '#753F0D'
  accent-3: '#E4268A'
  primary-accessible: '#8F4E02'
  accent-2-accessible: '#A96624'
  text-muted-accessible: '#767676'
typography:
  display:
    fontFamily: M PLUS Rounded 1c
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 23px
    fontWeight: 800
    lineHeight: 1.6
    letterSpacing: 0.03em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: 0.05em
  accent:
    fontFamily: Fredoka
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.08em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.03em
rounded:
  sm: 6px
  md: 10px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  marker-heading:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 32px
  point-label:
    textColor: '{colors.accent-1}'
    typography: '{typography.accent}'
    height: 36px
  dashed-column:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 400px
  ribbon-label:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 56px
  button-pill:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 46px
  table-header-bar:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.sm}'
    height: 44px
  allergen-grid:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 260px
  badge-new:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    rounded: '{rounded.full}'
    height: 80px
---

# DESIGN.md — 焼き色ブラウン×バター黄のギンガム柄アイス新作LP（Butter Cookie Checkered Ice Cream Flavor LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、力強い・インパクト
- **キーワード**: 焼き色ブラウン・バター黄・ギンガムチェック・垂れるクリーム・素材の散らし・シズル感
- **地の質感**: ブラウン地にはうっすら紙のようなノイズを入れる。チェック地は淡い黄2色の格子にする。
- **形**: 垂れるドリップ状の境界、円形の写真切り抜き、リボン型の見出し、ピル型ボタン。
- **温度感**: 暖色だけで組んだ、甘く温かい印象。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#9C5502` | 焼き色ブラウンの地 | 30% | 画素の実測 |
| `secondary` | `#A2600B` | ファーストビュー上部の明るいブラウン | 4% | 画素の主要色に補正 |
| `background` | `#FEE49B` | ギンガムチェックの淡黄地 | 22% | 画素の実測 |
| `background-alt` | `#FEE49B` | チェックの濃い格子 | 12% | 画素の実測 |
| `marker` | `#FED501` | 見出しの黄色マーカー | 1% | 画素の実測 |
| `accent-1` | `#FFE718` | 見出し・ポイントの黄文字 | 1% | 画素の実測 |
| `dark-section` | `#814507` | 表の見出し帯（濃茶） | 2% | 画素の実測 |
| `accent-2` | `#CD7B2C` | リボン見出し・表のハイライト用キャラメル色 | 2% | 画素の実測 |
| `surface` | `#FEFEFE` | ボタン・表のセル | 5% | 画素の実測 |
| `on-dark` | `#FFFEF8` | ブラウン地の本文の白 | 1% | 画素の主要色に補正 |
| `text` | `#753F0D` | 明るい地の本文の濃茶 | 1% | 画素の主要色に補正 |
| `text-muted` | `#A8A8A8` | 表の該当しない項目のグレー | 0% | 推定 |
| `line` | `#753F0D` | 表の罫線・破線 | 0% | 画素の主要色に補正 |
| `accent-3` | `#E4268A` | バッジのピンク | 0% | 推定 |
| `primary-accessible` | `#8F4E02` | AA を満たす補正値（計算） |  | 計算 |
| `accent-2-accessible` | `#A96624` | AA を満たす補正値（計算） |  | 計算 |
| `text-muted-accessible` | `#767676` | AA を満たす補正値（計算） |  | 計算 |

- 地はブラウン（primary）とバター色ギンガム（background）を交互に置く。
- ブラウン地の本文は白、見出しは白と黄マーカーにする。
- ギンガム地の本文と罫線は濃茶にし、黒は使わない。
- 強調はマーカー黄とキャラメル色に限る。
- ボタンは白地に濃茶の文字と、濃茶の丸い矢印アイコンにする。
- ピンクはバッジにだけ少量使う。
- `marker-heading` は文字 `#9C5502` × 背景 `#FED501` のコントラスト比が 3.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8F4E02`、4.52:1）を使う。
- `ribbon-label` は文字 `#FFFEF8` × 背景 `#CD7B2C` のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#A96624`、4.51:1）を使う。
- `allergen-grid` は文字 `#A8A8A8` × 背景 `#FEFEFE` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#767676`、4.5:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 商品名の見出し（白・極太） | ゴシック | M PLUS Rounded 1c | 900 | 30px | 1.2 | 0.02em |
| `headline-lg` | 黄マーカー付きのリード見出し | ゴシック | M PLUS Rounded 1c | 800 | 23px | 1.6 | 0.03em |
| `headline-md` | セクション見出し（黄文字） | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.05em |
| `accent` | Point番号や英字リボン | 欧文サンセリフ | Fredoka | 700 | 22px | 1.2 | 0.0em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.08em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em |
| `note` | 注釈・表のセル | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.03em |

- 見出しは中央揃えで、太い丸みのあるゴシックにする。
- キーワードだけ黄マーカーの帯に濃茶の文字を乗せ、残りは白文字にする。
- 本文は字間を広めにし、行間は1.9にする。
- 英字は丸い欧文で、ポイント番号やリボンに使う。
- Point見出しの下には黄色の破線を引く。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。特長は写真と文字を左右交互に並べる。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- 写真は画面端まで裁ち落としてよい。
- 特長は大きな円形写真と文字ブロックを左右交互に置く。
- 素材写真を余白に散らして、間を埋める。
- 表とボタンは左右に約6%の余白を取る。
- ボタンは2つを横並びにする。

## Elevation & Depth

- 白ボタンには柔らかい落ち影をつける。
- 素材写真には自然な影をつけて浮かせる。
- カードには基本的に影をつけない。

## Shapes

- **角丸**: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 円形の切り抜きか、下端がクリームで垂れる形にする。商品は背景を抜く。
- **セクション境界**: 溶けたクリームやチョコが垂れるドリップ曲線。ファーストビューの上部だけ斜めに切る。
- 見出し帯と表は小さな角丸にする。
- コラム枠は黄色の破線の角丸にし、下端をドリップ状にする。
- 英字見出しは両端を切り込んだリボン型にする。

## Components

- **マーカー見出し**（`marker-heading`）: キーワードを黄の帯で囲み、残りの文は白にする。
- **ポイント見出し**（`point-label`）: 黄色の英字で番号を入れ、下に黄色の破線を引く。
- **コラム枠**（`dashed-column`）: 黄色の破線の角丸枠。見出しは上辺に虫眼鏡アイコンと並べ、下端はドリップ状にする。
- **リボンラベル**（`ribbon-label`）: キャラメル色の帯の両端を切り込み、白文字の商品名を入れる。
- **詳細ピルボタン**（`button-pill`）: 白いピル型に濃茶の文字。右端に濃茶の丸い矢印をつける。
- **表見出し帯**（`table-header-bar`）: 濃茶の帯に白文字を中央揃えで入れる。
- **アレルゲン表**（`allergen-grid`）: 4列の格子。該当する項目はキャラメル色の地に白文字、該当しない項目は白地にグレーの文字。
- **新作バッジ**（`badge-new`）: 白い円の中に新作の表記を入れ、小さなピンクの丸で月を添える。

## Do's and Don'ts

**Do**
- 地はブラウンとギンガムを交互に置き、境目は必ずドリップ曲線にする。
- クッキーやナッツなど素材の切り抜き写真を余白に散らす。
- 商品写真は大きく扱い、セクションの境界からはみ出させる。
- テキストの色は白・濃茶・黄の3系統に絞る。
- 見出しのキーワードは黄マーカーで強調する。

**Don't**
- 寒色の地やグレーの地は使わない。
- 直線だけでセクションを区切らない。
- 細い明朝体や真っ黒の文字は使わない。
- ボタンを角張った矩形にしない。
- 白い余白だけの無機質なページにしない。

## Page Structure

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

1. **ファーストビュー**（新作であることと、ひと目で美味しさを伝える。）: ブラウンの上部にロゴ・英字・商品名を置く。斜めの境界の下はギンガム地にし、大きな商品写真と飛び散る素材を配置する。
2. **商品の概要**（味の特徴をまとめて伝える。）: ブラウン地にマーカー見出しを4行置き、白文字の説明を続ける。
3. **構成の図解**（中に入っている素材を示す。）: 断面の写真に破線の引き出し線を引き、ラベルで素材名を添える。
4. **特長ポイント**（こだわりを2点説明する。）: 円形の写真と文字を左右交互に置き、Point番号の見出しをつける。
5. **開発秘話**（作り手の話で親しみを持たせる。）: 黄色の破線枠のコラム。下端はドリップ状にする。
6. **おすすめの組み合わせ**（別の商品とのセット提案をする。）: ギンガム地にリボン型の英字見出しを置く。2商品の写真と説明を交互に並べ、詳細ボタンをつける。
7. **動画紹介**（動画で商品を訴求する。）: ブラウン地に黄色の見出しを置き、角丸の枠に動画を埋め込む。
8. **SNSシェアと導線**（シェアを促し、一覧や店舗へ誘導する。）: 丸いSNSアイコンを3つ並べ、その下に白いピル型ボタンを2つ置く。
9. **アレルギー・カロリー情報**（安心のための成分情報を示す。）: ギンガム地に濃茶の見出し帯と白い表を置き、注釈を添える。

## Imagery

- 商品は背景を抜いた高精細な写真にし、暖色の光で照らす。
- クッキー・ナッツ・バターの角切りを、影をつけて散らす。
- 溶けたクリームやソースのリボンを、曲線のシズル要素として流す。
- 背景はバター黄2色のギンガムチェックにする。
- 引き出し線は濃茶か白の点線にする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは中央に幅約480pxのSPレイアウトを置く。
- PCの左右余白にはギンガム柄を敷く。
- 特長の左右交互配置は、PCでは2カラムを維持する。
- 表は最大幅を約640pxに制限する。

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