DESIGN.md — 緑と朱の和モダンな緑茶プレゼント LP（Japanese Tea Green Lottery Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 和風、清潔・爽やか、ポップ・元気、情報量多め・訴求型
• キーワード: 緑茶グリーン・市松模様・朱色の版画イラスト・明朝見出し・賞品ショーケース・はがき応募
• 地の質感: フラットな薄グレー地に、切り抜いた商品写真の柔らかい影と、朱色の判子・版画風の線画を重ねる
• 形: 角は基本的に直角。市松帯・二重線＋水引の飾り罫、円形スタンプのバッジ
• 温度感: 爽やかでやや明るい寒色寄りの緑に、朱赤で温かみを足す

Colors

• 地は薄グレー#F0F0F0、区切りや強調ブロックだけを緑#31A23Bのベタ帯にする
• 緑の帯の上の文字は白、明朝で大きく見せる
• 黄緑は市松帯・賞品・見本カードに使い、ブランド緑と2トーンで構成する
• 朱赤は当選数バッジ・注意書き・版画イラストに限定し、差し色として使う
• CTAボタンは黄緑ベタに濃い緑文字。緑の地の上に置いて浮かせる
• 本文は濃いグレー。純黒は使わない
• button-primary は文字 #3F5A2A × 背景 #90C416 のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9FD918、4.58:1）を使う。
• band-course は文字 #FBFEFB × 背景 #32A23B のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#298530、4.6:1）を使う。
• info-period は文字 #32A23B × 背景 #FFFFFF のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#298530、4.56:1）を使う。
• tab-switch は文字 #32A23B × 背景 #FFFFFF のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#298530、4.56:1）を使う。
• tile-sample は文字 #E2231A × 背景 #C8DC3C のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B01B14、4.57:1）を使う。

Typography

• 見出しはすべて明朝で、和の品の良さを出す
• 数字（口数・当選数・日付）は周りの文字の約2倍に拡大する
• 本文・リストはゴシックの小さめサイズで情報を詰める
• 注釈は※付き・右寄せ・小さいグレー文字
• 見出しは中央揃え、字間はやや広め
• 朱赤の筆文字は1画面に1か所までのアクセントにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品は 2 列グリッド、見本カードは 2〜5 個を横に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 賞品写真は切り抜きで左右交互にずらして配置する
• 人物別コースは全幅の緑帯で区切る
• 各ブロックは中央揃えを基本にする
• 版画イラストを左右の余白に散らして間を埋める
• 応募要項はスクロール枠つきの白いボックスに収める

Elevation & Depth

• 基本はフラットで、影は使わない
• 切り抜いた賞品写真の下にだけ柔らかい落ち影を付ける
• 当選数バッジは白丸に薄い影を付けて浮かせる

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品・賞品は背景を抜いた切り抜き。人物は四角いエリアいっぱいに配置
• セクション境界: 黄緑と白の市松帯、または緑の二重線の中央に水引の結び飾りを置く
• ボタン・帯は角を立てた長方形
• バッジは正円で朱赤の細い枠線
• 見本カードは正方形のタイル
• 装飾の罫は細い二重線で上品に

Components

• ダウンロードCTA（button-primary）: 緑のベタ地の上に置く全幅の黄緑ボタン。明朝の文字で、角は直角に近い
• 当選数スタンプ（badge-lottery）: 白い正円に朱赤の細い枠。中に朱赤の明朝で「抽選で○名様」。数字を大きくする
• コース見出し帯（band-course）: 全幅の緑帯。左に丸く切り抜いた人物、右に白い明朝の大見出し
• 市松付き小見出し（heading-checker）: 見出しの左右に黄緑の市松帯を伸ばす。応募口数の数字だけを大きくする
• 水引罫の見出し（heading-mizuhiki）: 上下に緑の二重線。上の線の中央に赤い結び飾りを置き、間に緑の明朝で賞品名
• 応募期間バー（info-period）: 緑の枠付きラベルの右に、緑の明朝で大きく日付を表示する
• 2択の切替ナビ（tab-switch）: 白地を縦線で2分割。緑の明朝で2行の見出しを置き、下に赤い三角を付ける
• 応募要項ボックス（box-terms）: 緑地の中に白い枠を置き、内部をスクロールさせる。小見出しは緑ベタ帯に白文字
• 見本タイル（tile-sample）: 黄緑の正方形に白抜きの大きな文字と、赤い「見本」の印を重ねる

Do's and Don'ts

Do - 緑・黄緑・朱赤・薄グレーの4色に絞る - 見出しは明朝で中央揃えにする - セクションの区切りに市松帯や水引の二重罫を使う - 賞品は切り抜き写真で並べ、全部に当選数スタンプを添える - 余白に朱色の線画イラストを散らして和の遊び心を出す

Don't - 丸いピル型ボタンやグラデーションのボタンは使わない - 朱赤を面のベタ塗りに使わない - 濃い影やネオンカラーなど現代的すぎる装飾は入れない - 見出しをゴシックの太字にしない - 賞品写真を四角い枠に入れて硬い印象にしない

Page Structure

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

1. ヘッダー（企業・ブランドの表示とナビ）: 白地にロゴ・お問い合わせ・メニュー。2段目にブランドロゴとバナー
2. ファーストビュー（キャンペーンのテーマと出演者を伝える）: 淡い緑の市松地に人物2人を左右に置き、中央の緑の縦帯に明朝の縦書きキャッチ
3. 応募期間・問い合わせ先（期間と窓口を明示する）: 白地に枠付きラベルと大きな日付。その下に緑の全幅帯で電話番号を白い大きな明朝
4. 対象商品（応募の条件と対象商品を示す）: 朱赤の注意書き、筆文字のキャッチと手の写真、商品の集合写真、グレー帯の商品リスト
5. コース切替ナビ（2つの賞品コースへ誘導する）: 白地を2分割したタブ。緑の明朝に赤い下向き三角
6. 賞品コースA（1つ目の賞品群を見せる）: 緑の人物帯、市松の小見出し、見本タイル、当選数スタンプ付きの賞品写真、水引罫の賞品名、内容のリスト
7. 賞品コースB（2つ目の賞品群を見せる）: コースAと同じ型を繰り返す。賞品は2列で左右にずらして配置
8. CTA（応募はがきをダウンロードさせる）: 緑ベタ地に同意チェックボックスと黄緑の全幅ボタン。下端に市松帯
9. 応募方法の説明（応募マークの貼り方と口数を説明する）: 白地に朱赤の明朝のリード、はがきの図解、見本タイルのグリッド、朱赤の●付き注意書き
10. 応募要項（規約を詳しく伝える）: 緑地の中にスクロールする白いボックス。小見出しは緑帯
11. フッター（ページ上部へ戻す）: 緑地に白い山形の矢印と欧文の大文字

Imagery

• 人物は和装・制服などで、正面から明るく均一な光で撮る
• 商品・賞品は真上や斜めから撮って背景を抜き、柔らかい落ち影を付ける
• 朱赤一色の版画・判子風の縁起物イラスト（招き猫・龍・鶴・亀・人形など）を余白に散らす
• 筆文字の書を緑で入れたグッズで和のテーマを統一する
• 手で商品を持つ写真は、白い背景に指先まで入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約1000pxの幅で、緑帯・市松帯は全幅に広げる
• PCのファーストビューは人物を左右に離し、キャッチを中央に置く横長の構図
• PCの賞品コースは写真を左右に散らし、賞品名とスペックを中央に寄せた1画面の構成
• 対象商品はPCで写真とリストを横並びにする
• 応募方法の説明は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 行書くと起動時に読み込まれる。