--- version: alpha name: Dark Velvet Gold Masquerade Collab Campaign LP description: 黒に近い暗い赤茶の地に、金のラインと飾りを重ねたゴシックで豪華な雰囲気のゲームコラボ販促LPです。予約期間・商品・特典・交換方法・FAQ・注文手順を、金枠のカードに縦一列で並べています。差し色はクリーム色の帯と深緑のパネルです。 colors: background: '#140405' primary: '#4E1C19' secondary: '#D9B878' background-alt: '#E2D6BD' surface: '#1B0C09' accent-1: '#256C65' cta: '#020101' on-cta: '#FFFFFF' accent-2: '#C3352C' text: '#39231E' on-dark: '#E7DCC5' dark-section: '#202125' tint-1: '#C1B6A0' typography: display: fontFamily: Playfair Display fontSize: 40px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Cinzel fontSize: 40px fontWeight: 700 lineHeight: 1.0 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' date-band: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 120px ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 36px gold-frame-card: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 600px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px step-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 150px faq-row: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 44px number-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 20px notice-banner: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 160px --- # DESIGN.md — 深紅×金の仮面舞踏会風コラボキャンペーンLP（Dark Velvet Gold Masquerade Collab Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、情報量多め・訴求型、力強い・インパクト - **キーワード**: 仮面舞踏会・ゴシック装飾・金箔ライン・深紅のベルベット・ゲームコラボ - **地の質感**: 背景は細い縦ストライプのベルベット調の暗赤。カードは細い金の二重枠で、角に装飾を付ける - **形**: 四角いカードに金の細線枠を付け、帯見出しは両端を細く絞る。ボタンはピル型 - **温度感**: 暖色寄りで暗い。金とクリームで温かい光を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#140405` | ページ全体の暗赤黒の地 | 45% | 画素の実測 | | `primary` | `#4E1C19` | 見出し帯・FAQ地の深紅ブラウン | 10% | 画素の実測 | | `secondary` | `#D9B878` | 見出し文字・枠線の金 | 3% | 推定 | | `background-alt` | `#E2D6BD` | クリーム色の告知帯・カード地 | 12% | 画素の実測 | | `surface` | `#1B0C09` | 商品カードの暗い地 | 10% | 画素の主要色に補正 | | `accent-1` | `#256C65` | 手順見出しや作品紹介パネルの深緑 | 6% | 画素の実測 | | `cta` | `#020101` | 主ボタンの黒 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 黒ボタン上の白文字 | 0% | 推定 | | `accent-2` | `#C3352C` | 強調文字・強調帯の朱赤 | 1% | 画素の実測 | | `text` | `#39231E` | クリーム地の上の濃茶の文字 | 2% | 画素の主要色に補正 | | `on-dark` | `#E7DCC5` | 暗い地の上の本文・注釈の白 | 2% | 画素の主要色に補正 | | `dark-section` | `#202125` | フッターのチャコール | 3% | 画素の実測 | | `tint-1` | `#C1B6A0` | 告知帯に入れる建物シルエットのベージュ | 2% | 画素の実測 | - 地は暗赤黒で統一し、縦ストライプの質感を入れる - 見出し・日付・枠線は金。グラデーションで光沢を出す - 情報の区切りにクリーム帯を入れて明暗のリズムを作る - 朱赤は受付日などの重要な文字と強調帯だけに使う - 深緑は手順見出しと関連作品の紹介パネルだけに使う - ボタンは黒地に白文字。クリーム地のボタンは濃茶の文字にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインロゴ風の題字 | 欧文セリフ | Playfair Display | 700 | 40px | 1.1 | 0.02em | | `headline-lg` | セクション見出し（金） | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.4 | 0.05em | | `headline-md` | 帯見出し・商品名 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.4 | 0.05em | | `accent` | 日付・価格の大きな数字 | 欧文セリフ | Cinzel | 700 | 40px | 1.0 | 0.0em | | `body-md` | 本文・手順の説明 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.03em | | `note` | ※から始まる注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em | - 見出しは中央揃えで、金のグラデーションをかけた太字にする - 日付・価格の数字は大きなセリフ体にし、単位は小さく添える - 曜日は数字の右上に小さな斜めの帯で添える - 注釈は左揃えで小さく、行間を広めにとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内の交換方法などは SP では縦積み - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - すべてのブロックを中央の金枠カードに収める - セクションの頭に金の紋章飾りと見出しを置く - 商品は写真を左、価格と内容を右に並べる（SP では縦） - 手順は Step 番号のタグ付きカードを縦に並べる - FAQ は Q アイコン付きの行を細線で区切る ## Elevation & Depth - 影はほぼ使わず、金の細線枠で奥行きを出す - クリームのカードには、ごく薄いドロップシャドウを付ける - 見出し帯には中央が明るい赤のグラデーションをかける ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 商品写真やアイテムは切り抜きで配置。キャラクターは円形か切り抜き - **セクション境界**: 直線で切り替える。クリーム帯には建物シルエットを入れ、末尾は宮殿シルエットで締める - カードは角丸なしかごく小さい角丸にし、金の二重線を付ける - 帯見出しは両端がフェードする横長の帯にする - アーチ型の金線で特典セクションを囲む - ボタンだけを完全なピル型にする ## Components - **期間表示ブロック**（`date-band`）: 赤い帯のラベルの下に、金の大きな日付を矢印でつなぐ。下は金の装飾線 - **帯見出し**（`ribbon-heading`）: 深紅のグラデーション帯に、白か金の見出しを載せる - **金枠カード**（`gold-frame-card`）: 暗い地に金の細い二重枠を付け、角に装飾を置く - **黒ピルボタン**（`button-primary`）: 黒地に白文字。右端に白丸の矢印アイコンを付ける - **手順カード**（`step-card`）: クリーム地のカード。左上に金の Step タグ、上部に深緑の見出し帯とアイコンを置く - **FAQ行**（`faq-row`）: 深紅地にクリームの Q アイコン、白い質問文、右端に開閉の矢印 - **番号丸**（`number-badge`）: 赤か緑の丸に白い数字を入れて手順に付ける - **告知帯**（`notice-banner`）: クリーム地に建物シルエットを敷き、濃茶と朱赤の太字を中央に置く ## Do's and Don'ts **Do** - 金の装飾線や紋章で見出しを飾る - 暗い地とクリーム帯を交互に入れて読みやすくする - 数字は大きなセリフ体で目立たせる - 注釈は※付きで各カードの末尾にまとめる - キャラクターのデフォルメイラストを見出しの脇に添える **Don't** - 白一色の背景にしない - 彩度の高いポップな色を増やさない - 大きな角丸やふわっとした影を使わない - 金を太いベタ塗りで使わない（細線とグラデーションで使う） - ボタンの色を何種類にも増やさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観を伝え、題字を見せる）: 豪華な館の階段に立つキャラクターのイラストを全幅で敷く。下部に金のロゴ風の題字を置く 2. **期間告知**（予約期間とキャンペーン期間を知らせる）: 赤い帯のラベルと金の大きな日付を2段で並べ、赤い強調帯と注釈を続ける 3. **開催告知帯**（第二弾であることを伝える）: クリーム地に建物シルエットを敷き、中央に太字の見出しを置く 4. **商品紹介**（コラボ商品と特典アイテムを見せる）: 金枠カードの中に商品写真・価格・アイテムアイコンを並べる 5. **交換方法**（特典を受け取る手順を示す）: 深紅のカードに2列の番号付き手順を置き、各列の見出しはクリーム色のラベル 6. **抽選プレゼント**（抽選で当たる景品を訴求する）: アーチ型の金枠の中に、グレージュ地のパネルで景品写真と当選人数を並べる 7. **Wチャンス**（追加の抽選特典を見せる）: クリームのカードに景品のサムネイルを並べ、黒いピルボタンを置く 8. **アプリ限定配布**（アプリへ誘導する）: クリームのカードにアイテムのイラストを並べ、黒ボタンを2つ横に並べる 9. **よくある質問**（疑問を解消する）: クリーム色の見出し帯の下に、深紅地の Q アコーディオンを並べる 10. **注文手順**（注文の流れを説明する）: Step タグ付きのクリーム色カード4枚と、朱赤の完了カードを縦に並べる 11. **作品紹介**（コラボ相手を紹介する）: 深緑のパネルに上下の文様帯を付け、白文字とクリーム色のピルボタンを置く 12. **問い合わせ・フッター**（問い合わせ先とサイト導線を示す）: 宮殿シルエットの上に問い合わせ先を置き、チャコール地のリンク一覧で締める ## Imagery - キャラクターは豪華な洋館の中で、ドラマチックな照明を当てた厚塗りのイラストにする - 見出し脇には小さな二頭身キャラクターを添える - 商品写真は白背景で切り抜き、斜め上から撮る - 装飾は仮面・アラベスク・紋章を金の線画で描く - シルエットはドームのある宮殿の街並みを使う - キラッとした四芒星をアクセントに散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 70% 幅の 1 カラムで、両側に暗いストライプの地を見せる - SP ではカードを画面幅の 90% に広げる - 交換方法の2列やボタンの横並びは、SP では縦に積む - 日付の数字は SP で 36〜40px 程度に縮める - ヘッダーは細い白帯で、右上に丸いメニューボタンを固定する ## 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-ca7b59d2`（元 LP の URL から採番） - **元 LP**: https://www.kfc.co.jp/campaign/genshin - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。