チョコ色×金の垂れ装飾菓子キャンペーンLP

Chocolate Drip Receipt Campaign LP

濃いチョコ茶の地に、白とクリーム色の角丸パネルを縦に並べたレシート応募キャンペーンLP。パネルの角からチョコが垂れる装飾、黄色や金のグラデーションで出す強調、丸みのある太いゴシックで、楽しくておいしそうな印象にしている。

キャンペーン・プレゼントポップ・元気親しみ・手作り感かわいいSPPC

ダウンロード

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

COLORS

配色

ページ全体の地はチョコ茶。内容は白パネルに入れる
対象商品と問い合わせ先だけクリーム色の面に分け、変化をつける
茶地の上では応募期間を黄色の文字と黄色ピルで最も強く目立たせる
主CTAだけ金のグラデーションで光沢を出す
赤は当選数バッジだけに限る
本文の文字は黒ではなく濃茶にする

TYPOGRAPHY

書体

displayFVのキャンペーン名ロゴ文字装飾・ディスプレイ／ Dela Gothic One 900 ／ 46px ／行間 1.2

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

headline-lg茶地に置く日付丸ゴシック／ M PLUS Rounded 1c 700 ／ 27px ／行間 1.5

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

headline-mdセクション見出し（ピルの中）丸ゴシック／ M PLUS Rounded 1c 700 ／ 19px ／行間 1.3

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

headline-smステップの説明・賞品名丸ゴシック／ M PLUS Rounded 1c 700 ／ 15px ／行間 1.6

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

body-md本文・注意事項丸ゴシック／ M PLUS Rounded 1c 500 ／ 14px ／行間 1.75

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

note画像注記・小さい注意書き丸ゴシック／ M PLUS Rounded 1c 500 ／ 10px ／行間 1.6

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

label-buttonCTAボタンの文字丸ゴシック／ M PLUS Rounded 1c 700 ／ 15px ／行間 1.2

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

accentSTEP番号の欧文欧文サンセリフ／ Montserrat 800 ／ 13px ／行間 1.0

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

全体を丸みのある太いゴシックで統一する
日付の数字は大きく、年月日や曜日は小さくして強弱をつける
FVのロゴ文字は茶の文字に白と金の太いフチを重ねる
本文は中央揃えにせず左揃えにする。ステップ説明だけ中央揃えにする
注意事項は※から始まる行を詰めて並べる

PAGE STRUCTURE

セクション構成

ファーストビューキャンペーン名と賞品の提示淡いグレーの地に紙吹雪を散らす。フチ付きの大見出しの下に賞品の大きな切り抜き写真と赤の当選数バッジを置く
期間の告知応募期間とレシートの有効期間を伝える茶地に黄色と白のピルラベルを置き、大きな日付を中央揃えにする。最後に注記を添える
応募方法参加の手順を説明する白パネルに説明文を置き、太枠のSTEPカードを2枚並べる。注記の後に金のCTAを置く
対象商品購入対象の商品を例示するクリーム色パネルに商品パッケージを2列グリッドで並べ、下に商品名を中央揃えで書く
応募要項期間・賞品・発表方法の整理白パネルに細枠のピルラベルと値を縦に交互に並べる
注意事項規約を告知する白パネルに※から始まる行を詰めて並べる。中に問い合わせボックスを入れる
関連バナー商品ブランドへの誘導茶地に横長のバナーを縦に2本並べる

COMPONENTS

部品

金グラデCTA button-primary横幅いっぱいのピル型。金色の斜めグラデーションに濃茶の太字
見出しピル section-pill茶色の塗りに白の太字。パネル上辺の中央に配置する
期間ラベル period-label茶地の上に置く黄色または白のピル。下に大きな日付を置く
細枠ラベル outline-label要項の項目名に使う。白地に茶色の細枠のピル
ステップカード step-card太枠の角丸カード。垂れ形のSTEPタブ、太線のアイコン、短い説明で構成する
垂れ装飾パネル drip-panel白またはクリーム色の大きな角丸パネル。角の一部をチョコが垂れる形に置き換える
当選数バッジ badge-count赤い吹き出し円に白文字。当選人数を示す
問い合わせボックス contact-box白パネルの中に置くクリーム色の角丸ボックス。中央揃えで連絡先を書く

守ること

茶の地に明るいパネルを置く構成を保つ
パネルにはチョコが垂れる装飾を必ず添える
日付と期間はラベルと大きな数字の組み合わせで見せる
FVには紙吹雪や流れるリボンを散らして祝祭感を出す
アイコンは茶色の太線と白の塗りで統一する

DON'T

避けること

寒色を地の色に使わない
本文に純黒を使わない
影やガラス風の効果を加えない
角が尖った四角のボタンを使わない
CTAを金以外の色にしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — チョコ色×金の垂れ装飾菓子キャンペーンLP（Chocolate Drip Receipt Campaign LP）

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

Overview

業種: キャンペーン・プレゼント／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい
キーワード: チョコ色の地・垂れる装飾・紙吹雪・金グラデCTA・角丸パネル・キャラクター玩具
地の質感: フラットな単色面。チョコが溶けて垂れるシルエットだけで質感を出す
形: 大きめ角丸の白パネル、ピル型ラベル、太い線で囲んだ角丸ステップカード
温度感: 暖色で甘い。茶とクリーム色が中心

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#442207`	チョコ茶の地色・見出しラベル	24%	画素の実測
`background`	`#FEFEFE`	内容パネルの白	40%	画素の実測
`background-alt`	`#FFFFFF`	FVの淡いグレーの地	5%	画素の実測
`surface`	`#FEFBC6`	対象商品・問い合わせのクリーム色パネル	9%	画素の実測
`accent-1`	`#FFE500`	期間ラベル・日付の黄色	1%	推定
`cta`	`#D9A520`	応募ボタンの金グラデーション	1%	推定
`on-cta`	`#432208`	CTAボタンの文字	0%	画素の主要色に補正
`text`	`#3B2211`	本文・見出しの濃茶	3%	画素の主要色に補正
`accent-2`	`#E40214`	当選数バッジの赤	0%	画素の実測
`on-dark`	`#FFFEFB`	茶地の上の白文字	0%	画素の実測
`line`	`#321804`	ステップカードの枠線・アウトラインラベル	1%	画素の実測

ページ全体の地はチョコ茶。内容は白パネルに入れる
対象商品と問い合わせ先だけクリーム色の面に分け、変化をつける
茶地の上では応募期間を黄色の文字と黄色ピルで最も強く目立たせる
主CTAだけ金のグラデーションで光沢を出す
赤は当選数バッジだけに限る
本文の文字は黒ではなく濃茶にする

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVのキャンペーン名ロゴ文字	装飾・ディスプレイ	Dela Gothic One	900	46px	1.2	0.02em
`headline-lg`	茶地に置く日付	丸ゴシック	M PLUS Rounded 1c	700	27px	1.5	0.0em
`headline-md`	セクション見出し（ピルの中）	丸ゴシック	M PLUS Rounded 1c	700	19px	1.3	0.05em
`headline-sm`	ステップの説明・賞品名	丸ゴシック	M PLUS Rounded 1c	700	15px	1.6	0.02em
`body-md`	本文・注意事項	丸ゴシック	M PLUS Rounded 1c	500	14px	1.75	0.03em
`note`	画像注記・小さい注意書き	丸ゴシック	M PLUS Rounded 1c	500	10px	1.6	0.0em
`label-button`	CTAボタンの文字	丸ゴシック	M PLUS Rounded 1c	700	15px	1.2	0.03em
`accent`	STEP番号の欧文	欧文サンセリフ	Montserrat	800	13px	1.0	0.05em

全体を丸みのある太いゴシックで統一する
日付の数字は大きく、年月日や曜日は小さくして強弱をつける
FVのロゴ文字は茶の文字に白と金の太いフチを重ねる
本文は中央揃えにせず左揃えにする。ステップ説明だけ中央揃えにする
注意事項は※から始まる行を詰めて並べる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。PC はステップと商品を横並びにする
本文ブロックの幅: 画面幅の約 86%
余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
白パネルは画面の左右に約22pxの茶色の余白を残して置く
パネル上辺の中央にピル型の見出しを重ねる
ステップカードはパネルの中で縦に積む
商品画像はクリーム色パネルの中に2列グリッドで並べ、最後の1個は中央に置く
応募要項は細枠のピルラベルと中央揃えの値を交互に並べる

Elevation & Depth

影は使わずフラットにする
奥行きは茶の地と明るいパネルの明暗差だけで出す

Shapes

角丸: 小 8px ／中 20px ／大 28px。ボタンはピル型。
写真の切り抜き: 商品と玩具は切り抜いて背景なしで置く
セクション境界: FVの下端は直線で茶色に切り替える。パネルの角にチョコが垂れるシルエットを添える
パネルの角丸は約28px
ステップカードは約3pxの茶色の太枠と角丸24pxにする
STEPラベルは垂れた形の茶色のタブで上辺から吊り下げる
ラベル類はすべてピル型にする

Components

金グラデCTA（button-primary）: 横幅いっぱいのピル型。金色の斜めグラデーションに濃茶の太字
見出しピル（section-pill）: 茶色の塗りに白の太字。パネル上辺の中央に配置する
期間ラベル（period-label）: 茶地の上に置く黄色または白のピル。下に大きな日付を置く
細枠ラベル（outline-label）: 要項の項目名に使う。白地に茶色の細枠のピル
ステップカード（step-card）: 太枠の角丸カード。垂れ形のSTEPタブ、太線のアイコン、短い説明で構成する
垂れ装飾パネル（drip-panel）: 白またはクリーム色の大きな角丸パネル。角の一部をチョコが垂れる形に置き換える
当選数バッジ（badge-count）: 赤い吹き出し円に白文字。当選人数を示す
問い合わせボックス（contact-box）: 白パネルの中に置くクリーム色の角丸ボックス。中央揃えで連絡先を書く

Do's and Don'ts

Do - 茶の地に明るいパネルを置く構成を保つ - パネルにはチョコが垂れる装飾を必ず添える - 日付と期間はラベルと大きな数字の組み合わせで見せる - FVには紙吹雪や流れるリボンを散らして祝祭感を出す - アイコンは茶色の太線と白の塗りで統一する

Don't - 寒色を地の色に使わない - 本文に純黒を使わない - 影やガラス風の効果を加えない - 角が尖った四角のボタンを使わない - CTAを金以外の色にしない

Page Structure

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

ファーストビュー（キャンペーン名と賞品の提示）: 淡いグレーの地に紙吹雪を散らす。フチ付きの大見出しの下に賞品の大きな切り抜き写真と赤の当選数バッジを置く
期間の告知（応募期間とレシートの有効期間を伝える）: 茶地に黄色と白のピルラベルを置き、大きな日付を中央揃えにする。最後に注記を添える
応募方法（参加の手順を説明する）: 白パネルに説明文を置き、太枠のSTEPカードを2枚並べる。注記の後に金のCTAを置く
対象商品（購入対象の商品を例示する）: クリーム色パネルに商品パッケージを2列グリッドで並べ、下に商品名を中央揃えで書く
応募要項（期間・賞品・発表方法の整理）: 白パネルに細枠のピルラベルと値を縦に交互に並べる
注意事項（規約を告知する）: 白パネルに※から始まる行を詰めて並べる。中に問い合わせボックスを入れる
関連バナー（商品ブランドへの誘導）: 茶地に横長のバナーを縦に2本並べる

Imagery

キャラクター玩具や商品は白背景で切り抜き、大きく置く
紙吹雪は黄・青・ピンク・緑の細いリボンと星や丸の小片で描く
アイコンはスマホやレシートを太い茶色の線で描いたフラットなイラストにする
溶けたチョコが垂れる茶色のシルエットを装飾として使う
擬音を手書き風の太字で添える
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCではFVを横並びにし、左に見出し、右に賞品を置く
PCでは期間を1行に横並びにし、ラベルを左に置く
PCではパネルを中央の約60%幅に収め、STEPカードを2列にする
PCでは対象商品を5列で1行に並べる
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: Chocolate Drip Receipt Campaign LP
description: 濃いチョコ茶の地に、白とクリーム色の角丸パネルを縦に並べたレシート応募キャンペーンLP。パネルの角からチョコが垂れる装飾、黄色や金のグラデーションで出す強調、丸みのある太いゴシックで、楽しくておいしそうな印象にしている。
colors:
  primary: '#442207'
  background: '#FEFEFE'
  background-alt: '#FFFFFF'
  surface: '#FEFBC6'
  accent-1: '#FFE500'
  cta: '#D9A520'
  on-cta: '#432208'
  text: '#3B2211'
  accent-2: '#E40214'
  on-dark: '#FFFEFB'
  line: '#321804'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 46px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 27px
    fontWeight: 700
    lineHeight: 1.5
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: M PLUS Rounded 1c
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.02em
  body-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.75
    letterSpacing: 0.03em
  note:
    fontFamily: M PLUS Rounded 1c
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.6
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.03em
  accent:
    fontFamily: Montserrat
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 8px
  md: 20px
  lg: 28px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 56px
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: 58px
  section-pill:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 36px
  period-label:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 32px
  outline-label:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 30px
  step-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 350px
  drip-panel:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 900px
  badge-count:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 80px
  contact-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 260px
---

# DESIGN.md — チョコ色×金の垂れ装飾 菓子キャンペーンLP（Chocolate Drip Receipt Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、親しみ・手作り感、かわいい
- **キーワード**: チョコ色の地・垂れる装飾・紙吹雪・金グラデCTA・角丸パネル・キャラクター玩具
- **地の質感**: フラットな単色面。チョコが溶けて垂れるシルエットだけで質感を出す
- **形**: 大きめ角丸の白パネル、ピル型ラベル、太い線で囲んだ角丸ステップカード
- **温度感**: 暖色で甘い。茶とクリーム色が中心

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#442207` | チョコ茶の地色・見出しラベル | 24% | 画素の実測 |
| `background` | `#FEFEFE` | 内容パネルの白 | 40% | 画素の実測 |
| `background-alt` | `#FFFFFF` | FVの淡いグレーの地 | 5% | 画素の実測 |
| `surface` | `#FEFBC6` | 対象商品・問い合わせのクリーム色パネル | 9% | 画素の実測 |
| `accent-1` | `#FFE500` | 期間ラベル・日付の黄色 | 1% | 推定 |
| `cta` | `#D9A520` | 応募ボタンの金グラデーション | 1% | 推定 |
| `on-cta` | `#432208` | CTAボタンの文字 | 0% | 画素の主要色に補正 |
| `text` | `#3B2211` | 本文・見出しの濃茶 | 3% | 画素の主要色に補正 |
| `accent-2` | `#E40214` | 当選数バッジの赤 | 0% | 画素の実測 |
| `on-dark` | `#FFFEFB` | 茶地の上の白文字 | 0% | 画素の実測 |
| `line` | `#321804` | ステップカードの枠線・アウトラインラベル | 1% | 画素の実測 |

- ページ全体の地はチョコ茶。内容は白パネルに入れる
- 対象商品と問い合わせ先だけクリーム色の面に分け、変化をつける
- 茶地の上では応募期間を黄色の文字と黄色ピルで最も強く目立たせる
- 主CTAだけ金のグラデーションで光沢を出す
- 赤は当選数バッジだけに限る
- 本文の文字は黒ではなく濃茶にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのキャンペーン名ロゴ文字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 46px | 1.2 | 0.02em |
| `headline-lg` | 茶地に置く日付 | 丸ゴシック | M PLUS Rounded 1c | 700 | 27px | 1.5 | 0.0em |
| `headline-md` | セクション見出し（ピルの中） | 丸ゴシック | M PLUS Rounded 1c | 700 | 19px | 1.3 | 0.05em |
| `headline-sm` | ステップの説明・賞品名 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.6 | 0.02em |
| `body-md` | 本文・注意事項 | 丸ゴシック | M PLUS Rounded 1c | 500 | 14px | 1.75 | 0.03em |
| `note` | 画像注記・小さい注意書き | 丸ゴシック | M PLUS Rounded 1c | 500 | 10px | 1.6 | 0.0em |
| `label-button` | CTAボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.2 | 0.03em |
| `accent` | STEP番号の欧文 | 欧文サンセリフ | Montserrat | 800 | 13px | 1.0 | 0.05em |

- 全体を丸みのある太いゴシックで統一する
- 日付の数字は大きく、年月日や曜日は小さくして強弱をつける
- FVのロゴ文字は茶の文字に白と金の太いフチを重ねる
- 本文は中央揃えにせず左揃えにする。ステップ説明だけ中央揃えにする
- 注意事項は※から始まる行を詰めて並べる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC はステップと商品を横並びにする
- **本文ブロックの幅**: 画面幅の約 86%
- **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
- 白パネルは画面の左右に約22pxの茶色の余白を残して置く
- パネル上辺の中央にピル型の見出しを重ねる
- ステップカードはパネルの中で縦に積む
- 商品画像はクリーム色パネルの中に2列グリッドで並べ、最後の1個は中央に置く
- 応募要項は細枠のピルラベルと中央揃えの値を交互に並べる

## Elevation & Depth

- 影は使わずフラットにする
- 奥行きは茶の地と明るいパネルの明暗差だけで出す

## Shapes

- **角丸**: 小 8px ／ 中 20px ／ 大 28px。ボタンはピル型。
- **写真の切り抜き**: 商品と玩具は切り抜いて背景なしで置く
- **セクション境界**: FVの下端は直線で茶色に切り替える。パネルの角にチョコが垂れるシルエットを添える
- パネルの角丸は約28px
- ステップカードは約3pxの茶色の太枠と角丸24pxにする
- STEPラベルは垂れた形の茶色のタブで上辺から吊り下げる
- ラベル類はすべてピル型にする

## Components

- **金グラデCTA**（`button-primary`）: 横幅いっぱいのピル型。金色の斜めグラデーションに濃茶の太字
- **見出しピル**（`section-pill`）: 茶色の塗りに白の太字。パネル上辺の中央に配置する
- **期間ラベル**（`period-label`）: 茶地の上に置く黄色または白のピル。下に大きな日付を置く
- **細枠ラベル**（`outline-label`）: 要項の項目名に使う。白地に茶色の細枠のピル
- **ステップカード**（`step-card`）: 太枠の角丸カード。垂れ形のSTEPタブ、太線のアイコン、短い説明で構成する
- **垂れ装飾パネル**（`drip-panel`）: 白またはクリーム色の大きな角丸パネル。角の一部をチョコが垂れる形に置き換える
- **当選数バッジ**（`badge-count`）: 赤い吹き出し円に白文字。当選人数を示す
- **問い合わせボックス**（`contact-box`）: 白パネルの中に置くクリーム色の角丸ボックス。中央揃えで連絡先を書く

## Do's and Don'ts

**Do**
- 茶の地に明るいパネルを置く構成を保つ
- パネルにはチョコが垂れる装飾を必ず添える
- 日付と期間はラベルと大きな数字の組み合わせで見せる
- FVには紙吹雪や流れるリボンを散らして祝祭感を出す
- アイコンは茶色の太線と白の塗りで統一する

**Don't**
- 寒色を地の色に使わない
- 本文に純黒を使わない
- 影やガラス風の効果を加えない
- 角が尖った四角のボタンを使わない
- CTAを金以外の色にしない

## Page Structure

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

1. **ファーストビュー**（キャンペーン名と賞品の提示）: 淡いグレーの地に紙吹雪を散らす。フチ付きの大見出しの下に賞品の大きな切り抜き写真と赤の当選数バッジを置く
2. **期間の告知**（応募期間とレシートの有効期間を伝える）: 茶地に黄色と白のピルラベルを置き、大きな日付を中央揃えにする。最後に注記を添える
3. **応募方法**（参加の手順を説明する）: 白パネルに説明文を置き、太枠のSTEPカードを2枚並べる。注記の後に金のCTAを置く
4. **対象商品**（購入対象の商品を例示する）: クリーム色パネルに商品パッケージを2列グリッドで並べ、下に商品名を中央揃えで書く
5. **応募要項**（期間・賞品・発表方法の整理）: 白パネルに細枠のピルラベルと値を縦に交互に並べる
6. **注意事項**（規約を告知する）: 白パネルに※から始まる行を詰めて並べる。中に問い合わせボックスを入れる
7. **関連バナー**（商品ブランドへの誘導）: 茶地に横長のバナーを縦に2本並べる

## Imagery

- キャラクター玩具や商品は白背景で切り抜き、大きく置く
- 紙吹雪は黄・青・ピンク・緑の細いリボンと星や丸の小片で描く
- アイコンはスマホやレシートを太い茶色の線で描いたフラットなイラストにする
- 溶けたチョコが垂れる茶色のシルエットを装飾として使う
- 擬音を手書き風の太字で添える
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCではFVを横並びにし、左に見出し、右に賞品を置く
- PCでは期間を1行に横並びにし、ラベルを左に置く
- PCではパネルを中央の約60%幅に収め、STEPカードを2列にする
- PCでは対象商品を5列で1行に並べる
- 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-9b86cf01`（元 LP の URL から採番）
- **元 LP**: https://www.fujiya-peko.co.jp/ma-mi-re/5th_cp/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/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

キャンペーン・プレゼント赤×空色グラデのポップなキャラ抽選キャンペーンLPPop Red Character Lottery Campaign LP キャンペーン・プレゼントバター黄×焦茶枠の菓子キャンペーンLPButter Yellow Campaign Card LP キャンペーン・プレゼントからし黄×朱赤の昭和レトロ酒類キャンペーンLPRetro Showa Mustard Red Liquor Campaign LP キャンペーン・プレゼント黒×赤×黄の屋台祭り風キャンペーンLPBold Festival Black Red Yellow Campaign LP キャンペーン・プレゼントピンク柄×虹色アイドルのポップなキャンペーンLPPink Idol Pop Campaign LP キャンペーン・プレゼント赤×黄×黒のポップ図形アイス応募キャンペーンLPBold Red Pop Graphic Campaign LP

配色

書体

セクション構成

部品

守ること

避けること

design.md 全文

DESIGN.md — チョコ色×金の垂れ装飾 菓子キャンペーンLP（Chocolate Drip Receipt Campaign LP）

Overview

Colors

Typography

Layout

Elevation & Depth

Shapes

Components

Do's and Don'ts

Page Structure

Imagery

Responsive Behavior

Agent Prompt Guide

出典と注意

似た LP の design.md

DESIGN.md — チョコ色×金の垂れ装飾菓子キャンペーンLP（Chocolate Drip Receipt Campaign LP）