DESIGN.md — 深紅×金の洋酒プレゼントキャンペーンLP（Burgundy & Gold Premium Spirits Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト
• キーワード: ワインレッド単色地・シャンパンゴールド文字・縦長コンデンス数字・細い金罫線・黒の角型CTA・ボトル切り抜き
• 地の質感: フラットな単色面。FVだけ黒地に斜めのマゼンタ帯と光沢があり、本文側には質感を付けない
• 形: 角丸なしの矩形。細い線の枠、左右に罫線を伸ばした見出し、二重線の区切り
• 温度感: 暖色寄りで濃い。夜のバーのような落ち着いた熱さ

Colors

• 地色はFVを除いてワインレッド1色で通し、セクションごとに色を変えない
• 見出し・数字・商品名は金で書く。白は注釈や説明文の一部だけに使う
• FVだけは黒地にマゼンタの斜め帯を入れ、本文側と切り替える
• 応募手順のカードは金ベージュの面に黒文字と黒い線画で描く
• 主CTAは黒の面にし、ワインレッド地の上でいちばん強く見せる
• SNSシェアボタンだけは各サービスの公式色を使ってよい

Typography

• 数字と英字は縦長のコンデンス書体にし、大きく見せる
• 和文は太めのゴシックで中央揃えにする
• 見出しは金色、字間は少し広めにとる
• 注釈は10px前後まで小さくしてよいが、地色とのコントラストは保つ
• 単位（名様・まで）は数字より小さくして、数字を目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品とグラスは 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 要素はすべて中央揃えで縦一列に積む
• 商品ボトルは2列で並べ、下に商品名と容量を左揃えで置く
• STEPカードは幅を約67%にして縦に積み、間隔は約24px
• CTAは画面幅の約85%まで広げる
• セクションの間は罫線見出しと大きな余白で区切る

Elevation & Depth

• 影は使わずフラットにする
• 奥行きはFVのボトル写真に付いた映り込みと光沢だけで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: ボトルやグラスは背景を抜いた切り抜きにし、地色の上に直接置く
• セクション境界: 直線の境界。FVと本文は水平に切り替え、本文の途中は金の二重罫線で区切る
• 角丸はすべて0にする
• 枠は1px前後の細い金線にする
• 見出しは中央の文字から左右に細い線を伸ばす
• スマホのアイコンなどの線画だけは角を丸くしてよい

Components

• 応募ボタン（button-primary）: 黒い横長の矩形に白か金で太字を入れる。ページ中で最も強い要素
• 要項リンクボタン（button-secondary）: 白地に黒の小さい文字と＞アイコン。黒い細枠を付ける
• 罫線付き見出し（heading-rule）: 金文字の左右に細い金線（景品見出しは二重線）を伸ばす
• 景品名の枠（prize-frame）: 細い金線の矩形の中に、金の太字で景品名を3行で入れる
• 応募ステップカード（step-card）: 金ベージュの正方形に近い面。上にSTEP番号、その下に説明2行と黒の線画を置く
• 応募期間表示（date-display）: 金の枠付きラベルの下に、巨大なコンデンス数字の日付を縦に並べ、点線でつなぐ
• 商品・景品アイテム（product-item）: 切り抜き写真の下に金の太字で商品名を書き、容量を小さく添える
• SNSシェアボタン（share-buttons）: 各サービスの公式色で塗った3つの矩形を横に並べる
• 外部リンク（link-footer）: 小さな英字ラベルと短い下線の下に、▶付きの大きなコンデンス英字のリンクを置く

Do's and Don'ts

Do - 地色はワインレッド1色を守り、文字は金を主役にする - 数字・日付・英字は縦長のコンデンス書体で大きく見せる - 装飾は細い金線と枠だけに絞る - 商品は背景を抜いた切り抜き写真で、間隔をあけて並べる - 主CTAは黒い矩形にし、ページの中盤と最後に置く - 注釈で年齢制限や応募条件をはっきり書く

Don't - 角丸・ピル型のボタンや、ふんわりした影を使わない - パステル色や明るすぎる原色を加えない（SNSボタンを除く） - セクションごとに背景色を変えない - 手書き風やポップな書体は使わない - 金の文字に光沢グラデーションを多用しない（FVのタイトルだけにする） - イラストはカラーにせず、STEPの線画だけにとどめる

Page Structure

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

1. ファーストビュー（キャンペーン名と対象商品を一目で伝える）: 黒地にマゼンタの斜め帯。上にロゴ、金の大きな英字タイトル、下に商品ボトル3本を並べる
2. キャンペーン概要（当選人数と景品を伝える）: 金で前置き文と大きな当選人数を書き、細い金枠の中に景品名を入れ、下に※注釈を3行置く
3. ブランドロゴ（セクションの区切りとブランドの想起）: 金の横長ロゴを中央に大きな余白をとって置く
4. 対象商品（購入対象を示す）: 罫線見出しの下に、ボトル写真を2列×2段で並べ、商品名と容量を添える
5. 応募期間（締切を強く伝える）: 枠付きラベルの下に、開始日と終了日を巨大な数字で縦に並べる
6. 応募方法（応募の条件を説明する）: 罫線見出しの下に白い本文を置き、レシートの有効期間を下線付きで添える
7. 応募ステップ（手順を3段階でわかりやすく示す）: 金ベージュのカード3枚を縦に積み、STEP番号・説明・黒の線画を入れる
8. CTA（応募へ誘導する）: 案内文、白い要項ボタン、黒い応募ボタンの順に並べる
9. SNSシェア（拡散を促す）: 公式色の3つのボタンを横に並べ、下に飲酒年齢の注意を小さく書く
10. 景品詳細（景品の魅力を具体的に見せる）: 二重罫線の見出しと金の説明文の下に、ボトル3本を3列、グラス3点を2列＋1点で並べる
11. 最終CTA（最後にもう一度応募を促す）: 金の二重線で区切り、黒地に金の大きな文字の応募ボタンを置く
12. 外部リンク（公式サイトや販売ページへ誘導する）: ▶付きの金のコンデンス英字リンクを縦に3つ並べる

Imagery

• 商品ボトルは正面から撮り、背景を抜いた切り抜きにして、ラベルがはっきり読めるようにする
• FVは黒の背景にボトルを並べ、床への映り込みと横からの光で艶を出す
• グラスは白抜きの切り抜きにし、カットの透明感を見せる
• 手順の図は黒の太い線画で描き、スマホ・吹き出し・レシートを記号的に表す
• 背景に柄や写真は使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約60%幅のコンテンツ列を置き、地色はそのまま全幅に広げる
• FVはPCで横長になり、左にタイトル、右にボトルを置く
• 対象商品はPCで4列に並べる
• 応募期間はPCで1行にまとめる
• STEPカードはPCで3列に並べる
• 外部リンクはPCで3つを横に並べ、景品のボトルとグラスは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 行書くと起動時に読み込まれる。