チョコ茶×紺×金の菓子ARキャンペーンLP

Chocolate Brown & Navy Gold AR Campaign LP

濃いチョコ茶と紺に金の縁取りを合わせ、クリーム色の市松地で挟んだ菓子ブランドのARキャンペーンLP。ボケ感のある夜の写真で始まる上品なファーストビューから、紺の大きなパネルで遊び方をSTEP形式で見せる。

菓子・スイーツ上品・高級やさしい・柔らかいかわいいSPPC

ダウンロード

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

COLORS

配色

導入文と問い合わせはチョコ茶の地で上下を締める
商品紹介と注意事項はクリーム市松地で明るく見せる
遊び方は紺の大パネルにまとめ、外周を金の細い二重線で囲む
金はSTEP見出し・罫線・枠など装飾だけに使い、本文には使わない
暗い地には生成り色の文字を使い、白一色は避ける

TYPOGRAPHY

書体

displayFVキャンペーン名(金のグラデ)明朝／ Shippori Mincho 800 ／ 40px ／行間 1.2

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

headline-lgセクション見出しゴシック／ Zen Kaku Gothic New 500 ／ 30px ／行間 1.3

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

accentSTEP番号欧文セリフ／ Playfair Display 400 ／ 26px ／行間 1.2

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

body-lg導入の詩的な文明朝／ Noto Serif JP 600 ／ 16px ／行間 2.0

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

headline-smステップ説明・中央揃えの太字ゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.6

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

body-md注意事項本文ゴシック／ Noto Sans JP 500 ／ 13px ／行間 1.6

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

note※注釈ゴシック／ Noto Sans JP 500 ／ 10px ／行間 1.5

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

情緒的なコピーは明朝、操作説明はゴシックと使い分ける
本文はほぼ中央揃えにし、短く改行する
STEP番号は欧文セリフ体で、左右に金の細線を引く
FVタイトルは金のグラデと影で立体的に見せる
電話番号は大きな細めのゴシックで1行に収める

PAGE STRUCTURE

セクション構成

ファーストビューキャンペーン名と期間を印象づけるボケ光の写真の上に、リボン帯と金の明朝タイトルを置く。中央にキャラと菓子、下部に期間ラベル
導入メッセージ商品のくつろぎ価値を情緒的に伝えるチョコ茶地に明朝の中央揃え文を3段落置く。下端は波形
対象商品対象パッケージと目印を示すクリーム市松地。見出し、注釈、矢印付きの目印、3商品の縦並び＋キャラの円形バッジ
遊び方ARの手順を段階的に説明するアーチ型の紺パネル内に、二次元コードの線画とSTEP01〜04、スマホ枠の画像を並べる
キャラ紹介種類の多さで遊びを促すパネル下部に短い文を置き、3体のキャラを横並びにして下端で切る
注意事項利用条件と推奨環境を示す白カードに濃茶の小見出し帯を置き、箇条書きにする
問い合わせ窓口情報を示すチョコ茶地に、事務局名のピル帯、大きな電話番号、罫線で区切った受付時間を置く
ブランドバナー商品詳細ページへ誘導する市松地にロゴと商品画像を並べ、「詳細はこちら」の小ボタンを置いた横長バナー

COMPONENTS

部品

紺のリボン帯 ribbon-bannerFVタイトル上に置く、紺のリボン形のキャッチ帯。文字は生成り
期間ラベル period-badge白い細枠の小箱にラベルを入れ、その右に日付を2行で並べる
アーチ見出しパネル arch-panel上端がアーチ状の紺パネル。金枠で囲み、見出しは中央に置く
STEP見出し step-heading中央に欧文のSTEP番号を置き、左右に金の細線を引く
スマホ画面枠 phone-frame生成りの太枠で角丸の縦長枠を作り、中に操作画面の写真を入れる
キャラ円形バッジ character-badge金の縁の円形に、?顔のキャラを入れる。商品画像の右下に重ねる
注意事項カード notice-card白いカードに濃茶の小見出し帯を置き、・付きで箇条書きする
事務局名ピル contact-pill濃茶の地に白いピル帯を置き、中に窓口名を入れる

守ること

暗い茶・紺と、明るいクリーム地を交互に配置する
金は細線・枠・見出しに少量だけ使う
STEPの説明は2行以内の中央揃えにする
写真は暖色のボケ光とくつろぎの室内でまとめる
操作説明は線画の手とスマホ枠で図解する

DON'T

避けること

原色の赤や緑を地色に使わない
角張った派手なCTAボタンを多用しない
本文を左揃えの長い段落にしない（注意事項カードは例外）
白背景のままセクションを並べない
金をベタ塗りの大きな面にしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — チョコ茶×紺×金の菓子ARキャンペーンLP（Chocolate Brown & Navy Gold AR Campaign LP）

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

Overview

業種: 菓子・スイーツ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい
キーワード: チョコレート色・金の縁取り・クリーム市松・夜のボケ光・ステップ解説・癒し
地の質感: 地はごく薄い市松模様。紺のパネルにはうっすら布目の質感。FVは暖色のボケ光写真
形: 上部がアーチ状に凹凸する紺パネル、波形のセクション境界、角丸のスマホ枠
温度感: 暖かく落ち着いた夜。くつろぎの時間

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#4A3729`	チョコ茶の地(導入文・問い合わせ)	15%	画素の実測
`secondary`	`#33426B`	遊び方パネルの紺	28%	画素の実測
`background`	`#F7ECD0`	クリーム市松の地	20%	画素の実測
`background-alt`	`#FBF1D8`	市松のもう一方の色	9%	画素の実測
`accent-1`	`#CCB385`	金の枠線・STEP見出し	4%	画素の主要色に補正
`surface`	`#FEFEFE`	注意事項カードの白	5%	画素の実測
`text`	`#2B1D0D`	クリーム地上の見出し文字	1%	画素の実測
`on-dark`	`#EEE3D3`	暗色地上の文字	2%	画素の実測
`dark-section`	`#4A3729`	小見出し帯の濃茶	1%	画素の実測
`line`	`#9E998D`	問い合わせ内の区切り線	0%	画素の主要色に補正
`accent-2`	`#C1A441`	パネル外枠の金	1%	画素の実測

導入文と問い合わせはチョコ茶の地で上下を締める
商品紹介と注意事項はクリーム市松地で明るく見せる
遊び方は紺の大パネルにまとめ、外周を金の細い二重線で囲む
金はSTEP見出し・罫線・枠など装飾だけに使い、本文には使わない
暗い地には生成り色の文字を使い、白一色は避ける

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVキャンペーン名(金のグラデ)	明朝	Shippori Mincho	800	40px	1.2	0.02em
`headline-lg`	セクション見出し	ゴシック	Zen Kaku Gothic New	500	30px	1.3	0.04em
`accent`	STEP番号	欧文セリフ	Playfair Display	400	26px	1.2	0.08em
`body-lg`	導入の詩的な文	明朝	Noto Serif JP	600	16px	2.0	0.06em
`headline-sm`	ステップ説明・中央揃えの太字	ゴシック	Noto Sans JP	700	14px	1.6	0.03em
`body-md`	注意事項本文	ゴシック	Noto Sans JP	500	13px	1.6	0.0em
`note`	※注釈	ゴシック	Noto Sans JP	500	10px	1.5	0.0em

情緒的なコピーは明朝、操作説明はゴシックと使い分ける
本文はほぼ中央揃えにし、短く改行する
STEP番号は欧文セリフ体で、左右に金の細線を引く
FVタイトルは金のグラデと影で立体的に見せる
電話番号は大きな細めのゴシックで1行に収める
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、中央揃え
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
遊び方パネルは左右に約16pxの余白をとり、市松地を見せる
STEPごとに見出し・説明2行・図版の順に縦積み
商品パッケージは1つずつ縦に並べ、下に括弧付きの名前を入れる
注意事項は白カードに入れ、濃茶の小見出し帯で区切る

Elevation & Depth

影はほとんど使わず、平面で構成する
キャラの丸アイコンだけに金の縁と軽い影をつける
スマホ画面の図版は生成りの太い角丸枠で浮かせる

Shapes

角丸: 小 4px ／中 14px ／大 24px。ボタンはピル型。
写真の切り抜き: 商品は切り抜き、キャラは円形にトリミング、操作画面は角丸の縦長スマホ枠
セクション境界: 導入の茶地の下端は緩やかな波形。紺パネルの上端はアーチ型の装飾
紺パネルは下の角を大きく丸め、金の二重枠で囲む
事務局名はピル型の白帯に入れる
カード・帯の角はほぼ直角にする

Components

紺のリボン帯（ribbon-banner）: FVタイトル上に置く、紺のリボン形のキャッチ帯。文字は生成り
期間ラベル（period-badge）: 白い細枠の小箱にラベルを入れ、その右に日付を2行で並べる
アーチ見出しパネル（arch-panel）: 上端がアーチ状の紺パネル。金枠で囲み、見出しは中央に置く
STEP見出し（step-heading）: 中央に欧文のSTEP番号を置き、左右に金の細線を引く
スマホ画面枠（phone-frame）: 生成りの太枠で角丸の縦長枠を作り、中に操作画面の写真を入れる
キャラ円形バッジ（character-badge）: 金の縁の円形に、?顔のキャラを入れる。商品画像の右下に重ねる
注意事項カード（notice-card）: 白いカードに濃茶の小見出し帯を置き、・付きで箇条書きする
事務局名ピル（contact-pill）: 濃茶の地に白いピル帯を置き、中に窓口名を入れる

Do's and Don'ts

Do - 暗い茶・紺と、明るいクリーム地を交互に配置する - 金は細線・枠・見出しに少量だけ使う - STEPの説明は2行以内の中央揃えにする - 写真は暖色のボケ光とくつろぎの室内でまとめる - 操作説明は線画の手とスマホ枠で図解する

Don't - 原色の赤や緑を地色に使わない - 角張った派手なCTAボタンを多用しない - 本文を左揃えの長い段落にしない（注意事項カードは例外） - 白背景のままセクションを並べない - 金をベタ塗りの大きな面にしない

Page Structure

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

ファーストビュー（キャンペーン名と期間を印象づける）: ボケ光の写真の上に、リボン帯と金の明朝タイトルを置く。中央にキャラと菓子、下部に期間ラベル
導入メッセージ（商品のくつろぎ価値を情緒的に伝える）: チョコ茶地に明朝の中央揃え文を3段落置く。下端は波形
対象商品（対象パッケージと目印を示す）: クリーム市松地。見出し、注釈、矢印付きの目印、3商品の縦並び＋キャラの円形バッジ
遊び方（ARの手順を段階的に説明する）: アーチ型の紺パネル内に、二次元コードの線画とSTEP01〜04、スマホ枠の画像を並べる
キャラ紹介（種類の多さで遊びを促す）: パネル下部に短い文を置き、3体のキャラを横並びにして下端で切る
注意事項（利用条件と推奨環境を示す）: 白カードに濃茶の小見出し帯を置き、箇条書きにする
問い合わせ（窓口情報を示す）: チョコ茶地に、事務局名のピル帯、大きな電話番号、罫線で区切った受付時間を置く
ブランドバナー（商品詳細ページへ誘導する）: 市松地にロゴと商品画像を並べ、「詳細はこちら」の小ボタンを置いた横長バナー

Imagery

夜の室内でボケ光が入る、暖かい色調の写真
被り物の3Dキャラに、顔写真をはめ込んだかわいいビジュアル
手とスマホは生成り色の太い線画で描く
商品は正面から撮って切り抜き、少し傾けて並べる
?マーク入りのキャラで期待感を出す
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCでは中央に約375px幅のSPレイアウトをそのまま表示する
PCでは左右にFVのボケ写真を全面に敷き、左にタイトル、右にロゴを大きく置く
FV以下の左右はクリーム市松地で埋める

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 Brown & Navy Gold AR Campaign LP
description: 濃いチョコ茶と紺に金の縁取りを合わせ、クリーム色の市松地で挟んだ菓子ブランドのARキャンペーンLP。ボケ感のある夜の写真で始まる上品なファーストビューから、紺の大きなパネルで遊び方をSTEP形式で見せる。
colors:
  primary: '#4A3729'
  secondary: '#33426B'
  background: '#F7ECD0'
  background-alt: '#FBF1D8'
  accent-1: '#CCB385'
  surface: '#FEFEFE'
  text: '#2B1D0D'
  on-dark: '#EEE3D3'
  dark-section: '#4A3729'
  line: '#9E998D'
  accent-2: '#C1A441'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.04em
  accent:
    fontFamily: Playfair Display
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.08em
  body-lg:
    fontFamily: Noto Serif JP
    fontSize: 16px
    fontWeight: 600
    lineHeight: 2.0
    letterSpacing: 0.06em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.6
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 14px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 60px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  ribbon-banner:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 40px
  period-badge:
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 36px
  arch-panel:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 2400px
  step-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.accent}'
    height: 40px
  phone-frame:
    backgroundColor: '{colors.background-alt}'
    rounded: '{rounded.lg}'
    height: 240px
  character-badge:
    backgroundColor: '{colors.secondary}'
    rounded: '{rounded.full}'
    height: 110px
  notice-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 500px
  contact-pill:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 34px
---

# DESIGN.md — チョコ茶×紺×金の菓子ARキャンペーンLP（Chocolate Brown & Navy Gold AR Campaign LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、やさしい・柔らかい、かわいい
- **キーワード**: チョコレート色・金の縁取り・クリーム市松・夜のボケ光・ステップ解説・癒し
- **地の質感**: 地はごく薄い市松模様。紺のパネルにはうっすら布目の質感。FVは暖色のボケ光写真
- **形**: 上部がアーチ状に凹凸する紺パネル、波形のセクション境界、角丸のスマホ枠
- **温度感**: 暖かく落ち着いた夜。くつろぎの時間

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#4A3729` | チョコ茶の地(導入文・問い合わせ) | 15% | 画素の実測 |
| `secondary` | `#33426B` | 遊び方パネルの紺 | 28% | 画素の実測 |
| `background` | `#F7ECD0` | クリーム市松の地 | 20% | 画素の実測 |
| `background-alt` | `#FBF1D8` | 市松のもう一方の色 | 9% | 画素の実測 |
| `accent-1` | `#CCB385` | 金の枠線・STEP見出し | 4% | 画素の主要色に補正 |
| `surface` | `#FEFEFE` | 注意事項カードの白 | 5% | 画素の実測 |
| `text` | `#2B1D0D` | クリーム地上の見出し文字 | 1% | 画素の実測 |
| `on-dark` | `#EEE3D3` | 暗色地上の文字 | 2% | 画素の実測 |
| `dark-section` | `#4A3729` | 小見出し帯の濃茶 | 1% | 画素の実測 |
| `line` | `#9E998D` | 問い合わせ内の区切り線 | 0% | 画素の主要色に補正 |
| `accent-2` | `#C1A441` | パネル外枠の金 | 1% | 画素の実測 |

- 導入文と問い合わせはチョコ茶の地で上下を締める
- 商品紹介と注意事項はクリーム市松地で明るく見せる
- 遊び方は紺の大パネルにまとめ、外周を金の細い二重線で囲む
- 金はSTEP見出し・罫線・枠など装飾だけに使い、本文には使わない
- 暗い地には生成り色の文字を使い、白一色は避ける

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVキャンペーン名(金のグラデ) | 明朝 | Shippori Mincho | 800 | 40px | 1.2 | 0.02em |
| `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 500 | 30px | 1.3 | 0.04em |
| `accent` | STEP番号 | 欧文セリフ | Playfair Display | 400 | 26px | 1.2 | 0.08em |
| `body-lg` | 導入の詩的な文 | 明朝 | Noto Serif JP | 600 | 16px | 2.0 | 0.06em |
| `headline-sm` | ステップ説明・中央揃えの太字 | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.03em |
| `body-md` | 注意事項本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.6 | 0.0em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 500 | 10px | 1.5 | 0.0em |

- 情緒的なコピーは明朝、操作説明はゴシックと使い分ける
- 本文はほぼ中央揃えにし、短く改行する
- STEP番号は欧文セリフ体で、左右に金の細線を引く
- FVタイトルは金のグラデと影で立体的に見せる
- 電話番号は大きな細めのゴシックで1行に収める
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、中央揃え
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
- 遊び方パネルは左右に約16pxの余白をとり、市松地を見せる
- STEPごとに見出し・説明2行・図版の順に縦積み
- 商品パッケージは1つずつ縦に並べ、下に括弧付きの名前を入れる
- 注意事項は白カードに入れ、濃茶の小見出し帯で区切る

## Elevation & Depth

- 影はほとんど使わず、平面で構成する
- キャラの丸アイコンだけに金の縁と軽い影をつける
- スマホ画面の図版は生成りの太い角丸枠で浮かせる

## Shapes

- **角丸**: 小 4px ／ 中 14px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 商品は切り抜き、キャラは円形にトリミング、操作画面は角丸の縦長スマホ枠
- **セクション境界**: 導入の茶地の下端は緩やかな波形。紺パネルの上端はアーチ型の装飾
- 紺パネルは下の角を大きく丸め、金の二重枠で囲む
- 事務局名はピル型の白帯に入れる
- カード・帯の角はほぼ直角にする

## Components

- **紺のリボン帯**（`ribbon-banner`）: FVタイトル上に置く、紺のリボン形のキャッチ帯。文字は生成り
- **期間ラベル**（`period-badge`）: 白い細枠の小箱にラベルを入れ、その右に日付を2行で並べる
- **アーチ見出しパネル**（`arch-panel`）: 上端がアーチ状の紺パネル。金枠で囲み、見出しは中央に置く
- **STEP見出し**（`step-heading`）: 中央に欧文のSTEP番号を置き、左右に金の細線を引く
- **スマホ画面枠**（`phone-frame`）: 生成りの太枠で角丸の縦長枠を作り、中に操作画面の写真を入れる
- **キャラ円形バッジ**（`character-badge`）: 金の縁の円形に、?顔のキャラを入れる。商品画像の右下に重ねる
- **注意事項カード**（`notice-card`）: 白いカードに濃茶の小見出し帯を置き、・付きで箇条書きする
- **事務局名ピル**（`contact-pill`）: 濃茶の地に白いピル帯を置き、中に窓口名を入れる

## Do's and Don'ts

**Do**
- 暗い茶・紺と、明るいクリーム地を交互に配置する
- 金は細線・枠・見出しに少量だけ使う
- STEPの説明は2行以内の中央揃えにする
- 写真は暖色のボケ光とくつろぎの室内でまとめる
- 操作説明は線画の手とスマホ枠で図解する

**Don't**
- 原色の赤や緑を地色に使わない
- 角張った派手なCTAボタンを多用しない
- 本文を左揃えの長い段落にしない（注意事項カードは例外）
- 白背景のままセクションを並べない
- 金をベタ塗りの大きな面にしない

## Page Structure

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

1. **ファーストビュー**（キャンペーン名と期間を印象づける）: ボケ光の写真の上に、リボン帯と金の明朝タイトルを置く。中央にキャラと菓子、下部に期間ラベル
2. **導入メッセージ**（商品のくつろぎ価値を情緒的に伝える）: チョコ茶地に明朝の中央揃え文を3段落置く。下端は波形
3. **対象商品**（対象パッケージと目印を示す）: クリーム市松地。見出し、注釈、矢印付きの目印、3商品の縦並び＋キャラの円形バッジ
4. **遊び方**（ARの手順を段階的に説明する）: アーチ型の紺パネル内に、二次元コードの線画とSTEP01〜04、スマホ枠の画像を並べる
5. **キャラ紹介**（種類の多さで遊びを促す）: パネル下部に短い文を置き、3体のキャラを横並びにして下端で切る
6. **注意事項**（利用条件と推奨環境を示す）: 白カードに濃茶の小見出し帯を置き、箇条書きにする
7. **問い合わせ**（窓口情報を示す）: チョコ茶地に、事務局名のピル帯、大きな電話番号、罫線で区切った受付時間を置く
8. **ブランドバナー**（商品詳細ページへ誘導する）: 市松地にロゴと商品画像を並べ、「詳細はこちら」の小ボタンを置いた横長バナー

## Imagery

- 夜の室内でボケ光が入る、暖かい色調の写真
- 被り物の3Dキャラに、顔写真をはめ込んだかわいいビジュアル
- 手とスマホは生成り色の太い線画で描く
- 商品は正面から撮って切り抜き、少し傾けて並べる
- ?マーク入りのキャラで期待感を出す
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは中央に約375px幅のSPレイアウトをそのまま表示する
- PCでは左右にFVのボケ写真を全面に敷き、左にタイトル、右にロゴを大きく置く
- FV以下の左右はクリーム市松地で埋める

## 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-68d1b8be`（元 LP の URL から採番）
- **元 LP**: https://cp.glico.com/kobe-2026spr/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/11 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://cp.glico.com/kobe-2026spr/（公開状況により表示できない場合があります）
この 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