DESIGN.md — 青×金のビール懸賞キャンペーンLP（Royal Blue & Gold Receipt Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 信頼・誠実、力強い・インパクト、情報量多め・訴求型
• キーワード: ロイヤルブルー・金グラデーション・白カード・明朝太字・メダルバッジ・図解ガイド
• 地の質感: 青地に縦方向のわずかなグラデーションをかける。金帯には光沢感のある黄金グラデーションを使う。カードはフラットな白。
• 形: 角丸の白カード、ピル型の当選数ラベル、円形の金メダル、角の立った青帯の見出し。
• 温度感: 爽やかで涼しい青を基調に、金色で祝祭感と高級感を加える。

Colors

• ページの大部分は青地にする。情報は白カードに載せて読ませる。
• 金色のグラデーションは、ファーストビュー直下の期間告知帯とポイントバッジだけに使う。
• 日付や賞品名は濃紺の明朝太字で書く。黒は使わない。
• 青地のセクション見出しは黄色の文字を〈〉で囲む。
• 赤は注意文と、良い例の○印・番号に限って使う。
• 注意説明の図解は、グレー地に白い紙の形で描く。

Typography

• 数字や日付は明朝の太字で大きくする。「年・月・日」は小さくする。
• 曜日は括弧で囲み、本体より小さく書く。
• 見出しは〈〉で囲み、中央揃えにする。
• 本文はゴシックの太字で、短い行で改行する。
• 注釈は※で始め、10px前後の小さい文字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。図解は 2 列のグリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約6%の余白を取って青地に浮かべる。
• カードどうしの間隔は約16px。
• ポイントバッジはカードの左上に、はみ出し気味に置く。
• 当選数のピルはバッジの右に横並びにする。
• STEP枠は縦に3つ並べる。説明文は左、アイコンは右に置く。

Elevation & Depth

• 白カードには、ごく薄いドロップシャドウを付ける。
• 金メダルバッジには立体的なグラデーションと影を付ける。
• そのほかはフラットにする。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 賞品は切り抜きか角丸の四角。商品の缶は切り抜く。
• セクション境界: 直線で色を切り替える。
• 当選数ラベルは、白地に紺の枠線のピル型。
• 帯見出しとボタンは角丸なし。
• STEP枠は白い二重線の四角。

Components

• ポイントコースのメダル（badge-point-medal）: 金のグラデーションの円に、紺色の明朝でポイント数とコース名を入れる。
• 当選数ピル（pill-winners）: 白地に紺の枠線。明朝で当選人数を書く。
• 期間の帯見出し（band-heading）: 金帯の上に置く、全幅の濃紺の帯。中央に白文字。
• 第◯弾ラベル（label-phase）: 濃紺の小さな四角に、白い明朝で書く。
• 賞品カード（card-prize）: 角丸の白カード。メダル、ピル、写真、賞品名を順に載せる。
• STEP枠（box-step）: 白い枠線の箱。欧文のSTEP番号、説明、線画のアイコンを入れる。
• 登録ボタン（button-primary）: 全幅の濃紺ボタン。白文字で書く。
• 要項リンクボタン（button-sub）: 白地に細い枠線。右に「>」を付ける。
• 撮影例の図解（guide-example）: グレー地に白いレシートの線画を描き、下に2行の説明を添える。2列で並べる。

Do's and Don'ts

Do - 青地と白カードのコントラストを保つ。 - 日付と賞品名は明朝の太字で大きく見せる。 - コースはメダルバッジとピルで区別する。 - 手順は3つのSTEP枠と線画アイコンで図解する。 - 注意点は○と×の見出しを付けて2列で並べる。

Don't - 金色を広い面積に使わない。 - 柔らかいパステル色を入れない。 - カードに強い影を付けない。 - 日付を細いゴシックで書かない。 - 赤を装飾目的で使わない。

Page Structure

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

1. ファーストビュー（くつろぎのシーンでキャンペーンを印象づける）: 部屋でくつろぐ写真を背景にする。上部に縁取り文字のロゴと金のリボン、右下に商品の缶を置く。
2. 応募期間（応募期間とレシートの有効期間を伝える）: 金のグラデーション帯に濃紺の帯見出しを置き、日付を明朝で大きく書く。
3. 応募コース（ポイントごとの賞品を見せる）: 青地に白カードを3枚並べる。各カードにメダル、ピル、写真、箇条書きの賞品名を入れる。
4. 対象商品（対象商品を示す）: 左に商品名と容量、右に缶の写真を置く。
5. 応募方法（応募の手順を説明する）: 導入文のあとにSTEP枠を3つ縦に並べる。
6. お知らせ・CTA（注意事項と登録への導線）: 白地に小さい文字のお知らせを置き、要項ボタン、全幅の登録ボタン、SNSのシェアボタンを続ける。
7. 撮影時の注意点（読めないレシートが送られるのを防ぐ）: 青地に大きな〈〉付きの見出しを置く。白パネルの中に良い例と、悪い例の2列グリッドを並べる。

Imagery

• 写真は明るい自然光のリビングで、くつろぐ人物を撮る。
• 賞品は白背景で切り抜くか、食卓のシズル写真にする。
• アイコンは紺色の単色の線画（スマホ、レシート、コイン）。
• 図解は白いレシートの線画に、赤い番号や枠でポイントを示す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約800pxのコンテンツ幅を取り、両サイドも青地にする。
• PCではファーストビューが横長になり、期間告知は横一列の帯にまとめる。
• PCでは48ptの賞品を、縦線で区切った2列で並べる。
• PCではQRコード付きの「スマホ専用」案内ボックスを追加する。
• 注意点の図解はPCでも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 行書くと起動時に読み込まれる。