--- version: alpha name: Sky Blue and Crimson Idol Collaboration Campaign LP description: 空色のグラデーションと深い紅赤を交互に使う、アイドル起用の飲料チェーン向けキャンペーン LP。極太の欧文見出しとアーチ型・円形の白い面で、ファン向けの華やかさと分かりやすい企画説明を両立させている。 colors: primary: '#DA1632' secondary: '#65A9E7' background-alt: '#D2E4F8' background: '#FFFFFF' surface: '#FDF6EC' tint-1: '#FCF2F1' dark-section: '#DC4154' text: '#2E2A2A' accent-1: '#2C6292' on-dark: '#FFFFFF' cta: '#D81732' on-cta: '#FFFFFF' text-muted: '#726163' typography: display: fontFamily: Montserrat fontSize: 46px fontWeight: 900 lineHeight: 0.95 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Montserrat fontSize: 18px fontWeight: 800 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Lexend fontSize: 30px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 10px lg: 180px full: 999px spacing: unit: 8px card: 28px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-accordion: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px band-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 40px arch-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 3600px highlight-marker: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 24px count-box: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 76px coming-soon-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 170px comment-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 160px pick-tag: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 50px --- # DESIGN.md — 空色×紅赤のアイドルコラボ飲料キャンペーンLP（Sky Blue and Crimson Idol Collaboration Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、清潔・爽やか、情報量多め・訴求型、かわいい - **キーワード**: 空色グラデーション・紅赤の帯・極太欧文見出し・アーチ型カード・ファン向け・企画の段階告知 - **地の質感**: フラットな面に薄い曲線リボンやきらめき星を重ね、方眼紙やちぎった紙のコラージュ風も混ぜる - **形**: 上部が半円のアーチ型白カード、正円バッジ、斜めに切った帯、ピル型ボタン - **温度感**: 爽やかな青と熱い赤を交互に置き、全体は明るく賑やか ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DA1632` | ブランド紅赤・帯・強調 | 9% | 画素の実測 | | `secondary` | `#65A9E7` | 空色セクション地 | 12% | 画素の実測 | | `background-alt` | `#D2E4F8` | 淡い空色地 | 14% | 画素の実測 | | `background` | `#FFFFFF` | 白カード地 | 19% | 画素の実測 | | `surface` | `#FDF6EC` | 生成りセクション地 | 7% | 画素の実測 | | `tint-1` | `#FCF2F1` | 賞品リストの淡紅地 | 2% | 画素の実測 | | `dark-section` | `#DC4154` | 赤いスペシャルセクション地 | 8% | 画素の実測 | | `text` | `#2E2A2A` | 見出し・本文の墨色 | 3% | 推定 | | `accent-1` | `#2C6292` | 空色地の紺文字 | 2% | 画素の実測 | | `on-dark` | `#FFFFFF` | 赤・青地上の白文字 | 2% | 画素の主要色に補正 | | `cta` | `#D81732` | 主ボタン塗り | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 主ボタン文字 | 0% | 画素の主要色に補正 | | `text-muted` | `#726163` | 注釈グレー | 0% | 画素の主要色に補正 | - 地色は空色グラデ→白カード→紅赤→生成り→空色と大きく交互に切り替える - 紅赤は帯見出し・日付・強調マーカー・ボタンに集中させる - 本文中の条件や数字は紅赤ベタ地に白文字のマーカーで強調する - 空色地の上の文字は紺、赤地の上は白に統一 - 淡紅の面は賞品リストなど補足ボックスだけに使う - 注釈はグレーの小さな文字にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文見出し | 欧文サンセリフ | Montserrat | 900 | 46px | 0.95 | -0.02em | | `headline-lg` | 企画タイトル | ゴシック | Noto Sans JP | 900 | 32px | 1.2 | 0.0em | | `headline-md` | 日付・小見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.3 | 0.02em | | `headline-sm` | 帯見出し・ラベル | 欧文サンセリフ | Montserrat | 800 | 18px | 1.2 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.04em | | `note` | 注釈 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.02em | | `accent` | 番号・価格の細い数字 | 欧文サンセリフ | Lexend | 400 | 30px | 1.0 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.04em | - 欧文見出しは極太で 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 ```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-05798493`（元 LP の URL から採番） - **元 LP**: https://campaign.gongcha.co.jp/felix-ambassador-2025/index.html?_ga=2.169769506.2014948882.1759480846-945716797.1756890074&_gl=1*wqb9t4*_gcl_au*MTQwNzY0ODE0My4xNzU2ODkwMDc0*_ga*OTQ1NzE2Nzk3LjE3NTY4OTAwNzQ.*_ga_F4SYD729GY*czE3NTk0ODA4NDYkbzIkZzEkdDE3NTk0ODA - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。