DESIGN.md — 黒×紺×金の高級感ある飲料キャンペーンLP（Midnight Navy and Gold Luxury Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、情報量多め・訴求型
• キーワード: 夜のラウンジ・金の帯・深い紺・明朝の金文字・額縁フレーム・ご褒美感
• 地の質感: 黒と紺の面に、ぼけた光の粒やマーブル調の質感を薄く重ねる。帯とボタンは金属っぽいグラデーションにする
• 形: 角丸なしの長方形が基本。額縁風の細い金線フレームと四隅の装飾、リボン型バッジ、V字に切った帯を使う
• 温度感: 冷たい暗色の地に温かい金色を差し、落ち着いた大人のぜいたく感を出す

Colors

• 地は黒、商品ブロックは深い紺、という2段構成にする
• 見出しの帯・リボン・主ボタンは金のグラデーションにする
• 強調したい数字やコピーはクリームがかった金色の明朝で書く
• 外部サービスの説明だけクリームの明るいパネルにして目立たせる
• アコーディオンは銀のグラデーション、規約系は黒地に白い枠線で格を下げる
• 人数バッジは水色の枠線と文字で、金と役割を分ける

Typography

• 見出しと強調コピーは明朝、説明文と注釈はゴシックにする
• 数字は文字より1.3〜1.5倍大きくして目立たせる
• セクション見出しは字間を0.2em前後広げて格調を出す
• コピーは2行で中央揃えにし、行の最後に「！」を付ける
• 注釈は小さめの白文字で、※付きで内容の直後に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 額縁フレームの内側に紺のパネルを縦に積む
• パネルの中は商品名ラベル→写真→コピーの順に中央揃えで並べる
• 賞品コースはリボンバッジと人数バッジを左右に置き、本文は左揃えにする
• 賞品と賞品の間は細い横線で区切る
• 応募方法のボタン類は幅いっぱいで、間隔16px程度で縦に並べる

Elevation & Depth

• 影はほとんど使わず、グラデーションの明暗で立体感を出す
• 金や銀の帯は上が明るく下が暗いメタリックなグラデーションにする
• FVでは光の粒のぼかしと星形のきらめきで奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角のない長方形。商品は背景を抜いた切り抜きにする
• セクション境界: 金の帯の下をV字に切った矢印形と、額縁フレームの四隅装飾で区切る
• ボタン・ラベル・枠は角のない長方形にする
• 賞品コースのバッジは端を切り込んだ金のリボン形にする
• クリームのパネル内のカードだけ角丸12pxにする
• 額縁の四隅には小さな扇形の金装飾を付ける

Components

• 金グラデーションの応募ボタン（button-primary）: 幅いっぱいの金の長方形ボタン。右端に「>」を付ける
• 銀のアコーディオン（accordion-silver）: 銀グラデーションの帯。中央に明朝の見出し、右端に＋
• 枠線のアコーディオン（accordion-outline）: 黒地に白い枠線。要項・規約用で、右端に＋
• 金帯のセクション見出し（heading-gold-band）: 幅いっぱいの金グラデーション帯に、字間を広げた明朝見出しを置く。下をV字に切る場合もある
• ポイントコースのリボン（badge-ribbon）: 大きな数字＋「ポイント」＋コース名を入れた、金のリボン形バッジ
• 当選人数バッジ（badge-count）: 水色の枠線と明朝文字で人数を書いたバッジ
• 商品名ラベル（label-product）: 紺の地に白い細枠で囲んだ商品名
• 期間表示ボックス（period-box）: 金の細い枠で上下2段に分け、上に項目名、下に大きな金の日付を書く
• 額縁フレーム（frame-ornate）: 細い金線の外枠。四隅に装飾を付け、紺のパネルを囲む

Do's and Don'ts

Do - 黒・紺・金の3色で高級感を保つ - 大事な数字とコピーは金の明朝で大きく書く - パネルは額縁フレームで囲み、ギフトの箱のような特別感を出す - 各内容のすぐ下に注釈を小さく添える - 応募の手順はアコーディオンに折りたたんで、ページの長さを抑える

Don't - 明るい原色や派手なポップ色を使わない - 丸ゴシックやピル型ボタンで柔らかくしすぎない - 金の面積を広げすぎて安っぽくしない - 白地のセクションを多用しない - 強い影や太い枠線を付けない

Page Structure

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

1. ファーストビュー（キャンペーンの世界観と賞品総数を伝える）: 夜景のぼけた光の上に金白の明朝タイトルを置く。人数の丸バッジとリボン、賞品写真のコラージュを並べる
2. キャンペーン期間（応募できる期間を示す）: 金の細枠で2段に分けたボックスに大きな金の日付。下に注意書きを2行
3. 対象商品（対象商品とポイント数を伝える）: 額縁フレームの中に金帯の見出し。紺のパネルごとに商品名ラベル・切り抜き写真・金の2行コピーを並べる
4. 賞品（ポイントごとの賞品を見せる）: 黒地に金帯の見出し。リボンバッジ＋人数バッジ、賞品名、説明、写真、リンクを1組にして横線で区切る
5. 提携サービスの説明（ギフトの使い道を説明する）: クリームからベージュへのグラデーションパネルにロゴ、説明、白い角丸カード、注記、下線付きリンク
6. 応募方法（応募サイトへ誘導し、手順を説明する）: V字に切った金帯の見出し、斜め線で挟んだ案内文、金のCTAと銀のアコーディオン3つ
7. 応募要項・規約（細かい条件を折りたたんで載せる）: 黒地に白い枠線のアコーディオンを縦に並べる
8. お問い合わせ（問い合わせ先を示す）: 白い枠線のボックスに見出しの段と大きな電話番号・メール。下に注釈

Imagery

• FVは夜のバーやラウンジのぼけた暖色の光を背景にする
• 商品は背景を抜いて正面から撮った缶やボトルを中央に置く
• 賞品写真は高級旅館の露天風呂や鉄板の肉料理など、ぜいたく感のある実写にする
• ギフト券は写真に少し傾けて重ねる
• 星形のきらめきと流れる曲線の光で、タイトルまわりを飾る
• 紺の地にはうっすらとマーブル調の質感を入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅480〜600pxのカラムを置き、左右は黒か紺の質感で埋める
• 額縁フレームはカラム幅に合わせ、四隅の装飾は残す
• PCでは賞品写真と説明を2カラムに並べてもよい
• ボタンは最大幅を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 行書くと起動時に読み込まれる。