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