DESIGN.md — 赤×黄の漫画調パーティーゲーム LP（Loud Red Manga Party Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: 漫画調・極太黄文字・黒縁取り・吹き出し・ギャグ・赤一色
• 地の質感: ベタ塗りのフラットな面。グラデーションや陰影は使わず、黒の主線と白抜きで漫画の印刷物のように見せる
• 形: 角丸の大きなコンテナ、ピル型の見出し帯、白い太枠の角丸パネル、楕円の吹き出し
• 温度感: 高温。赤・黄が主役で騒がしく熱い

Colors

• 外側は濃赤、中身は黒枠の角丸サーモン赤コンテナで二重にする
• 見出し文字は黄色の極太文字に黒い縁取りをつけ、濃赤のピル帯に載せる
• 特長パネルは濃赤の地に白の太枠で囲み、下に白文字で説明を置く
• 黄色は面としても使う（ストライプ背景・お客様の声の吹き出し）
• 黒はボタン・バッジ・枠線に限り、細い黒線で漫画らしさを出す
• フッター周りだけ灰地に切り替え、問い合わせ等の実務エリアと分ける
• page は文字 #111111 × 背景 #DF0235 のコントラスト比が 3.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#F8023B、4.55:1）を使う。
• heading-pill は文字 #FDF243 × 背景 #DF0234 のコントラスト比が 4.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D70232、4.55:1）を使う。
• feature-panel は文字 #F2F2F2 × 背景 #DF0234 のコントラスト比が 4.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D70232、4.58:1）を使う。

Typography

• 見出しは極太ディスプレイ体の黄色に、黒の太い縁取りをつける
• 本文は白の太字で短く 2 行以内にする
• セリフは吹き出しの中に黒で、文字の大きさを不揃いにして賑やかにする
• 長音や感嘆符で引き伸ばした表現を見出しに使ってよい
• 細い字は使わず、どの文字も 700 以上にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。遊び方の手順だけ横 3 コマ→SP では縦積み
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 全体を黒枠の角丸コンテナに入れ、外側に濃赤の余白を残す
• 各セクションの頭に、キャラ顔アイコン＋ピル見出し帯を中央に置く
• 特長は白枠パネル→見出し→補足の順で縦に繰り返す
• 吹き出しは重なってもよいので密集させる
• クレジット・問い合わせは左揃えで地味に組む

Elevation & Depth

• 影は使わずベタ塗りで平らにする
• 立体感は黒の縁取りと、見出し帯の下にずらした暗赤のずれで出す
• パネルは白の太枠（4〜6px）で浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: キャラは切り抜き。カードの画像は角丸の長方形で傾けて置く
• セクション境界: 区切り線は使わない。見出し帯と余白で区切る。フッター手前で灰地に直線で切り替える
• 見出し帯は黒縁つきのピル型にし、左端にキャラ顔を半分はみ出させる
• パネルは角丸 12px＋白太枠
• 吹き出しは楕円で、しっぽをつける
• 戻るボタンは左側を矢印形に尖らせる

Components

• キャラ付きピル見出し（heading-pill）: 黒縁の濃赤ピル帯に黄色の極太文字を載せ、左端にキャラの顔イラストを重ねる
• 白枠の特長パネル（feature-panel）: 濃赤の地に白い太枠をつけ、キャラと吹き出しのイラストを入れる。下に白い見出しと補足を置く
• セリフ吹き出し（speech-bubble）: 白地に黒線の楕円吹き出し。短いセリフを大きさを変えて散らす
• スペックバッジ（spec-badge）: 黒い角丸の小さなバッジに、人数・時間・対象年齢を 2 段で白抜き表示
• 遊び方 3 コマ（step-strip）: 黄と白のストライプ地で、斜めに区切ったコマに手順イラストを置く
• 絶賛コメントの黄色雲（testimonial-blob）: 黒縁の黄色い不定形の面にコメントを散らし、黒いボックスに大きく強調語を入れる
• 黒のピルボタン（button-primary）: 黒地に白文字のピルボタン。ガイドや送信に使う
• 問い合わせフォーム（contact-form）: 灰地の上に黒枠の白入力欄を縦に並べ、黒い送信バーを置く

Do's and Don'ts

Do - 黄色の見出しには必ず黒の縁取りをつける - セクションの頭は毎回キャラ付きピル見出しで揃える - 吹き出しやキャラを多めに置いて、にぎやかさを保つ - 説明文は白太字で 1〜2 行に収める - カード現物の画像は少し傾けて置き、遊んでいる感じを出す

Don't - 淡い色や上品なグラデーションを使わない - 細い明朝体や細いゴシック体を使わない - 長い説明文の段落を置かない - 写真の中に人物を写実的に入れない（漫画イラストで統一する） - 赤・黄・黒・白以外の強い色を足さない

Page Structure

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

1. ファーストビュー（ロゴとメインキャラで世界観を一瞬で伝える）: 黄色の極太ロゴを中央に置き、主人公キャラを周りの脇役で囲む。右下に黒いスペックバッジを 3 つ並べる
2. 紹介動画（遊び方を動画で直感的に見せる）: コンテナ幅いっぱいに 16:9 の動画を置く
3. 商品・内容物（パッケージとカードの中身を見せる）: 箱の画像を左、カード画像を右に散らし、手書き風の矢印で特徴を補足する
4. ゲーム概要（どんなゲームかを一言で伝える）: 濃赤の枠に黄白ストライプのパネルを入れ、お題カードとキャラを置いて下に白黒の太字で一文添える
5. 遊び方（手順を 3 ステップで示す）: 斜めに区切った 3 コマに、手順のイラストとセリフを入れる
6. 魅力・特長（楽しさのポイントを 4 つ伝える）: 白枠の濃赤パネルを縦に 4 つ並べ、それぞれの下に白い見出しと補足を置く
7. お試し体験（カードをタッチして遊べる体験に誘う）: カード 2 枚を並べ、両脇にキャラのひとことを添える
8. 遊んでいる様子（プレイ中の盛り上がりを伝える）: 吹き出しを密集させ、端にカードとキャラを散らす
9. お客様の声（ユーモアのある絶賛コメントで背中を押す）: 黄色の雲のような面にコメントを散らし、黒いボックスで強調語を縦書きにする。締めの一言を黄色の極太文字で置く
10. クレジット（制作者を示す）: 白の太字で役職と名前を左揃えにし、黒い矢印形の戻るボタンを置く
11. 問い合わせ・フッター（連絡手段と SNS を置く）: 灰地に黒いピル見出し、左にフォーム、右に SNS の埋め込み。最下部は黒帯のコピーライト

Imagery

• 日本の漫画調のキャラを、黒の太い主線と白・グレーのベタで描く
• キャラは誇張した表情（舌出し・ウインク・怒り顔）で切り抜いて置く
• カード現物は正面から撮り、角丸で少し傾けて重ねる
• 背景には集中線やストライプ、吹き出しを重ねて漫画のコマのようにする
• 主人公キャラだけを色付きにして、脇役はモノクロで描き分ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅約 80% の角丸コンテナを置き、左右に濃赤の帯を見せる
• SP ではコンテナを幅 92% ほどにし、外側の赤は細い縁として残す
• 遊び方の 3 コマは SP では縦に積む
• 問い合わせのフォームと SNS は PC で 2 列、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 行書くと起動時に読み込まれる。