DESIGN.md — 黄×水色×ピンク斜め帯のポップなキャンペーンLP（Pop Pastel Diagonal Stamp Rally Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、かわいい
• キーワード: パステル斜め帯・スタンプラリー・極太ゴシック・色分け賞品カード・朱色ピルCTA・商品パッケージ大量配置
• 地の質感: フラットな単色面を斜めに切り替える。影はごく薄く、立体感は文字の縁取りで出す
• 形: 角丸の白カード、太い色枠、ピル型ボタン、斜めのセクション境界
• 温度感: 暖色寄りで明るい。黄地を基調に、水色で涼しさを足す

Colors

• 地は黄を基調にする。セクションごとに水色・ピンクの斜め帯で区切る
• 濃緑は見出し・本文・濃色ボタンにだけ使い、ブランドの軸にする
• 金額・当選数・『当たる』の強調は赤とオレンジにする
• 賞のランクごとにオレンジ・緑・青の固有色を当て、枠・ラベル・帯をその色で統一する
• 白カードを色地の上に置き、情報の面をはっきり分ける
• 特別コンテンツはオレンジの全面帯で変化をつける
• button-primary は文字 #FFF2E6 × 背景 #EC2C03 のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D82803、4.52:1）を使う。
• counter は文字 #FFF2E6 × 背景 #EC2C03 のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D82803、4.52:1）を使う。
• bonus-banner は文字 #FFF2E6 × 背景 #EC2C03 のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D82803、4.52:1）を使う。
• speech-badge は文字 #FFF2E6 × 背景 #EC2C03 のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D82803、4.52:1）を使う。

Typography

• 見出しは極太の丸ゴシックで、本文も太字を基本にする
• 数字は日本語より一回り大きくし、赤で強調する
• 英字見出しは斜体の極太にし、白縁取り＋濃緑で立体感を出す。下に小さく和訳を添える
• セクション見出しの左右には短い横線や斜線を置く
• 注釈は8px前後で詰めて書いてよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品の概要だけ 3 列カード
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右に約6%の余白を取って中央に置く
• セクションの区切りは背景色を斜めに切り替えて作る
• 手順説明は横スライドのカルーセルにし、左右の矢印とドットを付ける
• 賞品の詳細はランクごとに縦に並べたカードで見せる
• CTAはセクションの最後に横幅の60〜90%で置く

Elevation & Depth

• カードとボタンには薄い影（0 2px 4px rgba(0,0,0,.15)）を付ける
• 見出し文字は白の太い縁取りと、ずらした影で立体的にする
• それ以外の面はフラットにする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージは切り抜いて斜めに傾けて配置する。バナーは角丸の矩形
• セクション境界: 斜めの直線（約10〜15度）で背景色を切り替える
• カード枠は3〜4pxの太い色線にする
• 賞ラベルは角丸の正方形タグにし、カードの左上にはみ出させる
• STEP番号は円形のバッジにする
• 数字カウンターは白い四角の枠に1桁ずつ入れる

Components

• 朱色ピルCTA（button-primary）: 白文字の右に▶を付けた朱色のピルボタン
• 濃緑ピルボタン（button-dark）: 応募ページやSNSへの導線。文字の両側に▼や＞を付ける
• 賞品カード（prize-card）: 白地に賞の色の太枠を付け、左上に賞ラベルのタグ、色帯で当選数を見せる
• 数字カウンター（counter）: 朱色の帯の上で、白い枠に1桁ずつ多色の数字を並べる
• 英字斜体見出し（heading-en）: 白縁取りの濃緑英字を斜線で挟み、下に和文を添える
• 線囲み見出し（heading-line）: 濃緑の文字を左右の横線で挟む
• 手順カルーセル（step-card）: 青枠の白カードにSTEP円バッジを付け、左右の三角矢印と下のドットで操作する
• 訴求バナー（bonus-banner）: 赤地に白の極太文字を置き、両端に商品写真やキラ星を添える
• 吹き出しバッジ（speech-badge）: 赤い円形の吹き出しに『さらに』系の短い語を入れる

Do's and Don'ts

Do - 背景は黄・水色・ピンクの斜め帯を交互に使う - 数字と当選数は大きく、赤で強調する - 賞のランクは色で区別し、色を一貫させる - 商品パッケージをたくさん並べて賑やかにする - 見出しは極太にし、縁取りで立体感を出す

Don't - 細い明朝や繊細な書体を使わない - グレー基調や暗い背景にしない - セクション境界を水平線だけで単調にしない - CTAの色を朱色以外に散らさない - 余白を広く取りすぎて情報密度を下げない

Page Structure

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

1. ファーストビュー（キャンペーン名と楽しさを伝える）: パステルの斜め帯の上に商品パッケージを斜めに散らし、中央にロゴ風の極太タイトルを置く
2. 参加数カウンター（盛り上がりを数字で示す）: 朱色グラデーションの帯に、白い枠の多色数字を並べる
3. 賞品概要（当選数と期間を一目で伝える）: 白い帯の見出しに大きな赤数字を入れ、その下に3色の賞カードを3列で並べる
4. コンプリート特典（全種集める動機をつくる）: 赤枠のカードに濃緑のラベル、商品写真、朱色CTAを入れる
5. 対象商品（対象を明示する）: ピンク地にパッケージをグリッドで並べ、下に商品名リストを置く
6. ボーナス訴求（特定商品の購入を促す）: 赤い角丸バナーの両端に商品を配置する
7. 応募の流れ（参加手順を説明する）: 水色地に青枠の手順カルーセルを置く
8. 応募コース詳細（各賞の内容と注意事項を示す）: 黄地に、賞の色の太枠カードを縦に並べる
9. ダブルチャンス（追加の参加を促す）: 水色地に英字見出し、商品の集合写真、赤い訴求バナー、SNS手順のカルーセルを置く
10. スペシャルコンテンツ（診断やコンプ特典で回遊させる）: オレンジ地に白い大カードを置き、中に診断CTAと番号付きの特典ボックスを入れる
11. マイページ導線（応募ページへ誘導する）: 黄地に英字見出しと濃緑の大きなピルボタンを置く
12. ブランド導線・問い合わせ（関連サイトと連絡先を示す）: 薄紫帯にバナーを置き、黄地に濃緑文字で事務局情報を書く

Imagery

• 商品パッケージは白背景で切り抜き、斜めに傾けて重ねるように配置する
• 商品の集合写真は2段にずらして並べ、ボリューム感を出す
• 装飾はキラ星・コーヒー豆・スティック袋を小さく散らす
• 画面のモックアップは傾けずに正面から見せる
• イラストは太い線のポップな手描き風にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央に約30%幅のSPレイアウトをそのまま置く
• PCの背景には黄・ピンク・水色・生成りの斜めストライプを全面に敷く
• PCでは右側にロゴと、色分けしたピル型のナビゲーションを固定表示する
• 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 行書くと起動時に読み込まれる。