DESIGN.md — 金と深紅の劇場風スイーツ新商品 LP（Theatrical Gold Curtain Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、レトロ、情報量多め・訴求型
• キーワード: 劇場・緞帳・五線譜・金色グラデーション・スポットライト・クラシック
• 地の質感: 金箔のような光沢グラデーションに、中央を明るく抜いたスポットライト状の光の円を重ねる。
• 形: 装飾付きの額縁ラベル、角の丸い焦げ茶パネル、曲線の五線譜ライン。
• 温度感: 暖色。焼き芋やキャラメルを思わせる琥珀色と深紅でまとめる。

Colors

• 地の色は金色グラデーションを基本にし、セクションの中央を明るくしてスポットライト風に見せる。
• セクションを切り替えるときは、深紅〜黒の舞台色の帯で強弱をつける。
• 見出しと本文は焦げ茶で書く。純黒は使わない。
• 濃色パネルの文字はクリーム色か金色にする。
• 赤・紫はバッジにだけ小さく使い、面積を広げない。
• CTA は暗い赤茶の面に金の縁取りと白文字で、額縁風に仕上げる。

Typography

• 見出しは太い明朝で書き、文字ごとに大小やわずかな傾きをつけて手描きのタイトルのように見せる。
• 強調語は周りの文字より 1.5 倍ほど大きくする。
• 本文も明朝で統一し、行間は 1.8 前後とる。
• 価格は数字だけを大きくし、税込価格は括弧付きの小さい文字で添える。
• 注釈とボタンにだけゴシックを使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材紹介は写真とテキストを左右交互に配置する。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 素材紹介は、写真を画面端まではみ出させ、反対側にラベルと説明文を置くジグザグ構成にする。
• セクション間は五線譜の曲線装飾でつなぎ、区切り線は引かない。
• 商品名の下に細い焦げ茶の罫線を引き、価格は右寄せで置く。
• 注釈は CTA の下にまとめる。

Elevation & Depth

• 商品写真の足元に柔らかい落ち影を入れる。
• スポットライト風の放射グラデーションで奥行きを出す。
• 額縁ラベルとボタンは影をつけず、縁取り線で立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品と素材は切り抜き写真にし、背景なしで光の円の上に置く。
• セクション境界: 直線で切り替えたうえで、緞帳や五線譜の曲線を重ねる。
• ラベルは両端に唐草風の装飾が付いた横長の額縁型にする。
• 主 CTA は角丸の小さい長方形にし、金の二重線で縁取る。
• サブボタンは白地のピル型に焦げ茶の枠線をつける。

Components

• 額縁ラベル（frame-label）: 焦げ茶の横長プレートに金の細線と唐草飾りを付け、中に素材名を入れる。
• コンセプト説明パネル（story-panel）: 焦げ茶の面に装飾枠を付け、中央揃えのクリーム文字を 5 行ほど入れる。
• 発売日帯（release-band）: ファーストビュー直下に置く深紅〜黒の帯。発売日を金文字で中央に入れる。
• 付属品・選択肢バッジ（badge-feature）: 赤地に白枠と白文字のバッジ。小さなアイコン写真を添えて 2 段に重ねる。
• 価格表示（price-tag）: 本体価格を大きな数字で、税込価格を括弧付きで書き、白フチの文字にする。
• 店舗検索ボタン（button-primary）: 暗い赤茶の面に金の二重枠を付ける。左に丸い矢印アイコン、右に店舗のイラストを置く。
• 情報リンクボタン（button-secondary）: 白地のピル型に焦げ茶の枠と文字。左に丸い矢印アイコンを置く。
• 五線譜装飾（music-staff）: 焦げ茶の曲線の五線と音符・ト音記号を、セクションの間に斜めに流す。

Do's and Don'ts

Do - 金色の地には必ず中央が明るくなる光のグラデーションを入れる。 - 緞帳と五線譜の装飾を繰り返し使い、舞台の世界観を最後まで続ける。 - 見出しと説明文は明朝で統一し、クラシックな品のよさを保つ。 - 素材紹介は写真とテキストを左右交互に置き、リズムを出す。 - 価格は本体価格と税込価格を並べて明記する。

Don't - 寒色や蛍光色をメインの地に使わない。 - フラットな単色の地にしない。 - 見出しを細いゴシックで書かない。 - 写真を四角いボックスに入れて並べない（切り抜きで置く）。 - 赤・紫のバッジを多用しない。

Page Structure

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

1. ファーストビュー（商品名・ビジュアル・価格を一目で伝える。）: 暗い金茶の地に、商品と素材の写真を大きく置く。上に額縁風の商品名、左下に赤いバッジ、右下に大きな価格を配置する。
2. 発売日帯（発売日を告知する。）: 深紅〜黒の帯に金色の明朝で 1 行書く。
3. コンセプト（商品の世界観と組み合わせの魅力を伝える。）: 左右に緞帳を垂らした金の舞台に、大小差をつけた明朝見出しと焦げ茶の説明パネルを置く。
4. おいしさのポイント（素材 3 つの特長を説明する。）: 傾けた見出しの下に、額縁ラベル・説明文・切り抜き写真を左右交互に並べる。間は五線譜でつなぐ。
5. 関連商品の紹介（同時に発売する派生商品を知らせる。）: 深紅〜黒の地に緞帳を添え、大きな金文字の見出しと商品写真を置く。
6. ラインナップ（商品ごとの形態と価格を一覧で見せる。）: 金の地に、切り抜き写真・明朝の商品名・罫線・右寄せの価格を縦に繰り返す。
7. CTA（店舗検索と詳細情報へ誘導する。）: 額縁風の主ボタンを置き、その下に白いピル型のサブボタンと小さな注釈を並べる。
8. おすすめ商品バナー（他の商品へ回遊させる。）: 見出し帯の下に、商品ごとに色の違う全幅バナーを縦に積む。

Imagery

• 商品は白背景で撮影して切り抜き、斜め上からの柔らかい光で質感を見せる。
• 素材（芋・カラメル片など）の断面や粒感を寄りで撮り、商品の周りに添える。
• 深紅のベルベットの緞帳をイラストまたは写真で画面の左右に垂らす。
• 焦げ茶の線画で五線譜・音符・ト音記号を曲線的に流す。
• 背景には放射状のスポットライト光を入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 1 カラムで本文を置き、背景の金グラデと緞帳は画面幅いっぱいに広げる。
• PC のファーストビューは商品写真を中央に置き、商品名を下に 1 行で横長に配置する。
• PC の素材紹介は 3 カラムにし、ラベル・説明文・写真を縦に並べる。
• PC のラインナップは 2 カラムで、商品群を左右に並べる。
• PC のおすすめバナーは 3 列に横並びにする。

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