---
version: alpha
name: Royal Blue & Gold Receipt Campaign LP
description: 濃いロイヤルブルーの地に金色のグラデーション帯と白カードを重ねた、酒類のレシート応募キャンペーンLP。明朝の太字で賞品名や日付を大きく見せ、金色のメダル型バッジでポイントコースを区別する。後半は白地の図解で、応募手順と撮影時の注意点を丁寧に案内する。
colors:
  primary: '#0153BB'
  secondary: '#E3A91B'
  background: '#FEFEFD'
  dark-section: '#00148A'
  text: '#114076'
  on-primary: '#FFFFFF'
  accent-1: '#F0E65F'
  accent-2: '#E10718'
  background-alt: '#CED6D8'
  text-body: '#222222'
  cta: '#00148A'
  on-cta: '#FFFFFF'
  line: '#114691'
typography:
  display:
    fontFamily: M PLUS Rounded 1c
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.4
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.6
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Montserrat
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.03em
rounded:
  sm: 0px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  badge-point-medal:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 72px
  pill-winners:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 36px
  band-heading:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 30px
  label-phase:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-lg}'
    height: 24px
  card-prize:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 480px
  box-step:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    height: 140px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 44px
  button-sub:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    height: 32px
  guide-example:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-lg}'
    height: 250px
---

# DESIGN.md — 青×金のビール懸賞キャンペーンLP（Royal Blue & Gold Receipt Campaign LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。
上の YAML（トークン）が正、本文はその使い方の説明です。
**元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。**
公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: 信頼・誠実、力強い・インパクト、情報量多め・訴求型
- **キーワード**: ロイヤルブルー・金グラデーション・白カード・明朝太字・メダルバッジ・図解ガイド
- **地の質感**: 青地に縦方向のわずかなグラデーションをかける。金帯には光沢感のある黄金グラデーションを使う。カードはフラットな白。
- **形**: 角丸の白カード、ピル型の当選数ラベル、円形の金メダル、角の立った青帯の見出し。
- **温度感**: 爽やかで涼しい青を基調に、金色で祝祭感と高級感を加える。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#0153BB` | ブランドの青。セクションの地色 | 40% | 画素の実測 |
| `secondary` | `#E3A91B` | 金色の帯（応募期間エリア） | 7% | 画素の実測 |
| `background` | `#FEFEFD` | カードや注意エリアの白地 | 34% | 画素の実測 |
| `dark-section` | `#00148A` | 濃紺の見出し帯と登録ボタン | 3% | 画素の実測 |
| `text` | `#114076` | 日付や賞品名の濃紺文字 | 3% | 画素の実測 |
| `on-primary` | `#FFFFFF` | 青地の上の白文字 | 2% | 画素の主要色に補正 |
| `accent-1` | `#F0E65F` | セクション見出しの黄色文字 | 0% | 画素の実測 |
| `accent-2` | `#E10718` | 良い例の丸印と注意文の赤 | 0% | 画素の実測 |
| `background-alt` | `#CED6D8` | 図解の背景グレー | 10% | 画素の主要色に補正 |
| `text-body` | `#222222` | 白地の本文の黒文字 | 1% | 推定 |
| `cta` | `#00148A` | 登録ボタン | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | 登録ボタンの文字 | 0% | 画素の主要色に補正 |
| `line` | `#114691` | STEP枠とサブボタンの細い枠線 | 0% | 画素の実測 |

- ページの大部分は青地にする。情報は白カードに載せて読ませる。
- 金色のグラデーションは、ファーストビュー直下の期間告知帯とポイントバッジだけに使う。
- 日付や賞品名は濃紺の明朝太字で書く。黒は使わない。
- 青地のセクション見出しは黄色の文字を〈〉で囲む。
- 赤は注意文と、良い例の○印・番号に限って使う。
- 注意説明の図解は、グレー地に白い紙の形で描く。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのキャンペーン名（白文字に青い縁取り） | 丸ゴシック | M PLUS Rounded 1c | 900 | 40px | 1.2 | 0.02em |
| `headline-lg` | 日付・賞品名・当選数 | 明朝 | Shippori Mincho | 800 | 24px | 1.4 | 0.0em |
| `headline-md` | 〈〉付きのセクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.05em |
| `headline-sm` | 帯見出し（応募期間など） | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em |
| `body-lg` | STEPの説明・注意点の本文 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.0em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em |
| `accent` | STEP番号の欧文 | 欧文サンセリフ | Montserrat | 900 | 22px | 1.1 | 0.02em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 500 | 14px | 1.4 | 0.03em |

- 数字や日付は明朝の太字で大きくする。「年・月・日」は小さくする。
- 曜日は括弧で囲み、本体より小さく書く。
- 見出しは〈〉で囲み、中央揃えにする。
- 本文はゴシックの太字で、短い行で改行する。
- 注釈は※で始め、10px前後の小さい文字にする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。図解は 2 列のグリッド。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
- 白カードは左右に約6%の余白を取って青地に浮かべる。
- カードどうしの間隔は約16px。
- ポイントバッジはカードの左上に、はみ出し気味に置く。
- 当選数のピルはバッジの右に横並びにする。
- STEP枠は縦に3つ並べる。説明文は左、アイコンは右に置く。

## Elevation & Depth

- 白カードには、ごく薄いドロップシャドウを付ける。
- 金メダルバッジには立体的なグラデーションと影を付ける。
- そのほかはフラットにする。

## Shapes

- **角丸**: 小 0px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
- **写真の切り抜き**: 賞品は切り抜きか角丸の四角。商品の缶は切り抜く。
- **セクション境界**: 直線で色を切り替える。
- 当選数ラベルは、白地に紺の枠線のピル型。
- 帯見出しとボタンは角丸なし。
- STEP枠は白い二重線の四角。

## Components

- **ポイントコースのメダル**（`badge-point-medal`）: 金のグラデーションの円に、紺色の明朝でポイント数とコース名を入れる。
- **当選数ピル**（`pill-winners`）: 白地に紺の枠線。明朝で当選人数を書く。
- **期間の帯見出し**（`band-heading`）: 金帯の上に置く、全幅の濃紺の帯。中央に白文字。
- **第◯弾ラベル**（`label-phase`）: 濃紺の小さな四角に、白い明朝で書く。
- **賞品カード**（`card-prize`）: 角丸の白カード。メダル、ピル、写真、賞品名を順に載せる。
- **STEP枠**（`box-step`）: 白い枠線の箱。欧文のSTEP番号、説明、線画のアイコンを入れる。
- **登録ボタン**（`button-primary`）: 全幅の濃紺ボタン。白文字で書く。
- **要項リンクボタン**（`button-sub`）: 白地に細い枠線。右に「>」を付ける。
- **撮影例の図解**（`guide-example`）: グレー地に白いレシートの線画を描き、下に2行の説明を添える。2列で並べる。

## Do's and Don'ts

**Do**
- 青地と白カードのコントラストを保つ。
- 日付と賞品名は明朝の太字で大きく見せる。
- コースはメダルバッジとピルで区別する。
- 手順は3つのSTEP枠と線画アイコンで図解する。
- 注意点は○と×の見出しを付けて2列で並べる。

**Don't**
- 金色を広い面積に使わない。
- 柔らかいパステル色を入れない。
- カードに強い影を付けない。
- 日付を細いゴシックで書かない。
- 赤を装飾目的で使わない。

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（くつろぎのシーンでキャンペーンを印象づける）: 部屋でくつろぐ写真を背景にする。上部に縁取り文字のロゴと金のリボン、右下に商品の缶を置く。
2. **応募期間**（応募期間とレシートの有効期間を伝える）: 金のグラデーション帯に濃紺の帯見出しを置き、日付を明朝で大きく書く。
3. **応募コース**（ポイントごとの賞品を見せる）: 青地に白カードを3枚並べる。各カードにメダル、ピル、写真、箇条書きの賞品名を入れる。
4. **対象商品**（対象商品を示す）: 左に商品名と容量、右に缶の写真を置く。
5. **応募方法**（応募の手順を説明する）: 導入文のあとにSTEP枠を3つ縦に並べる。
6. **お知らせ・CTA**（注意事項と登録への導線）: 白地に小さい文字のお知らせを置き、要項ボタン、全幅の登録ボタン、SNSのシェアボタンを続ける。
7. **撮影時の注意点**（読めないレシートが送られるのを防ぐ）: 青地に大きな〈〉付きの見出しを置く。白パネルの中に良い例と、悪い例の2列グリッドを並べる。

## Imagery

- 写真は明るい自然光のリビングで、くつろぐ人物を撮る。
- 賞品は白背景で切り抜くか、食卓のシズル写真にする。
- アイコンは紺色の単色の線画（スマホ、レシート、コイン）。
- 図解は白いレシートの線画に、赤い番号や枠でポイントを示す。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央に約800pxのコンテンツ幅を取り、両サイドも青地にする。
- PCではファーストビューが横長になり、期間告知は横一列の帯にまとめる。
- PCでは48ptの賞品を、縦線で区切った2列で並べる。
- PCではQRコード付きの「スマホ専用」案内ボックスを追加する。
- 注意点の図解はPCでも2列のまま、大きく表示する。

## 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-30669501`（元 LP の URL から採番）
- **元 LP**: https://cp.kirin.jp/story/34056
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。