DESIGN.md — 赤×空色グラデのポップなキャラ抽選キャンペーンLP（Pop Red Character Lottery Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト、情報量多め・訴求型
• キーワード: 赤ドット地・空色→黄色グラデ・3Dキャラクター・ぷっくり雲・城壁風カード見出し・ゲームUI風ボタン
• 地の質感: 細かい白ドットを敷いた赤地と、なめらかな縦グラデ。雲やキャラは3DCGで立体感がある
• 形: 角丸大きめの白カードに濃いオフセット影。ボタンはピル型で白い縁取り付き
• 温度感: 暖色の赤と寒色の空色を対比させた、明るく賑やかな温度感

Colors

• FVとイベント・フッターは白ドット柄の赤地で挟む
• 中間は空色→水色→黄緑→黄色の縦グラデで世界観の移り変わりを表現
• 情報は必ず白カードに載せ、見出し帯は赤
• カード内の見出し・ステップ説明は赤文字、長文本文は黒
• 主CTAはオレンジ、案内・規約系ボタンは青で役割を分ける
• 黄・オレンジは日付やバッジなど小面積の強調に限定
• button-cta は文字 #FEFCF4 × 背景 #F7A21B のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A46706、4.52:1）を使う。
• button-nav は文字 #FFF0F0 × 背景 #5B8EF0 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2367EB、4.51:1）を使う。
• speech-bubble は文字 #FFF0F0 × 背景 #E40011 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E10011、4.51:1）を使う。
• period-badge は文字 #FFF0F0 × 背景 #E40011 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E10011、4.51:1）を使う。

Typography

• 全体に太いウェイト（700〜900）を使い、細い書体は使わない
• 見出しは丸ゴシックで字間を少し広げる
• 本文も太字で、子ども向けにも読める強さを出す
• 長い見出しは2行に改行し中央揃え
• 日付・数字は大きく、曜日などの括弧は小さめに
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、景品パッケージ一覧は 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは画面幅の約90%で中央配置
• カード内の写真は約80%幅で縦積み
• ステップは番号付きの枠カードを縦に並べる
• セクション間に雲やキャラを大きく置いて余白を埋める
• ナビボタンは1個+2個の段組み

Elevation & Depth

• 白カードは下に約12pxずらした濃紺グレーの影（ぼかしなし）
• ステップカードも同様のオフセット影
• ボタンは白い縁と内側の光沢でぷっくりした立体感
• 雲・キャラは3DCGの陰影でカードより手前に重ねる

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 景品写真は角丸なしの横長長方形、イベント写真は白縁の角丸
• セクション境界: 立体的な雲の連なりや、赤帯の直線で切り替える
• カード上辺は凸凹の城壁（カレンダー留め具）風の赤ヘッダー
• ステップ番号は台形の赤いタブ
• セクション見出しの左右に台形アイコンを置く
• 吹き出しは丸く柔らかい形

Components

• 城壁風見出しカード（card-castle-header）: 上辺が凸凹の赤帯に白見出し、左右に白丸。本体は白で濃い影付き
• 主CTAボタン（button-cta）: オレンジのピル型、白い外縁と赤の外枠、紙吹雪模様
• 青いナビボタン（button-nav）: 青のピル型に白縁、内側に小さな紙片模様。規約・ページ内リンク用
• 番号付きステップカード（step-card）: 赤い太枠の白カードに台形の番号タブ、イラストと赤字説明
• 抽選カレンダー（calendar）: 赤い月帯と曜日、グレー罫線の表に赤・黄のイベント帯
• 赤い吹き出し（speech-bubble）: 楕円の赤い吹き出しに白文字、キャラのセリフ
• 白ラベル帯（label-bar）: 赤地上の白い角丸帯に赤文字で項目名
• 期間バッジ（period-badge）: FVで日付の上に置く小さな赤角丸ラベル

Do's and Don'ts

Do - 赤ドット地とグラデ背景の上に白カードを置く構成を守る - キャラ・雲・星・紙吹雪を余白に散らして賑やかにする - ボタンはピル型で白縁と光沢を付ける - 見出しは太丸ゴシックの赤か白 - カードにはぼかしなしのオフセット影を付ける

Don't - 細い明朝や繊細な書体を使わない - くすんだ色やモノトーン中心にしない - 影をぼかした柔らかいドロップシャドウにしない - 写真を角丸カードや円形にしすぎない（景品写真は長方形） - 赤とオレンジのCTAを同じ役割で混在させない

Page Structure

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

1. ヘッダー・ナビ（ブランド表示と回遊）: 赤地に白丸柄のロゴ帯、下に白背景の5分割テキストナビ
2. ファーストビュー（キャンペーン名と期間を伝える）: 赤ドット地にロゴ風タイトル、周囲に3Dキャラと商品、期間バッジ、青ナビボタン3つ
3. キャンペーン概要（仕組みの説明）: 空色地に城壁風白カード、画像の下に赤見出しと黒本文
4. 景品紹介（景品の魅力を見せる）: 白カード内に景品写真と赤字の名前を縦に連続
5. 抽選カレンダー（スケジュール提示）: 月帯付きカレンダー表と注意アイコン付き注記、月送りボタン
6. 参加方法（手順を理解させる）: 番号タブ付き赤枠カードを5つ縦並び、キャラのイラスト
7. 対象パッケージ（対象商品を示す）: 黄色ドット地、雲の境界、2カラムのパッケージ画像
8. マイページ誘導（継続参加を促す）: 赤い吹き出しのセリフと青ボタン、後光を背負うキャラ
9. 世界観紹介（キャラの世界を楽しませる）: 3D街並みイラストと雲の上にキャラを並べる
10. イベント告知（来場予約を促す）: 赤ドット地に会場写真、白ラベル帯で場所・日程、オレンジCTA
11. 規約・問い合わせ・フッター（補足情報）: 青ボタン群、台形アイコン付き見出し、白文字の連絡先、SNSアイコン

Imagery

• キャラクターは光沢のある3DCGで、正面向きの大きな目
• 雲はぷっくり丸い3Dの白で、セクション境界やカード背面に重ねる
• 景品写真は明るいグレーの無地背景でのスタジオ物撮り
• 一部の景品は暖かい木目の室内で生活シーン風に撮る
• 装飾は白・黄の星、チョコ片、カラフル紙片を散らす
• 赤地には小さな白ドットを規則的に敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央の白カード幅は約70%で、背景の雲とキャラが左右に広がる
• PCは概要カードを画像左・テキスト右の2カラムにする
• PCの景品一覧は3カラムグリッド
• PCのステップは2〜3カラムの横並び
• PCのイベント告知は写真左・情報右の2カラム
• PCのFVボタン3つは横一列

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