---
version: alpha
name: Bubbly Yellow Beer Highball Campaign LP
description: ハイボールの泡を思わせる黄色の泡粒テクスチャを全面に敷き、極太ゴシックの黒見出しと赤の強調文字で押し出す酒類のSNS・イベントキャンペーンLP。白帯の見出しと黒ラベルの日付タグ、日本地図に引き出し線を付けた会場マップが特徴。
colors:
  primary: '#FFE141'
  background: '#FEE46B'
  background-alt: '#FDF7E2'
  surface: '#FFFFFF'
  text: '#1A1510'
  accent-1: '#E0261B'
  dark-section: '#020101'
  on-dark: '#FFFFFF'
  accent-2: '#C4773A'
  secondary: '#763C1C'
  line: '#0D0A07'
  cta: '#FFFFFF'
  on-cta: '#211F19'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.2
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 900
    lineHeight: 1.3
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 2.0
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.7
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  heading-band-white:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 44px
  announce-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 100px
  heading-red:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    height: 30px
  button-outline:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 28px
  venue-tag:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 60px
  date-label:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 22px
  info-block:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 60px
---

# DESIGN.md — 泡粒イエロー×赤文字の酒類キャンペーンLP（Bubbly Yellow Beer Highball Campaign LP）

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

## Overview

- **業種**: 酒類 ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型
- **キーワード**: 泡粒テクスチャ・ビビッドイエロー・極太ゴシック・赤の強調・黒ラベル・お祭り感
- **地の質感**: 黄色地に大小の泡（気泡）が散るハイボール風テクスチャ。下に行くほど淡く白っぽいグラデーション。
- **形**: 角丸はほぼ無し。四角い帯・白箱・黒ラベルで区切るシャープな構成。
- **温度感**: 暖色寄りで明るく、にぎやかで賑わいのある温度感。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#FFE141` | ブランドイエロー（帯・マップ地） | 24% | 画素の実測 |
| `background` | `#FEE46B` | 泡粒テクスチャの淡黄地 | 30% | 画素の実測 |
| `background-alt` | `#FDF7E2` | 下部の淡いクリーム地 | 9% | 画素の主要色に補正 |
| `surface` | `#FFFFFF` | 見出し白帯・会場名ボックス | 6% | 推定 |
| `text` | `#1A1510` | 極太見出し・本文の黒 | 4% | 画素の主要色に補正 |
| `accent-1` | `#E0261B` | 赤の強調見出し・キーワード | 1% | 推定 |
| `dark-section` | `#020101` | 日付の黒ラベル | 2% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 黒ラベル上の白文字 | 0% | 推定 |
| `accent-2` | `#C4773A` | 揚げ物の焼き色オレンジ | 5% | 画素の主要色に補正 |
| `secondary` | `#763C1C` | ウイスキーの琥珀ブラウン | 3% | 画素の主要色に補正 |
| `line` | `#0D0A07` | マップ引き出し線・ボタン枠 | 0% | 画素の実測 |
| `cta` | `#FFFFFF` | 要項ボタンの白地 | 0% | 推定 |
| `on-cta` | `#211F19` | 要項ボタン文字 | 0% | 画素の実測 |

- 地は黄色の泡粒テクスチャで統一し、セクションごとに上が濃く下が淡いグラデーションを繰り返す。
- セクション見出し・告知帯は濃いベタ黄#FFE141か白帯で区切る。
- 赤は見出しの一部や小見出しなど強調のみに使い、面には使わない。
- 日付・期間は黒ラベルに白文字で固定する。
- 写真の焼き色・琥珀色が差し色になるので、追加の色は足さない。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVキャッチ・大見出し | ゴシック | Dela Gothic One | 900 | 34px | 1.2 | 0.0em |
| `headline-lg` | 告知帯の見出し・欧文CONTENTS | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0.02em |
| `headline-md` | コンテンツ別の赤小見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.4 | 0.02em |
| `headline-sm` | 白帯見出し・会場名 | ゴシック | Noto Sans JP | 900 | 17px | 1.3 | 0.0em |
| `body-md` | 中央揃えの説明文 | ゴシック | Noto Sans JP | 700 | 13px | 2.0 | 0.03em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 700 | 10px | 1.7 | 0.0em |
| `label-button` | 日付ラベル・ボタン文字 | ゴシック | Noto Sans JP | 700 | 10px | 1.3 | 0.02em |

- 全編太字ゴシックで、細いウェイトは使わない。
- 本文も700の太字で中央揃え、行間は広め。
- 見出しは一部の語だけ赤にして強調する。
- 数字や日付は本文中でも太字で目立たせる。
- 明朝・手書き体は使わない。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム中央揃え
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
- 各コンテンツは見出し→説明文→写真の順で縦に並べる。
- コンテンツ間は白い細線で区切り、背景グラデーションを再スタートする。
- 商品・料理写真は横に4点並べる小さな切り抜きで。
- マップは画面幅いっぱいの黄地に配置する。

## Elevation & Depth

- 影はほぼ使わず、フラットな面で構成する。
- 切り抜き写真のみ軽い落ち影で浮かせる程度。

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 人物・料理・商品は背景を抜いた切り抜き、イベント写真は全幅の矩形。
- **セクション境界**: 直線の水平帯と白い細線で区切る。
- ボタンは四角で細い黒枠＋右向き矢印。
- 会場名は白い矩形＋下に黒ラベルを接続した2段ボックス。
- 角丸は使わない。

## Components

- **白帯見出し**（`heading-band-white`）: 画面幅いっぱいの白帯に黒の極太見出しを置く。
- **告知帯**（`announce-band`）: ベタ黄の帯に2行の大見出し、一部を赤に。下に注釈。
- **赤小見出し**（`heading-red`）: 各コンテンツ冒頭の赤い太字見出し。装飾なし中央揃え。
- **要項ボタン**（`button-outline`）: 白地に黒細枠、文字と右矢印。小さめ。
- **会場タグ**（`venue-tag`）: 白箱の会場名＋黒ラベルの期間、引き出し線で地図上の赤点と結ぶ。
- **日付ラベル**（`date-label`）: 黒地に白文字で期間を▶で繋いで表記。
- **応募情報ブロック**（`info-block`）: 赤い小見出し＋黒太字本文を中央揃えで縦に積む。手順は▼で繋ぐ。

## Do's and Don'ts

**Do**
- 泡粒テクスチャの黄色地をページ全体の基調にする。
- 見出しは極太ゴシックで大きく、キーワードを赤に。
- 期間・日付は黒ラベルで統一する。
- 切り抜き写真を左右対称に配置して賑やかさを出す。
- ※注釈は小さく本文直下に必ず添える。

**Don't**
- 寒色や淡いパステルを主役にしない。
- 角丸カードやピル型ボタンを使わない。
- 細字・明朝体で上品にまとめない。
- 赤を広い面に塗らない。
- 余白を空けすぎて静かな印象にしない。

## Page Structure

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

1. **ファーストビュー**（ブランドと季節の気分を一目で伝える）: 人物と大ジョッキの写真に極太縦組み風キャッチ、右下に黄色の実績ボックス。
2. **キャンペーン見出し**（SNS投稿キャンペーンを宣言）: 白帯に黒極太見出し。
3. **応募概要**（期間・方法・賞品を伝える）: 泡粒黄地に赤小見出し＋中央揃え本文、賞品の切り抜き写真、要項ボタン。
4. **イベント告知**（全国イベント開催を告知）: ベタ黄帯に2行大見出し、一部赤。
5. **イベントビジュアル**（体験の楽しさを見せる）: 全幅の集合写真、下部に暗いグラデーションと白太字コピー。
6. **コンテンツ目次**（企画内容の導入）: 黒の欧文極太見出し＋注釈。
7. **企画紹介（複数）**（メニュー・体験・特典を個別紹介）: 赤小見出し＋本文＋切り抜き写真を白線区切りで3つ繰り返す。
8. **会場マップ**（開催地と期間を一覧）: 白帯見出しの下、ベタ黄地に白い日本地図、会場タグを引き出し線で配置、末尾に注釈。

## Imagery

- 料理・グラス・商品は背景を抜いた切り抜きで、明るく照らし艶を出す。
- 人物は笑顔で商品を持つ明るいポートレート。
- イベント写真は暖色照明の居酒屋・横丁で大人数がわいわい乾杯する構図。
- 着ぐるみ等のユーモアのある小道具で親しみを足す。
- 背景は黄色地に白い泡粒を散らしたハイボール風テクスチャ。
- 地図は白ベタのシルエットに細い黄色の県境線、赤い点で地点表示。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央に約980px幅のコンテンツ、FV左右に巨大な縦組み極太文字を配置。
- PCでは告知帯の見出しを1行にまとめる。
- 企画紹介は本文中央、左右に写真を振り分ける3カラム的配置。
- マップは横長にし会場タグを地図の左右に分散配置。
- SPでは写真を本文下に並べ、地図を縦長に拡大。

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