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

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: ブルーグラデーション・深紅のセクション・極太欧文見出し・ロゴ帯・粒子ノイズ・ファン向け
• 地の質感: 地色に細かな粒子ノイズと、波打つ細いワイヤーフレーム線をうっすら重ねる
• 形: 四角い白枠カードと、大きな円弧でセクションを切る形を併用。ボタンはピル型
• 温度感: 青パートは涼しく爽やか、赤パートは熱く華やか

Colors

• 章ごとに地色を切り替える：導入とキャンペーン・SNSは青、店舗施策とおすすめは赤系
• 青地には濃い青カードを白い細枠で囲んで置く
• 色地上の強調は黄色文字か、白地＋赤文字の帯マーカーで行う
• 赤地パートは白カードに濃色本文、見出しは赤
• 注釈は色地上でも白の小さい太字で、重要語だけ黄色にする
• 地色には粒子ノイズと縦グラデを必ず重ね、ベタ塗りにしない
• button-accordion は文字 #3473C3 × 背景 #E9F3F5 のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#326EBB、4.56:1）を使う。

Typography

• 章タイトルは極太欧文を大きく置き、下に小さな日本語訳を字間広めで添える
• 日本語の見出しは助詞だけ小さくして、強弱をつける
• 本文は太字・中央揃えで、短い行で改行する
• 日付は数字を大きく、曜日の欧文を小さくする
• 背景に巨大な番号（01/02）や商品名の欧文を薄く敷く
• 黄色の煽り見出しは右上がりに少し傾ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、店舗リストのみ 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 章カードは左右約18pxの余白で置き、白い1px枠で囲む
• カード内の小見出しは白い横線で上下を区切る
• 商品リストは写真を右、名前とサイズバッジを左に置く
• 人物写真は片側の端まで裁ち落とす
• 章の間には流れるロゴ帯を挟む

Elevation & Depth

• 白カードは影を付けず、ほぼフラットにする
• ピル型ボタンには下方向へ濃色の影を付け、押せる立体感を出す
• プレイヤー風カードやシェアボタンには柔らかい影を付ける
• グッズ写真はポラロイド風の白縁と影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物は四角に裁ち落とすか、円弧の窓で切り抜く。商品は白抜き
• セクション境界: 大きな円弧（上に凸のドーム）か、ロゴ帯で区切る
• キャンペーンカードは角丸なしの四角に白枠
• 赤パートの白カードは角丸12px程度に濃色の細枠
• バッジやラベルはピル型か、斜めの平行四辺形にする
• マーカーは角丸なしの塗り帯にする

Components

• 流れるロゴ帯（logo-marquee）: 白地に青のアウトライン欧文を横に並べた帯。章の区切りに使う
• 章タイトル（section-title）: 白の極太欧文の下に、小さな日本語訳を添える
• キャンペーンカード（campaign-card）: 濃い青の面を白枠で囲む。背景に巨大な番号を薄く敷き、上に「第1弾」のアーチ文字を置く
• 白帯マーカー（highlight-marker）: 白い塗り帯に赤文字で、重要語を強調する
• 赤ピルバッジ（badge-size）: 赤地に白文字で、サイズや先着などを示す
• 参加方法ボタン（button-accordion）: 淡い地に青文字、右に＋。下に影のある開閉ピル
• 赤の主CTA（button-primary）: 赤のピルに白文字、右に矢印。下に濃い影
• おすすめ商品カード（pick-card）: 白カードの左上にPICK番号の斜めラベル。背景に商品名の欧文をピンクで薄く敷き、商品写真・名前・赤の区切り線・説明文を縦に並べる
• シェアボタン（share-button）: 白い四角ボタンにアイコンと青文字。2列で並べ、影を付ける

Do's and Don'ts

Do - 章ごとに青と赤の地を切り替え、ロゴ帯で区切る - 見出しは極太欧文と日本語訳の2段で組む - 日付・期間は数字を大きく目立たせる - 色地には粒子ノイズと波線の装飾を重ねる - 強調は黄色文字と白帯マーカーの2種類に絞る - 注釈は※付きで各ブロックの直後に置く

Don't - 地色をノイズのないベタ塗りにしない - 細い明朝などの繊細な書体を見出しに使わない - 青と赤以外の主要な地色を増やさない - 本文を左揃えの長文で詰め込まない（商品説明を除く） - カードに強いドロップシャドウを付けない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 全面動画の上に、極太欧文のコピーを2段で重ね、ロゴを配置
2. 就任告知（アンバサダー就任を告知する）: 青グラデ地に、日本語見出しを青帯の上に白文字で置き、人物写真を右に裁ち落とす
3. 導入メッセージ（開始日と概要を伝える）: 赤ラベルの日付に続けて、中央揃えの白文字本文、横長の人物写真と欧文コピーを置く
4. スペシャルメッセージ（ファン向けの動画を見せる）: ドーム型の淡い地に赤の極太欧文、動画プレイヤーと手書きサインを配置
5. キャンペーン詳細（第1弾・第2弾の特典を説明する）: 青い白枠カードに、期間・条件・対象商品リスト・特典写真・注釈・参加方法ボタンを入れる
6. 店舗施策（店頭の装飾や動画を案内する）: コーラル地に、黄色の傾き見出し、店舗写真、スライダーカード、店舗一覧2列カードを置く
7. 屋外広告（ビジョンやビルボードの掲出を伝える）: 深紅のドーム地に、写真2枚を斜めにずらし、アウトライン欧文、場所アイコンと期間ラベルを添える
8. BGM企画（店内BGM企画を紹介する）: 淡いピンク地に、音楽アプリ画面風のカードと赤CTAを置き、円弧に沿った欧文で区切る
9. おすすめ商品（推しのおすすめドリンクを紹介する）: 深紅地に、PICK番号付きの白カードを3枚縦に並べる
10. モバイルオーダーCTA（注文へ誘導する）: コーラルのグラデ大ボタンに、極太文字とLINEアイコン、下に補足文
11. SNSキャンペーン（投稿キャンペーンへの参加を促す）: 淡いブルーグレーのカード上部にSNSの丸アイコン、青マーカーの本文と参加ボタン
12. 公式アカウント・シェア（フォローとシェアを促す）: 青ドーム地に、SNSアイコンを3つ横並べ、シェアボタン2列、全体の注釈、白地のフッター

Imagery

• 人物はスタジオ撮影。黒革ジャケットなどクールな衣装で、ドリンクを手に持つカット
• 商品は白背景の切り抜きで、カップに影を軽く付ける
• グッズはポラロイド風の白縁や、淡いピンク・水色の撮影台に置く
• 店舗装飾は実写の店頭写真に、Coming soonのシルエットなどで予告する
• 装飾は波打つワイヤーフレーム線、きらめく星、手書きサイン
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像はないため、PCでは中央に幅約480pxの縦長カラムを置き、左右は青グラデ地で埋めることを推奨
• 章タイトルの欧文はPCで80px程度まで拡大する
• 店舗一覧やシェアボタンは、PCでも2列のまま幅を広げる
• おすすめ商品カードはPCで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 行書くと起動時に読み込まれる。