--- version: alpha name: Chaotic Night Party Card Game LP description: ざらついた質感の朱色と真っ黒の帯を交互に重ねたパーティーカードゲームの LP。太い極太ゴシック、黄色のマーカー強調、手描きのコミック風イラスト、ギザギザの吹き出しで、夜の飲み会のにぎやかさを出している。黄色グラデーションの太いピル型 CTA を何度も繰り返す。 colors: primary: '#E64201' dark-section: '#000000' background: '#FFF6EF' cta: '#FEDD72' on-cta: '#110500' on-dark: '#FBFEFC' marker: '#FEDD72' accent-1: '#E5007F' accent-2: '#00A0E8' secondary: '#D56013' surface: '#FFFFFF' text: '#030102' surface-dark: '#262632' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.25 headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.04em accent: fontFamily: DotGothic16 fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 6px md: 12px lg: 20px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px spec-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 34px brush-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 80px scene-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 400px step-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px character-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 560px burst-bubble: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 120px release-box: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 46px --- # DESIGN.md — 朱色×黒のコミック調パーティーゲーム LP（Chaotic Night Party Card Game LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 夜の飲み会・カオス・コミック調・朱色と黒・ギザギザ吹き出し・黄色マーカー - **地の質感**: 朱色の地は紙のような細かいノイズ入り。黒は質感なしのベタ塗りで、墨をかすらせた帯を見出しの下地に使う。 - **形**: 角丸カード、太いピル型ボタン、ギザギザの爆発形、雲形の切り抜き、斜めに傾けた見出し帯。 - **温度感**: 暖色寄りで高い熱量。黒で夜っぽさを締める。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E64201` | ブランドの朱色地 | 30% | 画素の実測 | | `dark-section` | `#000000` | 黒い夜のセクション地 | 30% | 画素の実測 | | `background` | `#FFF6EF` | クリームの体験セクション地 | 12% | 画素の実測 | | `cta` | `#FEDD72` | CTA の黄色グラデーション | 2% | 画素の主要色に補正 | | `on-cta` | `#110500` | CTA 上の黒文字と縁 | 0% | 画素の実測 | | `on-dark` | `#FBFEFC` | 黒地・朱地の白文字 | 3% | 画素の実測 | | `marker` | `#FEDD72` | 見出しの黄色強調文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#E5007F` | マゼンタの爆発装飾 | 1% | 画素の実測 | | `accent-2` | `#00A0E8` | シアンの爆発装飾 | 1% | 画素の実測 | | `secondary` | `#D56013` | 遊び方セクションの焦げオレンジ地 | 6% | 画素の実測 | | `surface` | `#FFFFFF` | 白いカード面 | 6% | 画素の実測 | | `text` | `#030102` | 白地の濃い本文 | 1% | 画素の実測 | | `surface-dark` | `#262632` | | | 画素の主要色に補正 | - 地は朱色・黒・クリームの 3 種を交互に並べ、セクションの切り替えをはっきり見せる。 - 見出しの強調語は黄色、締めの一語はピンクにする。 - CTA は黄色グラデーションに黒い縁と下側の黒い影をつけ、どの地の上でも同じ見た目にする。 - マゼンタ・シアン・黄・緑の爆発形は装飾だけに使う。文字色には使わない。 - 黒地の本文は白、白カードの本文は濃いグレーにする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ（白黒の縁取り＋黄・ピンクの強調） | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.25 | 0.0em | | `headline-lg` | セクション見出し（白地に置くときは中央揃え） | ゴシック | Noto Sans JP | 900 | 24px | 1.5 | 0.05em | | `headline-md` | かすれた黒帯の上に置く傾き見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 28px | 1.3 | 0.0em | | `headline-sm` | 理由やシーンの小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.08em | | `body-md` | 本文・カードの説明 | ゴシック | Noto Sans JP | 500 | 13px | 1.7 | 0.04em | | `accent` | カードの名前ラベル（レトロな角ゴシック） | 装飾・ディスプレイ | DotGothic16 | 400 | 28px | 1.2 | 0.1em | | `label-button` | CTA の文字 | ゴシック | Noto Sans JP | 900 | 17px | 1.2 | 0.03em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | - キャッチは極太で、白文字に黒い太縁と影をつけた立体的な文字にする。 - 強調する一語だけ文字を大きくして黄色に変える。 - セクション見出しは 2 行に改行し、中央揃えにする。 - 説明文は短い行で区切り、左揃えか中央揃えにする。 - 数字（人数・枚数・時間）は朱色の極太で大きく見せる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。遊び方セクションだけ 2 カラムのステップカードにする。 - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションの上下に 56〜72px の余白を取る。 - 写真は左右 8% の余白を空けて置く。 - カードを縦に並べるときは間を 24px 空ける。 - CTA は幅 85% で中央に置く。 - 見出しと本文の間は 24px 空ける。 ## Elevation & Depth - CTA は下に 4px ずらした黒いベタ影をつけ、ぼかさない。 - 白カードは下側に焦げ茶の影を 4px だけつける。 - ぼかした柔らかい影は使わない。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 写真は四角形か、角丸カードに収める。体験セクションの写真は雲形・ギザギザ形で切り抜く。 - **セクション境界**: 直線で地の色を切り替える。境界に爆発形の装飾をはみ出して重ねる。 - 見出しの帯はかすれた筆跡の黒帯を斜めに傾ける。 - スペックは黒地に白文字の角丸バッジにし、アイコンを添える。 - カードのイラスト枠は、角丸の黒フレームの外側にカラフルな雲形の縁を巡らせる。 ## Components - **黄色ピル CTA**（`button-primary`）: 黄色グラデーションに黒縁と黒いベタ影。左に販売先のロゴ、右に矢印を置く。 - **スペックバッジ**（`spec-badge`）: 黒地に白縁の角丸ボックス。人数・時間・年齢をアイコン付きで 3 つ横に並べる。 - **筆帯見出し**（`brush-heading`）: かすれた黒帯の上に白抜きの極太文字を置き、強調語を黄色にする。星や稲妻の装飾を添える。 - **シーンカード**（`scene-card`）: 白い角丸カードの上部に写真、下に太字の見出しと短い説明を置く。 - **ステップカード**（`step-card`）: 黒い角丸のカードに STEP 番号を黄色で大きく入れ、手順のイラストと説明を添える。 - **キャラクターカード**（`character-card`）: 左上に名前タブ、右上にセリフ帯、中央にイラスト、下に黒い効果説明枠を置く。外枠はカラフルな雲形の縁。 - **爆発吹き出し**（`burst-bubble`）: 黄色のギザギザ形に黒文字で警告や強調を入れ、カードの角に重ねる。 - **発売日枠**（`release-box`）: 線だけの四角い枠に発売日を入れる。黒地では朱色の線と文字にする。 ## Do's and Don'ts **Do** - 朱色と黒のセクションを交互に並べ、リズムを作る。 - CTA はページ内で 3 回以上、同じデザインで繰り返す。 - 強調語は黄色の極太文字にして大きくする。 - 爆発形や星・稲妻の装飾を見出しの周りに散らす。 - 人物は太い線と鮮やかな影色のコミック調で描く。 **Don't** - 淡いパステル調やくすんだ色だけでまとめない。 - 細い明朝体や細いゴシックを見出しに使わない。 - ぼかした柔らかい影や、ガラス風の表現を使わない。 - CTA の色を地の色に合わせて変えない。 - 余白を広く取りすぎて静かな印象にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と発売日を一目で伝える）: 朱色の地にロゴ、群像イラスト、商品パッケージ、極太キャッチを置く。下にスペックバッジ 3 つと CTA を並べる。 2. **世界観紹介**（ゲームの舞台となるシーンを見せる）: 黒帯の見出しの下に、コマ割りのイラストを斜めに区切って並べる。各コマに小さなラベルを付ける。 3. **中間 CTA**（挑発的な問いかけで購入を促す）: パッケージ画像の下に筆帯見出しと発売日帯を置き、黄色 CTA を続ける。 4. **盛り上がる理由**（遊んでいる様子で楽しさを伝える）: 黒地に白の小見出しを置き、プレイ中の写真を 3 枚縦に並べる。 5. **利用シーン**（遊ぶ場面を具体的に想像させる）: 朱色の地に白いシーンカードを 4 枚並べる。周りに爆発形の装飾を散らす。 6. **遊び方**（ルールの手軽さを図で伝える）: 焦げオレンジの地に、黒いステップカードを 5 枚並べる。その下にお作法 3 項目を置き、CTA を添える。 7. **カード紹介**（個性的なカードで興味を引く）: 黒地にキャラクターカードを縦に並べる。各カードの下に名前と説明を 3 行置く。 8. **体験の共感**（あるある感で感情に訴える）: クリームの地に、雲形で切り抜いた写真とイラストの合成画像を 3 枚置く。それぞれに短い一言を添える。 9. **締めのキャッチ**（体験を一言でまとめる）: 黒地に白の大きな太字を中央に置く。 10. **セット内容**（仕様と安心材料を示す）: 朱色の枠の中にクリームのパネルを置き、枚数・サイズ・人数をアイコンと大きな数字で見せる。素材や注意書きのブロックも添える。 11. **最終 CTA**（購入へ誘導する）: 黒地にパッケージ画像、発売日枠、誘導文、黄色 CTA を置き、最後にコピーライトを入れる。 ## Imagery - 人物は太い線と鮮やかな影色のコミック調イラストで描く。赤らんだ頬で酔った表情を誇張する。 - 実写は飲み会や宅飲みで笑顔の若者を、明るく暖色の照明で撮る。 - テーブルでカードを出し合う手元を俯瞰で撮る。 - 実写の上にイラストのキャラクターを重ねて合成する。 - 装飾にはギザギザの爆発形、星、稲妻、音符、カクテルのアイコンを使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 900px に収め、中央に寄せる。 - PC の FV は左にキャッチと CTA、右にイラストとパッケージを置く 2 カラムにする。 - 理由の写真は PC で横 3 列に並べる。 - シーンカードとキャラクターカードは PC で 2 列にする。 - 体験の写真は PC で横 3 列に並べる。 - CTA は 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-80bf53ff`（元 LP の URL から採番） - **元 LP**: https://shudengame.com/?utm_medium=paid&utm_id=120246497270180637&utm_content=120247376975360637&utm_term=120247376975350637&utm_campaign=120246497270180637&fbclid=PAaWdyZASnfCBleHRuA2FlbQEwAGFkaWQBqzRaPeXJnXNydGMGYXBwX2lkDzU2NzA2NzM0MzM1MjQyNwABp3q4plNdVH - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。