DESIGN.md — 紺と花火の夏祭りプレゼントキャンペーンLP（Summer Night Festival Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 和風、ポップ・元気、情報量多め・訴求型、清潔・爽やか
• キーワード: 夏祭り・花火・うちわ・青海波・夜空グラデーション・金文字
• 地の質感: 和紙のような細かい揺らぎのある青地に、花火の線画と青海波模様を半透明で重ねる
• 形: うちわ型の賞品カード、丸い波形バッジ、角丸ピルボタン、白い角型パネル
• 温度感: 夜空の涼しさに、金と臙脂で祭りの温かみを足した涼やかな配色

Colors

• 地は上から濃紺→青→水色へ縦グラデーションで明るくし、夕暮れ〜夜空の流れを作る
• 見出し・数字・強調語は金グラデーション文字にする
• 賞品は2色のうちわで区別し、1つは青、もう1つは淡ピンク＋臙脂
• 手順・規約は白パネルにのせ、区切りは臙脂の点線
• 主ボタンは金地に濃紺文字。他の色のボタンは作らない
• 注釈は青地では白、白地では濃い灰色
• prize-uchiwa は文字 #F7E09B × 背景 #0D94CC のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#096A92、4.61:1）を使う。

Typography

• 見出し・賞品・ボタンは明朝の太字で祭りらしい格を出す
• 本文・手順・規約はゴシックで読みやすくする
• 数字と強調語は他の文字より1.5〜2倍大きくし、文字サイズに強弱をつける
• 金文字には濃紺のフチか影を付けて背景から浮かせる
• 見出しの下には小さな菱形を連ねた金の飾り罫を置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。対象商品だけ 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 中央揃えを基本とし、手順本文だけ左揃え
• 賞品うちわはSPで縦積み、横幅の約70%
• セクション見出しは中央に置き、下に飾り罫を付ける
• 手順パネルは画面幅の約90%の白箱にし、外枠に紺の太い縁
• 規約は固定の高さのスクロール枠に入れる

Elevation & Depth

• うちわカードは白い縁取りと淡い影で浮かせる
• 金ボタンはわずかな立体グラデーションと影を付ける
• 白パネルは影なしで、紺の太い枠で囲む

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージは切り抜き。賞品はうちわ型のシルエットの中に収める
• セクション境界: 街並みのシルエット、雲、青海波でつなぎ、境目には直線を使わない
• ボタンは横長のピル型にし、右端に「>」を付ける
• スタンプ数のバッジは波形の円（ロゼット）にする
• 臙脂ラベルは小さい角丸の帯にし、下に三角の吹き出し
• 白パネル・規約枠は角丸なしの四角

Components

• 金ピルボタン（button-primary）: 金のグラデーション地に濃紺の明朝。小さい補足文と太い本文の2段構成で、右に矢印
• うちわ型賞品カード（prize-uchiwa）: うちわ型で白い縁。左上に円形の賞名バッジ、中央に金の賞品名、下部の帯に当選数
• 応募期間バー（period-bar）: 濃紺の帯。白い枠で囲んだ見出しラベルと、開始日→終了日を矢印でつないで2行で表示
• 飾り罫付きの見出し（heading-ornament）: 白の明朝見出しの下に、金の小さな菱形を連ねた罫を置く
• ロゼットバッジ（stamp-badge）: 白〜クリームの波形の円の中に、条件ラベルと数字を明朝で入れる
• 番号付き手順リスト（step-list）: 丸数字に本文を添え、各項目の間を臙脂の点線で区切る
• 臙脂のフローラベル（flow-label）: 臙脂の角丸帯に白の明朝。下に吹き出し三角を付け、イラストと矢印でフローを描く
• 規約スクロール枠（terms-box）: 青の見出し帯（白い明朝）の下に白い本文枠を置き、内部をスクロールさせる

Do's and Don'ts

Do - 背景は縦グラデーションにし、花火・青海波・雲を半透明で散らす - 賞品はうちわ型にして夏祭りらしさを出す - 数字・強調語は金色で大きく扱う - 手順は白パネルに移し、読みやすさを確保する - ボタンは金のピル型1種類に統一する

Don't - 背景を単色のフラットにしない - ボタンに赤や緑などの別の色を使わない - 見出しをゴシックの細字にしない - 白パネルに大きな角丸や強い影を付けない - 臙脂を広い面積に使わない（ラベル・点線・B賞だけ）

Page Structure

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

1. ファーストビュー（キャンペーン名と当選総数を一目で伝える）: 青い和紙調の地に花火を描き、商品パッケージ・素材の写真を配置。金縁の明朝タイトルを置き、丸い金バッジで当選数、紺のリボン帯でサブタイトルを示す
2. 応募期間（期間を明示する）: 濃紺の帯に白枠のラベル、日付を矢印でつないで2行で表示
3. 賞品紹介（応募条件と賞品の魅力を伝える）: 応募条件のリードは強調語だけ金色。続いて青とピンクのうちわカードを縦に並べ、下に街並みのシルエットを置く
4. 対象商品（対象商品を示す）: 飾り罫付きの見出しの下に、商品の切り抜き画像を2列で並べる。各商品に名称とロゼットバッジ、最後に注釈
5. 応募方法（手順と必要なアプリを案内する）: 水色地に見出しと説明文、金ボタン。続いて白パネルに番号付き手順とイラストのフロー図を入れ、最後に注釈と金ボタン
6. 応募規約（規約を確認させる）: 青の見出し帯と白いスクロール枠で構成
7. フッター装飾（商品の世界観で締める）: 最下部に商品素材の写真を横いっぱいに敷く

Imagery

• 商品パッケージは影の少ない切り抜きで、少し傾けて配置する
• 素材の写真は木箱や素朴な小道具と合わせ、暖かい自然光で撮る
• 花火は白・水色・ピンク・金の細い線の放射状イラストを半透明で重ねる
• 青海波・雲・波紋の和柄を、セクションの端に淡い色で置く
• フロー図は臙脂と紺の2色でシンプルな線画にする（カート・スマホ・チェック）
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは賞品うちわを2つ横に並べる
• PCのFVは横長にし、タイトルを中央、商品写真と素材写真を左右に置く
• 応募期間はPCで1行に収める
• PCのフロー図は3段階を横に並べる
• PCのコンテンツ幅は約70%で中央に寄せる

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