--- 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/）からご連絡ください。