---
version: alpha
name: Creamy Beige Organic Blob Premium Ice Cream LP
description: 生成り〜ベージュの地にアイスのような柔らかい不定形の曲線を重ね、焦茶のボタンと金茶の欧文見出しで上質感を出したアイスクリームのブランドLP。明朝体を中心に余白を多めにとり、写真は丸や不定形で切り抜く。
colors:
  primary: '#2C0A01'
  background: '#EEE7DD'
  background-alt: '#E4D6C9'
  surface: '#EBE5DC'
  tint-1: '#E2D3C1'
  secondary: '#9C6B3E'
  accent-1: '#C39563'
  cta: '#2C0A01'
  on-cta: '#F8F6F1'
  text: '#4B2E22'
  accent-2: '#A1B362'
  dark-section: '#2C0A00'
  on-dark: '#F8F6F1'
  accent-1-accessible: '#946839'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Cormorant Garamond
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.1em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  accent:
    fontFamily: Josefin Sans
    fontSize: 26px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Serif JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
rounded:
  sm: 4px
  md: 12px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 80px
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: 32px
  section-heading:
    textColor: '{colors.secondary}'
    typography: '{typography.headline-lg}'
    height: 56px
  product-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 300px
  category-bubble:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 44px
  carousel-arrow:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    rounded: '{rounded.full}'
    height: 32px
  feature-bubble:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 64px
  video-thumb:
    rounded: '{rounded.lg}'
    height: 160px
  banner-link:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 48px
---

# DESIGN.md — クリーム色と焦茶の有機曲線アイスLP（Creamy Beige Organic Blob Premium Ice Cream LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、やさしい・柔らかい、ナチュラル
- **キーワード**: クリーム色・有機的な曲線・明朝体・金茶の欧文・焦茶アクセント・とろける質感
- **地の質感**: マットで柔らかい単色面の重なり。うっすら室内写真を透かす程度で、光沢やグラデーションは控えめ。
- **形**: アイスの溶けた輪郭のような不定形ブロブ、円形の写真枠、ピル型ボタン。
- **温度感**: 暖色寄りで穏やか。ミルクとキャラメルのような温かさ。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#2C0A01` | ブランドの焦茶（ボタン・フッター・矢印） | 5% | 画素の実測 |
| `background` | `#EEE7DD` | 全体の生成り地 | 30% | 画素の実測 |
| `background-alt` | `#E4D6C9` | ブロブ状の濃いベージュ面 | 15% | 画素の実測 |
| `surface` | `#EBE5DC` | 商品カードの円形白地 | 6% | 画素の実測 |
| `tint-1` | `#E2D3C1` | 淡いクリームのブロブ | 13% | 画素の実測 |
| `secondary` | `#9C6B3E` | 見出し欧文・セクション名の金茶 | 1% | 推定 |
| `accent-1` | `#C39563` | カテゴリ吹き出しのキャラメル色 | 1% | 画素の実測 |
| `cta` | `#2C0A01` | 商品詳細ボタン | 2% | 画素の実測 |
| `on-cta` | `#F8F6F1` | ボタン上の文字 | 0% | 画素の主要色に補正 |
| `text` | `#4B2E22` | 見出し・本文の濃茶文字 | 2% | 画素の主要色に補正 |
| `accent-2` | `#A1B362` | フレーバー名の色分け（例: 抹茶の緑） | 0% | 画素の実測 |
| `dark-section` | `#2C0A00` | フッター | 2% | 画素の実測 |
| `on-dark` | `#F8F6F1` | フッター文字 | 0% | 画素の主要色に補正 |
| `accent-1-accessible` | `#946839` | AA を満たす補正値（計算） |  | 計算 |

- 地は生成り#EEE7DDを基本に、濃淡ベージュの不定形ブロブを重ねて区切る。
- 濃い色は焦茶1色のみ。ボタン・矢印・再生ボタン・フッターに限定。
- 欧文見出しは金茶で細身に。和文小見出しは濃茶。
- フレーバー名だけは商品の味に合わせた色（緑・赤・水色・橙）を使う。
- 純白は商品カードの円形地と焦茶上の文字のみ。
- `category-bubble` は文字 `#F8F6F1` × 背景 `#C39563` のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#946839`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの手書き風ロゴ的コピー | 明朝 | Shippori Mincho | 700 | 44px | 1.1 | 0.02em |
| `headline-lg` | セクション英字見出し | 欧文セリフ | Cormorant Garamond | 400 | 32px | 1.1 | 0.04em |
| `headline-sm` | 英字見出し下の和文ルビ | 明朝 | Noto Serif JP | 400 | 11px | 1.4 | 0.1em |
| `headline-md` | シーン・商品名の小見出し | 明朝 | Noto Serif JP | 700 | 16px | 1.5 | 0.05em |
| `body-md` | 説明文 | 明朝 | Noto Serif JP | 400 | 13px | 1.8 | 0.03em |
| `accent` | 縦組みのフレーバー英字 | 欧文サンセリフ | Josefin Sans | 300 | 26px | 1.0 | 0.02em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.0 | 0.05em |
| `note` | 注釈・コピーライト | 明朝 | Noto Serif JP | 400 | 10px | 1.6 | 0.02em |

- 和文は明朝で統一し、ボタンのみゴシック。
- セクション見出しは英字大＋和文小の2段組みで中央揃え。
- ブランドメッセージは中央揃え・行間2.0で詩的に区切る。
- 商品カードではフレーバー英字を縦組みで写真の脇に配置。
- 太字は小見出しに限り、本文は細く軽く。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラム、商品はカルーセルで1枚ずつ。PCは3カラム。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
- セクション間は広く取り、ブロブ面の切り替えで区切る。
- 見出しは中央、本文ブロックも中央寄せ基調。
- カルーセルは左右に焦茶の円形矢印、下にドットインジケーター。
- カテゴリ見出しは小さなキャラメル色の吹き出しで添える。

## Elevation & Depth

- 影はほぼ使わず、面の濃淡で奥行きを出す。
- 商品パッケージ写真のみ柔らかい落ち影を付ける。
- カードは枠線なしで地色との差だけで浮かせる。

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。
- **写真の切り抜き**: 円形または溶けたアイスのような不定形ブロブで切り抜く。
- **セクション境界**: ゆるやかな大きな曲線・ブロブの輪郭で区切る。直線の区切りは使わない。
- 矩形写真は避け、丸かブロブにする。
- ボタンはピル型の焦茶。
- 吹き出しは楕円形で小さめ。

## Components

- **商品詳細ボタン**（`button-primary`）: 焦茶のピル型、白文字に右向き細矢印。
- **英和2段見出し**（`section-heading`）: 金茶の細い英字大見出し、下に和文小ルビ。
- **円形商品カード**（`product-card`）: 白の円にパッケージ写真、脇に縦組み色付きフレーバー名、下に名前と説明。
- **カテゴリ吹き出し**（`category-bubble`）: キャラメル色の楕円に白の英字＋和文。
- **円形矢印**（`carousel-arrow`）: 焦茶の丸に白い細矢印。カルーセル左右に。
- **点線つなぎの特長吹き出し**（`feature-bubble`）: 商品写真から点線を伸ばしたクリーム色の楕円に短い特長文。
- **ブロブ動画サムネ**（`video-thumb`）: 不定形に切り抜いた動画サムネと左下の焦茶再生ボタン。
- **焦茶バナー**（`banner-link`）: 焦茶地に左写真・右に金茶英字と白和文の横長リンク。

## Do's and Don'ts

**Do**
- ベージュの濃淡ブロブを重ねてセクションを作る。
- 写真は円やブロブに切り抜き、余白をたっぷり取る。
- 和文は明朝、英字は細身セリフ/サンセリフで上品に。
- 濃い色は焦茶1色に絞る。
- 商品写真には金のスプーンやとろける質感を添える。

**Don't**
- 原色や蛍光色を地やボタンに使わない。
- 直線的な矩形セクションや強い影を使わない。
- 太いゴシックで大きく煽らない。
- 情報を詰め込みすぎない。
- 純黒を使わず焦茶で代用する。

## Page Structure

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

1. **ファーストビュー**（ブランドの世界観を一目で伝える）: くつろぐ人物写真を全面に、右上に明朝の大きなコピーとロゴ、下端を曲線で切り、焦茶のCM誘導ピルボタン。
2. **ブランドメッセージ**（ブランドの歴史と思いを語る）: スプーンのアイス写真をブロブで切り抜き、上に白の中央揃え明朝文、下にロゴ。
3. **おいしさの特長**（食感・味の特徴を3点で示す）: 中央にアイス写真、点線でつないだ楕円吹き出しに短い特長を3つ。
4. **食べるシーン提案**（生活の中の利用シーンを想起させる）: 円形イラスト3枚のカルーセル、各下に明朝小見出しと短文。
5. **歴史・レシピ導線**（サブコンテンツへ誘導）: 2列で英字見出し、左は本型の歴史画像、右は円形レシピ写真と焦茶の吹き出しリンク。
6. **ラインナップ**（商品一覧と詳細導線）: サイズ別に吹き出しで分類、円形商品カード3枚のカルーセルとドット、各カードに商品詳細ボタン。
7. **動画**（CM・動画を見せる）: 大きなブロブサムネ1つ＋小サムネ3つ、焦茶の再生ボタン、下にタイトル。
8. **出演者プロフィール**（起用タレントを紹介）: 大きなベージュの円の中に縦長楕円写真と明朝の経歴リスト。
9. **関連リンク・シェア**（外部サイト・SNSへ誘導）: ページトップの丸ボタン、焦茶の横長バナー2つ、ボタン2つ、SNSアイコン。
10. **フッター**（規約・著作権表示）: 焦茶の帯に白の小さなリンクを横並び、中央にコピーライト。

## Imagery

- 暖色の自然光の室内で、くつろぐ人物を柔らかく撮る。
- アイスは金のスプーンですくった断面を寄りで、とろける質感を強調。
- シーン紹介は落ち着いた色の手描き風イラストを円形に。
- 商品パッケージは切り抜き、柔らかな影付きで斜めに配置。
- 背景にうっすら室内写真を薄く透かす程度にとどめる。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SPでは3カラムの商品・シーンを1枚ずつのカルーセルにする。
- セクション見出しはSPで英字28〜32px程度。
- 歴史・レシピの2列はSPで縦積み。
- 動画の小サムネはSPで横スクロールか2列。
- プロフィールは写真上・経歴下の縦積みに。
- ブロブ装飾は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-d245077c`（元 LP の URL から採番）
- **元 LP**: https://www.lotte.co.jp/products/brand/ladybo2025/2025/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。