DESIGN.md — 黒×金のアールデコ調 映画コラボ菓子 LP（Black and Gold Luxe Movie Collab Confectionery LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、力強い・インパクト、情報量多め・訴求型
• キーワード: 黒×金・アールデコ額縁・金属光沢グラデーション・映画ポスター風・キャンペーン訴求・明朝体の格調
• 地の質感: 金箔のような縦方向のグラデーションと、黒い革のような質感の地。透かしのメダル紋章をうっすら重ねる。
• 形: 角を斜めに切り落とした八角形の額縁ボタン、細い二重線の枠、円形メダルのバッジ。角丸はほとんど使わない。
• 温度感: 暖色寄り。黄土色・金・焦げ茶でまとめた重厚であたたかい印象。

Colors

• 地の色は、黒（ファーストビューと告知）→ クリームと金のグラデーション（商品紹介）→ 焦げ茶（キャンペーン）の順に切り替える。
• 金は単色で塗らず、明るい黄土色から暗い金への光沢グラデーションで金属感を出す。
• 黒地では見出しを白、または金のグラデーション文字にする。本文は白。
• 強調には黄色（#F6D562 付近）の帯やマーカーを使う。使いどころは弾数・当選数・規約ボタンに絞る。
• 当選数などの数字は金の大きな明朝体にして、周りの文字より目立たせる。
• クリーム地の本文は濃茶にする。真っ黒の文字は使わない。

Typography

• 見出しから本文まで明朝体で統一する。ゴシック体は注釈とコピーライトだけに使う。
• 本文は中央揃えにし、1 行が短くなるよう意図的に改行する。
• 数字は前後の文字より 1.5〜2 倍大きくして、ジャンプ率を高くする。
• 見出しはやや広めの字間（0.04〜0.1em）で格調を出す。
• ロゴ風の大タイトルは太いディスプレイ書体に金の光沢をつけて表現する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品の一覧だけ 2 列の箇条書きにする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出し・本文・ボタンはすべて中央揃えにする。
• 商品写真は中央に大きく置き、構成要素は引き出し線の注釈で説明する。
• 弾数の帯は左端に円形メダルを重ね、右側を幅いっぱいに伸ばす。
• 応募要項は黒地の中に金グラデーションのパネルを置き、小見出しの帯で区切って縦に並べる。
• 背景の透かし紋章は左右の端に半分はみ出すように配置する。

Elevation & Depth

• ドロップシャドウはほとんど使わない。立体感は金のグラデーションと二重枠で出す。
• 額縁ボタンは外側の細い金線と内側の光沢面で、浮き彫りのように見せる。
• 商品写真には床に落ちる柔らかい影だけをつける。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きにし、人物写真は額縁つきの矩形にする。
• セクション境界: 背景色をまっすぐ切り替える。額縁の細い二重線で区切る。
• 主ボタンは角を斜めに切った八角形の額縁型にする。
• バッジは円形のメダル型で、二重の縁取りをつける。
• 見出しの両脇には細い横線を伸ばす。
• 丸みのある可愛い形は避け、直線と幾何学の装飾でまとめる。

Components

• 金の額縁ボタン（button-frame-gold）: 角を切り落とした八角形の金グラデーションボタン。二重線の枠があり、左に ▶ を置き、文字は濃茶の明朝体。
• 黄色い規約ボタン（button-yellow）: 幅いっぱいの黄色い矩形ボタン。文字は焦げ茶の明朝体太字。
• 商品詳細の小ボタン（button-small-dark）: 暗いオリーブ茶の小さな矩形ボタン。▶ と白文字を入れ、金の細枠で囲む。
• 弾数メダル（badge-medal）: 黄色い円に黒の二重縁をつけたバッジ。中に「第○弾」を入れ、数字を大きくする。
• 弾数の黄色帯（band-round-title）: メダルの右側に伸びる黄色い帯。応募条件を 2 行の明朝体で書く。
• フレーバー名ラベル（label-flavor）: 暗い茶色の地に金の細枠をつけた横長ラベル。白文字の明朝体。
• 応募要項パネル（panel-terms）: 黒地の上に置く淡い金グラデーションの縦長パネル。暗い帯の小見出しで項目を区切る。
• 期間表示ボックス（box-period）: 金グラデーションの面を二重の金線で囲み、開催期間を 2 行で表示する。
• 両脇線つき見出し（heading-lined）: 中央の見出し文字の左右に、細い横線または三重線を伸ばす。

Do's and Don'ts

Do - 金は必ずグラデーションで描き、金属の光沢を出す。 - 黒・焦げ茶とクリーム・金で、明暗のコントラストをはっきりさせる。 - 数字（日付・当選数）は大きな明朝体で強調する。 - アールデコ調の角の装飾や二重線の枠で、各ブロックを囲む。 - 商品は切り抜き写真にして中央に大きく見せる。

Don't - パステルカラーや青系の色を入れない。 - ピル型や大きな角丸のボタンにしない。 - 本文に丸ゴシックやポップな書体を使わない。 - 金をフラットな単色の黄土色で塗らない。 - 黄色の強調を多用せず、要所だけに絞る。

Page Structure

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

1. ファーストビュー（コラボ商品と発売日を一目で伝える）: 金の光沢地をアールデコ調の黒い額縁で囲む。大タイトルを置き、2 商品の切り抜き写真と円形の発売日バッジを並べる。
2. 映画告知（コラボ相手の作品と公開日を伝える）: 黒い革のような地に、左は金のタイトルと公開日、右は額縁に入れた人物写真を置く。
3. 外部サイト誘導（作品の公式サイトへ誘導する）: 白地の帯に、金の額縁ボタンを 1 つ置く。
4. 商品紹介 1（1 つ目の商品の特長を伝える）: クリームから金へのグラデーション地。明朝の 2 行見出し、引き出し線つきの商品写真、中央揃えの説明文、小ボタンの順に並べる。
5. 商品紹介 2（2 つ目の商品のフレーバーを伝える）: 商品写真の下に、フレーバーごとの粒の写真、暗い色のラベル、説明文を繰り返して並べる。
6. キャンペーンの導入（SNS キャンペーンを告知する）: 焦げ茶の地に、ハッシュタグを金文字、キャンペーン名を大きな白い明朝で置き、金の額縁ボタンを添える。
7. キャンペーン第 1 弾・第 2 弾（各回の参加方法と賞品を伝える）: メダルと黄色帯の見出しの下に、金色の大きな当選数と賞品写真を置く。賞品は 2 列の箇条書きにする。
8. 開催期間（応募期間を明示する）: 二重の金枠で囲んだボックスに、期間を 2 行で表示する。
9. 応募要項（期間・参加方法・当選・賞品の詳細を伝える）: 金のパネル内を、暗い帯の小見出しで区切る。重要な語句には黄色のマーカーを引き、パネルの最後に黄色い補足ボックスを置く。
10. 締めの CTA（SNS アカウントと規約へ誘導する）: 金の額縁ボタンを置き、その下に黄色の規約ボタンを縦に並べる。

Imagery

• 商品は白背景で切り抜き、柔らかい接地影だけをつけて、正面かやや俯瞰で撮る。
• お菓子の断面や粒を大きく見せ、層構造は引き出し線と小さな文字で説明する。
• 背景には円形のメダル紋章やドル記号風の幾何学柄を、透かしで低いコントラストで重ねる。
• 人物は黒いスーツなどのダークトーンで撮り、金の額縁の中に収める。
• 賞品は並べて置いた物撮りにし、余白の多い構図にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨として記す。中央 750px 程度のカラムに SP の構成をそのまま収める。
• PC の左右の余白は黒か焦げ茶で埋め、金の額縁装飾を外側まで伸ばす。
• PC では商品紹介を 2 カラム（写真と説明文）にしてもよい。
• PC ではボタンの最大幅を 480px 程度に抑え、中央に置く。

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