DESIGN.md — 紅白金と和柄の正月福袋キャンペーン LP（Festive Red Gold New Year Lucky Bag LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 和風、力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 正月・福袋・紅白金・和柄・抽選販売・祝祭感
• 地の質感: 赤の市松柄、黒地の麻の葉柄、金のグラデーション、紗綾形の帯で地を埋め、平らな面は少なめ
• 形: 四角いカードに金の二重枠、巻物風の見出し、扇形のラベル、水引の区切り線
• 温度感: 暖色で熱量が高く、おめでたい印象

Colors

• 地は赤（市松柄）、金（グラデーション）、黒（麻の葉柄）の三種をセクションごとに入れ替える
• 商品紹介はこげ茶のカードに金の細い枠をつけ、文字は白
• 主ボタンは金地にこげ茶の文字。黒地の上に置いて目立たせる
• 見出しラベルは白地に黒文字で、深緑の巻物の枠をつける
• 注意書きの※は、地の色に合わせて白か黒の小さい文字にする
• セクションの境目に紗綾形などの赤い和柄の帯を入れる

Typography

• 本文と見出しは太めのゴシックで統一する
• セクションの見出しラベルだけ明朝体にして和の格式を出す
• 価格の数字は大きく太く、単位と税込表記は小さくする
• 本文は左揃え。導入見出しと日程は中央揃え
• ※注記は 10px 前後でまとめて置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、確率紹介のみ 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品カードは縦に並べ、カード同士は約 24px あける
• カードの中は、商品画像を中央に置き、その下に商品名・説明・仕様表の順
• 日程は扇形ラベルと中央揃えの日付をセットにして縦に 3 つ並べる
• 価格ブロックと日程ブロックの間は水引の区切り線で分ける
• ページの最後で価格・日程・ボタンをもう一度まとめて見せる

Elevation & Depth

• 影はほとんど使わず、金の枠と柄の地の差で奥行きを出す
• 商品画像のみ、うっすら光るような影をつける
• 巻物見出しは、軸の重なりで少しだけ立体に見せる

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きか角丸の矩形。人物はコラージュで切り抜き
• セクション境界: 和柄の帯で区切る。下向き三角の切り欠きで次のセクションへ誘導する
• ボタンは角丸が小さい横長の長方形にする
• カードはほぼ直角にし、金の二重枠をつける
• 日程ラベルは上辺が弧を描く扇形
• 確率カードの上部は屋根形（山形）のヘッダー

Components

• 金の主ボタン（button-primary）: 幅いっぱいの金地のボタン。中央にこげ茶の太字
• 巻物見出し（scroll-heading）: 白い札の両端に深緑の巻物の軸がつき、明朝体の見出しを入れる
• 金枠の商品カード（product-card）: こげ茶の地に金の二重枠。画像・商品名・説明・仕様表を縦に並べる
• 仕様表（spec-table）: 細い線で区切った 2 列の表。左が項目名、右が値
• 扇形の日程ラベル（fan-label）: 白い扇形に黒の太字で日程の項目名。下に日付を中央揃えで置く
• 水引の区切り（mizuhiki-divider）: 白い横線の中央に、水引の結び目のアイコンを置く
• 確率カード（odds-card）: 白い屋根形ヘッダーに赤の太字で確率を書き、下に賞品画像。2 枚並べる
• 点線のお知らせ枠（info-box）: 赤地に白線の枠と点線の内枠を重ね、手順を番号つきリストで書く

Do's and Don'ts

Do - 赤・金・黒の三色でセクションの地を交互に切り替える - 地には市松・麻の葉・紗綾形などの和柄を敷く - 商品は金枠のこげ茶カードで統一する - 日程は扇形ラベル＋中央揃えの日付で見せる - ページの最後で価格・日程・CTA を繰り返す

Don't - パステルなど淡い色を混ぜない - 大きな角丸や丸いピル型ボタンを使わない - 柄のない平坦な白地を広く取らない - 見出しを細い書体にしない - 金を淡い黄色に置き換えない

Page Structure

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

1. ファーストビュー（キャラクターとグッズで一目で注目させる）: 赤い放射状の地に人物とグッズのコラージュ。下に金の立体ロゴ、その下に注記を 1 行
2. 導入・概要（キャンペーンの趣旨と販売方法を伝える）: 黒の麻の葉柄の地。白の中央揃えの見出し、左揃えの本文、金の主ボタンの順
3. 価格・日程（価格と申込・発表・受取の日程を示す）: 金のグラデーション地。白い袋アイコンに商品名、太字の価格、水引の区切り、扇形ラベルの日程 3 つ
4. 福袋の内容（入っている商品を 1 つずつ紹介する）: 赤の市松柄の地に巻物見出し。金枠のこげ茶カードを縦に 4 枚並べる
5. 景品の紹介（当たり要素で期待感を高める）: 赤地に巻物見出しと白の導入文。カード画像を並べた商品カードを置く
6. 当選確率（当たりの種類と確率を示す）: 白い屋根形のカードを 2 列で並べ、赤の確率と賞品画像を入れる
7. 受け取り方法（特典の受け取り手順を説明する）: 白線の枠の中に点線の内枠を置き、番号つきの手順と期限を書く
8. 最終 CTA（要点をまとめて申込を促す）: 黒の麻の葉柄の地。メイン画像、価格、日程、金の主ボタンをもう一度並べる

Imagery

• 人物とグッズを切り抜いてコラージュし、赤い放射状の背景に重ねる
• 商品は金色が映えるよう光沢を強調し、背景を抜いてカード中央に置く
• 金のラメやキラキラの質感を多めに使う
• 和柄（市松・麻の葉・紗綾形・青海波）を地紋や帯に使う
• 水引・扇・巻物など正月のモチーフを部品にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 900px 幅にコンテンツを置き、左右は柄の地を広げる
• PC の商品カードは横並び（左に画像、右に説明と表）
• PC の価格ブロックは袋アイコンと価格を横に並べ、日程はラベルと日付を 1 行にする
• PC のボタンは幅を約 40% に抑えて中央に置く
• PC のファーストビューは人物を複数並べた横長の構図

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