原色ネオンのクイズ番組風イベントLP

Retro Quiz Show Pop Event LP

ミント・朱・黄・青紫の原色を帯で切り替え、電飾ドット帯で区切る、クイズ番組のスタジオ風の体験型イベント LP。白いカードに黒の太い枠線と吹き出し形をあしらい、極太のディスプレイ書体で見出しを組む。

エンタメ・ゲーム・アプリポップ・元気力強い・インパクトレトロ情報量多め・訴求型PC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

セクションごとにミント・朱・黄の地色を入れ替え、同色を連続させない
セクション境界は青紫地にカラフルな丸を並べた電飾ドット帯で区切る
コンテンツは白カードにのせ、黒の太線で囲む
操作ボタンと STEP カードは青紫で統一する
黄はタイトル文字・ラベルのマーカーに限定する
地色にはノイズテクスチャを重ねる

TYPOGRAPHY

書体

displayFV のロゴ風タイトル装飾・ディスプレイ／ Dela Gothic One 400 ／ 36px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出し装飾・ディスプレイ／ Dela Gothic One 400 ／ 26px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdカード見出し・パネル内の見出しゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm特長カードの小見出しゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Noto Sans JP 500 ／ 13px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・サイズ表記ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

accentSTEP 番号・英字ラベル欧文サンセリフ／ Archivo Black 900 ／ 20px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタン文字ゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

セクション見出しは極太ディスプレイ書体で、中央揃えにする
FV の白い極太見出しには黒い影や縁取りをつける
本文は中央揃えの短い行を基本にし、長文だけ左揃えにする
STEP などの英字はワイドな欧文の極太書体で組む
強調は太字と色だけで行い、斜体は使わない

PAGE STRUCTURE

セクション構成

ファーストビュー番組の世界観とタイトルを提示する濃紺地。左にモザイク調のスタジオイラスト、右に極太のタイトルと短い掛け声を 3 行
コンセプト体験の概要を伝える青紫地に白の極太文字。星形装飾と、傾けた体験写真のコラージュ
ポイント魅力を 3 つ示すミント地。吹き出しカード 3 つにアイコンを入れ、その下に見出しと説明
動画紹介CM・コメント動画を見せる朱地に、傾けた黄色の台紙＋動画。白パネルに出演者のプロフィール
プレイ形式時間・場所・人数を示す黄地。吹き出しカード 3 つにアイコンと数値
ストーリー世界観への没入ミント地に左揃えの本文。周囲に吹き出しの線画、下に解答台のイラスト
お試しクイズ体験してもらい、興味を高める朱地。難易度ラベル、モザイク額のクイズボード、入力欄と青ボタン、ヒントのアコーディオン
参加方法流れを説明する黄地に青紫の STEP カードを縦に 4 枚
グッズ物販の紹介朱地に白い商品カードのグリッド
チケット情報販売日程・料金・会場を示すミント地にリングノートパネル。日程、タブ切替の料金表、会場リスト

COMPONENTS

部品

吹き出しカード speech-card白地・黒太枠・角丸で、下に尻尾がつく。中にアイコンや数値を置く
電飾ドット帯 marquee-divider青紫の帯にカラフルな丸を等間隔に並べ、セクションを区切る
白ピルボタン button-secondary白地に黒枠のピル型。右端に黒丸の矢印か＋をつける
青送信ボタン button-primary入力欄の右に並べる青紫の四角ボタン
STEPカード step-card青紫の四角。左に白丸のイラスト、右に英字の STEP 番号と説明を置く
商品カード goods-card白い角丸カード。上部は黄背景の商品画像で、右下に＋。下に名前・価格・説明
クイズボード quiz-boardカラフルなモザイクの額縁の中に白い問題面を置き、左右に送り矢印をつける
リングノートパネル notebook-panel上辺にリング、紙を重ねた影をつけた白パネル。チケット情報をまとめる
黄ラベル label-marker地域名などを黄地・細枠の小さなラベルで示す

守ること

地色はミント・朱・黄を交互に使う
セクション間には必ず電飾ドット帯を入れる
カードは黒い太枠とずらした影で、漫画のような立体感を出す
見出しの左右に星形や記号オブジェを置いてにぎやかにする
イラストは太い線画に原色の塗りで統一する

DON'T

避けること

淡いパステルや、くすんだ色を地色に使わない
ぼかしの柔らかい影を使わない
細い明朝体を見出しに使わない
テクスチャのない真っ平らなベタ面だけで組まない
白カードなしで地色に長文を直接置かない（短文は可）

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 原色ネオンのクイズ番組風イベントLP（Retro Quiz Show Pop Event LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: ポップ・元気、力強い・インパクト、レトロ、情報量多め・訴求型
キーワード: クイズ番組・電飾・原色ブロック・吹き出し・ザラ紙ノイズ・黒アウトライン
地の質感: 各色面に細かいノイズ粒子をのせ、印刷物のようなザラつきを出す
形: 角丸の白カード＋下向きの吹き出しの尻尾、星形バースト、立体の記号オブジェ
温度感: 高彩度でにぎやか、温度は高め

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#3A34FE`	ブランド青紫（帯・ボタン・STEPカード）	12%	画素の実測
`background`	`#44FEE9`	ミントの地色セクション	20%	画素の実測
`secondary`	`#FA5A2E`	朱オレンジの地色セクション	23%	画素の実測
`background-alt`	`#FDED23`	レモンイエローの地色セクション	10%	画素の実測
`surface`	`#FEFEFE`	白カード・情報パネル	17%	画素の実測
`text`	`#141516`	見出し・本文の黒	3%	画素の実測
`line`	`#111111`	カードの黒アウトライン	1%	推定
`dark-section`	`#001040`	ファーストビューの濃紺	3%	推定
`accent-1`	`#FEED20`	タイトルの黄色文字	1%	画素の主要色に補正
`cta`	`#3A34FE`	送信・選択中タブのボタン	1%	画素の実測
`on-cta`	`#FBFBFE`	青ボタン上の白文字	0%	画素の実測
`tint-1`	`#72FFC3`	料金表の見出しセルのミント	0%	画素の実測
`accent-2`	`#3A7BF0`	価格の青文字	0%	推定
`marker`	`#FBF55D`	地域ラベルの黄マーカー	0%	画素の実測

セクションごとにミント・朱・黄の地色を入れ替え、同色を連続させない
セクション境界は青紫地にカラフルな丸を並べた電飾ドット帯で区切る
コンテンツは白カードにのせ、黒の太線で囲む
操作ボタンと STEP カードは青紫で統一する
黄はタイトル文字・ラベルのマーカーに限定する
地色にはノイズテクスチャを重ねる

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV のロゴ風タイトル	装飾・ディスプレイ	Dela Gothic One	400	36px	1.2	0.0em
`headline-lg`	セクション見出し	装飾・ディスプレイ	Dela Gothic One	400	26px	1.3	0.08em
`headline-md`	カード見出し・パネル内の見出し	ゴシック	Noto Sans JP	700	18px	1.5	0.02em
`headline-sm`	特長カードの小見出し	ゴシック	Noto Sans JP	700	15px	1.5	0.0em
`body-md`	本文	ゴシック	Noto Sans JP	500	13px	1.8	0.02em
`note`	注釈・サイズ表記	ゴシック	Noto Sans JP	400	11px	1.6	0.0em
`accent`	STEP 番号・英字ラベル	欧文サンセリフ	Archivo Black	900	20px	1.1	0.05em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	13px	1.4	0.05em

セクション見出しは極太ディスプレイ書体で、中央揃えにする
FV の白い極太見出しには黒い影や縁取りをつける
本文は中央揃えの短い行を基本にし、長文だけ左揃えにする
STEP などの英字はワイドな欧文の極太書体で組む
強調は太字と色だけで行い、斜体は使わない
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。特長・形式のカードは SP で 1〜3 列のグリッド
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
各セクションは地色の帯＋中央の見出し＋白カードで組む
上下に電飾ドット帯（高さ約 24px）を挟む
装飾オブジェ（星形・記号）は見出し横の左右の余白に置く
情報が多い部分は、紙が重なったような大きな白パネルにまとめる

Elevation & Depth

カードはぼかしなしで右下にずらした黒い影（4px 程度）
チケットパネルは白紙を数枚ずらして重ね、紙束のように見せる
フラットな面とずらした影だけで奥行きを出し、ぼかしの影は使わない

Shapes

角丸: 小 4px ／中 16px ／大 24px。ボタンはピル型。
写真の切り抜き: 写真は傾けた矩形のコラージュ、商品は角丸カード内に正方形で配置
セクション境界: 直線の色切替＋電飾ドット帯
特長カードは角丸大＋下向きの吹き出しの尻尾
サブボタンは白地に黒枠のピル型で、右端に矢印か＋をつける
星形バーストを装飾に多用する
ラベルは吹き出し形の白い楕円にする

Components

吹き出しカード（speech-card）: 白地・黒太枠・角丸で、下に尻尾がつく。中にアイコンや数値を置く
電飾ドット帯（marquee-divider）: 青紫の帯にカラフルな丸を等間隔に並べ、セクションを区切る
白ピルボタン（button-secondary）: 白地に黒枠のピル型。右端に黒丸の矢印か＋をつける
青送信ボタン（button-primary）: 入力欄の右に並べる青紫の四角ボタン
STEPカード（step-card）: 青紫の四角。左に白丸のイラスト、右に英字の STEP 番号と説明を置く
商品カード（goods-card）: 白い角丸カード。上部は黄背景の商品画像で、右下に＋。下に名前・価格・説明
クイズボード（quiz-board）: カラフルなモザイクの額縁の中に白い問題面を置き、左右に送り矢印をつける
リングノートパネル（notebook-panel）: 上辺にリング、紙を重ねた影をつけた白パネル。チケット情報をまとめる
黄ラベル（label-marker）: 地域名などを黄地・細枠の小さなラベルで示す

Do's and Don'ts

Do - 地色はミント・朱・黄を交互に使う - セクション間には必ず電飾ドット帯を入れる - カードは黒い太枠とずらした影で、漫画のような立体感を出す - 見出しの左右に星形や記号オブジェを置いてにぎやかにする - イラストは太い線画に原色の塗りで統一する

Don't - 淡いパステルや、くすんだ色を地色に使わない - ぼかしの柔らかい影を使わない - 細い明朝体を見出しに使わない - テクスチャのない真っ平らなベタ面だけで組まない - 白カードなしで地色に長文を直接置かない（短文は可）

Page Structure

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

ファーストビュー（番組の世界観とタイトルを提示する）: 濃紺地。左にモザイク調のスタジオイラスト、右に極太のタイトルと短い掛け声を 3 行
コンセプト（体験の概要を伝える）: 青紫地に白の極太文字。星形装飾と、傾けた体験写真のコラージュ
ポイント（魅力を 3 つ示す）: ミント地。吹き出しカード 3 つにアイコンを入れ、その下に見出しと説明
動画紹介（CM・コメント動画を見せる）: 朱地に、傾けた黄色の台紙＋動画。白パネルに出演者のプロフィール
プレイ形式（時間・場所・人数を示す）: 黄地。吹き出しカード 3 つにアイコンと数値
ストーリー（世界観への没入）: ミント地に左揃えの本文。周囲に吹き出しの線画、下に解答台のイラスト
お試しクイズ（体験してもらい、興味を高める）: 朱地。難易度ラベル、モザイク額のクイズボード、入力欄と青ボタン、ヒントのアコーディオン
参加方法（流れを説明する）: 黄地に青紫の STEP カードを縦に 4 枚
グッズ（物販の紹介）: 朱地に白い商品カードのグリッド
チケット情報（販売日程・料金・会場を示す）: ミント地にリングノートパネル。日程、タブ切替の料金表、会場リスト

Imagery

イラストは太い黒線に原色ベタ塗りの、ポップでレトロなタッチ
FV はカラフルなモザイクタイルと電飾ライトで、スタジオを表現する
写真は参加者が楽しむ様子を少し傾けて並べ、コラージュにする
星形バースト、3D 風の記号（？！○×）を浮遊装飾として置く
地色すべてにノイズ粒子のテクスチャを重ねる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央約 60% 幅にコンテンツを置き、地色は全幅
SP では吹き出しカードの 3 列を、1 列か小さめの 3 列に組み直す
商品カードは PC 3 列 → SP 2 列
FV は SP ではイラストを上、タイトルを下に縦積みする
浮遊装飾は SP で縮小し、端に寄せる

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
version: alpha
name: Retro Quiz Show Pop Event LP
description: ミント・朱・黄・青紫の原色を帯で切り替え、電飾ドット帯で区切る、クイズ番組のスタジオ風の体験型イベント LP。白いカードに黒の太い枠線と吹き出し形をあしらい、極太のディスプレイ書体で見出しを組む。
colors:
  primary: '#3A34FE'
  background: '#44FEE9'
  secondary: '#FA5A2E'
  background-alt: '#FDED23'
  surface: '#FEFEFE'
  text: '#141516'
  line: '#111111'
  dark-section: '#001040'
  accent-1: '#FEED20'
  cta: '#3A34FE'
  on-cta: '#FBFBFE'
  tint-1: '#72FFC3'
  accent-2: '#3A7BF0'
  marker: '#FBF55D'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Archivo Black
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 16px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  speech-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 120px
  marquee-divider:
    backgroundColor: '{colors.primary}'
    height: 24px
  button-secondary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 36px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 44px
  step-card:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.accent}'
    height: 110px
  goods-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 300px
  quiz-board:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    rounded: '{rounded.sm}'
    height: 160px
  notebook-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 800px
  label-marker:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 20px
---

# DESIGN.md — 原色ネオンのクイズ番組風イベントLP（Retro Quiz Show Pop Event LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、レトロ、情報量多め・訴求型
- **キーワード**: クイズ番組・電飾・原色ブロック・吹き出し・ザラ紙ノイズ・黒アウトライン
- **地の質感**: 各色面に細かいノイズ粒子をのせ、印刷物のようなザラつきを出す
- **形**: 角丸の白カード＋下向きの吹き出しの尻尾、星形バースト、立体の記号オブジェ
- **温度感**: 高彩度でにぎやか、温度は高め

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#3A34FE` | ブランド青紫（帯・ボタン・STEPカード） | 12% | 画素の実測 |
| `background` | `#44FEE9` | ミントの地色セクション | 20% | 画素の実測 |
| `secondary` | `#FA5A2E` | 朱オレンジの地色セクション | 23% | 画素の実測 |
| `background-alt` | `#FDED23` | レモンイエローの地色セクション | 10% | 画素の実測 |
| `surface` | `#FEFEFE` | 白カード・情報パネル | 17% | 画素の実測 |
| `text` | `#141516` | 見出し・本文の黒 | 3% | 画素の実測 |
| `line` | `#111111` | カードの黒アウトライン | 1% | 推定 |
| `dark-section` | `#001040` | ファーストビューの濃紺 | 3% | 推定 |
| `accent-1` | `#FEED20` | タイトルの黄色文字 | 1% | 画素の主要色に補正 |
| `cta` | `#3A34FE` | 送信・選択中タブのボタン | 1% | 画素の実測 |
| `on-cta` | `#FBFBFE` | 青ボタン上の白文字 | 0% | 画素の実測 |
| `tint-1` | `#72FFC3` | 料金表の見出しセルのミント | 0% | 画素の実測 |
| `accent-2` | `#3A7BF0` | 価格の青文字 | 0% | 推定 |
| `marker` | `#FBF55D` | 地域ラベルの黄マーカー | 0% | 画素の実測 |

- セクションごとにミント・朱・黄の地色を入れ替え、同色を連続させない
- セクション境界は青紫地にカラフルな丸を並べた電飾ドット帯で区切る
- コンテンツは白カードにのせ、黒の太線で囲む
- 操作ボタンと STEP カードは青紫で統一する
- 黄はタイトル文字・ラベルのマーカーに限定する
- 地色にはノイズテクスチャを重ねる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV のロゴ風タイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.2 | 0.0em |
| `headline-lg` | セクション見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 26px | 1.3 | 0.08em |
| `headline-md` | カード見出し・パネル内の見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em |
| `headline-sm` | 特長カードの小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.0em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.02em |
| `note` | 注釈・サイズ表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em |
| `accent` | STEP 番号・英字ラベル | 欧文サンセリフ | Archivo Black | 900 | 20px | 1.1 | 0.05em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em |

- セクション見出しは極太ディスプレイ書体で、中央揃えにする
- FV の白い極太見出しには黒い影や縁取りをつける
- 本文は中央揃えの短い行を基本にし、長文だけ左揃えにする
- STEP などの英字はワイドな欧文の極太書体で組む
- 強調は太字と色だけで行い、斜体は使わない
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。特長・形式のカードは SP で 1〜3 列のグリッド
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- 各セクションは地色の帯＋中央の見出し＋白カードで組む
- 上下に電飾ドット帯（高さ約 24px）を挟む
- 装飾オブジェ（星形・記号）は見出し横の左右の余白に置く
- 情報が多い部分は、紙が重なったような大きな白パネルにまとめる

## Elevation & Depth

- カードはぼかしなしで右下にずらした黒い影（4px 程度）
- チケットパネルは白紙を数枚ずらして重ね、紙束のように見せる
- フラットな面とずらした影だけで奥行きを出し、ぼかしの影は使わない

## Shapes

- **角丸**: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 写真は傾けた矩形のコラージュ、商品は角丸カード内に正方形で配置
- **セクション境界**: 直線の色切替＋電飾ドット帯
- 特長カードは角丸大＋下向きの吹き出しの尻尾
- サブボタンは白地に黒枠のピル型で、右端に矢印か＋をつける
- 星形バーストを装飾に多用する
- ラベルは吹き出し形の白い楕円にする

## Components

- **吹き出しカード**（`speech-card`）: 白地・黒太枠・角丸で、下に尻尾がつく。中にアイコンや数値を置く
- **電飾ドット帯**（`marquee-divider`）: 青紫の帯にカラフルな丸を等間隔に並べ、セクションを区切る
- **白ピルボタン**（`button-secondary`）: 白地に黒枠のピル型。右端に黒丸の矢印か＋をつける
- **青送信ボタン**（`button-primary`）: 入力欄の右に並べる青紫の四角ボタン
- **STEPカード**（`step-card`）: 青紫の四角。左に白丸のイラスト、右に英字の STEP 番号と説明を置く
- **商品カード**（`goods-card`）: 白い角丸カード。上部は黄背景の商品画像で、右下に＋。下に名前・価格・説明
- **クイズボード**（`quiz-board`）: カラフルなモザイクの額縁の中に白い問題面を置き、左右に送り矢印をつける
- **リングノートパネル**（`notebook-panel`）: 上辺にリング、紙を重ねた影をつけた白パネル。チケット情報をまとめる
- **黄ラベル**（`label-marker`）: 地域名などを黄地・細枠の小さなラベルで示す

## Do's and Don'ts

**Do**
- 地色はミント・朱・黄を交互に使う
- セクション間には必ず電飾ドット帯を入れる
- カードは黒い太枠とずらした影で、漫画のような立体感を出す
- 見出しの左右に星形や記号オブジェを置いてにぎやかにする
- イラストは太い線画に原色の塗りで統一する

**Don't**
- 淡いパステルや、くすんだ色を地色に使わない
- ぼかしの柔らかい影を使わない
- 細い明朝体を見出しに使わない
- テクスチャのない真っ平らなベタ面だけで組まない
- 白カードなしで地色に長文を直接置かない（短文は可）

## Page Structure

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

1. **ファーストビュー**（番組の世界観とタイトルを提示する）: 濃紺地。左にモザイク調のスタジオイラスト、右に極太のタイトルと短い掛け声を 3 行
2. **コンセプト**（体験の概要を伝える）: 青紫地に白の極太文字。星形装飾と、傾けた体験写真のコラージュ
3. **ポイント**（魅力を 3 つ示す）: ミント地。吹き出しカード 3 つにアイコンを入れ、その下に見出しと説明
4. **動画紹介**（CM・コメント動画を見せる）: 朱地に、傾けた黄色の台紙＋動画。白パネルに出演者のプロフィール
5. **プレイ形式**（時間・場所・人数を示す）: 黄地。吹き出しカード 3 つにアイコンと数値
6. **ストーリー**（世界観への没入）: ミント地に左揃えの本文。周囲に吹き出しの線画、下に解答台のイラスト
7. **お試しクイズ**（体験してもらい、興味を高める）: 朱地。難易度ラベル、モザイク額のクイズボード、入力欄と青ボタン、ヒントのアコーディオン
8. **参加方法**（流れを説明する）: 黄地に青紫の STEP カードを縦に 4 枚
9. **グッズ**（物販の紹介）: 朱地に白い商品カードのグリッド
10. **チケット情報**（販売日程・料金・会場を示す）: ミント地にリングノートパネル。日程、タブ切替の料金表、会場リスト

## Imagery

- イラストは太い黒線に原色ベタ塗りの、ポップでレトロなタッチ
- FV はカラフルなモザイクタイルと電飾ライトで、スタジオを表現する
- 写真は参加者が楽しむ様子を少し傾けて並べ、コラージュにする
- 星形バースト、3D 風の記号（？！○×）を浮遊装飾として置く
- 地色すべてにノイズ粒子のテクスチャを重ねる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央約 60% 幅にコンテンツを置き、地色は全幅
- SP では吹き出しカードの 3 列を、1 列か小さめの 3 列に組み直す
- 商品カードは PC 3 列 → SP 2 列
- FV は SP ではイラストを上、タイトルを下に縦積みする
- 浮遊装飾は 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-ad54a621`（元 LP の URL から採番）
- **元 LP**: https://realdgame.jp/s/urawaza_quiz/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://realdgame.jp/s/urawaza_quiz/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP