DESIGN.md — 濃紺×金箔の和モダン懸賞キャンペーン LP（Midnight Navy & Gold Japanese Moon Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 和風、ラグジュアリー・ダーク、上品・高級
• キーワード: 夜空の濃紺・金箔・瑞雲・霞・満月・麻の葉文様・明朝見出し
• 地の質感: 濃紺の和紙・布目テクスチャに金粉を散らし、金はメタリックなグラデーションで箔押し風にする
• 形: もこもこした雲形の金カード、霞の帯、六角形と花形の金バッジ、細い金の矩形枠
• 温度感: 暗く落ち着いた夜の空気に、金の暖かい光を差し込むイメージ

Colors

• 地は濃紺一色で通し、明るさを少し変えて区切る
• 金は単色ベタにせず、明暗のグラデーションで箔押し風にする
• 金の面の上の文字は黒か濃い茶色にする
• 濃紺の上の文字は白にし、見出しと番号だけ金にする
• 朱赤は FV の文様にだけ使い、本文には使わない
• 白い面は規約のスクロール枠だけに使う
• brush-heading は文字 #FFFFFF × 背景 #D3BD83 のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8B7331、4.57:1）を使う。

Typography

• 見出しは明朝の太字で統一する
• FVのタイトルは白文字に紺の縁取りと影を付けて立体感を出す
• 当選者数や点数などの数字は大きくし、「名様」「点」は小さく添える
• 手順番号は金色の欧文セリフのイタリックにする
• 手順の説明文は読みやすい太字ゴシックにする
• 本文は中央寄せを基本にし、長い記入事項だけ左寄せにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。対象商品だけ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 応募要項は細い金の矩形枠で囲み、枠の上辺に筆の金帯の見出しを重ねる
• 賞品は金の雲形カードを左右にずらして縦に並べる
• 当選者数の六角バッジは雲カードの角にはみ出させる
• 手順は金の点線で区切る
• CTA は枠内いっぱいに近い幅で中央に置く

Elevation & Depth

• 金の面とボタンの外側に、黄色いぼかしのグロー（発光）を付ける
• 商品写真の背後に柔らかい光彩を置いて浮かせる
• ドロップシャドウは使わず、光彩で奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージは背景を切り抜いて置く
• セクション境界: 直線で色を切り替え、霞の金帯を境目に重ねる
• 枠と見出しラベルは角丸なしの矩形にする
• 賞品カードは雲形の輪郭にする
• 当選者数は六角形、点数は花形のバッジにする
• ボタンは金のピル型にし、右にPDFアイコンを付ける

Components

• 金の応募ボタン（button-primary）: 金グラデーションのピル型ボタン。周囲を光らせ、右にPDFアイコンを付ける
• 雲形の賞品カード（prize-cloud-card）: 金箔の雲形の上に、賞品写真・賞品名・下線・内容リストを置く
• 賞ラベル（prize-label）: 黒い矩形に白の明朝で賞のランクを書く
• 当選者数の六角バッジ（winners-hex-badge）: 金の六角形に、大きな数字と小さな「名様」を書く
• 点数の花形バッジ（point-flower-badge）: 淡い金の花形に、応募券の点数を明朝で書く
• 筆の金帯見出し（brush-heading）: 金の筆跡の帯の上に、白い明朝文字と影を重ねる。枠の上辺に配置する
• 金枠のボックス（gold-frame-box）: 濃紺の地に、細い金の線で囲んだ矩形ブロック
• 応募手順（step-item）: 金のイタリック番号、白の太字の説明、右にアイコンを並べ、点線で区切る
• 応募期間の帯（period-band）: 淡い金のグラデーション帯に、枠付きの「期間」ラベルと日付を矢印でつなぐ
• 規約のスクロール枠（terms-scroll）: マット金の見出しの下に、白いスクロール領域を置いて規約を入れる

Do's and Don'ts

Do - 地は濃紺に和紙の質感と金粉を重ねる - 金はグラデーションと光彩で箔の輝きを出す - 見出しや数字は明朝の太字で格調を出す - 霞・雲・満月などの和柄モチーフを金で入れる - 数字は大きく、単位は小さく組む

Don't - 金をフラットな黄色で塗らない - 原色やパステルの色を足さない - 角丸のカードや丸いポップなボタンを多用しない - 白背景のセクションを増やさない - 手書き風やポップ体の書体を使わない

Page Structure

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

1. ファーストビュー（キャンペーン名と当選総数を伝える）: 金の満月を背負った明朝のタイトル。下に総数の帯、霞、朱と紺の文様雲、商品写真を置く
2. 応募期間（期間を明示する）: 淡い金の横帯に、枠付きのラベルと日付を矢印でつなぐ
3. 対象商品と導入（対象商品と賞品への期待感を出す）: 金粉の濃紺地に商品を並べ、導入文と大きな金の見出しを置く
4. 賞品紹介（賞ごとの内容と当選者数を伝える）: 金の雲形カードを賞ごとに並べ、黒い賞ラベルと六角の当選者数バッジを付ける
5. 応募要項・応募条件（応募方法の概要と応募はがきの入手）: 金枠＋筆帯の見出しに、条件文と金のDLボタンを置く
6. 対象商品一覧（商品ごとの点数を示す）: 2列グリッドに商品写真・商品名・花形の点数バッジを並べる
7. 応募手順（応募の流れを順番に説明する）: 金の番号付きの4ステップを点線で区切り、その下に記入事項リストとCTAを置く
8. 応募規約（規約への同意）: 金の見出し帯の下に、白いスクロール枠を置く
9. フッター注意（飲酒に関する注意）: 濃紺の地に、黄色のアイコンと白文字の一行を置く

Imagery

• 商品パッケージは背景を切り抜き、背後に光彩を置く
• 金箔の霞は横に伸びた段々の帯にする
• 雲は丸い山が連なる瑞雲形にし、金のグラデーションで塗る
• FVに大きな淡い金の満月と、朱・紺の麻の葉文様の雲を置く
• 背景に金粉の粒を散らし、夜空の星のように見せる
• 手順のアイコンは、はがきやポストのシンプルなフラットアイコンにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 800px で中央寄せにし、両端の濃紺テクスチャと金の円弧装飾を見せる
• PC の FV は横長にし、商品写真をタイトルの左右に振り分ける
• PC の賞品の雲カードは左右交互にずらして重ねる
• PC の対象商品は 3 列にする
• PC の応募手順は 2×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 行書くと起動時に読み込まれる。