DESIGN.md — 赤い和紙地×緑紫ボックスの商業施設祭LP（Boxing Match Pop Mall Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 和紙テクスチャの赤・対決イラスト・爆発形の背景・ずらし影ボックス・極太ゴシック・番号付き特典
• 地の質感: 背景全体に赤い和紙のような繊維テクスチャを敷く。ボックスの中はフラットな単色にする。
• 形: 四角いボックスを基本にする。番号の部分はギザギザの吹き出し形、メインビジュアルの背後は爆発形。帯はピル型。
• 温度感: 暖色の地に寒色のボックスを置く、高コントラストで熱気のある配色

Colors

• ページの地は赤い和紙テクスチャで統一する。
• 特典ごとにボックスの色を変える（1つ目は緑、2つ目は紫）。
• 濃い色のボックスの上の大見出しは、黄〜クリーム色の極太文字にする。
• 細かい条件は白いカードに黒文字で書く。
• ボックスには黒または濃い色の影を右下にずらして付ける。
• 告知や重要なお知らせは、黄色のベタ帯に黒文字で書く。
• benefit-box は文字 #FFFFFF × 背景 #168A82 のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#15837C、4.6:1）を使う。

Typography

• 見出しはすべて極太のゴシックにし、細い書体は使わない。
• 金額の数字は単位の約2倍の大きさにする。
• （税込）などの補足は、数字の横に小さく添える。
• リード見出しは「＼ ／」で挟む。
• 本文も太字を基本にする。注意書きだけ細字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典ボックスの中で 2 列のカードや、画像と文字の横並びを使う
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• ボックスは画面幅に対して左右に約4%の余白をとる。
• ボックスの上辺に番号を入れたギザギザの吹き出しを重ねる。
• ボックスの中に白いカードを入れ子にし、条件を区切る。
• 一覧の行は点線で区切る。
• 施設名は縦長の黒いラベルで左側に縦書きにする。

Elevation & Depth

• ボックスには右下にずらした濃い色のベタ影を付ける（ぼかしは付けない）。
• 白いカードは影なしのフラットにする。
• 影はぼかさず、ベタ塗りのオフセットだけで立体感を出す。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 建物は四角く切り抜き、キャラクターは輪郭で切り抜く
• セクション境界: 区切り線は入れず、赤い地の上にボックスを並べる。ボックス上辺は爆発形・ギザギザ形にする
• 日付の帯はピル型の白い帯にする。
• 番号は不定形の吹き出し（黄色）の中に入れる。
• ボックスは角丸なしの矩形にする。

Components

• 特典ボックス（benefit-box）: 緑または紫の大きな矩形。右下にずらしたベタ影を付ける。
• 番号吹き出し（number-badge）: 黄色の不定形の吹き出しに2桁の番号を入れ、左右に拳のアイコンを添える。
• 期間帯（date-pill）: 白いピル型の帯に、日付を黒の太字で入れる。
• 条件カード（condition-card）: 白いカード。建物のイラストと条件文、黄色のスラッシュ見出しを横に並べる。
• 商品券の図（gift-ticket）: 金の縁と赤いリボンが付いたチケット型の図。
• 縦書きラベル（vertical-label）: 黒い縦長の帯に、白の縦書きで施設名を入れる。
• 告知帯（notice-band）: 黄色のベタ帯に、黒の太字2行で公開予定などを知らせる。
• 応募条件パネル（condition-panel）: ラベンダー色のパネルに白いカード2枚を並べ、＋でつなぐ。

Do's and Don'ts

Do - 赤い地にはテクスチャを敷いて質感を出す。 - 特典ごとに番号とボックスの色を変えて区別する。 - 金額・人数・日付は極太の大きな数字で見せる。 - 条件は白いカードに分け、点線で区切る。 - 影はベタのオフセット影にする。

Don't - 淡いパステル調や細い明朝体にしない。 - ぼかした影やグラデーションのボタンを使わない。 - 条件を長い文章にまとめず、カードに分ける。 - ボックス同士を同じ色にしない。 - 余白を広くとりすぎない（密度は高く保つ）。

Page Structure

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

1. ファーストビュー（イベント名と期間、テーマを伝える）: 赤い地に白い極太の手書き風タイトルを置き、爆発形の上でキャラクターが対決するイラストを中央に配置する。テーマのコピーと日付は白抜きで入れる。
2. 特典01（先着）（先着特典の内容と条件を示す）: 緑のボックスの上辺に番号吹き出しを重ねる。クリーム色の大きな金額見出しを置き、その下に日付帯、施設ごとの条件カードを続ける。
3. 引換方法（引換の場所と時間を示す）: 白いカードの中に、黒い矢印形のラベルと場所・時間を並べる。
4. 注意事項（利用条件を補足する）: 緑の地に、白の小さな文字で注意書きを入れる。
5. 特典02（抽選）（抽選賞品と応募条件を示す）: 紫のボックスの上部に爆発形を置く。メダルのバッジ、黄色の大見出し、期間帯、ラベンダー色の条件パネルの順に並べる。
6. 賞品の内容（セットの内訳を一覧で示す）: 白いカードの左に縦書きラベルを置き、項目と金額を点線で区切って並べる。
7. 応募告知（発表方法と応募フォームの公開日を伝える）: 紫の地に白文字で説明を入れ、その下に黄色の告知帯を置く。
8. フッター（コピーライトを表示する）: 薄グレーの帯に、小さな文字を中央揃えで入れる。

Imagery

• アルファベットを擬人化したキャラクターを、太い黒の輪郭とフラットな塗りで描く。
• 背景は同心円状に重ねたオレンジ〜黄色の爆発形にする。
• ボクシンググローブ・拳・メダルなど、対決を連想させるアイコンを使う。
• 建物は簡略化したフラットなイラストにする。
• 商品券は金の縁と赤いリボンの付いたチケット図案にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、PC では SP の縦長構成を中央に約480pxの幅で置き、左右は赤いテクスチャの地にすることを推奨する。
• 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 行書くと起動時に読み込まれる。