虹色ボケ×金枠のチョコ診断キャンペーンLP

Pastel Bokeh Gold Frame Chocolate Campaign LP

ピンク・黄・緑のパステルが混ざるボケ背景に、チョコ色の帯と金の額縁をのせた季節キャンペーン LP。診断の手順、SNS 投稿キャンペーン、賞品、監修者紹介の順に並べ、クリーム色のカードと茶色の見出し帯で情報を区切る。

キャンペーン・プレゼント上品・高級かわいいやさしい・柔らかい情報量多め・訴求型PC

ダウンロード

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

COLORS

配色

背景はピンク・黄・緑のパステルが混ざるグラデーションに白いボケ玉を重ねる
見出し帯とボタンはチョコブラウンに統一する
金のグラデーションは区切り帯・番号バッジ・枠線だけに使う
情報カードはクリームかベージュの面にのせ、背景に直接文字を置かない
SNS のハッシュタグだけ青で強調する
本文文字は真っ黒ではなく濃茶にする

TYPOGRAPHY

書体

displayロゴ風のタイトル装飾・ディスプレイ／ Dela Gothic One 400 ／ 40px ／行間 1.2

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

headline-lg茶帯のセクション見出し明朝／ Shippori Mincho 600 ／ 22px ／行間 1.4

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

headline-mdカード内の見出しゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.5

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

headline-sm賞品名・期間の帯明朝／ Noto Serif JP 700 ／ 15px ／行間 1.5

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

body-md手順・説明の本文ゴシック／ Noto Sans JP 400 ／ 13px ／行間 1.8

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

note※注釈ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

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

accentSTEP 番号・英字ラベル欧文セリフ／ Playfair Display 700 ／ 22px ／行間 1.0

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

label-buttonボタン文字明朝／ Noto Serif JP 600 ／ 15px ／行間 1.0

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

見出しとボタンは明朝で上品にし、本文はゴシックで読みやすくする
本文は中央揃えで 2〜3 行の短い文にする
強調したい語だけ大きくし、それ以外の助詞は小さく組む
STEP の数字は欧文セリフで大きく、ラベルは小さく上に添える
注釈は※付きの小さい文字にする

PAGE STRUCTURE

セクション構成

ファーストビュー企画の世界観とタイトルを示す中央に金額縁のロゴ風タイトルを置き、周りにイラストのタイルと商品を散らす
楽しみ方参加手順を伝えるリボン見出しの下に 4 段のステップ行、右側にスマホ枠と QR 吹き出し
シェアキャンペーン結果の投稿を促す額縁カードに SNS アイコン、賞品写真、当選数バッジ、期間帯、ハッシュタグ、規約ボタン
投稿キャンペーン第 2 の応募方法を案内する茶色の大見出し帯、期間帯、ベージュ面の 3 ステップ
賞品一覧賞品の魅力を見せる罫線付きの小見出し、切り抜き写真、金バッジを縦に並べ、最後に規約ボタン
投稿ギャラリー参加の盛り上がりを見せる濃茶の帯の見出しの下に正方形の写真を横に並べ、上下を金帯で挟む
監修者・イラストレーター紹介信頼感を補う金縁の写真を重ねた白い角丸カードを左右交互に置く
関連リンク・フッター商品・店舗へ誘導する写真バナー 2 枚の下に細字のロゴとコピーライト

COMPONENTS

部品

茶色の規約ボタン button-primary茶色の矩形に金の細い枠、明朝の字間を広げた文字
リボン見出し heading-ribbon白またはチョコ色の帯の両端を折り返したセクション見出し
ステップ行 step-row茶枠の中に STEP 番号、イラスト、説明文を横に並べる
当選数バッジ badge-count金の円の中に数字と「名様」を 2 段で入れる
額縁カード frame-cardクリーム地に金茶の二重線、角を切り欠いたキャンペーン枠
期間帯 period-bar金のグラデーション帯に締切日時を明朝で入れる
QR 吹き出し speech-qr茶色の吹き出しに白文字の案内と QR コード
監修者カード profile-card金縁の顔写真をはみ出させた白い角丸カード。肩書き、名前、略歴を入れる
画像リンクバナー banner-link写真に白い見出しを重ねた角丸のリンクカード

守ること

背景には必ずパステルのボケグラデーションを敷く
金は帯・枠・バッジに絞って使う
手順は番号付きで 3〜4 段に分け、矢印でつなぐ
賞品ごとに当選数バッジを添える
見出しとボタンは明朝で上品にそろえる

DON'T

避けること

原色の赤や青を広い面に使わない
純黒の文字や太い黒の罫線を使わない
ピル型やネオン風のポップなボタンにしない
背景の上に枠なしで長文を置かない
金を本文の文字色に使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 虹色ボケ×金枠のチョコ診断キャンペーンLP（Pastel Bokeh Gold Frame Chocolate Campaign LP）

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

Overview

業種: キャンペーン・プレゼント／ 雰囲気: 上品・高級、かわいい、やさしい・柔らかい、情報量多め・訴求型
キーワード: パステルボケ・金の額縁・チョコブラウン・イラストタイル・ステップ解説・賞品カード
地の質感: 虹色グラデーションに光の玉のボケ、金箔風グラデーションの帯と枠
形: 角を切り欠いた額縁カード、小さい角丸の茶色ボタン、円形の金バッジ
温度感: 暖色寄りで甘く華やか

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#8F4C33`	チョコ色の見出し帯・ボタン	8%	画素の主要色に補正
`dark-section`	`#523C2E`	投稿ギャラリー帯の濃茶	4%	画素の主要色に補正
`on-dark`	`#FFFFFF`	茶帯の上の白文字	1%	画素の主要色に補正
`background`	`#FEFEFD`	白地のカード・枠の中	23%	画素の実測
`surface`	`#F2E7D1`	ステップ行のベージュ面	9%	画素の実測
`secondary`	`#EED99B`	金の帯・番号バッジ	6%	画素の主要色に補正
`tint-1`	`#FDD9DC`	パステルピンクの背景	6%	画素の主要色に補正
`tint-2`	`#FCFAE6`	淡い黄の背景	6%	画素の実測
`background-alt`	`#FFFFFF`	クリームの額縁カード地	4%	画素の実測
`text`	`#523C2E`	本文・見出しの濃茶文字	2%	画素の主要色に補正
`line`	`#C8A56A`	額縁の金茶線	1%	推定
`accent-1`	`#2A8BD8`	ハッシュタグの青文字	0%	推定
`cta`	`#653A1B`	応募規約などのボタン	0%	画素の実測
`on-cta`	`#FFF3D2`	ボタン上の文字	0%	画素の主要色に補正

背景はピンク・黄・緑のパステルが混ざるグラデーションに白いボケ玉を重ねる
見出し帯とボタンはチョコブラウンに統一する
金のグラデーションは区切り帯・番号バッジ・枠線だけに使う
情報カードはクリームかベージュの面にのせ、背景に直接文字を置かない
SNS のハッシュタグだけ青で強調する
本文文字は真っ黒ではなく濃茶にする

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ロゴ風のタイトル	装飾・ディスプレイ	Dela Gothic One	400	40px	1.2	0.05em
`headline-lg`	茶帯のセクション見出し	明朝	Shippori Mincho	600	22px	1.4	0.05em
`headline-md`	カード内の見出し	ゴシック	Noto Sans JP	700	17px	1.5	0.02em
`headline-sm`	賞品名・期間の帯	明朝	Noto Serif JP	700	15px	1.5	0.03em
`body-md`	手順・説明の本文	ゴシック	Noto Sans JP	400	13px	1.8	0.02em
`note`	※注釈	ゴシック	Noto Sans JP	400	11px	1.6	0.0em
`accent`	STEP 番号・英字ラベル	欧文セリフ	Playfair Display	700	22px	1.0	0.05em
`label-button`	ボタン文字	明朝	Noto Serif JP	600	15px	1.0	0.15em

見出しとボタンは明朝で上品にし、本文はゴシックで読みやすくする
本文は中央揃えで 2〜3 行の短い文にする
強調したい語だけ大きくし、それ以外の助詞は小さく組む
STEP の数字は欧文セリフで大きく、ラベルは小さく上に添える
注釈は※付きの小さい文字にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。手順の行は左に画像、右にテキストの 2 分割
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
各セクションは額縁カードか茶帯の見出しで始める
ステップは縦に並べ、行の間に下向き三角を置く
賞品は罫線付きの小見出し、写真、数量バッジの順に縦に積む
投稿ギャラリーは濃茶の帯に正方形の写真を横スクロールで並べる
監修者カードは写真を左上にはみ出させて白い角丸カードを重ねる

Elevation & Depth

カードには影をつけず、枠線と面の色で浮かせる
金の額縁に細い二重線とわずかな光沢グラデーションを入れる
監修者カードには薄く広いぼかし影をつける

Shapes

角丸: 小 4px ／中 8px ／大 16px。ボタンは角丸の長方形。
写真の切り抜き: イラストは金縁の正方形額に入れ、写真は角丸 8px の矩形にする
セクション境界: 金のグラデーション帯か茶色の水平帯で直線的に区切る
キャンペーン枠は四隅を内側に切り欠いた額縁にする
数量バッジは金の正円にする
見出し帯は左右の端をリボン状に折り返す
スマホ枠モチーフには茶色の太い角丸フレームを使う

Components

茶色の規約ボタン（button-primary）: 茶色の矩形に金の細い枠、明朝の字間を広げた文字
リボン見出し（heading-ribbon）: 白またはチョコ色の帯の両端を折り返したセクション見出し
ステップ行（step-row）: 茶枠の中に STEP 番号、イラスト、説明文を横に並べる
当選数バッジ（badge-count）: 金の円の中に数字と「名様」を 2 段で入れる
額縁カード（frame-card）: クリーム地に金茶の二重線、角を切り欠いたキャンペーン枠
期間帯（period-bar）: 金のグラデーション帯に締切日時を明朝で入れる
QR 吹き出し（speech-qr）: 茶色の吹き出しに白文字の案内と QR コード
監修者カード（profile-card）: 金縁の顔写真をはみ出させた白い角丸カード。肩書き、名前、略歴を入れる
画像リンクバナー（banner-link）: 写真に白い見出しを重ねた角丸のリンクカード

Do's and Don'ts

Do - 背景には必ずパステルのボケグラデーションを敷く - 金は帯・枠・バッジに絞って使う - 手順は番号付きで 3〜4 段に分け、矢印でつなぐ - 賞品ごとに当選数バッジを添える - 見出しとボタンは明朝で上品にそろえる

Don't - 原色の赤や青を広い面に使わない - 純黒の文字や太い黒の罫線を使わない - ピル型やネオン風のポップなボタンにしない - 背景の上に枠なしで長文を置かない - 金を本文の文字色に使わない

Page Structure

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

ファーストビュー（企画の世界観とタイトルを示す）: 中央に金額縁のロゴ風タイトルを置き、周りにイラストのタイルと商品を散らす
楽しみ方（参加手順を伝える）: リボン見出しの下に 4 段のステップ行、右側にスマホ枠と QR 吹き出し
シェアキャンペーン（結果の投稿を促す）: 額縁カードに SNS アイコン、賞品写真、当選数バッジ、期間帯、ハッシュタグ、規約ボタン
投稿キャンペーン（第 2 の応募方法を案内する）: 茶色の大見出し帯、期間帯、ベージュ面の 3 ステップ
賞品一覧（賞品の魅力を見せる）: 罫線付きの小見出し、切り抜き写真、金バッジを縦に並べ、最後に規約ボタン
投稿ギャラリー（参加の盛り上がりを見せる）: 濃茶の帯の見出しの下に正方形の写真を横に並べ、上下を金帯で挟む
監修者・イラストレーター紹介（信頼感を補う）: 金縁の写真を重ねた白い角丸カードを左右交互に置く
関連リンク・フッター（商品・店舗へ誘導する）: 写真バナー 2 枚の下に細字のロゴとコピーライト

Imagery

人物は柔らかい線とパステルで塗った少女漫画風のイラストにする
イラストは金縁の正方形額に入れ、少し傾けて散らす
包み紙の丸い菓子を前景に散らし、浅い被写界深度で撮る
賞品は白背景の切り抜き写真にする
背景に白い光の玉と金の粒をちりばめる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央 900px 前後の 1 カラムで、ボケ背景を全幅に広げる
PC の手順は左にステップ、右にスマホ枠の 2 カラム。SP では縦に積む
ギャラリーは PC で 6 枚を横並び、SP では横スクロールにする
リンクバナーは PC で 2 列、SP では 1 列にする
FV の散らしイラストは SP では数を減らし、タイトルを大きくする

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: Pastel Bokeh Gold Frame Chocolate Campaign LP
description: ピンク・黄・緑のパステルが混ざるボケ背景に、チョコ色の帯と金の額縁をのせた季節キャンペーン LP。診断の手順、SNS 投稿キャンペーン、賞品、監修者紹介の順に並べ、クリーム色のカードと茶色の見出し帯で情報を区切る。
colors:
  primary: '#8F4C33'
  dark-section: '#523C2E'
  on-dark: '#FFFFFF'
  background: '#FEFEFD'
  surface: '#F2E7D1'
  secondary: '#EED99B'
  tint-1: '#FDD9DC'
  tint-2: '#FCFAE6'
  background-alt: '#FFFFFF'
  text: '#523C2E'
  line: '#C8A56A'
  accent-1: '#2A8BD8'
  cta: '#653A1B'
  on-cta: '#FFF3D2'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Playfair Display
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.15em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  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.sm}'
    height: 44px
  heading-ribbon:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 56px
  step-row:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 110px
  badge-count:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 56px
  frame-card:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  period-bar:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 32px
  speech-qr:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 140px
  profile-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 180px
  banner-link:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 110px
---

# DESIGN.md — 虹色ボケ×金枠のチョコ診断キャンペーンLP（Pastel Bokeh Gold Frame Chocolate Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: 上品・高級、かわいい、やさしい・柔らかい、情報量多め・訴求型
- **キーワード**: パステルボケ・金の額縁・チョコブラウン・イラストタイル・ステップ解説・賞品カード
- **地の質感**: 虹色グラデーションに光の玉のボケ、金箔風グラデーションの帯と枠
- **形**: 角を切り欠いた額縁カード、小さい角丸の茶色ボタン、円形の金バッジ
- **温度感**: 暖色寄りで甘く華やか

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#8F4C33` | チョコ色の見出し帯・ボタン | 8% | 画素の主要色に補正 |
| `dark-section` | `#523C2E` | 投稿ギャラリー帯の濃茶 | 4% | 画素の主要色に補正 |
| `on-dark` | `#FFFFFF` | 茶帯の上の白文字 | 1% | 画素の主要色に補正 |
| `background` | `#FEFEFD` | 白地のカード・枠の中 | 23% | 画素の実測 |
| `surface` | `#F2E7D1` | ステップ行のベージュ面 | 9% | 画素の実測 |
| `secondary` | `#EED99B` | 金の帯・番号バッジ | 6% | 画素の主要色に補正 |
| `tint-1` | `#FDD9DC` | パステルピンクの背景 | 6% | 画素の主要色に補正 |
| `tint-2` | `#FCFAE6` | 淡い黄の背景 | 6% | 画素の実測 |
| `background-alt` | `#FFFFFF` | クリームの額縁カード地 | 4% | 画素の実測 |
| `text` | `#523C2E` | 本文・見出しの濃茶文字 | 2% | 画素の主要色に補正 |
| `line` | `#C8A56A` | 額縁の金茶線 | 1% | 推定 |
| `accent-1` | `#2A8BD8` | ハッシュタグの青文字 | 0% | 推定 |
| `cta` | `#653A1B` | 応募規約などのボタン | 0% | 画素の実測 |
| `on-cta` | `#FFF3D2` | ボタン上の文字 | 0% | 画素の主要色に補正 |

- 背景はピンク・黄・緑のパステルが混ざるグラデーションに白いボケ玉を重ねる
- 見出し帯とボタンはチョコブラウンに統一する
- 金のグラデーションは区切り帯・番号バッジ・枠線だけに使う
- 情報カードはクリームかベージュの面にのせ、背景に直接文字を置かない
- SNS のハッシュタグだけ青で強調する
- 本文文字は真っ黒ではなく濃茶にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ロゴ風のタイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.2 | 0.05em |
| `headline-lg` | 茶帯のセクション見出し | 明朝 | Shippori Mincho | 600 | 22px | 1.4 | 0.05em |
| `headline-md` | カード内の見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em |
| `headline-sm` | 賞品名・期間の帯 | 明朝 | Noto Serif JP | 700 | 15px | 1.5 | 0.03em |
| `body-md` | 手順・説明の本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em |
| `accent` | STEP 番号・英字ラベル | 欧文セリフ | Playfair Display | 700 | 22px | 1.0 | 0.05em |
| `label-button` | ボタン文字 | 明朝 | Noto Serif JP | 600 | 15px | 1.0 | 0.15em |

- 見出しとボタンは明朝で上品にし、本文はゴシックで読みやすくする
- 本文は中央揃えで 2〜3 行の短い文にする
- 強調したい語だけ大きくし、それ以外の助詞は小さく組む
- STEP の数字は欧文セリフで大きく、ラベルは小さく上に添える
- 注釈は※付きの小さい文字にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。手順の行は左に画像、右にテキストの 2 分割
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
- 各セクションは額縁カードか茶帯の見出しで始める
- ステップは縦に並べ、行の間に下向き三角を置く
- 賞品は罫線付きの小見出し、写真、数量バッジの順に縦に積む
- 投稿ギャラリーは濃茶の帯に正方形の写真を横スクロールで並べる
- 監修者カードは写真を左上にはみ出させて白い角丸カードを重ねる

## Elevation & Depth

- カードには影をつけず、枠線と面の色で浮かせる
- 金の額縁に細い二重線とわずかな光沢グラデーションを入れる
- 監修者カードには薄く広いぼかし影をつける

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
- **写真の切り抜き**: イラストは金縁の正方形額に入れ、写真は角丸 8px の矩形にする
- **セクション境界**: 金のグラデーション帯か茶色の水平帯で直線的に区切る
- キャンペーン枠は四隅を内側に切り欠いた額縁にする
- 数量バッジは金の正円にする
- 見出し帯は左右の端をリボン状に折り返す
- スマホ枠モチーフには茶色の太い角丸フレームを使う

## Components

- **茶色の規約ボタン**（`button-primary`）: 茶色の矩形に金の細い枠、明朝の字間を広げた文字
- **リボン見出し**（`heading-ribbon`）: 白またはチョコ色の帯の両端を折り返したセクション見出し
- **ステップ行**（`step-row`）: 茶枠の中に STEP 番号、イラスト、説明文を横に並べる
- **当選数バッジ**（`badge-count`）: 金の円の中に数字と「名様」を 2 段で入れる
- **額縁カード**（`frame-card`）: クリーム地に金茶の二重線、角を切り欠いたキャンペーン枠
- **期間帯**（`period-bar`）: 金のグラデーション帯に締切日時を明朝で入れる
- **QR 吹き出し**（`speech-qr`）: 茶色の吹き出しに白文字の案内と QR コード
- **監修者カード**（`profile-card`）: 金縁の顔写真をはみ出させた白い角丸カード。肩書き、名前、略歴を入れる
- **画像リンクバナー**（`banner-link`）: 写真に白い見出しを重ねた角丸のリンクカード

## Do's and Don'ts

**Do**
- 背景には必ずパステルのボケグラデーションを敷く
- 金は帯・枠・バッジに絞って使う
- 手順は番号付きで 3〜4 段に分け、矢印でつなぐ
- 賞品ごとに当選数バッジを添える
- 見出しとボタンは明朝で上品にそろえる

**Don't**
- 原色の赤や青を広い面に使わない
- 純黒の文字や太い黒の罫線を使わない
- ピル型やネオン風のポップなボタンにしない
- 背景の上に枠なしで長文を置かない
- 金を本文の文字色に使わない

## Page Structure

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

1. **ファーストビュー**（企画の世界観とタイトルを示す）: 中央に金額縁のロゴ風タイトルを置き、周りにイラストのタイルと商品を散らす
2. **楽しみ方**（参加手順を伝える）: リボン見出しの下に 4 段のステップ行、右側にスマホ枠と QR 吹き出し
3. **シェアキャンペーン**（結果の投稿を促す）: 額縁カードに SNS アイコン、賞品写真、当選数バッジ、期間帯、ハッシュタグ、規約ボタン
4. **投稿キャンペーン**（第 2 の応募方法を案内する）: 茶色の大見出し帯、期間帯、ベージュ面の 3 ステップ
5. **賞品一覧**（賞品の魅力を見せる）: 罫線付きの小見出し、切り抜き写真、金バッジを縦に並べ、最後に規約ボタン
6. **投稿ギャラリー**（参加の盛り上がりを見せる）: 濃茶の帯の見出しの下に正方形の写真を横に並べ、上下を金帯で挟む
7. **監修者・イラストレーター紹介**（信頼感を補う）: 金縁の写真を重ねた白い角丸カードを左右交互に置く
8. **関連リンク・フッター**（商品・店舗へ誘導する）: 写真バナー 2 枚の下に細字のロゴとコピーライト

## Imagery

- 人物は柔らかい線とパステルで塗った少女漫画風のイラストにする
- イラストは金縁の正方形額に入れ、少し傾けて散らす
- 包み紙の丸い菓子を前景に散らし、浅い被写界深度で撮る
- 賞品は白背景の切り抜き写真にする
- 背景に白い光の玉と金の粒をちりばめる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央 900px 前後の 1 カラムで、ボケ背景を全幅に広げる
- PC の手順は左にステップ、右にスマホ枠の 2 カラム。SP では縦に積む
- ギャラリーは PC で 6 枚を横並び、SP では横スクロールにする
- リンクバナーは PC で 2 列、SP では 1 列にする
- FV の散らしイラストは 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-4ddad2a7`（元 LP の URL から採番）
- **元 LP**: https://gohoubi-lindt.jp/pc/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（5/14 色を画素から実測）、書体 中、余白 低
- **生成**: 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