DESIGN.md — 黄×黒×赤の縁起物くじキャンペーン LP（Bold Yellow Lottery Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、和風、情報量多め・訴求型
• キーワード: おみくじ・新春・黄色ベタ・極太ゴシック・金箔・当選演出
• 地の質感: 黄色の地はフラットなベタ塗り。和紙調の生成り地と金箔の質感を局所的に重ねる
• 形: 角が鋭い四角カードと、下向き矢印状に切った黒カード
• 温度感: 暖色寄りで、にぎやかで熱量が高い

Colors

• 地の大半は黄のベタ塗りにする。説明セクションだけ生成り地に切り替えてリズムを作る
• 赤は主 CTA とロゴ風の見出し、強調数字にだけ使う
• 黒は手順カード、くじの裏面、人数バッジ、テキストに使う
• 最上位の賞は赤枠＋金箔の背景、中位は金帯、下位は灰帯にして格差を色で示す
• CTA は赤地に黄文字。白文字にしない

Typography

• 本文も太字で中央揃えにする
• 強調数字は赤で 1.5 倍以上に拡大する
• ロゴ風キーワードは赤い筆風の極太書体で表示する
• 見出しの下には小さな英字サブ見出しを添える
• キャッチは＼ ／ で挟む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。くじ結果は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 全要素を中央揃えにする
• セクションの境界は背景色の切り替えだけで示す
• くじカードは 2×2 で並べる
• 手順カードは縦に積み、下向き矢印でつなぐ
• CTA は FV 直下と手順の後に置く

Elevation & Depth

• 影はほぼ使わずフラットにする
• くじカードは白と金の二重枠で額縁のように見せる
• 立体感は金箔や放射光の画像で出す

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 賞品は切り抜きにして放射光の背景に置く。FV は料理とドリンクの写真を全面に敷く
• セクション境界: 直線で背景色を切り替える
• CTA は角丸 4px 程度の横長長方形にする
• 手順カードは角丸 16px で、下辺を矢印状にとがらせる
• 人数バッジは黒い正円にする
• 見出しは上下に黒い太線を引いて挟む

Components

• 参加ボタン（button-primary）: 赤地に黄色の極太文字を置いた横長ボタン。下に年齢制限の注釈を添える
• 応募要項ボタン（button-outline）: 黒い細枠に黒文字と＞矢印を入れた小ボタン
• 上下線見出し（heading-lined）: 日本語見出しと英字サブを上下の黒太線で挟む
• くじカード（lottery-card）: 上に等級の帯と賞品画像、下に黒地に黄色の？を置き、額縁風の二重枠で囲む
• 賞品カード（prize-card）: 等級帯の下に放射光背景と賞品切り抜きを置き、左上に黒丸の人数バッジを付ける
• 人数バッジ（badge-count）: 黒い正円に白の極太数字
• 手順矢印カード（step-arrow-card）: 黒カードの左に黄色の太字テキスト、右にスマホのイラスト。下辺は矢印状
• SNSシェアボタン（sns-share）: 青と黒の 2 つの長方形を並べ、下に注釈を置く

Do's and Don'ts

Do - 黄色の地をベタで大きく使う - 等級の格は赤・金・灰の帯色で差をつける - 数字と賞品名は赤や極太で大きく見せる - 和風の水引や紅白の装飾を FV に添える - 酒類の年齢注釈を CTA の近くに必ず置く

Don't - パステル調や細い書体を使わない - CTA を角丸ピルや青系にしない - 黄と赤以外の強調色を増やさない - 影やグラデーションのボタンにしない - 本文を左揃えで長文にしない

Page Structure

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

1. ファーストビュー（キャンペーン名と締切を伝える）: 料理とドリンクの写真を背景に、中央へ生成りの縦長パネルを置く。赤い極太タイトル、水引、締切を入れる
2. 導入とCTA（背景説明と参加を促す）: 黄色地に中央揃えの本文、赤い数字の訴求見出し、赤 CTA、要項ボタン、SNSボタンを並べる
3. 企画説明（くじの楽しさを説明する）: 生成り地にロゴ風の見出し、英字サブ、＼／のキャッチ、短い本文を置く
4. くじ結果一覧（4 種の結果を見せる）: 2×2 の額縁カードで、下半分を黒地に？で伏せる
5. 賞品（等級ごとの賞品を訴求する）: 全幅の賞品カードを縦に積む。等級帯、放射光背景、人数バッジを付ける
6. 参加方法（手順を 4 段で示す）: 黒い矢印カードを縦につなぎ、スマホのイラストを添える
7. 再CTA（参加を促す）: 赤ボタンと年齢注釈を置く
8. ブランドメッセージ（商品の価値を伝える）: 淡い黄色の光の写真を背景に、中央揃えの太字本文と下線付きリンクを置く

Imagery

• 料理とグラスは暗い背景でシズル感を出し、湯気や水滴を見せる
• 賞品は金色の 3D 切り抜きにし、白い放射光と金箔の背景に置く
• 手順は黄色い枠のスマホを描いたフラットなイラストにする
• 水引や紅白の線で新春の和風装飾を入れる
• ブランド面は黄金色のボケで温かい光を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 1000px 幅で SP と同じ構成にする
• PC のくじ結果は 4 列の横並びにする
• PC の賞品は最上位を全幅、下位 2 つを 2 列で並べる
• PC の参加方法は 4 枚の黒カードを横並びにし、右向き矢印でつなぐ
• PC の CTA は「スマホのみ参加可」の赤枠白ボタンに置き換える

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