DESIGN.md — 空色×紅赤のアイドルコラボ飲料キャンペーンLP（Sky Blue and Crimson Idol Collaboration Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型、かわいい
• キーワード: 空色グラデーション・紅赤の帯・極太欧文見出し・アーチ型カード・ファン向け・企画の段階告知
• 地の質感: フラットな面に薄い曲線リボンやきらめき星を重ね、方眼紙やちぎった紙のコラージュ風も混ぜる
• 形: 上部が半円のアーチ型白カード、正円バッジ、斜めに切った帯、ピル型ボタン
• 温度感: 爽やかな青と熱い赤を交互に置き、全体は明るく賑やか

Colors

• 地色は空色グラデ→白カード→紅赤→生成り→空色と大きく交互に切り替える
• 紅赤は帯見出し・日付・強調マーカー・ボタンに集中させる
• 本文中の条件や数字は紅赤ベタ地に白文字のマーカーで強調する
• 空色地の上の文字は紺、赤地の上は白に統一
• 淡紅の面は賞品リストなど補足ボックスだけに使う
• 注釈はグレーの小さな文字にする

Typography

• 欧文見出しは極太で 2 行に詰め、下に小さな和文の訳を添える
• 企画タイトルは中央揃えの極太和文で、左右にカギ括弧状の線を付ける
• 日付は数字だけ大きくし、曜日は小さな欧文にする
• 本文は中央寄せのブロックに置き、行間を広くとる
• 価格は細く大きな数字を使い、単位は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。当選数・コメントは 2 列
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
• キャンペーン詳細は上部が半円の縦長白カードにまとめる
• 各企画は紅赤の全幅帯ラベルで区切る
• 予告は正円バッジを左右に互い違いに置く
• おすすめ商品は商品写真と名前・価格を左右交互に並べる
• 店舗リストは白地のボックスに 2 列の箇条書きで並べる

Elevation & Depth

• ボタン・カードは下方向にやわらかい影
• コメントカードは影を薄く付けた白いタイル
• 動画枠は濃い影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 180px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜きでアーチ枠からはみ出させる。店舗写真は角丸なしの長方形
• セクション境界: 大きな半円・楕円カーブや斜めの切り替えでつなぐ
• カードの上端は半円アーチにする
• 予告は正円の白バッジにする
• ラベル帯は斜めにカットした台形にする
• 角は控えめにし、ボタンだけ完全なピル型にする

Components

• 主ボタン（button-primary）: 紅赤ベタのピル型で、左にアイコンを置く
• 参加方法の開閉ボタン（button-accordion）: 白地に紅赤の太枠を付けたピル型で、右に下向き三角を置く
• 企画番号帯（band-label）: 全幅の紅赤帯に白の斜体欧文と番号を入れる
• アーチ型キャンペーンカード（arch-card）: 上端が半円の縦長白カード。頂部は赤グラデで弾数を表示する
• 赤ベタ強調（highlight-marker）: 本文中の条件を紅赤地の白文字で強調する
• 当選数ボックス（count-box）: 紅赤ヘッダーと赤枠を組み合わせた 2 列の箱に大きな数字を入れる
• 予告円バッジ（coming-soon-badge）: 白い正円に紅赤の弾数と予告の欧文を入れる
• ファンコメントカード（comment-card）: 方眼地の白タイルに短いコメントを入れ、2 列の石積みに並べる
• Pick番号タグ（pick-tag）: 白い台形タブに紅赤の細い大数字を入れ、端から突き出させる

Do's and Don'ts

Do - 青のセクションと赤のセクションを交互に配置する - 欧文の極太見出しと和文の小さな訳をセットで使う - 人物の切り抜き写真を枠からはみ出させる - 日付・数字は紅赤で大きく見せる - 背景に薄い曲線リボンやきらめき星を散らす

Don't - 紅赤と空色以外の強い色を足さない - 細い明朝や装飾の少ない見出しにしない - カードを四角だけで並べず、アーチや円を必ず混ぜる - 本文を左右いっぱいに広げない - 暗い背景を多用しない（BGM告知カードだけを例外にする）

Page Structure

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

1. ファーストビュー（起用人物と商品で引きつける）: 人物が飲むアップ写真を全幅で見せ、音楽プレイヤー風の UI を重ねる
2. 就任告知（コラボの発表）: 空色地に斜体の極太見出しを白帯で重ね、アーチ枠の人物写真を添える
3. 導入文（開始日と概要を伝える）: 紺文字の中央寄せ本文。日付は白マーカーで強調する
4. スペシャル動画（ファン向けの動画メッセージ）: 白い楕円の面に欧文見出しと動画を置く
5. キャンペーン詳細（各企画の条件と賞品の説明）: アーチ型白カード内に番号帯・日付・賞品写真・開閉ボタン・当選数を並べる
6. 次回予告（続く企画への期待を作る）: 白い円バッジを 2 つ互い違いに置く
7. おすすめ商品（人物推薦の商品紹介）: 紅赤の半円セクションに Pick タグ・商品写真・価格・説明を交互に並べる
8. モバイル注文CTA（注文への誘導）: 赤い角丸バナーに人物の切り抜きと白いボタンを置く
9. 店舗施策（来店の動機を作る）: 生成り地に店内写真と虫眼鏡アイコン、BGM 企画の月別カードを並べる
10. 街頭展開（屋外広告の告知）: 赤地のアーチに写真・日付ラベル・施設リストを置き、斜めの白帯で強調する
11. 誕生日企画（ファンの参加と盛り上げ）: 方眼とちぎり紙のコラージュに手描き線を添え、コメントカードをスライダーで見せる
12. SNS・シェア（フォローと拡散）: 空色の大円に SNS アイコンを並べ、白い共有ボタンを 2 列に置く
13. フッター（ロゴと固定ナビ）: 白地にロゴと著作権表記を置き、下部に赤い欧文の固定ナビを付ける

Imagery

• 人物は白背景で切り抜き、ドリンクを持つポーズやハンドサインで明るく笑う
• 商品は白背景で切り抜いたドリンク単体。結露や層の見えるシズル写真にする
• 背景に大きな淡赤の斜体欧文を透かし文字として置く
• 細い曲線リボンと四芒星のきらめきを装飾に使う
• 誕生日企画は方眼紙・ちぎり紙・手描きのハートやケーキの線画で手作り感を出す
• 店舗や街頭の写真は明るい実景を長方形で見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 430px）のコンテンツを置き、左右は空色グラデ地で埋める
• PC に広げる場合はアーチカードを最大 960px にし、賞品や当選数を横並びにする
• コメントカードは PC で 3〜4 列に増やす
• 欧文見出しは PC で 80px 程度まで拡大する

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