DESIGN.md — 蛍光イエロー×黒のアニメコラボ抽選キャンペーンLP（Neon Yellow Anime Collab Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 蛍光イエロー・黒帯見出し・ネオングラデーション・ドット・斜めストライプ・稲妻モチーフ・アニメキャラ
• 地の質感: 網点ドットや斜めストライプ、紙吹雪、稲妻柄の地紋をセクション背景に敷く。平面的で、グラフィック感が強い。
• 形: 角丸の白カードとピル型ボタンを使う。賞品の期別バッジは星形、当選数は円形。手順の区切りは下向きのシェブロン。
• 温度感: 高彩度で熱量が高く、にぎやか

Colors

• ページの外周は黒にする。中央のコンテンツ帯は、セクションごとに黄、グラデ（マゼンタ→紫→青→緑）、スカイブルーと地色を切り替える。
• セクション見出しは黒帯に黄文字。左端に白と黄の花火アスタリスクを置く。
• 期・STEP の色は、マゼンタ→紫→青→緑のグラデーションで順番を色分けする。
• 賞品や対象商品は白カードに載せ、派手な地から分離する。
• 主CTAは黒地に黄文字、または黄地に黒文字。黄と黒の反転で目立たせる。
• 赤はキャッチコピーの強調だけに使う。
• badge-period-star は文字 #FBFCFB × 背景 #DF2275 のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DC2073、4.54:1）を使う。
• badge-winners は文字 #FBFCFB × 背景 #DF2275 のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DC2073、4.54:1）を使う。

Typography

• キャッチ見出しは極太の丸ゴシックにする。白抜きに黒フチ、またはドロップシャドウを付ける。
• 見出しの左右に稲妻アイコンを置き、ハの字に挟む。
• 日付は数字を大きく、曜日と時刻を小さくして強弱をつける。
• 見出しは中央揃えにする。STEP の説明は番号の右に左揃えで置く。
• 注意書きは小さく黒文字で、長文でも本文から分ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。壁紙は 3 列グリッド、シール見本と賞品バリエーションは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 外周の黒は左右約 4% で、ページ全体を額縁のように囲む。
• 賞品はセクション内で、星バッジ→罫線付きラベル→日付→白カード→名称の順に縦積みする。
• 当選数の円形バッジは、カードの右下にはみ出させて重ねる。
• STEP 間は下向きシェブロン型の影付き区切りでつなぐ。
• CTA ボタンは幅約 70%、または全幅 85% で中央に置く。

Elevation & Depth

• CTA ボタンには、下方向にぼかした濃い影を付ける。
• 見出し文字には黒のオフセット影を付ける。
• STEP の区切りは、白いシェブロンにグレーの柔らかい影を落として段差を出す。
• カード類は影を付けず、フラットに置く。

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 賞品写真は角丸の白カードに、切り抜き風に収める。壁紙は縦長の長方形、商品ボトルは背景透過の切り抜きにする。
• セクション境界: 直線で地色を切り替え、境目にドットのグラデーション柄を敷く。手順間はシェブロンで区切る。
• 期別バッジは丸みのある星形にグラデーションを塗る。
• 当選数バッジは正円にする。
• 補足コメントはギザギザの爆発型フキダシで囲む。
• 応募規約は黄色帯のアコーディオンにし、右端に下向き矢印を置く。

Components

• 応募ボタン（button-primary）: 黒いピル型に黄色の太字を載せ、下に濃い影を付ける。
• FV 下のアンカーボタン（button-hero-link）: 黄または水色の大きな角丸ボタン。2 行の白抜き太字を入れる。
• 黒帯見出し（section-header-bar）: 黒帯の中央に黄色の太字を置き、左に白と黄のアスタリスク装飾を付ける。
• 期別星バッジ（badge-period-star）: グラデーションの星形に、白で「第N期」を入れる。
• 当選数バッジ（badge-winners）: グラデーションの正円に、大きな白い数字と「名様」を入れる。
• 賞品カード（card-prize）: 角丸の白カードに賞品写真を置く。下に賞品名とサイズを書く。
• STEP 番号（step-number）: グラデーションの円に「STEP」と大きな数字を入れ、右に説明を置く。
• 応募規約アコーディオン（accordion-terms）: 全幅の黄色帯。中央に黒の太字、右に下向きの山形矢印を置く。
• 吹き出しラベル付き枠（speech-label）: 白いピル型の吹き出しラベルに、黒線の四角い説明枠を組み合わせる。

Do's and Don'ts

Do - 黄と黒のコントラストを常に主役にする。 - 期や STEP の色は、グラデーションの順番どおりに統一する。 - 派手な地の上では、情報を必ず白カードに載せる。 - 見出しの左右を稲妻アイコンで挟み、勢いを出す。 - 日付・当選数の数字は特大で見せる。

Don't - 淡いパステルだけでまとめない。 - 細い明朝体や繊細なセリフ体を使わない。 - セクション背景を無地のまま広く残さない。地紋を入れる。 - 赤をボタン色に使わない。 - 影の柔らかい立体カードを多用しない。

Page Structure

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

1. ファーストビュー（コラボと開催期間を一目で伝える）: 黄地に斜めのコマ割りでキャラを配置する。下部に期別の色帯で日程を 3 段並べる。
2. 注意書き（商品の摂取上の注意を示す）: 黒地に白文字の小さめ本文を置く。
3. アンカーボタン群（各企画へ誘導する）: 黄・水色・青のバナー型ボタンを 3 つ縦に並べる。
4. 商品紹介＋キャッチ（購入と抽選の関係を示す）: 黄のドット地に商品ボトルを並べ、稲妻で挟んだ見出しを置く。
5. 賞品（期別）（期間ごとの賞品と当選数を提示する）: 黄のストライプ地に、星バッジ・日付・賞品カード・当選数バッジを繰り返す。
6. 全期間対象賞品（最大当選数の賞品を強調する）: マゼンタ→青→緑のグラデ枠に白カードを置く。バリエーションは 2 列。
7. 応募CTA（応募へ誘導する）: 黒いピル型ボタンを中央に 1 つ置く。
8. はずれ特典（全員特典で参加を後押しする）: 緑のグラデ地に稲妻見出しを置き、縦長の壁紙を 3 列×2 段で並べる。
9. 対象商品（対象商品と応募シールを示す）: 白地に商品とロゴを左右に並べる。黄色の吹き出し枠に、シール見本を 2 列で並べる。
10. 応募方法（手順を説明する）: STEP 番号円と図解をシェブロンでつなぐ。最後に規約アコーディオンを置く。
11. SNS キャンペーン（フォロー＆リポスト企画を告知する）: 水色の地紋地に、期間・賞品・黄色の大ボタン・手順を置く。
12. 関連バナー・お問い合わせ・フッター（関連企画と問い合わせ先を示す）: 大きなバナー画像の下は黒地。電話番号を大きく、フォームボタンは白いピル型。

Imagery

• アニメ調キャラのイラストを斜めのコマ割りで重ね、背景に街の写真を入れる。
• 商品ボトルは背景透過の切り抜きで、正面から並べる。
• 賞品は白背景の物撮りにし、角丸カードに収める。
• 稲妻・星・アスタリスク・紙吹雪の装飾を散らす。
• 手順図解は黒線にグレー塗りの、太い線画イラストにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の構成を中央 480〜600px 幅で維持することを推奨する。
• PC では左右の余白を黒地か地紋で埋め、額縁感を保つ。
• 壁紙グリッドは PC でも 3〜6 列程度に広げる。
• ボタンは最大 400px 幅で中央に置く。

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