DESIGN.md — 黄×赤のお祭り感ポイント還元キャンペーン LP（Festive Anniversary Point Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、かわいい、情報量多め・訴求型
• キーワード: 周年・紙吹雪・金貨・リボン見出し・黄色カード・ポイント還元
• 地の質感: コルクボード調の粒状テクスチャ、ストライプのテント背景、立体的な金文字
• 形: 角丸カード、赤いリボン型ラベル、ピル型の帯とボタン
• 温度感: 暖色中心で明るく賑やか

Colors

• 上部は暖色ストライプとコルク調で祝祭感、下部は淡いクリーム地で情報を整理する
• キャンペーンは黄色カードで囲い、地のクリームとの差で区切る
• 赤はリボンラベルと要点帯、強調数字に限定
• CTA は暖色に埋もれない青緑で統一する
• 大見出しは濃茶の文字に白フチと金の立体効果をつける
• フッターだけ濃いグレーで締める
• hero-visual は文字 #682C21 × 背景 #FB7C46 のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#FB8A5A、4.51:1）を使う。
• burst-badge は文字 #FFF8F8 × 背景 #FE3545 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E80114、4.51:1）を使う。
• pill-banner は文字 #FFF8F8 × 背景 #FE3545 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E80114、4.51:1）を使う。
• ribbon-label は文字 #FFF8F8 × 背景 #FE3545 のコントラスト比が 3.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E80114、4.51:1）を使う。
• button-primary は文字 #FEFDFA × 背景 #44BAC5 のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2A8088、4.55:1）を使う。

Typography

• 大見出しと数字は極太で、白フチ＋影で立体化する
• 数字は文字より大きく、単位は小さく添える
• リード文は中央揃えで両側に斜線の装飾をつける
• カード見出しは中央揃えで 2 行まで
• 本文は小さめにし、画像バナーで情報を伝える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP も PC もキャンペーン部は 2 カラムカード
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 32px、基本単位 8px、カード内 8px（375px 幅換算）
• FV はキャラとタイトルが重なる全面ビジュアル
• コルク帯の中にタイトル画像・赤帯・リード文を縦に積む
• カードは 2 列×2 行、間隔は 16px 前後
• カード上端にリボンラベルをはみ出させて配置
• 各カードの下端にボタンを全幅で置く

Elevation & Depth

• カードは影なしのフラットな黄色面
• リボンとタイトルロゴには軽いドロップシャドウ
• 赤帯はフラットで影なし

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 30px。ボタンは角丸の長方形。
• 写真の切り抜き: カード内のバナーは角丸の長方形、キャラは切り抜き
• セクション境界: 背景の切り替えは直線で区切る
• 要点帯は完全なピル型
• ボタンは角丸 4px 程度のやや丸い長方形
• ラベルは両端を切り込んだリボン型
• カードは角丸 8px

Components

• 祝祭ファーストビュー（hero-visual）: ストライプ背景、ガーランド、紙吹雪、金貨、キャラに周年エンブレムと大型ポイント数字を重ねる
• 開始日吹き出し（burst-badge）: 赤い角丸吹き出しを斜めに傾けて開始日を白文字で入れる
• 要点の赤ピル帯（pill-banner）: 白い太字 2 行を中央揃えで入れる幅広のピル帯
• 番号リボンラベル（ribbon-label）: カード上端に重ねる赤いリボンに番号付きラベル
• キャンペーンカード（campaign-card）: 黄色地に見出し、バナー画像、ボタンを縦に並べる
• 詳しくはボタン（button-primary）: カード幅いっぱいの青緑ボタンに白太字
• 斜線つきリード（lead-slash）: 中央揃えのリード文を左右の斜線で挟む

Do's and Don'ts

Do - ストライプ、紙吹雪、金貨、風船でお祭り感を出す - 数字は極太の立体文字で一番目立たせる - キャンペーンは番号リボン付きの同じ形のカードでそろえる - CTA の色は全カードで同じ青緑にする - 上部は賑やかに、下部の一覧はクリーム地ですっきり見せる

Don't - 寒色や暗い地を全面に使わない - カードごとにボタン色を変えない - 細い明朝体で見出しを組まない - 一覧部にまで紙吹雪を散らして読みにくくしない - 赤を本文に多用しない

Page Structure

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

1. ヘッダー（サービスの識別）: 白地の細い帯に左寄せロゴ
2. ファーストビュー（周年と最大特典額の訴求）: オレンジのストライプにキャラ、金貨、紙吹雪、エンブレム、大型数字、開始日吹き出し
3. キャンペーン総称タイトル（複数キャンペーンの存在を示す）: コルク地に極太立体ロゴ、風船、プレゼント、リボン
4. 要点帯とリード（周年の理由と感謝を伝える）: 赤ピル帯に白太字、下に斜線つき中央リード
5. キャンペーン一覧（各施策を比べて詳細へ送る）: クリーム地に黄色カード 2×2、リボンラベル、バナー、青緑ボタン
6. フッター（著作権表記）: 濃いグレー帯に小さな白文字を中央に置く

Imagery

• ふわふわの着ぐるみキャラを驚き顔で左右に大きく配置
• 金貨を手前でぼかし、奥行きと動きを出す
• 三角ガーランドと色とりどりの紙吹雪を散らす
• 風船、プレゼント箱、金のリボンでお祝い感を出す
• カード内のバナーは数字が大きいポップなチラシ風
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央 1000px 程度の幅で同じ構成にする
• PC の FV は横長にしてキャラを左右に寄せる
• PC の赤帯は 1 行にまとめる
• PC のカードにはバナーの下に説明文と赤字の強調数字を加える
• PC は余白を広くとり、カード間隔を 24px 程度にする

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