DESIGN.md — 朱色×黒のコミック調パーティーゲーム LP（Chaotic Night Party Card Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 夜の飲み会・カオス・コミック調・朱色と黒・ギザギザ吹き出し・黄色マーカー
• 地の質感: 朱色の地は紙のような細かいノイズ入り。黒は質感なしのベタ塗りで、墨をかすらせた帯を見出しの下地に使う。
• 形: 角丸カード、太いピル型ボタン、ギザギザの爆発形、雲形の切り抜き、斜めに傾けた見出し帯。
• 温度感: 暖色寄りで高い熱量。黒で夜っぽさを締める。

Colors

• 地は朱色・黒・クリームの 3 種を交互に並べ、セクションの切り替えをはっきり見せる。
• 見出しの強調語は黄色、締めの一語はピンクにする。
• CTA は黄色グラデーションに黒い縁と下側の黒い影をつけ、どの地の上でも同じ見た目にする。
• マゼンタ・シアン・黄・緑の爆発形は装飾だけに使う。文字色には使わない。
• 黒地の本文は白、白カードの本文は濃いグレーにする。

Typography

• キャッチは極太で、白文字に黒い太縁と影をつけた立体的な文字にする。
• 強調する一語だけ文字を大きくして黄色に変える。
• セクション見出しは 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

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

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