DESIGN.md — 黄×紺に赤緑が映えるビール懸賞キャンペーンLP（Bold Yellow Navy Beer Receipt Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 濃い黄色・紺の帯・赤緑の2コース・太い数字・賞品の切り抜き写真・レシート応募
• 地の質感: ベタ塗りの黄色地に、左右の端だけ濃い山吹色のグラデーションをかける。放射状の集中線がうっすら入る。
• 形: 角丸カード、ピル型の見出しラベル、円形のポイントバッジ、山かっこで囲む見出し。
• 温度感: 暖色が中心。紺で全体を締めた、にぎやかで明るい印象。

Colors

• ページ全体の地は濃い黄色。左右の端だけを山吹色のグラデーションで濃くする。
• 応募期間は紺のベタ帯にまとめ、日付は黄色の太い文字で載せる。
• 賞品コースは赤カードと緑カードで分け、その上の文字はすべて白にする。
• ポイントバッジは黄色または白の円にし、中の文字は紺にする。
• 手順や注意点は白い面にのせ、紺の細線で囲む。
• 注意事項は赤文字で書き、ほかの本文と区別する。
• course-pill は文字 #E2001A × 背景 #FEDC00 のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C60017、4.53:1）を使う。

Typography

• 見出しも本文も太字のゴシックを基本にする。
• 数字は単位より約1.5倍大きくして目立たせる。
• セクション見出しは〈 〉で囲み、中央に置く。
• メインタイトルは白フチと影を付けた立体的な文字にする。
• 注釈は9px前後の小さい文字にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品カードの中だけ左にバッジ・右に説明の 2 列。NG 例は 2 列グリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 期間の帯は画面いっぱいの幅にする。
• コースカードは左右に約6%の余白をとって中央に置く。
• 賞品写真はカードの下側に横並びで置く。
• STEPカードは縦に3つ並べ、間を約16pxあける。
• 注意点のセクションは白い大きなパネルに入れる。

Elevation & Depth

• 影はほとんど使わず、ベタ塗りの面と線で階層を表す。
• メインタイトルのロゴだけに濃い立体影を付ける。
• 賞品写真は切り抜きで、うっすら落ち影を付ける。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品と賞品は背景を抜いた切り抜き。レシートの図解は四角の灰色枠に入れる。
• セクション境界: 面の色を直線で切り替える。
• コース名のラベルは黄色のピル型に赤い縁を付ける。
• ポイントバッジは片側が少し尖った円形にする。
• ボタンは角丸の小さい長方形にする。
• STEPカードは角丸なしで、紺の細い二重線で囲む。

Components

• 応募期間の帯（period-band）: 紺の帯に黄色のラベルを敷き、その下に黄色の太い日付を2行で載せる。
• コースのカード（course-card）: 赤または緑の角丸カード。上にピル型のラベル、中に賞品セットを2つ入れ、白い線で区切る。
• コース名のピル（course-pill）: 黄色いピル型に赤い縁を付け、コース名を赤文字で入れる。
• ポイントバッジ（point-badge）: 黄色または白の円に紺文字で「数字+pt」と「コース」を入れる。下には白地の当選人数ラベルを付ける。
• STEPカード（step-card）: 白地に紺の細枠。左に「STEP+番号」と説明、右に紺の線画アイコンを置く。
• ダウンロードボタン（button-primary）: 赤地の角丸ボタン。白文字を2行で入れる。
• ログインボタン（button-login）: 紺のベタ塗りで横幅いっぱい。白文字のボタン。
• 山かっこの見出し（bracket-heading）: 〈 〉で囲んだ太字の見出し。大きい見出しは左右に紺の細い山かっこ線を引く。
• NG例グリッド（ng-example-grid）: 白いパネルの中に、灰色枠のレシート図解を2列で並べる。図の下に中央揃えの説明を付ける。

Do's and Don'ts

Do - 日付・ポイント・当選人数は、数字を特大の太字にして見せる。 - コースごとに地の色を変え、ひと目で区別できるようにする。 - 賞品は切り抜き写真を横に並べて、量の多さを見せる。 - 応募の手順はSTEP番号付きのカードで順に見せる。 - 年齢制限などの注意書きは目立つ位置に小さく必ず入れる。

Don't - 淡いパステル色や細い明朝体は使わない。 - 黄色の地に黄色系の細い文字を置かない。 - 赤と緑のカードの上に、黒い本文を置かない。 - 強いぼかしの影やガラス風の表現は使わない。 - セクションの境目に波形や斜めの切り替えを入れない。

Page Structure

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

1. ファーストビュー（キャンペーン名と商品を見せて注目を集める）: 黄色の地に立体ロゴ風のタイトルを置き、商品缶とジョッキの写真を大きく載せる。写真にはしぶきの演出を入れる。
2. 応募期間（応募方法と期間を伝える）: 紺の帯に、黄色のラベルと大きい日付を3組並べる。
3. 大口の賞品（一番大きい賞品を訴求する）: 白い枠付きのカードに、集中線と特大の数字見出しを入れる。バッジと賞品写真を並べる。
4. 赤コース（1つ目のコースの賞品を見せる）: 赤い角丸カードに、ピル型ラベル・バッジ・セット名・リスト・写真を入れる。
5. 緑コース（2つ目のコースの賞品を見せる）: 赤コースと同じ構成で、地を緑にする。
6. 対象商品（どの商品が対象かを示す）: 缶を2本並べ、下に商品名と容量を書き、注釈を添える。
7. 応募方法（手順を説明する）: リード文のあとに、白いSTEPカードを3枚縦に並べる。
8. 郵送応募の案内（郵送で応募する人を誘導する）: 本文と、赤いダウンロードボタンを置く。
9. 注意事項・ログイン（制限を伝え、応募画面へ導線を作る）: 白い地に赤の注意文を置き、紺のログインボタンとSNSシェアボタンを並べる。
10. 撮影時の注意点（応募の不備を防ぐ）: 黄色の地に白い大きなパネルを置き、良い例を○、悪い例を×で示す。悪い例は2列の図解にする。

Imagery

• 商品は正面から撮った切り抜きにし、しぶきや泡で冷たさとシズル感を出す。
• 賞品は背景を抜いた写真を少し重ねて並べ、量を感じさせる。
• アイコンは紺一色の線画で、スマホやレシート、コインを描く。
• レシートの図解はフラットな白黒で描き、赤い番号の丸で要点を示す。
• 大きい賞品のカードには、うっすら放射状の集中線を敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約800px幅で置き、外側には黄色の地を広げる。
• 応募期間はPCではラベルと日付を横に並べた3行の表形式にする。
• コースカードはPCではセット名を1行にし、写真を右にまとめる。
• 対象商品はPCでは商品名を2列に並べる。
• PCではQRコードを入れ、スマホから応募するよう案内する。

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