DESIGN.md — 黄×紺ドット柄のキャラクター景品キャンペーン LP（Pop Yellow Blue Character Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: 黄色ベタ地・濃紺ドット・白帯見出し・リボンメダル・キャラ散らし柄・月替わり特典
• 地の質感: フラットなベタ塗りに水玉ドット柄と小さなモチーフの散らし柄を重ねる
• 形: 角丸カード・ピル型ボタン・リボン付き丸メダル・両端が切れ込んだ帯見出し
• 温度感: 明るく暖かい。黄色と水色の対比で元気さを出す

Colors

• 地色はFV＝水色柄、本編＝黄色ベタ、情報エリア＝淡い水色の3段で切り替える
• 黄色地の境界は濃紺の水玉ドット帯で区切る
• 見出しは白い帯に濃紺文字をのせ、黄色・水色どちらの地でも浮かせる
• キャンペーン期間は濃紺ベタに白文字の長方形で示す
• 主CTAは赤、2つ目のCTAは濃紺、回遊ボタンは白地に濃紺文字と役割で塗り分ける
• 注意事項は白カードに黒文字で、装飾色を使わず可読性優先

Typography

• 見出しは手書き風の太字で2行に分け、行ごとに白帯を敷く
• リード本文は中央揃え・行間2.0でゆったり
• 注意事項など規約系は左揃えのゴシック
• 期間表記は2行（ラベル＋日付）で中央揃え
• ボタン文字は太字で右端に丸矢印アイコン
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム中央揃え
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 画像カードは画面幅の約90%で白い太枠付き
• 見出し→期間帯→画像カード→見出し→写真→CTAの順で月ごとに繰り返す
• 月の区切りはドット帯の中央にリボンメダルを重ねる
• CTAボタンは幅約75%で中央配置
• 情報エリアは帯見出し→白カードの組み合わせ

Elevation & Depth

• ボタンは下に濃い色のずらし影（立体的なベタ影）
• カードは影なしで白枠・紺枠で区切る
• キャラクター切り抜きはカード外にはみ出させ奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 角丸の白枠カード内に配置、商品は切り抜き、使用シーンは雲形にマスク
• セクション境界: 濃紺水玉ドット柄の帯で直線的に区切る
• 期間ボックスと見出し白帯は角丸なし
• 情報カードは大きめ角丸28px
• 帯見出しは両端がV字に切れ込んだリボン形

Components

• 主CTAピルボタン（赤）（button-primary）: 赤地白文字、右に白丸の矢印、下に濃いずらし影
• サブCTAピルボタン（紺）（button-secondary）: 濃紺地白文字の同形ボタン。2つ目の期間用
• 回遊ボタン（白）（button-outline）: 白地に紺文字、紺の矢印と紺の下影
• 白帯見出し（heading-band）: 行ごとに白い帯を敷いた手書き風の紺文字見出し
• 期間ボックス（period-box）: 紺ベタ長方形にラベルと日付を2行で白抜き
• リボン付き月メダル（month-medal）: ドット帯中央に紺リボン＋白丸メダル、数字と英字月名
• 切れ込み帯見出し（ribbon-heading）: 紺地に黄色ラインを上下に入れた両端V字の帯
• 注意事項カード（info-card）: 白い大角丸カードに丸印小見出しと本文を縦に並べる
• 斜めラベルタグ（corner-tag）: 商品画像の角に傾けて置く赤や黄の小ラベル

Do's and Don'ts

Do - 黄・紺・水色の3色を主役にベタ塗りで使う - 見出しは必ず白帯にのせて地から浮かせる - 月や期間ごとに同じ構成を繰り返して比較しやすくする - ボタンにはずらし影と丸矢印を付ける - 規約エリアは白カードで落ち着いた読みやすさを確保

Don't - グラデーションや半透明のぼかし影を使わない - 黄色地に黄色系の要素を重ねない - 細い明朝体など上品すぎる書体を使わない - 注意事項に装飾色や手書き風フォントを使わない - CTAの色の役割（赤＝主、紺＝副）を混ぜない

Page Structure

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

1. ファーストビュー（特典の内容と来店先着を一目で伝える）: 水色の散らし柄地に黄色の斜めタイトル帯、丸バッジ、紺枠の商品カード、キャラ切り抜きを周囲に配置
2. リード文（キャンペーンの趣旨を伝える）: 白帯見出し＋白カードに中央揃え本文、下に紺の期間ボックスと白ボタン
3. 1か月目の特典（最初の特典の紹介）: ドット帯＋月メダルで区切り、黄地に白帯見出し・期間ボックス・バナー画像カード
4. 使用シーン（商品の使い方を想像させる）: 白帯見出し＋白枠付き角丸の写真、下に赤い対象店舗ボタン
5. 2か月目の特典（追加特典の紹介）: 1か月目と同じ構成を繰り返し、ボタンは紺
6. 回遊CTA（本業サービスへ誘導）: 黄地中央に白いピルボタン、下をドット帯で締める
7. 対象店舗（月別の店舗一覧へ誘導）: 淡い水色地に切れ込み帯見出し、紺枠白カード内に赤・紺ボタンを縦に並べる
8. 注意事項（対象者・内容・期間・注意を明示）: 切れ込み帯見出し＋大角丸白カード、紺丸印の小見出しと箇条書き

Imagery

• キャラクターや小物モチーフを白フチ付き切り抜きで背景に散らす
• 商品は白背景の切り抜きで、角に斜めラベルを添える
• 使用シーン写真は明るい室内の手元アップを雲形にマスク
• 水玉ドット柄は紺の点を黄地に規則正しく並べる
• 未公開画像はグレー面に紺の英字で仮置き
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも1カラム中央寄せで、コンテンツ幅は約55%に絞る
• PCのFVはタイトル帯を1行に広げ、ロゴを右上に置く
• PCの期間ボックスは1行表記の細い帯にする
• 背景の散らし柄とドット帯は画面全幅に広げる
• ボタンは幅固定で中央配置、SPより小さめ

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