深紅×金唐草の高級スイーツ LP

Bordeaux Gold Luxury Dessert LP

深いボルドーと金の細線、ひし形フレームでまとめた期間限定アイス菓子の LP。明朝体と欧文セリフで格調を出し、商品の断面写真と引き出し線で食感の層を説明する縦長の一本道構成。

菓子・スイーツ上品・高級ラグジュアリー・ダーク力強い・インパクトSPPC

ダウンロード

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

COLORS

配色

地はボルドー〜黒赤の2〜3段階で構成し、白やパステルの面は使わない
ひし形の中心を明るい赤にしてスポットライト状のグラデーションを作る
線・枠・小見出しは金色に統一し、1pxの細線で描く
本文は白、見出しや英字はシャンパンゴールドで格を出す
SNSアイコン以外に寒色を入れない
上下の区切りには金唐草柄を帯として使う

TYPOGRAPHY

書体

display商品名など最大の見出し明朝／ Shippori Mincho 600 ／ 34px ／行間 1.3

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

headline-lgひし形内のメインコピー明朝／ Shippori Mincho 500 ／ 24px ／行間 2.0

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

headline-md特長ごとの見出し（金色）明朝／ Shippori Mincho 500 ／ 26px ／行間 1.4

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

headline-smひし形バッジ内の短いキーワード明朝／ Shippori Mincho 500 ／ 16px ／行間 1.5

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

accentpoint.1 などの欧文ラベル・英字商品名欧文セリフ／ Cormorant Garamond 500 ／ 18px ／行間 1.2

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

body-md説明本文（中央揃え）ゴシック／ Noto Sans JP 500 ／ 12px ／行間 1.8

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

label-buttonCTAボタン文字ゴシック／ Zen Kaku Gothic New 700 ／ 16px ／行間 1.4

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

見出しはすべて明朝体で、字間を広めにとる
本文は小さめのゴシックで中央揃え、短い改行で詩的に区切る
欧文ラベルはセリフ体の小文字中心で、下に金の細線を引く
文字にはわずかなドロップシャドウで暗地から浮かせる
太字の多用は避け、サイズ差と色で階層を作る

PAGE STRUCTURE

セクション構成

ファーストビュー商品の存在感と限定感を一目で伝える上部に金唐草、斜めの商品切り抜き、ひし形の帯に手書き風コピー、明朝の商品名と欧文名、パッケージ写真
コンセプトコピー味わいの世界観を短文で伝える全幅のひし形フレーム内に白明朝の5行コピーを中央揃え
特長1（構造説明）食感の層を視覚的に説明するポイントバッジ→金見出し→本文→金枠ラベル2つと引き出し線付き断面写真
特長2・3中身の素材を個別に訴求ひし形バッジと見出し・本文を左右交互にずらし、写真から線で繋ぐ
由来・ストーリー元になった菓子の格式を伝え価値を高める山型に光るキラキラ背景、小見出し＋引用符付き大見出し、中央本文、ケーキ写真、下部に金唐草のジグザグ帯
CTA・シェア他商品への回遊とSNS拡散暗いボルドー地に金縁ピルボタン、その下に円形SNSアイコン3つ

COMPONENTS

部品

ひし形コピーフレーム diamond-frame画面幅いっぱいの金細線ひし形。中心を明るい赤のグラデにして白明朝コピーを中央に置く。
ポイントひし形バッジ point-badge小さな金枠ひし形に欧文の番号ラベル、細線、和文キーワード2行。
金枠ラベル label-box赤い面に金の細枠の長方形。2行の短い説明を入れ、下に引き出し線を伸ばす。
引き出し線 callout-line金の1px縦線と小円で写真の部位とテキストを結ぶ。
期間限定バッジ limited-badge暗赤の横長ひし形に白文字の短いラベル。
金縁ピルCTA button-primary暗いボルドー地に金の二重細枠、金文字と右矢印。
SNSシェアアイコン sns-share円形のSNSアイコンを3つ横並びで中央配置。
成分情報リンク info-link右上に置く暗地の角丸小タブ。白文字。

守ること

金は細線と文字だけに使い、面積を小さく保つ
ひし形モチーフをFV・コピー・ポイントで繰り返す
商品写真は大きく斜めに置き、断面を見せる
見出しは明朝、欧文はセリフ体でそろえる
背景にベルベット調テクスチャと中央の光を入れる

DON'T

避けること

白背景や淡色背景のセクションを入れない
角丸カードや影の強いボックスを使わない
ポップな丸ゴシックや原色の強調色を使わない
金を太い面や太字で多用しない
情報を詰め込みすぎず、コピーは短く余白を広く

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 深紅×金唐草の高級スイーツ LP（Bordeaux Gold Luxury Dessert LP）

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

Overview

業種: 菓子・スイーツ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト
キーワード: ボルドー・金の細線・ひし形フレーム・ベルベット質感・金唐草・明朝体
地の質感: ベルベット調の布目テクスチャを敷いた深紅の地に、中央が明るい赤のビネット光。金の唐草ダマスク柄を上下端に配置。
形: 45度のひし形と山型ジグザグが反復。角丸はほぼなく、金の1px細線で縁取る。
温度感: 暖色・濃厚。チョコと赤ワインを思わせる重厚な温かさ。

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#8B242D`	ブランドを代表する深紅ボルドー	30%	画素の実測
`background`	`#571515`	ページの基調となる濃いワイン色	25%	画素の主要色に補正
`dark-section`	`#3B0306`	フッター・FV下部の最暗部	12%	画素の実測
`accent-1`	`#B3090D`	ひし形中央に光る鮮やかな赤	7%	画素の実測
`secondary`	`#D3B07F`	金の細線・枠・装飾	3%	画素の主要色に補正
`accent-2`	`#EED09E`	見出し・ボタン文字のシャンパンゴールド	1%	画素の実測
`text`	`#FFFFFF`	コピー・本文の白文字	2%	推定
`tint-1`	`#B42333`	ラベル枠内の明るい赤面	1%	画素の実測
`accent-3`	`#946343`	チョコ写真のブラウン	7%	画素の実測
`cta`	`#4C0D12`	CTAボタンの暗い面	1%	画素の実測
`on-cta`	`#EED09E`	CTAボタン上の金文字	0%	画素の実測

地はボルドー〜黒赤の2〜3段階で構成し、白やパステルの面は使わない
ひし形の中心を明るい赤にしてスポットライト状のグラデーションを作る
線・枠・小見出しは金色に統一し、1pxの細線で描く
本文は白、見出しや英字はシャンパンゴールドで格を出す
SNSアイコン以外に寒色を入れない
上下の区切りには金唐草柄を帯として使う

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	商品名など最大の見出し	明朝	Shippori Mincho	600	34px	1.3	0.05em
`headline-lg`	ひし形内のメインコピー	明朝	Shippori Mincho	500	24px	2.0	0.1em
`headline-md`	特長ごとの見出し（金色）	明朝	Shippori Mincho	500	26px	1.4	0.08em
`headline-sm`	ひし形バッジ内の短いキーワード	明朝	Shippori Mincho	500	16px	1.5	0.1em
`accent`	point.1 などの欧文ラベル・英字商品名	欧文セリフ	Cormorant Garamond	500	18px	1.2	0.08em
`body-md`	説明本文（中央揃え）	ゴシック	Noto Sans JP	500	12px	1.8	0.05em
`label-button`	CTAボタン文字	ゴシック	Zen Kaku Gothic New	700	16px	1.4	0.05em

見出しはすべて明朝体で、字間を広めにとる
本文は小さめのゴシックで中央揃え、短い改行で詩的に区切る
欧文ラベルはセリフ体の小文字中心で、下に金の細線を引く
文字にはわずかなドロップシャドウで暗地から浮かせる
太字の多用は避け、サイズ差と色で階層を作る
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、要素を左右交互にずらして配置
本文ブロックの幅: 画面幅の約 85%
余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
中央揃えを基本とし、特長説明は左右に振り分けて斜めの視線誘導を作る
ひし形フレームを画面幅いっぱいに置き、その中に短いコピーを入れる
商品断面写真から金の引き出し線で各ポイントへ繋ぐ
セクション間は背景色の切り替えではなくテクスチャとビネットで連続させる

Elevation & Depth

カードの影は使わず、光のグラデーションで奥行きを出す
商品写真の下に柔らかい暗い影を落として浮かせる
金のキラキラ粒子（ボケ光）で上品な輝きを足す
CTAボタンは内側にわずかな光彩を入れる

Shapes

角丸: 小 0px ／中 4px ／大 40px。ボタンはピル型。
写真の切り抜き: 商品は背景透過の切り抜きで、斜めに大きく配置
セクション境界: 金の細線によるひし形・山型ジグザグ、下部は金唐草の帯
フレームは45度のひし形を基本形にする
ラベルは角ばった長方形＋金の細枠
CTAは金の二重線で縁取ったピル型
引き出し線の端は小さな金の円で終える

Components

ひし形コピーフレーム（diamond-frame）: 画面幅いっぱいの金細線ひし形。中心を明るい赤のグラデにして白明朝コピーを中央に置く。
ポイントひし形バッジ（point-badge）: 小さな金枠ひし形に欧文の番号ラベル、細線、和文キーワード2行。
金枠ラベル（label-box）: 赤い面に金の細枠の長方形。2行の短い説明を入れ、下に引き出し線を伸ばす。
引き出し線（callout-line）: 金の1px縦線と小円で写真の部位とテキストを結ぶ。
期間限定バッジ（limited-badge）: 暗赤の横長ひし形に白文字の短いラベル。
金縁ピルCTA（button-primary）: 暗いボルドー地に金の二重細枠、金文字と右矢印。
SNSシェアアイコン（sns-share）: 円形のSNSアイコンを3つ横並びで中央配置。
成分情報リンク（info-link）: 右上に置く暗地の角丸小タブ。白文字。

Do's and Don'ts

Do - 金は細線と文字だけに使い、面積を小さく保つ - ひし形モチーフをFV・コピー・ポイントで繰り返す - 商品写真は大きく斜めに置き、断面を見せる - 見出しは明朝、欧文はセリフ体でそろえる - 背景にベルベット調テクスチャと中央の光を入れる

Don't - 白背景や淡色背景のセクションを入れない - 角丸カードや影の強いボックスを使わない - ポップな丸ゴシックや原色の強調色を使わない - 金を太い面や太字で多用しない - 情報を詰め込みすぎず、コピーは短く余白を広く

Page Structure

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

ファーストビュー（商品の存在感と限定感を一目で伝える）: 上部に金唐草、斜めの商品切り抜き、ひし形の帯に手書き風コピー、明朝の商品名と欧文名、パッケージ写真
コンセプトコピー（味わいの世界観を短文で伝える）: 全幅のひし形フレーム内に白明朝の5行コピーを中央揃え
特長1（構造説明）（食感の層を視覚的に説明する）: ポイントバッジ→金見出し→本文→金枠ラベル2つと引き出し線付き断面写真
特長2・3（中身の素材を個別に訴求）: ひし形バッジと見出し・本文を左右交互にずらし、写真から線で繋ぐ
由来・ストーリー（元になった菓子の格式を伝え価値を高める）: 山型に光るキラキラ背景、小見出し＋引用符付き大見出し、中央本文、ケーキ写真、下部に金唐草のジグザグ帯
CTA・シェア（他商品への回遊とSNS拡散）: 暗いボルドー地に金縁ピルボタン、その下に円形SNSアイコン3つ

Imagery

商品は背景を抜いた切り抜きで、断面が見える角度で大きく斜めに配置
照明は暖色のスポットで、チョコの艶とソースのとろみを強調
金の唐草ダマスク柄を装飾帯や額縁として使う
金色のボケ粒子・星形の輝きで祝祭感を出す
ケーキは金の台座に載せ、切り分けた断面を見せる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は SP と同じ縦長カラム（約375〜400px幅）を中央に置くだけ
PC の左右余白は金唐草ダマスク柄とひし形の壁紙で埋める
カラム内のレイアウト・文字サイズは SP と同一
CTA とSNSは 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: Bordeaux Gold Luxury Dessert LP
description: 深いボルドーと金の細線、ひし形フレームでまとめた期間限定アイス菓子の LP。明朝体と欧文セリフで格調を出し、商品の断面写真と引き出し線で食感の層を説明する縦長の一本道構成。
colors:
  primary: '#8B242D'
  background: '#571515'
  dark-section: '#3B0306'
  accent-1: '#B3090D'
  secondary: '#D3B07F'
  accent-2: '#EED09E'
  text: '#FFFFFF'
  tint-1: '#B42333'
  accent-3: '#946343'
  cta: '#4C0D12'
  on-cta: '#EED09E'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 24px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.1em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Shippori Mincho
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.1em
  accent:
    fontFamily: Cormorant Garamond
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.05em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 4px
  lg: 40px
  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}'
  diamond-frame:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 400px
  point-badge:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 130px
  label-box:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 44px
  callout-line:
    textColor: '{colors.secondary}'
    rounded: '{rounded.full}'
    height: 200px
  limited-badge:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 30px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 54px
  sns-share:
    rounded: '{rounded.full}'
    height: 38px
  info-link:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.text}'
    rounded: '{rounded.md}'
    height: 24px
---

# DESIGN.md — 深紅×金唐草の高級スイーツ LP（Bordeaux Gold Luxury Dessert LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト
- **キーワード**: ボルドー・金の細線・ひし形フレーム・ベルベット質感・金唐草・明朝体
- **地の質感**: ベルベット調の布目テクスチャを敷いた深紅の地に、中央が明るい赤のビネット光。金の唐草ダマスク柄を上下端に配置。
- **形**: 45度のひし形と山型ジグザグが反復。角丸はほぼなく、金の1px細線で縁取る。
- **温度感**: 暖色・濃厚。チョコと赤ワインを思わせる重厚な温かさ。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#8B242D` | ブランドを代表する深紅ボルドー | 30% | 画素の実測 |
| `background` | `#571515` | ページの基調となる濃いワイン色 | 25% | 画素の主要色に補正 |
| `dark-section` | `#3B0306` | フッター・FV下部の最暗部 | 12% | 画素の実測 |
| `accent-1` | `#B3090D` | ひし形中央に光る鮮やかな赤 | 7% | 画素の実測 |
| `secondary` | `#D3B07F` | 金の細線・枠・装飾 | 3% | 画素の主要色に補正 |
| `accent-2` | `#EED09E` | 見出し・ボタン文字のシャンパンゴールド | 1% | 画素の実測 |
| `text` | `#FFFFFF` | コピー・本文の白文字 | 2% | 推定 |
| `tint-1` | `#B42333` | ラベル枠内の明るい赤面 | 1% | 画素の実測 |
| `accent-3` | `#946343` | チョコ写真のブラウン | 7% | 画素の実測 |
| `cta` | `#4C0D12` | CTAボタンの暗い面 | 1% | 画素の実測 |
| `on-cta` | `#EED09E` | CTAボタン上の金文字 | 0% | 画素の実測 |

- 地はボルドー〜黒赤の2〜3段階で構成し、白やパステルの面は使わない
- ひし形の中心を明るい赤にしてスポットライト状のグラデーションを作る
- 線・枠・小見出しは金色に統一し、1pxの細線で描く
- 本文は白、見出しや英字はシャンパンゴールドで格を出す
- SNSアイコン以外に寒色を入れない
- 上下の区切りには金唐草柄を帯として使う

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 商品名など最大の見出し | 明朝 | Shippori Mincho | 600 | 34px | 1.3 | 0.05em |
| `headline-lg` | ひし形内のメインコピー | 明朝 | Shippori Mincho | 500 | 24px | 2.0 | 0.1em |
| `headline-md` | 特長ごとの見出し（金色） | 明朝 | Shippori Mincho | 500 | 26px | 1.4 | 0.08em |
| `headline-sm` | ひし形バッジ内の短いキーワード | 明朝 | Shippori Mincho | 500 | 16px | 1.5 | 0.1em |
| `accent` | point.1 などの欧文ラベル・英字商品名 | 欧文セリフ | Cormorant Garamond | 500 | 18px | 1.2 | 0.08em |
| `body-md` | 説明本文（中央揃え） | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.05em |
| `label-button` | CTAボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.4 | 0.05em |

- 見出しはすべて明朝体で、字間を広めにとる
- 本文は小さめのゴシックで中央揃え、短い改行で詩的に区切る
- 欧文ラベルはセリフ体の小文字中心で、下に金の細線を引く
- 文字にはわずかなドロップシャドウで暗地から浮かせる
- 太字の多用は避け、サイズ差と色で階層を作る
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、要素を左右交互にずらして配置
- **本文ブロックの幅**: 画面幅の約 85%
- **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
- 中央揃えを基本とし、特長説明は左右に振り分けて斜めの視線誘導を作る
- ひし形フレームを画面幅いっぱいに置き、その中に短いコピーを入れる
- 商品断面写真から金の引き出し線で各ポイントへ繋ぐ
- セクション間は背景色の切り替えではなくテクスチャとビネットで連続させる

## Elevation & Depth

- カードの影は使わず、光のグラデーションで奥行きを出す
- 商品写真の下に柔らかい暗い影を落として浮かせる
- 金のキラキラ粒子（ボケ光）で上品な輝きを足す
- CTAボタンは内側にわずかな光彩を入れる

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。
- **写真の切り抜き**: 商品は背景透過の切り抜きで、斜めに大きく配置
- **セクション境界**: 金の細線によるひし形・山型ジグザグ、下部は金唐草の帯
- フレームは45度のひし形を基本形にする
- ラベルは角ばった長方形＋金の細枠
- CTAは金の二重線で縁取ったピル型
- 引き出し線の端は小さな金の円で終える

## Components

- **ひし形コピーフレーム**（`diamond-frame`）: 画面幅いっぱいの金細線ひし形。中心を明るい赤のグラデにして白明朝コピーを中央に置く。
- **ポイントひし形バッジ**（`point-badge`）: 小さな金枠ひし形に欧文の番号ラベル、細線、和文キーワード2行。
- **金枠ラベル**（`label-box`）: 赤い面に金の細枠の長方形。2行の短い説明を入れ、下に引き出し線を伸ばす。
- **引き出し線**（`callout-line`）: 金の1px縦線と小円で写真の部位とテキストを結ぶ。
- **期間限定バッジ**（`limited-badge`）: 暗赤の横長ひし形に白文字の短いラベル。
- **金縁ピルCTA**（`button-primary`）: 暗いボルドー地に金の二重細枠、金文字と右矢印。
- **SNSシェアアイコン**（`sns-share`）: 円形のSNSアイコンを3つ横並びで中央配置。
- **成分情報リンク**（`info-link`）: 右上に置く暗地の角丸小タブ。白文字。

## Do's and Don'ts

**Do**
- 金は細線と文字だけに使い、面積を小さく保つ
- ひし形モチーフをFV・コピー・ポイントで繰り返す
- 商品写真は大きく斜めに置き、断面を見せる
- 見出しは明朝、欧文はセリフ体でそろえる
- 背景にベルベット調テクスチャと中央の光を入れる

**Don't**
- 白背景や淡色背景のセクションを入れない
- 角丸カードや影の強いボックスを使わない
- ポップな丸ゴシックや原色の強調色を使わない
- 金を太い面や太字で多用しない
- 情報を詰め込みすぎず、コピーは短く余白を広く

## Page Structure

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

1. **ファーストビュー**（商品の存在感と限定感を一目で伝える）: 上部に金唐草、斜めの商品切り抜き、ひし形の帯に手書き風コピー、明朝の商品名と欧文名、パッケージ写真
2. **コンセプトコピー**（味わいの世界観を短文で伝える）: 全幅のひし形フレーム内に白明朝の5行コピーを中央揃え
3. **特長1（構造説明）**（食感の層を視覚的に説明する）: ポイントバッジ→金見出し→本文→金枠ラベル2つと引き出し線付き断面写真
4. **特長2・3**（中身の素材を個別に訴求）: ひし形バッジと見出し・本文を左右交互にずらし、写真から線で繋ぐ
5. **由来・ストーリー**（元になった菓子の格式を伝え価値を高める）: 山型に光るキラキラ背景、小見出し＋引用符付き大見出し、中央本文、ケーキ写真、下部に金唐草のジグザグ帯
6. **CTA・シェア**（他商品への回遊とSNS拡散）: 暗いボルドー地に金縁ピルボタン、その下に円形SNSアイコン3つ

## Imagery

- 商品は背景を抜いた切り抜きで、断面が見える角度で大きく斜めに配置
- 照明は暖色のスポットで、チョコの艶とソースのとろみを強調
- 金の唐草ダマスク柄を装飾帯や額縁として使う
- 金色のボケ粒子・星形の輝きで祝祭感を出す
- ケーキは金の台座に載せ、切り分けた断面を見せる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は SP と同じ縦長カラム（約375〜400px幅）を中央に置くだけ
- PC の左右余白は金唐草ダマスク柄とひし形の壁紙で埋める
- カラム内のレイアウト・文字サイズは SP と同一
- CTA とSNSは 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-892131cd`（元 LP の URL から採番）
- **元 LP**: https://www.haagen-dazs.co.jp/products/special/sachertorte/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（8/11 色を画素から実測）、書体 中、余白 中
- **生成**: 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