---
version: alpha
name: Vivid Pop Anniversary Campaign LP
description: 原色を使ったにぎやかなテーマパーク風のタイアップキャンペーンLPです。紺・黄・赤・水色・緑のセクションを斜めの境界でつなぎ、白いピル型の英字見出し枠と、紺地に黄色い影を付けた立体ボタンで統一しています。
colors:
  primary: '#162A75'
  secondary: '#FECD02'
  accent-1: '#D13C26'
  accent-2: '#05C4F8'
  accent-3: '#03A679'
  tint-1: '#FEADDA'
  marker: '#FF3AA4'
  tint-2: '#FFA6A5'
  background: '#FFFFFF'
  surface: '#FFFFFF'
  text-body: '#2B2B2B'
  cta: '#152A75'
  on-cta: '#F8FEFE'
  dark-section: '#172A76'
  on-dark: '#F1F5F9'
  accent-3-accessible: '#02805E'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.3
  headline-lg:
    fontFamily: Montserrat
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1.35
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Montserrat
    fontSize: 16px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.02em
rounded:
  sm: 6px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 52px
  nav-grid-button:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 52px
  section-title-pill:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 60px
  news-ribbon:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 90px
  benefit-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 540px
  tab-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 800px
  speech-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 120px
  badge-burst:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 60px
  info-card-outline:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 120px
---

# DESIGN.md — 紺×黄×原色ポップの周年タイアップLP（Vivid Pop Anniversary Campaign LP）

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

## Overview

- **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型
- **キーワード**: 原色マルチカラー・斜めのセクション境界・ピル型の英字見出し・影付きの立体ボタン・ドット・ストライプ柄の地・お祭り感
- **地の質感**: ベタ塗りの原色が中心です。地には薄いドット、斜めストライプ、放射状の稲妻柄を重ねます。グラデーションは使いません。
- **形**: 斜めに切ったセクション境界、角丸カード、ピル型の枠、平行四辺形のニュース帯、吹き出し、ギザギザのバッジを使います。
- **温度感**: 高彩度で暖色寄りです。紺で全体を引き締めます。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#162A75` | ナビボタンや見出し文字に使うブランドの紺 | 6% | 画素の実測 |
| `secondary` | `#FECD02` | ファーストビュー下と宿泊セクションの黄色の地 | 12% | 画素の実測 |
| `accent-1` | `#D13C26` | キャンペーンセクションの朱赤の地、見出しの強調文字 | 8% | 画素の実測 |
| `accent-2` | `#05C4F8` | 年表セクションの水色の地 | 7% | 画素の実測 |
| `accent-3` | `#03A679` | フッター前の案内セクションの緑の地 | 6% | 画素の実測 |
| `tint-1` | `#FEADDA` | 特典カードのピンクの地 | 5% | 画素の実測 |
| `marker` | `#FF3AA4` | 特典カード下部の詳細帯に使うビビッドピンク | 1% | 画素の実測 |
| `tint-2` | `#FFA6A5` | キャンペーンカードのサーモンピンクの地 | 2% | 画素の実測 |
| `background` | `#FFFFFF` | ドット柄を敷く淡いグレーの基本の地 | 20% | 画素の実測 |
| `surface` | `#FFFFFF` | 見出し枠・タブ・カードに使う白 | 10% | 画素の主要色に補正 |
| `text-body` | `#2B2B2B` | 本文とカードタイトルのダークグレー | 1% | 推定 |
| `cta` | `#152A75` | 主ボタンの紺 | 2% | 画素の実測 |
| `on-cta` | `#F8FEFE` | ボタン上の白文字 | 0% | 画素の実測 |
| `dark-section` | `#172A76` | 動画セクションとカード案内セクションの紺の地 | 11% | 画素の実測 |
| `on-dark` | `#F1F5F9` | 紺地の上の白文字 | 0% | 画素の実測 |
| `accent-3-accessible` | `#02805E` | AA を満たす補正値（計算） |  | 計算 |

- セクションごとに地の色を変えます。黄→淡グレー→赤→紺→淡グレー→黄→水色→淡グレー→紺→緑の順に並べます。
- セクションの境界は斜めに切ります。境界には隣のセクションとは別の原色で細い帯を差し込みます。
- ボタンはすべて紺の地に白文字とし、下に黄やオレンジのベタ影を付けます。
- 見出しのピル枠は白で塗ります。英字は1見出しにつき1色の原色にし、枠線も同系色にします。
- カードは淡いピンクやサーモンなどの淡色で塗ります。下部の帯は同じ色相の濃い色にして、詳細リンクを置きます。
- 紺地では、見出しを朱赤、本文を白にします。
- `news-ribbon` は文字 `#F1F5F9` × 背景 `#03A679` のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#02805E`、4.51:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの日本語キャッチコピー（太い丸みのある書体に縁取りを付ける） | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.3 | 0em |
| `headline-lg` | ピル枠に入れる英字のセクション見出し | 欧文サンセリフ | Montserrat | 900 | 34px | 1.1 | 0.02em |
| `headline-md` | 紺地や緑地に置く日本語の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.35 | 0.02em |
| `headline-sm` | カードのタイトル | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em |
| `body-lg` | 見出し下のリード文（中央揃え） | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.03em |
| `body-md` | カード本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.04em |
| `note` | 注釈・期間・権利表記 | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.02em |
| `label-button` | ナビボタンとCTAのラベル（英字は Montserrat の極太） | 欧文サンセリフ | Montserrat | 800 | 16px | 1.2 | 0.02em |

- セクション見出しは英字の大文字のみで組み、白いピル枠に入れます。
- キャッチコピーでは、数字や重要語を別の原色で大きくし、白の縁取りを付けます。
- 小さな言葉は白い吹き出しや白い平行四辺形の帯に入れて、傾けて配置します。
- リード文は太字で中央揃えにし、2行以内に収めます。
- 本文は左揃えの細めのゴシックにし、カードの中だけで使います。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラムです。ナビボタンだけ 2 列グリッドにします。年表と天気は横スクロールのカルーセルにします。
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
- 各セクションは、ピル見出し→リード文→コンテンツ→ボタンの順に、中央揃えで縦に積みます。
- カードは左右16px程度の余白を取り、幅いっぱいに置きます。
- セクションの上下には斜め境界のための余白を40px以上取ります。
- 主ボタンは幅85%ほどにして中央に置き、複数あるときは縦に並べます。
- カルーセルは次のカードが少し見える幅にします。下にプログレスバーと丸い矢印ボタンを置きます。

## Elevation & Depth

- ボタンとカードには、ぼかしのないベタ影を下方向に4〜6px付けます（黄・オレンジ・水色）。
- ぼかした影はほとんど使わず、平面的な重なりで立体感を出します。
- バッジやイラストはカードの角からはみ出させて重ねます。

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
- **写真の切り抜き**: カード内の写真は角丸なしの長方形で、幅いっぱいに切り抜きます。大きな写真は白い太枠と角丸で囲みます。
- **セクション境界**: 斜めの直線で切ります。境界に別色の細い三角の帯を挟みます。
- 主ボタンは角丸8px程度の長方形にし、下にベタ影を付けます。
- 見出し枠は完全なピル型で、白の地に色付きの細い二重枠線を引きます。
- ニュース項目は右端を斜めに切った平行四辺形の帯にします。
- 回数や年号は星形・ギザギザのバッジや吹き出しに入れます。
- スクロールやページトップ用のボタンは、紺の正円にします。

## Components

- **立体CTAボタン**（`button-primary`）: 紺の地に白い太字のラベルを置き、右に白丸のアイコンを付けます。下に黄色のベタ影を付けます。
- **ページ内ナビボタン**（`nav-grid-button`）: 英字ラベルと白丸の下向き矢印を入れ、2列に並べます。紺の地にオレンジの影を付けます。
- **ピル型英字見出し**（`section-title-pill`）: 白いピル枠の中に極太の英字を置きます。文字色と枠線はセクションごとに原色を変えます。
- **斜め帯ニュース**（`news-ribbon`）: オレンジの平行四辺形の帯に、日付と見出しを2段で置きます。右端に紺の丸矢印を付けます。
- **特典カード**（`benefit-card`）: 淡いピンクの角丸カードです。写真、太字タイトル、本文の順に置き、下部に濃いピンクの帯で詳細リンクを付けます。
- **タブ切替パネル**（`tab-panel`）: 白い選択中タブと紺の非選択タブを並べ、その下に白いパネルとカードを置きます。
- **吹き出し見出し**（`speech-heading`）: 大見出しの下に白い線の吹き出しを引き、中央に小さなしっぽを付けます。
- **ギザギザバッジ**（`badge-burst`）: 星形の青いバッジに縁取りした白文字を入れ、回数や年号を示します。カードの角に重ねます。
- **枠線情報カード**（`info-card-outline`）: 白の地に紺の2px枠線を引いた角丸カードです。数値は赤と青で強調します。

## Do's and Don'ts

**Do**
- セクションごとに地の原色を変え、境界は必ず斜めに切ります。
- 見出しはすべて同じ形式の白いピル枠にそろえます。
- ボタンには必ずぼかしのないベタ影を付けて立体感を出します。
- 地にはドット・ストライプ・稲妻の柄を薄く敷き、にぎやかさを出します。
- キラキラや紙吹雪の小さな装飾を余白に散らします。

**Don't**
- くすんだ色や低彩度のパステルだけで構成しないでください。
- ぼかした影やグラデーションを多用しないでください。
- セクション境界を水平の直線だけで区切らないでください。
- 明朝体や細いウェイトを見出しに使わないでください。
- ボタンの色をセクションごとに変えないでください（紺で統一します）。

## Page Structure

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

1. **ヘッダー**（運営元を明示する）: 青のグラデーション帯の左上にロゴを置きます。
2. **ファーストビュー**（周年のお祭り感を一目で伝える）: 原色の雲・炎・稲妻を敷き詰めたイラストの中央にロゴを置きます。下に水色の帯を敷き、2社のロゴを×でつなぎます。
3. **キャッチとページ内ナビ**（テーマを伝え、各セクションへ誘導する）: 黄色の地に放射状の稲妻を敷きます。縁取りした多色のキャッチを置き、その下に紺のナビボタンを2列で並べます。
4. **お知らせ**（最新情報を伝える）: ドット柄の地に、オレンジの斜め帯ニュースを縦に積みます。
5. **キャンペーン**（開催中の企画へ誘導する）: 赤の地に白いタブパネルを置き、サーモンピンクのカードにバッジを重ねます。
6. **動画**（企画の雰囲気を動画で伝える）: 紺の地に16:9の動画枠を置き、回転する文字の再生ボタンを重ねます。
7. **特典紹介**（会員が受けられる特典を示す）: 背景に巨大な英字のアウトラインを敷き、ピンクの特典カードを縦に並べます。
8. **宿泊プラン**（宿泊の予約へ誘導する）: 黄色の稲妻柄の地に、白枠付きの大きな写真を置きます。その下に紺のCTAを2つ縦に並べます。
9. **年表**（提携の歴史を見せる）: 水色のストライプの地に、年号バッジ付きのカードを横スクロールで並べます。
10. **天気情報**（来場前の実用情報を出す）: 枠線カードを横スクロールで並べ、下に紺のボタンを置きます。
11. **会員獲得CTA**（非会員を入会へ誘導する）: 紺の地に吹き出し見出しを置きます。使える場面を3つのアイコンカードで示し、最後に白の大ボタンを置きます。
12. **外部案内とフッター**（公式サイトへ案内し、権利を表記する）: 緑のドット柄の地に黄色の英字見出しと白いリンクカードを置き、権利表記を続けます。最下部は黒のフッターにし、ページトップへ戻る丸ボタンを置きます。

## Imagery

- メインビジュアルは、原色の雲・炎・稲妻・星を隙間なく敷き詰めたフラットなイラストにします。
- 背景は、薄いドット、斜めストライプ、放射状の稲妻を単色の濃淡で描きます。
- キラキラ、紙吹雪、コウモリなどの小さなイラストを、カードや見出しの周りに散らします。
- 施設の写真は明るい室内や夕景の建物を正面から撮り、白枠で囲みます。
- アイコンは紺の線画にし、黄色の小さな星を添えます。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では本文幅を約900pxで中央に寄せます。セクションの背景は画面幅いっぱいに広げます。
- PC ではナビボタンを4列＋3列の横並びにし、小さめにします。
- PC では特典カードを3列のグリッドにします。
- PC では天気カードを3つ横に並べ、年表のカルーセルは左右にはみ出させます。
- PC のニュース帯はスクロール領域の中に収めます。

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