DESIGN.md — 金色カーテン×焦茶の劇場風スイーツ新商品 LP（Golden Curtain Theatrical Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、力強い・インパクト、レトロ
• キーワード: 金色カーテン・カラメル焦茶・明朝金文字・唐草飾り罫・ダマスク柄・劇場の主役
• 地の質感: ベルベット調カーテンの光沢、ダマスク柄の地紋、金の粒子ボケ。全体に照明が当たったような艶がある。
• 形: 角丸はほぼ使わず四角い額縁型。CTAだけピル型。セクション境界は緩い波形かカーテンの縁。
• 温度感: 暖色一色。黄・金・橙・焦茶でまとめ、寒色は使わない。

Colors

• 地は黄色ダマスク柄を基本に、導入とフッターだけ暗い焦茶に切り替える。
• 暗色地の見出しは金色、黄色地の見出しは焦茶にする。
• 商品の強調枠（増量版など）は焦茶地＋金の唐草枠＋白文字。
• CTAは焦茶ピル＋金文字で、地の黄・金から浮かせる。
• 価格は焦茶の太い数字で金地の上に置く。
• 寒色や純黒は使わず、黒は赤みの焦茶で代用する。

Typography

• 商品名以外の見出し・本文は明朝で統一し、クラシック感を出す。
• 暗色地の見出しは金のグラデーション文字に軽い影を付ける。
• 商品名はかなり太いゴシックで、焦茶に白縁を付ける。
• 価格は税抜を大きく、税込を括弧で並べ、小数部は小さくする。
• 注釈だけゴシックの小さな文字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は文字ブロックと素材写真を左右に交互に置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• FVは商品写真を中央に大きく置き、価格を右下、商品名を上に重ねる。
• 特長は小見出し＋左に伸びる細罫＋本文。写真は反対側にはみ出させて置く。
• 解説ボックスは唐草コーナー付きのクリーム色の額縁にする。
• 増量版の紹介は焦茶の額縁パネルで、左に文字、右に商品写真を置く。
• 最後はカーテンの舞台に商品を2つ並べ、その下にCTAを縦に並べる。

Elevation & Depth

• 商品写真の下に柔らかい影を付け、浮いているように見せる。
• 見出し文字に軽いドロップシャドウを付ける。
• ボタンやパネルは影より額縁の線で立体感を出す。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真。素材写真も切り抜きで、地に直接置く。
• セクション境界: 暗色から黄への境界は緩い波形。最後のセクションの上端はカーテンのドレープで区切る。
• パネルや解説ボックスは角丸なしの四角に、金の二重線と唐草の角飾りを付ける。
• バッジは金縁の円形メダル。
• ボタンだけ完全なピル型にする。

Components

• 店舗検索ピルボタン（button-primary）: 焦茶のピルに金文字。左に丸い矢印アイコン、右に店舗アイコンを置く。
• 情報リンクボタン（button-secondary）: 白地の細いピルに焦茶の文字と丸矢印。主ボタンより小さくする。
• 唐草飾り罫見出し（ornament-heading）: 明朝の見出しの上下か下に、金の細罫と中央の唐草飾りを付ける。
• 発売日帯（release-band）: FVの直下に置く、横幅いっぱいの金の帯。明朝の太字で日付を書く。
• 価格表示（price-tag）: 税抜を大きく、税込を括弧で。焦茶の太い明朝で、白縁を付ける。
• 金メダルバッジ（medal-badge）: 金縁の円に短い訴求（「2倍」など）を2行で入れる。
• 唐草コーナー解説ボックス（info-frame）: クリーム地に金の細枠と四隅の唐草。小見出しと説明文を入れる。
• 特長アイテム（feature-item）: 明朝の小見出し、その下に左へ伸びる罫と点、本文を置き、横に素材写真を添える。
• 派生商品パネル（variant-panel）: 焦茶地に金の額縁。メダル、白の大きな商品名、注釈、右に商品写真を置く。

Do's and Don'ts

Do - 背景には金のカーテンかダマスク柄を敷き、無地の面を広く残さない。 - 見出しには必ず金の飾り罫か唐草を添える。 - 商品は切り抜き写真で大きく、舞台の主役のように中央に置く。 - 価格・発売日・増量訴求をFVにまとめて置く。 - 色は黄・金・焦茶の3系統だけで構成する。

Don't - 丸ゴシックやポップな手書き文字を使わない。 - 青・緑などの寒色や、ビビッドな赤を入れない。 - 大きな角丸カードや、フラットな無地のボックスにしない。 - 純白の背景セクションを作らない。 - 飾り罫を太くしすぎて商品写真より目立たせない。

Page Structure

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

1. ファーストビュー（新商品の登場と価格を伝える）: 金のカーテンの前に商品の切り抜きを大きく置く。上に太い商品名、右に素材バッジと価格、下に派生商品の焦茶帯を置く。
2. 発売日帯（いつから買えるかを明示）: 金の横帯に、明朝の太字で日付を一行で書く。
3. コンセプト導入（味の世界観を一言で伝える）: 金の粒子が舞う暗い焦茶の地に、金の明朝で2行のキャッチを書き、上下を唐草の罫で挟む。下端は波形。
4. 特長（素材のこだわりを3点で示す）: 黄色ダマスク地に飾り罫見出しを置く。小見出し・罫・本文と素材写真を交互に並べ、装飾として金のスプーンを添える。
5. 素材の補足解説（専門的な素材を説明する）: 唐草コーナーのクリーム色の額縁ボックスに入れる。
6. 派生商品の紹介（増量版を案内する）: 焦茶の額縁パネルに、金メダル、白の大きな商品名、商品写真を置く。
7. CTA（店舗への来店を促す）: カーテンの舞台に商品を2つ並べ、金の縁取りの明朝で呼びかけを書き、焦茶の主ボタンと白のサブボタンを置く。
8. 注釈フッター（税率や取扱いの注意）: 焦茶の地に白の小さなゴシックで箇条書きにする。

Imagery

• 商品は透明カップのデザートを斜め上から撮り、背景を抜いた切り抜きにする。層やソースの模様が見えるようにする。
• 素材（卵・クリーム・バター）も切り抜き写真にし、明るく柔らかい光で撮る。
• 背景は光沢のある金のベルベットカーテンのイラストかCGで、中央にスポットライトが当たるようにする。
• 暗いセクションには金の粒子やボケを散らす。
• 装飾にアンティークの銀・金のスプーンを半透明で重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央の1カラム（幅約1000px）で、背景のカーテンを横いっぱいに広げる。
• PCのFVは商品名を1行の横長にし、派生商品を左上、価格を右に分けて置く。
• PCの特長は2×2のグリッドにし、解説ボックスを右上に置く。
• PCのCTAセクションは、左に呼びかけ文、右に商品2つを置く。

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 行書くと起動時に読み込まれる。