多面体グラデと濃茶の期間限定アイス LP

Prismatic Warm Gradient Ice Cream Promo LP

オレンジ・コーラル・ピンク・薄紫の三角形をいくつも重ねた、プリズムのような多面体グラデ背景が特徴の LP。その上に濃いチョコ色の極太文字と、切り抜いた商品写真を置く。1 商品の期間限定告知を、短いスクロールで見せる構成。

菓子・スイーツ力強い・インパクトポップ・元気上品・高級SP

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地はオレンジ・コーラル・アプリコット・ラベンダーの三角形を組み合わせた多面体グラデ。単色ベタの背景は使わない
文字は基本すべてチョコブラウン。白抜きの文字はボタンだけにする
強調語だけを朱オレンジに変える。強調は 1 ブロックにつき 2 語まで
情報を読ませる面は、濃いオレンジかクリームの単色に近い多角形パネルで敷く
ボタンは濃茶にして、商品のチョココーティングと色を合わせる

TYPOGRAPHY

書体

display商品名の欧文を極太で組む装飾・ディスプレイ／ Alfa Slab One 400 ／ 44px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg和文の商品名・FV のキャッチゴシック／ Zen Kaku Gothic New 900 ／ 22px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-md成分名の見出し（ピンクの影付き）ゴシック／ Zen Kaku Gothic New 900 ／ 22px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm中央にセンター揃えで置くメッセージ文ゴシック／ Zen Kaku Gothic New 900 ／ 22px ／行間 1.75

あなたの LP を、もっと伝わる形に。Aa 123

body-md成分の説明文ゴシック／ Noto Sans JP 500 ／ 12px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタンの文言ゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

accent円形バッジ内の縦 2 行の短い語ゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

見出しはどれも極太にし、強い存在感を出す
成分名の見出しには、右下へずらしたピンクのドロップシャドウを付ける
欧文の商品名はスラブセリフを大きく 3 行に積む
本文は 2 行程度の短文にとどめる
メッセージ文はセンター揃えで 5 行前後。行間は広めにとる

PAGE STRUCTURE

セクション構成

ファーストビュー商品の印象と期間限定であることを伝える傾けた商品写真を大きく置き、右上に短いキャッチ。左下に極太の欧文商品名と和文名、パッケージ写真とバッジを添える
成分解説（中身）アイスとソースの構成を説明する濃いオレンジの多角形パネルに断面写真を右寄せで置く。左に見出しと 2 行の説明を並べ、引き出し線でつなぐ
成分解説（外側）コーティングとトッピングを説明する左に写真、右に見出しと説明。前のセクションと左右を反転させた配置にする
メッセージ味わいを一言でまとめるクリーム色の六角形パネルの中央に、極太のセンター揃えの文。強調語は朱色にする
CTA他の商品へ誘導する六角形の濃茶ボタン
シェアSNS での拡散を促す丸いアイコンを 3 つ中央に並べる

COMPONENTS

部品

六角形の濃茶ボタン button-primary左右の端が尖った横長の六角形。白文字で、右端に矢印を付ける
円形の期間限定バッジ badge-limited濃茶の円に白縁を付け、短い語を 2 行で白抜きにする
成分の引き出し線 callout-line見出しから水平線を伸ばし、写真上の円で該当部分を囲む
影付きの成分見出し ingredient-heading極太の濃茶文字にピンクのずらし影を付け、2 行で組む
六角形のメッセージパネル hex-panelクリーム色の不規則な六角形。中央に極太のメッセージを置き、強調語は朱色にする
右上の情報リンク pill-link半透明の濃茶地に白い細枠を付けたピル型の小リンク
SNS シェアアイコン share-icons直径約 36px の丸いアイコンを 3 つ中央に並べる

守ること

背景は暖色とラベンダーの三角形グラデで、画面全体を埋める
商品写真は大きく傾け、画面からはみ出させる
文字色はチョコブラウンで統一する
成分は円と線で写真の該当部分を指して説明する

DON'T

避けること

白や単色ベタの背景にしない
角丸カードや柔らかい丸ボタンを使わない
青や緑などの寒色を主役にしない
長い本文を並べない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 多面体グラデと濃茶の期間限定アイス LP（Prismatic Warm Gradient Ice Cream Promo LP）

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

Overview

業種: 菓子・スイーツ／ 雰囲気: 力強い・インパクト、ポップ・元気、上品・高級
キーワード: 多面体グラデ・チョコブラウン・暖色プリズム・切り抜き商品・期間限定・極太スラブ欧文
地の質感: 三角形の面ごとにかかる柔らかなグラデと、うっすらした粒状ノイズ
形: 斜めに切った多角形の面。六角形のパネル。円形のバッジと引き出し線
温度感: 暖色寄りで甘く、ほんのり大人っぽい

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#2D1412`	見出し・ロゴ文字・ボタン地のチョコブラウン	6%	画素の実測
`background`	`#FDBD7D`	多面体背景のベースになるアプリコット	11%	画素の実測
`secondary`	`#FC4645`	多面体背景のコーラル面	11%	画素の実測
`background-alt`	`#F18449`	成分解説パネルの濃いオレンジ	12%	画素の主要色に補正
`surface`	`#FECE91`	メッセージ用六角形パネルのクリーム	9%	画素の実測
`cta`	`#452629`	主ボタンの地色（濃茶）	1%	画素の実測
`on-cta`	`#FCF6F6`	ボタン上の文字色	0%	画素の実測
`text-body`	`#5A3630`	本文テキスト	2%	画素の主要色に補正
`accent-1`	`#F04A1A`	メッセージ中の強調語（朱オレンジ）	0%	推定
`accent-2`	`#EB9CEC`	背景に差すラベンダーの面	3%	画素の実測
`accent-3`	`#FDACAB`	見出しの影に使うピンク	5%	画素の実測
`line`	`#41201E`	成分を指す円と引き出し線	0%	画素の主要色に補正

地はオレンジ・コーラル・アプリコット・ラベンダーの三角形を組み合わせた多面体グラデ。単色ベタの背景は使わない
文字は基本すべてチョコブラウン。白抜きの文字はボタンだけにする
強調語だけを朱オレンジに変える。強調は 1 ブロックにつき 2 語まで
情報を読ませる面は、濃いオレンジかクリームの単色に近い多角形パネルで敷く
ボタンは濃茶にして、商品のチョココーティングと色を合わせる

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	商品名の欧文を極太で組む	装飾・ディスプレイ	Alfa Slab One	400	44px	1.0	0.02em
`headline-lg`	和文の商品名・FV のキャッチ	ゴシック	Zen Kaku Gothic New	900	22px	1.4	0.02em
`headline-md`	成分名の見出し（ピンクの影付き）	ゴシック	Zen Kaku Gothic New	900	22px	1.3	0.02em
`headline-sm`	中央にセンター揃えで置くメッセージ文	ゴシック	Zen Kaku Gothic New	900	22px	1.75	0.02em
`body-md`	成分の説明文	ゴシック	Noto Sans JP	500	12px	1.9	0.03em
`label-button`	ボタンの文言	ゴシック	Noto Sans JP	700	15px	1.4	0.05em
`accent`	円形バッジ内の縦 2 行の短い語	ゴシック	Noto Sans JP	700	13px	1.3	0.05em

見出しはどれも極太にし、強い存在感を出す
成分名の見出しには、右下へずらしたピンクのドロップシャドウを付ける
欧文の商品名はスラブセリフを大きく 3 行に積む
本文は 2 行程度の短文にとどめる
メッセージ文はセンター揃えで 5 行前後。行間は広めにとる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。写真と文字を左右に重ねて配置する
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
商品写真は画面端からはみ出す大きさで置く
成分解説は左にテキスト、右に断面写真の構成。引き出し線と円で両者をつなぐ
セクション間に区切り線は引かず、背景の多角形の切り替わりで区切る
テキストの左端は約 16px でそろえる

Elevation & Depth

影はほぼ使わず、平面の多角形を重ねて奥行きを出す
見出しにピンクのオフセット影を付ける
商品写真には切り抜きの自然な影だけを残す

Shapes

角丸: 小 0px ／中 4px ／大 999px。ボタンは角丸の長方形。
写真の切り抜き: 背景を除いた切り抜き。写真を斜めに傾けて大きく置く
セクション境界: 斜めの多角形エッジ（六角形パネルの縁）
角は直線の斜めカットを基本にする
ボタンは左右の端を矢羽根状の六角形に切る
円は期間限定バッジと成分の指し示しにだけ使う

Components

六角形の濃茶ボタン（button-primary）: 左右の端が尖った横長の六角形。白文字で、右端に矢印を付ける
円形の期間限定バッジ（badge-limited）: 濃茶の円に白縁を付け、短い語を 2 行で白抜きにする
成分の引き出し線（callout-line）: 見出しから水平線を伸ばし、写真上の円で該当部分を囲む
影付きの成分見出し（ingredient-heading）: 極太の濃茶文字にピンクのずらし影を付け、2 行で組む
六角形のメッセージパネル（hex-panel）: クリーム色の不規則な六角形。中央に極太のメッセージを置き、強調語は朱色にする
右上の情報リンク（pill-link）: 半透明の濃茶地に白い細枠を付けたピル型の小リンク
SNS シェアアイコン（share-icons）: 直径約 36px の丸いアイコンを 3 つ中央に並べる

Do's and Don'ts

Do - 背景は暖色とラベンダーの三角形グラデで、画面全体を埋める - 商品写真は大きく傾け、画面からはみ出させる - 文字色はチョコブラウンで統一する - 成分は円と線で写真の該当部分を指して説明する

Don't - 白や単色ベタの背景にしない - 角丸カードや柔らかい丸ボタンを使わない - 青や緑などの寒色を主役にしない - 長い本文を並べない

Page Structure

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

ファーストビュー（商品の印象と期間限定であることを伝える）: 傾けた商品写真を大きく置き、右上に短いキャッチ。左下に極太の欧文商品名と和文名、パッケージ写真とバッジを添える
成分解説（中身）（アイスとソースの構成を説明する）: 濃いオレンジの多角形パネルに断面写真を右寄せで置く。左に見出しと 2 行の説明を並べ、引き出し線でつなぐ
成分解説（外側）（コーティングとトッピングを説明する）: 左に写真、右に見出しと説明。前のセクションと左右を反転させた配置にする
メッセージ（味わいを一言でまとめる）: クリーム色の六角形パネルの中央に、極太のセンター揃えの文。強調語は朱色にする
CTA（他の商品へ誘導する）: 六角形の濃茶ボタン
シェア（SNS での拡散を促す）: 丸いアイコンを 3 つ中央に並べる

Imagery

商品は背景を除いた切り抜き写真にし、30 度前後傾けて迫力を出す
断面の写真で中の層を見せる
添え物のスイーツや焼き菓子を切り抜いて散らす
背景は多面体グラデのグラフィックに細かいノイズを乗せ、温かい質感にする
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC 画像がないため推奨として記す。中央 480〜600px の SP カラムを維持し、左右は同じ多面体背景で埋める
PC では成分解説を 2 カラムで広めに配置する
商品写真は PC でも画面からはみ出す見せ方を保つ

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
version: alpha
name: Prismatic Warm Gradient Ice Cream Promo LP
description: オレンジ・コーラル・ピンク・薄紫の三角形をいくつも重ねた、プリズムのような多面体グラデ背景が特徴の LP。その上に濃いチョコ色の極太文字と、切り抜いた商品写真を置く。1 商品の期間限定告知を、短いスクロールで見せる構成。
colors:
  primary: '#2D1412'
  background: '#FDBD7D'
  secondary: '#FC4645'
  background-alt: '#F18449'
  surface: '#FECE91'
  cta: '#452629'
  on-cta: '#FCF6F6'
  text-body: '#5A3630'
  accent-1: '#F04A1A'
  accent-2: '#EB9CEC'
  accent-3: '#FDACAB'
  line: '#41201E'
typography:
  display:
    fontFamily: Alfa Slab One
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.75
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.03em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  accent:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 4px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 60px
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}'
    height: 50px
  badge-limited:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 60px
  callout-line:
    textColor: '{colors.line}'
    rounded: '{rounded.full}'
    height: 40px
  ingredient-heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 60px
  hex-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 330px
  pill-link:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    rounded: '{rounded.full}'
    height: 26px
  share-icons:
    rounded: '{rounded.full}'
    height: 36px
---

# DESIGN.md — 多面体グラデと濃茶の期間限定アイス LP（Prismatic Warm Gradient Ice Cream Promo LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: 力強い・インパクト、ポップ・元気、上品・高級
- **キーワード**: 多面体グラデ・チョコブラウン・暖色プリズム・切り抜き商品・期間限定・極太スラブ欧文
- **地の質感**: 三角形の面ごとにかかる柔らかなグラデと、うっすらした粒状ノイズ
- **形**: 斜めに切った多角形の面。六角形のパネル。円形のバッジと引き出し線
- **温度感**: 暖色寄りで甘く、ほんのり大人っぽい

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#2D1412` | 見出し・ロゴ文字・ボタン地のチョコブラウン | 6% | 画素の実測 |
| `background` | `#FDBD7D` | 多面体背景のベースになるアプリコット | 11% | 画素の実測 |
| `secondary` | `#FC4645` | 多面体背景のコーラル面 | 11% | 画素の実測 |
| `background-alt` | `#F18449` | 成分解説パネルの濃いオレンジ | 12% | 画素の主要色に補正 |
| `surface` | `#FECE91` | メッセージ用六角形パネルのクリーム | 9% | 画素の実測 |
| `cta` | `#452629` | 主ボタンの地色（濃茶） | 1% | 画素の実測 |
| `on-cta` | `#FCF6F6` | ボタン上の文字色 | 0% | 画素の実測 |
| `text-body` | `#5A3630` | 本文テキスト | 2% | 画素の主要色に補正 |
| `accent-1` | `#F04A1A` | メッセージ中の強調語（朱オレンジ） | 0% | 推定 |
| `accent-2` | `#EB9CEC` | 背景に差すラベンダーの面 | 3% | 画素の実測 |
| `accent-3` | `#FDACAB` | 見出しの影に使うピンク | 5% | 画素の実測 |
| `line` | `#41201E` | 成分を指す円と引き出し線 | 0% | 画素の主要色に補正 |

- 地はオレンジ・コーラル・アプリコット・ラベンダーの三角形を組み合わせた多面体グラデ。単色ベタの背景は使わない
- 文字は基本すべてチョコブラウン。白抜きの文字はボタンだけにする
- 強調語だけを朱オレンジに変える。強調は 1 ブロックにつき 2 語まで
- 情報を読ませる面は、濃いオレンジかクリームの単色に近い多角形パネルで敷く
- ボタンは濃茶にして、商品のチョココーティングと色を合わせる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 商品名の欧文を極太で組む | 装飾・ディスプレイ | Alfa Slab One | 400 | 44px | 1.0 | 0.02em |
| `headline-lg` | 和文の商品名・FV のキャッチ | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.4 | 0.02em |
| `headline-md` | 成分名の見出し（ピンクの影付き） | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.3 | 0.02em |
| `headline-sm` | 中央にセンター揃えで置くメッセージ文 | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.75 | 0.02em |
| `body-md` | 成分の説明文 | ゴシック | Noto Sans JP | 500 | 12px | 1.9 | 0.03em |
| `label-button` | ボタンの文言 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em |
| `accent` | 円形バッジ内の縦 2 行の短い語 | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.05em |

- 見出しはどれも極太にし、強い存在感を出す
- 成分名の見出しには、右下へずらしたピンクのドロップシャドウを付ける
- 欧文の商品名はスラブセリフを大きく 3 行に積む
- 本文は 2 行程度の短文にとどめる
- メッセージ文はセンター揃えで 5 行前後。行間は広めにとる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真と文字を左右に重ねて配置する
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
- 商品写真は画面端からはみ出す大きさで置く
- 成分解説は左にテキスト、右に断面写真の構成。引き出し線と円で両者をつなぐ
- セクション間に区切り線は引かず、背景の多角形の切り替わりで区切る
- テキストの左端は約 16px でそろえる

## Elevation & Depth

- 影はほぼ使わず、平面の多角形を重ねて奥行きを出す
- 見出しにピンクのオフセット影を付ける
- 商品写真には切り抜きの自然な影だけを残す

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
- **写真の切り抜き**: 背景を除いた切り抜き。写真を斜めに傾けて大きく置く
- **セクション境界**: 斜めの多角形エッジ（六角形パネルの縁）
- 角は直線の斜めカットを基本にする
- ボタンは左右の端を矢羽根状の六角形に切る
- 円は期間限定バッジと成分の指し示しにだけ使う

## Components

- **六角形の濃茶ボタン**（`button-primary`）: 左右の端が尖った横長の六角形。白文字で、右端に矢印を付ける
- **円形の期間限定バッジ**（`badge-limited`）: 濃茶の円に白縁を付け、短い語を 2 行で白抜きにする
- **成分の引き出し線**（`callout-line`）: 見出しから水平線を伸ばし、写真上の円で該当部分を囲む
- **影付きの成分見出し**（`ingredient-heading`）: 極太の濃茶文字にピンクのずらし影を付け、2 行で組む
- **六角形のメッセージパネル**（`hex-panel`）: クリーム色の不規則な六角形。中央に極太のメッセージを置き、強調語は朱色にする
- **右上の情報リンク**（`pill-link`）: 半透明の濃茶地に白い細枠を付けたピル型の小リンク
- **SNS シェアアイコン**（`share-icons`）: 直径約 36px の丸いアイコンを 3 つ中央に並べる

## Do's and Don'ts

**Do**
- 背景は暖色とラベンダーの三角形グラデで、画面全体を埋める
- 商品写真は大きく傾け、画面からはみ出させる
- 文字色はチョコブラウンで統一する
- 成分は円と線で写真の該当部分を指して説明する

**Don't**
- 白や単色ベタの背景にしない
- 角丸カードや柔らかい丸ボタンを使わない
- 青や緑などの寒色を主役にしない
- 長い本文を並べない

## Page Structure

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

1. **ファーストビュー**（商品の印象と期間限定であることを伝える）: 傾けた商品写真を大きく置き、右上に短いキャッチ。左下に極太の欧文商品名と和文名、パッケージ写真とバッジを添える
2. **成分解説（中身）**（アイスとソースの構成を説明する）: 濃いオレンジの多角形パネルに断面写真を右寄せで置く。左に見出しと 2 行の説明を並べ、引き出し線でつなぐ
3. **成分解説（外側）**（コーティングとトッピングを説明する）: 左に写真、右に見出しと説明。前のセクションと左右を反転させた配置にする
4. **メッセージ**（味わいを一言でまとめる）: クリーム色の六角形パネルの中央に、極太のセンター揃えの文。強調語は朱色にする
5. **CTA**（他の商品へ誘導する）: 六角形の濃茶ボタン
6. **シェア**（SNS での拡散を促す）: 丸いアイコンを 3 つ中央に並べる

## Imagery

- 商品は背景を除いた切り抜き写真にし、30 度前後傾けて迫力を出す
- 断面の写真で中の層を見せる
- 添え物のスイーツや焼き菓子を切り抜いて散らす
- 背景は多面体グラデのグラフィックに細かいノイズを乗せ、温かい質感にする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 画像がないため推奨として記す。中央 480〜600px の SP カラムを維持し、左右は同じ多面体背景で埋める
- PC では成分解説を 2 カラムで広めに配置する
- 商品写真は 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-89f74e46`（元 LP の URL から採番）
- **元 LP**: https://www.haagen-dazs.co.jp/products/special/rich-tiramisu-crunch/
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

菓子・スイーツ山吹色×えんじの絵本風お菓子 LPWarm Picture-Book Confectionery Campaign LP 菓子・スイーツピンク×水色ストライプのポップなスイーツ LPPop Pastel Stripe Dessert Topping LP 菓子・スイーツ桃色×金箔の季節限定スイーツドリンク LPPeach Pink and Gold Premium Dessert Drink LP 菓子・スイーツ金色きらめきの新作フローズンスイーツ LPGolden Shimmer Frozen Dessert LP 菓子・スイーツクラフト紙とチョコ色のサステナ菓子 LPKraft Chocolate Sustainability LP 菓子・スイーツ星空ネイビー×ゴールドのコラボスイーツ LPCosmic Night Collab Dessert Campaign LP