--- version: alpha name: Loud Red Manga Party Game LP description: 濃い赤の外枠と、サーモン赤のカード状の本文面で組んだ LP。黄色の極太文字と黒い縁取り、漫画のキャラや吹き出しを詰め込み、ノリの良いギャグ系カードゲームの空気を出す。見出しは黒い縁取りの赤いピル帯にキャラの顔アイコンを重ねる型。 colors: primary: '#EA5F5C' background: '#DF0235' secondary: '#DF0234' accent-1: '#FDF243' dark-section: '#11141D' on-primary: '#F2F2F2' background-alt: '#E3E3E3' accent-2: '#762831' surface: '#FFFFFF' cta: '#13141D' on-cta: '#E8E9EC' text: '#111111' accent-3: '#C9B993' background-accessible: '#F8023B' secondary-accessible: '#D70232' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 22px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.3 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 44px feature-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 200px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 48px spec-badge: backgroundColor: '{colors.dark-section}' typography: '{typography.note}' rounded: '{rounded.md}' height: 36px step-strip: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.accent}' height: 140px testimonial-blob: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 200px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px contact-form: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px --- # DESIGN.md — 赤×黄の漫画調パーティーゲーム LP（Loud Red Manga Party Game LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 漫画調・極太黄文字・黒縁取り・吹き出し・ギャグ・赤一色 - **地の質感**: ベタ塗りのフラットな面。グラデーションや陰影は使わず、黒の主線と白抜きで漫画の印刷物のように見せる - **形**: 角丸の大きなコンテナ、ピル型の見出し帯、白い太枠の角丸パネル、楕円の吹き出し - **温度感**: 高温。赤・黄が主役で騒がしく熱い ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EA5F5C` | 本文コンテナの地（サーモン赤） | 34% | 画素の実測 | | `background` | `#DF0235` | コンテナ外側の濃赤の地 | 20% | 画素の実測 | | `secondary` | `#DF0234` | 見出し帯・パネルの濃赤 | 8% | 画素の主要色に補正 | | `accent-1` | `#FDF243` | 見出し・ロゴの極太黄文字と黄色面 | 6% | 画素の主要色に補正 | | `dark-section` | `#11141D` | コンテナ枠線・バッジ・送信ボタンの黒 | 3% | 画素の実測 | | `on-primary` | `#F2F2F2` | 赤地上の白い本文・パネル枠 | 4% | 画素の主要色に補正 | | `background-alt` | `#E3E3E3` | 問い合わせエリアの灰地 | 8% | 画素の実測 | | `accent-2` | `#762831` | 見出し帯の暗いえんじ影・縁 | 3% | 画素の主要色に補正 | | `surface` | `#FFFFFF` | 吹き出し・フォーム入力欄の白 | 4% | 画素の実測 | | `cta` | `#13141D` | 黒地のボタン（戻る・ガイド・送信） | 1% | 画素の実測 | | `on-cta` | `#E8E9EC` | ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#111111` | 漫画の主線・吹き出し内の黒文字 | 2% | 推定 | | `accent-3` | `#C9B993` | カード写真等の生成りベージュ | 2% | 画素の主要色に補正 | | `background-accessible` | `#F8023B` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#D70232` | AA を満たす補正値（計算） | | 計算 | - 外側は濃赤、中身は黒枠の角丸サーモン赤コンテナで二重にする - 見出し文字は黄色の極太文字に黒い縁取りをつけ、濃赤のピル帯に載せる - 特長パネルは濃赤の地に白の太枠で囲み、下に白文字で説明を置く - 黄色は面としても使う（ストライプ背景・お客様の声の吹き出し） - 黒はボタン・バッジ・枠線に限り、細い黒線で漫画らしさを出す - フッター周りだけ灰地に切り替え、問い合わせ等の実務エリアと分ける - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.1 | 0.0em | | `headline-lg` | ピル帯に載るセクション見出し（黄＋黒縁） | 装飾・ディスプレイ | Dela Gothic One | 400 | 22px | 1.2 | 0.02em | | `headline-md` | パネル下の短い特長見出し（白） | ゴシック | Noto Sans JP | 900 | 20px | 1.3 | 0.05em | | `body-md` | 特長の補足・クレジット（白太字） | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.02em | | `accent` | 吹き出しのセリフ（手書き漫画風） | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.3 | 0.0em | | `note` | スペック・注記・フッター | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.0em | | `label-button` | 黒ボタンのラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.05em | - 見出しは極太ディスプレイ体の黄色に、黒の太い縁取りをつける - 本文は白の太字で短く 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 ```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-68c86f87`（元 LP の URL から採番） - **元 LP**: https://www.tsumaya.tokyo/namepushazai - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。