--- version: alpha name: Burgundy & Gold Premium Spirits Campaign LP description: 深いワインレッドの単色地に、シャンパンゴールドの文字と線を重ねた酒類キャンペーンLP。黒基調のFVで商品ボトルを並べ、景品・期間・応募手順・CTAを縦一列で見せる。装飾は細い金の罫線と枠だけに絞り、高級感と情報の読みやすさを両立させている。 colors: primary: '#A2004E' secondary: '#E2BE8B' surface: '#D4B57C' dark-section: '#0A0000' accent-1: '#8F0042' cta: '#000000' on-cta: '#F6FAF4' on-primary: '#FFFFFF' text: '#040101' line: '#D4B57C' background: '#FFFFFF' text-muted: '#EAD8AD' typography: display: fontFamily: Oswald fontSize: 46px fontWeight: 600 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Oswald fontSize: 28px fontWeight: 600 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 72px 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}' height: 52px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 38px heading-rule: textColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 30px prize-frame: textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 105px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' height: 285px date-display: textColor: '{colors.secondary}' typography: '{typography.display}' height: 250px product-item: textColor: '{colors.secondary}' typography: '{typography.body-md}' height: 520px share-buttons: textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 50px link-footer: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 70px --- # DESIGN.md — 深紅×金の洋酒プレゼントキャンペーンLP（Burgundy & Gold Premium Spirits Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト - **キーワード**: ワインレッド単色地・シャンパンゴールド文字・縦長コンデンス数字・細い金罫線・黒の角型CTA・ボトル切り抜き - **地の質感**: フラットな単色面。FVだけ黒地に斜めのマゼンタ帯と光沢があり、本文側には質感を付けない - **形**: 角丸なしの矩形。細い線の枠、左右に罫線を伸ばした見出し、二重線の区切り - **温度感**: 暖色寄りで濃い。夜のバーのような落ち着いた熱さ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A2004E` | ページ全体の地色（ワインレッド） | 62% | 画素の実測 | | `secondary` | `#E2BE8B` | 見出し・日付などの金文字 | 4% | 画素の実測 | | `surface` | `#D4B57C` | STEPカードの金ベージュ面 | 6% | 画素の実測 | | `dark-section` | `#0A0000` | FV背景の黒 | 6% | 画素の実測 | | `accent-1` | `#8F0042` | FVの斜めマゼンタ帯 | 3% | 画素の主要色に補正 | | `cta` | `#000000` | 応募ボタンの黒 | 2% | 画素の実測 | | `on-cta` | `#F6FAF4` | CTAの文字（白または金） | 0% | 画素の実測 | | `on-primary` | `#FFFFFF` | 地色の上の白い本文 | 0% | 推定 | | `text` | `#040101` | STEPカード内の黒文字・線画 | 1% | 画素の実測 | | `line` | `#D4B57C` | 金の罫線・枠線 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | サブボタンの白面 | 1% | 画素の実測 | | `text-muted` | `#EAD8AD` | 小さい注釈の薄い金 | 0% | 画素の主要色に補正 | - 地色はFVを除いてワインレッド1色で通し、セクションごとに色を変えない - 見出し・数字・商品名は金で書く。白は注釈や説明文の一部だけに使う - FVだけは黒地にマゼンタの斜め帯を入れ、本文側と切り替える - 応募手順のカードは金ベージュの面に黒文字と黒い線画で描く - 主CTAは黒の面にし、ワインレッド地の上でいちばん強く見せる - SNSシェアボタンだけは各サービスの公式色を使ってよい ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの英字タイトル・日付・期間の数字 | 装飾・ディスプレイ | Oswald | 600 | 46px | 1.1 | 0.0em | | `headline-lg` | 当選人数などの大きな訴求コピー | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.02em | | `headline-md` | 景品名など枠内の中見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.04em | | `headline-sm` | 左右に罫線が付くセクション見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.1em | | `body-md` | 応募方法などの本文と商品名 | ゴシック | Noto Sans JP | 700 | 15px | 1.8 | 0.04em | | `note` | ※注釈・容量・容量表記 | ゴシック | Noto Sans JP | 500 | 10px | 1.7 | 0.02em | | `accent` | STEP番号・外部リンクの英字 | 装飾・ディスプレイ | Oswald | 600 | 28px | 1.1 | 0.0em | | `label-button` | 応募ボタンの文字 | ゴシック | Noto Sans JP | 700 | 22px | 1.2 | 0.05em | - 数字と英字は縦長のコンデンス書体にし、大きく見せる - 和文は太めのゴシックで中央揃えにする - 見出しは金色、字間は少し広めにとる - 注釈は10px前後まで小さくしてよいが、地色とのコントラストは保つ - 単位（名様・まで）は数字より小さくして、数字を目立たせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品とグラスは 2〜3 列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 要素はすべて中央揃えで縦一列に積む - 商品ボトルは2列で並べ、下に商品名と容量を左揃えで置く - STEPカードは幅を約67%にして縦に積み、間隔は約24px - CTAは画面幅の約85%まで広げる - セクションの間は罫線見出しと大きな余白で区切る ## Elevation & Depth - 影は使わずフラットにする - 奥行きはFVのボトル写真に付いた映り込みと光沢だけで出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: ボトルやグラスは背景を抜いた切り抜きにし、地色の上に直接置く - **セクション境界**: 直線の境界。FVと本文は水平に切り替え、本文の途中は金の二重罫線で区切る - 角丸はすべて0にする - 枠は1px前後の細い金線にする - 見出しは中央の文字から左右に細い線を伸ばす - スマホのアイコンなどの線画だけは角を丸くしてよい ## Components - **応募ボタン**（`button-primary`）: 黒い横長の矩形に白か金で太字を入れる。ページ中で最も強い要素 - **要項リンクボタン**（`button-secondary`）: 白地に黒の小さい文字と＞アイコン。黒い細枠を付ける - **罫線付き見出し**（`heading-rule`）: 金文字の左右に細い金線（景品見出しは二重線）を伸ばす - **景品名の枠**（`prize-frame`）: 細い金線の矩形の中に、金の太字で景品名を3行で入れる - **応募ステップカード**（`step-card`）: 金ベージュの正方形に近い面。上にSTEP番号、その下に説明2行と黒の線画を置く - **応募期間表示**（`date-display`）: 金の枠付きラベルの下に、巨大なコンデンス数字の日付を縦に並べ、点線でつなぐ - **商品・景品アイテム**（`product-item`）: 切り抜き写真の下に金の太字で商品名を書き、容量を小さく添える - **SNSシェアボタン**（`share-buttons`）: 各サービスの公式色で塗った3つの矩形を横に並べる - **外部リンク**（`link-footer`）: 小さな英字ラベルと短い下線の下に、▶付きの大きなコンデンス英字のリンクを置く ## Do's and Don'ts **Do** - 地色はワインレッド1色を守り、文字は金を主役にする - 数字・日付・英字は縦長のコンデンス書体で大きく見せる - 装飾は細い金線と枠だけに絞る - 商品は背景を抜いた切り抜き写真で、間隔をあけて並べる - 主CTAは黒い矩形にし、ページの中盤と最後に置く - 注釈で年齢制限や応募条件をはっきり書く **Don't** - 角丸・ピル型のボタンや、ふんわりした影を使わない - パステル色や明るすぎる原色を加えない（SNSボタンを除く） - セクションごとに背景色を変えない - 手書き風やポップな書体は使わない - 金の文字に光沢グラデーションを多用しない（FVのタイトルだけにする） - イラストはカラーにせず、STEPの線画だけにとどめる ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名と対象商品を一目で伝える）: 黒地にマゼンタの斜め帯。上にロゴ、金の大きな英字タイトル、下に商品ボトル3本を並べる 2. **キャンペーン概要**（当選人数と景品を伝える）: 金で前置き文と大きな当選人数を書き、細い金枠の中に景品名を入れ、下に※注釈を3行置く 3. **ブランドロゴ**（セクションの区切りとブランドの想起）: 金の横長ロゴを中央に大きな余白をとって置く 4. **対象商品**（購入対象を示す）: 罫線見出しの下に、ボトル写真を2列×2段で並べ、商品名と容量を添える 5. **応募期間**（締切を強く伝える）: 枠付きラベルの下に、開始日と終了日を巨大な数字で縦に並べる 6. **応募方法**（応募の条件を説明する）: 罫線見出しの下に白い本文を置き、レシートの有効期間を下線付きで添える 7. **応募ステップ**（手順を3段階でわかりやすく示す）: 金ベージュのカード3枚を縦に積み、STEP番号・説明・黒の線画を入れる 8. **CTA**（応募へ誘導する）: 案内文、白い要項ボタン、黒い応募ボタンの順に並べる 9. **SNSシェア**（拡散を促す）: 公式色の3つのボタンを横に並べ、下に飲酒年齢の注意を小さく書く 10. **景品詳細**（景品の魅力を具体的に見せる）: 二重罫線の見出しと金の説明文の下に、ボトル3本を3列、グラス3点を2列＋1点で並べる 11. **最終CTA**（最後にもう一度応募を促す）: 金の二重線で区切り、黒地に金の大きな文字の応募ボタンを置く 12. **外部リンク**（公式サイトや販売ページへ誘導する）: ▶付きの金のコンデンス英字リンクを縦に3つ並べる ## Imagery - 商品ボトルは正面から撮り、背景を抜いた切り抜きにして、ラベルがはっきり読めるようにする - FVは黒の背景にボトルを並べ、床への映り込みと横からの光で艶を出す - グラスは白抜きの切り抜きにし、カットの透明感を見せる - 手順の図は黒の太い線画で描き、スマホ・吹き出し・レシートを記号的に表す - 背景に柄や写真は使わない - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約60%幅のコンテンツ列を置き、地色はそのまま全幅に広げる - FVはPCで横長になり、左にタイトル、右にボトルを置く - 対象商品はPCで4列に並べる - 応募期間はPCで1行にまとめる - STEPカードはPCで3列に並べる - 外部リンクはPCで3つを横に並べ、景品のボトルとグラスは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-13bcbfc6`（元 LP の URL から採番） - **元 LP**: https://cp.kirin.jp/story/34949 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。