--- version: alpha name: Blue and Crimson Idol Collaboration Campaign LP description: 鮮やかなブルーのグラデーション地と深紅・コーラルの地を章ごとに切り替える、タレントコラボのドリンクキャンペーンLP。極太の欧文見出し、白枠付きの青カード、黄色の強調文字、流れるロゴ帯、粒子ノイズの質感で、ファン向けの高揚感をつくる。 colors: primary: '#006ACC' background: '#FEFDFD' secondary: '#65ACEB' background-alt: '#E9F3F5' dark-section: '#C10130' accent-1: '#E3556C' cta: '#D81732' on-cta: '#FFFFFF' accent-2: '#FEFCA4' text: '#3D3445' accent-3: '#3473C3' tint-1: '#DBE5EB' on-dark: '#EFFDFE' line: '#E9A3B0' accent-3-accessible: '#326EBB' typography: display: fontFamily: Archivo Black fontSize: 56px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.7 accent: fontFamily: Dela Gothic One fontSize: 26px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' logo-marquee: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.display}' height: 40px section-title: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 90px campaign-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 1400px highlight-marker: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.headline-sm}' height: 28px badge-size: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 22px button-accordion: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-3}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px pick-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 500px share-button: backgroundColor: '{colors.background}' textColor: '{colors.accent-3}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 64px --- # DESIGN.md — 青×深紅のアイドルコラボ飲料キャンペーンLP（Blue and Crimson Idol Collaboration Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、力強い・インパクト、クール・先進的、情報量多め・訴求型 - **キーワード**: ブルーグラデーション・深紅のセクション・極太欧文見出し・ロゴ帯・粒子ノイズ・ファン向け - **地の質感**: 地色に細かな粒子ノイズと、波打つ細いワイヤーフレーム線をうっすら重ねる - **形**: 四角い白枠カードと、大きな円弧でセクションを切る形を併用。ボタンはピル型 - **温度感**: 青パートは涼しく爽やか、赤パートは熱く華やか ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#006ACC` | キャンペーン章カードの濃い青面 | 9% | 画素の実測 | | `background` | `#FEFDFD` | カード内部・白地 | 17% | 画素の実測 | | `secondary` | `#65ACEB` | 青グラデーション地の明るい側 | 7% | 画素の実測 | | `background-alt` | `#E9F3F5` | SNS章の淡いブルーグレーのカード地 | 8% | 画素の実測 | | `dark-section` | `#C10130` | 深紅のセクション地 | 6% | 画素の実測 | | `accent-1` | `#E3556C` | 店舗施策のコーラルピンク地 | 10% | 画素の実測 | | `cta` | `#D81732` | 主ボタン・ラベル帯の赤 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | 赤ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#FEFCA4` | 見出し・強調の黄色文字 | 1% | 画素の実測 | | `text` | `#3D3445` | 白地上の本文・見出し濃色 | 3% | 画素の主要色に補正 | | `accent-3` | `#3473C3` | SNS章の青見出し文字・青マーカー | 2% | 画素の実測 | | `tint-1` | `#DBE5EB` | スペシャルメッセージの淡い青白グラデ地 | 6% | 画素の主要色に補正 | | `on-dark` | `#EFFDFE` | 色地上の白文字 | 2% | 画素の実測 | | `line` | `#E9A3B0` | カード内の点線区切り（ピンク） | 0% | 推定 | | `accent-3-accessible` | `#326EBB` | AA を満たす補正値（計算） | | 計算 | - 章ごとに地色を切り替える：導入とキャンペーン・SNSは青、店舗施策とおすすめは赤系 - 青地には濃い青カードを白い細枠で囲んで置く - 色地上の強調は黄色文字か、白地＋赤文字の帯マーカーで行う - 赤地パートは白カードに濃色本文、見出しは赤 - 注釈は色地上でも白の小さい太字で、重要語だけ黄色にする - 地色には粒子ノイズと縦グラデを必ず重ね、ベタ塗りにしない - `button-accordion` は文字 `#3473C3` × 背景 `#E9F3F5` のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#326EBB`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 章タイトルの極太欧文 | 欧文サンセリフ | Archivo Black | 900 | 56px | 1.0 | 0.0em | | `headline-lg` | 日本語の大見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.35 | 0.02em | | `headline-md` | カード内のキャンペーン名・期間 | ゴシック | Noto Sans JP | 700 | 22px | 1.35 | 0.02em | | `headline-sm` | 商品名・小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em | | `body-md` | 中央揃えの本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.9 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 700 | 11px | 1.7 | 0.0em | | `accent` | 斜めに傾けた黄色の煽り見出し・手書きサイン | 手書き・筆 | Dela Gothic One | 400 | 26px | 1.2 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - 章タイトルは極太欧文を大きく置き、下に小さな日本語訳を字間広めで添える - 日本語の見出しは助詞だけ小さくして、強弱をつける - 本文は太字・中央揃えで、短い行で改行する - 日付は数字を大きく、曜日の欧文を小さくする - 背景に巨大な番号（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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-acb29b4f`（元 LP の URL から採番） - **元 LP**: https://campaign.gongcha.co.jp/felix-ambassador-2026/index.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。