--- version: alpha name: Bold Yellow Navy Beer Receipt Campaign LP description: 濃い黄色の地に紺の帯を重ね、赤と緑のコース枠で賞品を分けて見せるレシート応募型キャンペーンLP。太い角ゴシックと太い数字で、期間・ポイント・当選数をはっきり見せる。 colors: primary: '#15126D' background: '#FFE200' background-alt: '#FEC501' accent-1: '#E2001A' accent-2: '#009845' secondary: '#FEDC00' cta: '#D5021C' on-cta: '#FFFFFF' surface: '#FFFFFF' text: '#1A1A1A' marker: '#DB2A2B' tint-1: '#CFCFCE' on-primary: '#FFFFFF' accent-1-accessible: '#C60017' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.4 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 900 lineHeight: 1.35 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 20px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' period-band: backgroundColor: '{colors.primary}' textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 110px course-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 560px course-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 36px point-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 76px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 110px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px button-login: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 48px bracket-heading: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 40px ng-example-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px --- # DESIGN.md — 黄×紺に赤緑が映えるビール懸賞キャンペーンLP（Bold Yellow Navy Beer Receipt Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 濃い黄色・紺の帯・赤緑の2コース・太い数字・賞品の切り抜き写真・レシート応募 - **地の質感**: ベタ塗りの黄色地に、左右の端だけ濃い山吹色のグラデーションをかける。放射状の集中線がうっすら入る。 - **形**: 角丸カード、ピル型の見出しラベル、円形のポイントバッジ、山かっこで囲む見出し。 - **温度感**: 暖色が中心。紺で全体を締めた、にぎやかで明るい印象。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#15126D` | ブランドの紺（期間の帯・見出し文字・ボタン） | 11% | 画素の実測 | | `background` | `#FFE200` | ページ地の濃い黄色 | 30% | 画素の主要色に補正 | | `background-alt` | `#FEC501` | 端の山吹色グラデーション | 6% | 画素の実測 | | `accent-1` | `#E2001A` | 赤コースのカード地 | 7% | 推定 | | `accent-2` | `#009845` | 緑コースのカード地 | 6% | 画素の実測 | | `secondary` | `#FEDC00` | 期間ラベルの帯・ピル型ラベルの黄色 | 5% | 画素の実測 | | `cta` | `#D5021C` | 資料ダウンロードボタンの赤 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | 手順・注意点の白い面 | 22% | 画素の実測 | | `text` | `#1A1A1A` | 本文の黒文字 | 3% | 推定 | | `marker` | `#DB2A2B` | 注意文の赤文字 | 1% | 画素の実測 | | `tint-1` | `#CFCFCE` | NG例の写真まわりの灰色 | 4% | 画素の実測 | | `on-primary` | `#FFFFFF` | 紺の帯の上の白文字 | 0% | 画素の主要色に補正 | | `accent-1-accessible` | `#C60017` | AA を満たす補正値（計算） | | 計算 | - ページ全体の地は濃い黄色。左右の端だけを山吹色のグラデーションで濃くする。 - 応募期間は紺のベタ帯にまとめ、日付は黄色の太い文字で載せる。 - 賞品コースは赤カードと緑カードで分け、その上の文字はすべて白にする。 - ポイントバッジは黄色または白の円にし、中の文字は紺にする。 - 手順や注意点は白い面にのせ、紺の細線で囲む。 - 注意事項は赤文字で書き、ほかの本文と区別する。 - `course-pill` は文字 `#E2001A` × 背景 `#FEDC00` のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#C60017`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 「合計○食分」の当選数見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.0em | | `headline-lg` | 応募期間の日付 | ゴシック | Noto Sans JP | 900 | 24px | 1.4 | 0.0em | | `headline-md` | 山かっこ付きのセクション見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.4 | 0.02em | | `headline-sm` | 賞品セット名 | ゴシック | Noto Sans JP | 900 | 21px | 1.35 | 0.0em | | `body-md` | 応募方法などの本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.8 | 0.0em | | `note` | ※から始まる注釈 | ゴシック | Noto Sans JP | 500 | 9px | 1.6 | 0.0em | | `accent` | 「STEP」の欧文と番号、「pt」 | 欧文サンセリフ | Montserrat | 900 | 20px | 1.0 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 500 | 18px | 1.4 | 0.05em | - 見出しも本文も太字のゴシックを基本にする。 - 数字は単位より約1.5倍大きくして目立たせる。 - セクション見出しは〈 〉で囲み、中央に置く。 - メインタイトルは白フチと影を付けた立体的な文字にする。 - 注釈は9px前後の小さい文字にまとめる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。賞品カードの中だけ左にバッジ・右に説明の 2 列。NG 例は 2 列グリッド。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 期間の帯は画面いっぱいの幅にする。 - コースカードは左右に約6%の余白をとって中央に置く。 - 賞品写真はカードの下側に横並びで置く。 - STEPカードは縦に3つ並べ、間を約16pxあける。 - 注意点のセクションは白い大きなパネルに入れる。 ## Elevation & Depth - 影はほとんど使わず、ベタ塗りの面と線で階層を表す。 - メインタイトルのロゴだけに濃い立体影を付ける。 - 賞品写真は切り抜きで、うっすら落ち影を付ける。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品と賞品は背景を抜いた切り抜き。レシートの図解は四角の灰色枠に入れる。 - **セクション境界**: 面の色を直線で切り替える。 - コース名のラベルは黄色のピル型に赤い縁を付ける。 - ポイントバッジは片側が少し尖った円形にする。 - ボタンは角丸の小さい長方形にする。 - STEPカードは角丸なしで、紺の細い二重線で囲む。 ## Components - **応募期間の帯**（`period-band`）: 紺の帯に黄色のラベルを敷き、その下に黄色の太い日付を2行で載せる。 - **コースのカード**（`course-card`）: 赤または緑の角丸カード。上にピル型のラベル、中に賞品セットを2つ入れ、白い線で区切る。 - **コース名のピル**（`course-pill`）: 黄色いピル型に赤い縁を付け、コース名を赤文字で入れる。 - **ポイントバッジ**（`point-badge`）: 黄色または白の円に紺文字で「数字+pt」と「コース」を入れる。下には白地の当選人数ラベルを付ける。 - **STEPカード**（`step-card`）: 白地に紺の細枠。左に「STEP+番号」と説明、右に紺の線画アイコンを置く。 - **ダウンロードボタン**（`button-primary`）: 赤地の角丸ボタン。白文字を2行で入れる。 - **ログインボタン**（`button-login`）: 紺のベタ塗りで横幅いっぱい。白文字のボタン。 - **山かっこの見出し**（`bracket-heading`）: 〈 〉で囲んだ太字の見出し。大きい見出しは左右に紺の細い山かっこ線を引く。 - **NG例グリッド**（`ng-example-grid`）: 白いパネルの中に、灰色枠のレシート図解を2列で並べる。図の下に中央揃えの説明を付ける。 ## Do's and Don'ts **Do** - 日付・ポイント・当選人数は、数字を特大の太字にして見せる。 - コースごとに地の色を変え、ひと目で区別できるようにする。 - 賞品は切り抜き写真を横に並べて、量の多さを見せる。 - 応募の手順はSTEP番号付きのカードで順に見せる。 - 年齢制限などの注意書きは目立つ位置に小さく必ず入れる。 **Don't** - 淡いパステル色や細い明朝体は使わない。 - 黄色の地に黄色系の細い文字を置かない。 - 赤と緑のカードの上に、黒い本文を置かない。 - 強いぼかしの影やガラス風の表現は使わない。 - セクションの境目に波形や斜めの切り替えを入れない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名と商品を見せて注目を集める）: 黄色の地に立体ロゴ風のタイトルを置き、商品缶とジョッキの写真を大きく載せる。写真にはしぶきの演出を入れる。 2. **応募期間**（応募方法と期間を伝える）: 紺の帯に、黄色のラベルと大きい日付を3組並べる。 3. **大口の賞品**（一番大きい賞品を訴求する）: 白い枠付きのカードに、集中線と特大の数字見出しを入れる。バッジと賞品写真を並べる。 4. **赤コース**（1つ目のコースの賞品を見せる）: 赤い角丸カードに、ピル型ラベル・バッジ・セット名・リスト・写真を入れる。 5. **緑コース**（2つ目のコースの賞品を見せる）: 赤コースと同じ構成で、地を緑にする。 6. **対象商品**（どの商品が対象かを示す）: 缶を2本並べ、下に商品名と容量を書き、注釈を添える。 7. **応募方法**（手順を説明する）: リード文のあとに、白いSTEPカードを3枚縦に並べる。 8. **郵送応募の案内**（郵送で応募する人を誘導する）: 本文と、赤いダウンロードボタンを置く。 9. **注意事項・ログイン**（制限を伝え、応募画面へ導線を作る）: 白い地に赤の注意文を置き、紺のログインボタンとSNSシェアボタンを並べる。 10. **撮影時の注意点**（応募の不備を防ぐ）: 黄色の地に白い大きなパネルを置き、良い例を○、悪い例を×で示す。悪い例は2列の図解にする。 ## Imagery - 商品は正面から撮った切り抜きにし、しぶきや泡で冷たさとシズル感を出す。 - 賞品は背景を抜いた写真を少し重ねて並べ、量を感じさせる。 - アイコンは紺一色の線画で、スマホやレシート、コインを描く。 - レシートの図解はフラットな白黒で描き、赤い番号の丸で要点を示す。 - 大きい賞品のカードには、うっすら放射状の集中線を敷く。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約800px幅で置き、外側には黄色の地を広げる。 - 応募期間はPCではラベルと日付を横に並べた3行の表形式にする。 - コースカードはPCではセット名を1行にし、写真を右にまとめる。 - 対象商品はPCでは商品名を2列に並べる。 - PCではQRコードを入れ、スマホから応募するよう案内する。 ## 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-1cc95adf`（元 LP の URL から採番） - **元 LP**: https://cp.kirin.jp/story/34529 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。