--- version: alpha name: Manga Panel Action Game LP description: 黒いコマ割り柄の地に、傾いた白パネルと赤い見出し帯を重ねた漫画調のゲーム LP。SD キャラが枠からはみ出して動きを出し、斜体の極太英字見出しで勢いを作る。 colors: primary: '#C6594C' dark-section: '#333333' background: '#FEFEFE' background-alt: '#FDFBFD' text: '#000000' accent-1: '#C6594C' line: '#18181A' surface: '#ECEAEF' secondary: '#949599' cta: '#020202' on-cta: '#F3F3F3' accent-2: '#F5A623' typography: display: fontFamily: Montserrat fontSize: 52px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.5 headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Dela Gothic One fontSize: 24px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 4px md: 6px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' store-buttons: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px section-title-band: backgroundColor: '{colors.primary}' typography: '{typography.display}' height: 64px panel-header: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 48px tilted-panel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 360px screenshot-frame: backgroundColor: '{colors.dark-section}' rounded: '{rounded.sm}' height: 560px character-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' height: 260px spec-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 340px sns-banner: backgroundColor: '{colors.dark-section}' typography: '{typography.label-button}' height: 110px --- # DESIGN.md — 赤×黒の漫画コマ風スマホゲーム LP（Manga Panel Action Game LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 漫画コマ・斜めパネル・赤帯見出し・SDキャラ・集中線・黒×赤×白 - **地の質感**: 黒地に濃淡グレーのコマ割り線と集中線、網点ドットを重ねた印刷漫画風の質感 - **形**: わずかに傾いた四角パネル、太い黒フチ、斜めに切った帯、吹き出し形の雲枠 - **温度感**: 赤と黒の高コントラストで熱量が高く、白パネルで読みやすさを確保する ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C6594C` | 見出し帯・ラベル帯の赤 | 6% | 画素の主要色に補正 | | `dark-section` | `#333333` | コマ割り柄の黒い地 | 35% | 画素の実測 | | `background` | `#FEFEFE` | 白い本文パネル | 16% | 画素の実測 | | `background-alt` | `#FDFBFD` | キャラ紹介・SPEC の薄灰の地 | 12% | 画素の実測 | | `text` | `#000000` | 見出し・本文の黒文字 | 3% | 画素の実測 | | `accent-1` | `#C6594C` | 本文中の強調赤文字 | 0% | 画素の主要色に補正 | | `line` | `#18181A` | パネル・カードの太い黒フチ | 2% | 画素の主要色に補正 | | `surface` | `#ECEAEF` | SPEC 表の値セルの薄灰 | 2% | 画素の実測 | | `secondary` | `#949599` | MOVIE 帯のグレーグラデ地 | 6% | 画素の実測 | | `cta` | `#020202` | ストアボタンの黒 | 0% | 画素の実測 | | `on-cta` | `#F3F3F3` | ストアボタン上の白文字 | 0% | 画素の実測 | | `accent-2` | `#F5A623` | ゲーム画面枠のオレンジ | 1% | 推定 | - 地は黒のコマ割り柄を基本にし、白パネルで読ませる - 後半のキャラ・仕様は薄灰地に切り替える - 赤は見出し帯・ラベル・本文の一部強調に限定する - 本文は黒、強調語だけ赤にする - パネル・カードは必ず黒の太フチで囲む - FV は赤〜黄の放射グラデで最も派手にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション英字見出し（斜体・影付き） | 欧文サンセリフ | Montserrat | 900 | 52px | 1.0 | 0.0em | | `headline-lg` | パネル内のキャッチ（斜体・赤下線） | ゴシック | Noto Sans JP | 900 | 24px | 1.5 | 0.0em | | `headline-md` | 赤帯上の白抜き見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.0em | | `headline-sm` | CTA 誘導・告知見出し | ゴシック | Dela Gothic One | 400 | 24px | 1.3 | 0.02em | | `body-md` | パネル本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.75 | 0.02em | | `note` | 注釈・商標表記 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.0em | | `label-button` | 表ラベル・SNS 帯 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.02em | - 英字見出しは斜体＋白フチ＋黒影で立体的にする - 日本語キャッチは斜体の極太で、行下に赤い筆線を引く - 本文も太字にして漫画のセリフ感を出す - 強調は赤文字のみ。下線や背景マーカーは使わない - 見出しは短く言い切り、感嘆符で勢いをつける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。キャラ一覧だけ 2 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 白パネルは左右 6% 程度の余白で中央配置 - パネルとゲーム画面を交互に縦積みする - キャラ画像をパネル角に重ねてはみ出させる - 英字見出しは画面幅いっぱいの赤帯の上に置く - SPEC は太枠の中にラベル帯と値セルを交互に並べる ## Elevation & Depth - 影はほぼ使わず、黒い太フチで立体感を出す - 英字見出しだけ黒のオフセット影を付ける - キャラ切り抜きは白フチ＋色付きフチで浮かせる ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: キャラは輪郭切り抜き。キャラカードは角を斜めに落とした縦長の四角 - **セクション境界**: 直線で切り替え、パネル自体を 2〜3 度傾ける - パネルは平行四辺形気味に少し傾ける - 吹き出しの雲形枠でキャッチを囲む - キャラカードは角を一つ斜めに切る - ボタンは小さい角丸の四角 ## Components - **ストアボタン**（`store-buttons`）: 黒地に白文字のストアバッジを 2 つ横並び。集中線柄の白帯中央に置く - **英字見出し帯**（`section-title-band`）: 斜めに切れた赤帯の上に斜体の極太英字。端に網点を付ける - **赤帯付きパネル**（`panel-header`）: 黒フチの白パネル上部に赤帯の白抜き見出しを載せる - **傾いた本文パネル**（`tilted-panel`）: 白地・黒太フチで少し傾け、斜体キャッチ＋赤下線＋本文を入れる - **ゲーム画面フレーム**（`screenshot-frame`）: 黒い太枠の端末風フレームにゲーム画面を縦長で入れる - **キャラカード**（`character-card`）: 黒フチの縦長カードに SD キャラ顔＋下に作品ロゴ。スライダーで送る - **仕様表**（`spec-table`）: 黒太枠の中に赤ラベル帯と灰色の値セルを交互に積む - **SNS 帯**（`sns-banner`）: 左が黒地に白英字の SNS 誘導、右がカラフルな告知バナーの 2 分割 ## Do's and Don'ts **Do** - 黒いコマ割り柄の地を広く取る - キャラをパネルからはみ出させて動きを出す - 英字見出しは斜体＋赤帯で統一する - 本文の強調語だけを赤にする - 枠はすべて黒の太線で描く **Don't** - 大きな角丸やピル型ボタンを使わない - パステル色や淡いグラデを主役にしない - 細い明朝体を使わない - パネルを傾けずに整列させすぎない - 赤を広い背景に多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品世界とキャラの多さを一目で伝える）: 赤黄の放射背景にキャラ集合絵とロゴ。全面ビジュアル 2. **ダウンロード CTA**（すぐインストールさせる）: 灰色の集中線と雲形の白地に、太字見出し＋ストアボタン 2 つ。両脇にキャラ 3. **SNS・告知リンク**（公式 SNS と情報ページへ誘導）: 黒い SNS 帯とカラフルなバナーを左右 2 分割 4. **提携ロゴ帯**（関連媒体を示す）: 白地にコマ線を薄く敷き、ロゴを中央に配置 5. **動画**（ゲームの動きを見せる）: グレーのグラデ地に白の大きな英字。黒枠の動画スライダーと左右キャラ 6. **ゲーム概要**（どんなゲームかを説明）: 黒コマ柄の地に赤帯見出し付き白パネル。雲形枠のキャッチと本文、ゲーム画面 7. **バトルシステム**（遊び方の魅力を伝える）: 傾いた白パネルに斜体キャッチ＋赤下線、強調赤の本文。下にゲーム画面 8. **キャラ集結の訴求**（登場キャラの多さを伝える）: 見出し帯なしの傾いたパネルと編成画面のスクショ 9. **キャラクター紹介**（登場キャラを一覧で見せる）: 薄灰地に赤帯英字見出し。2 列のキャラカードをスライダーで送り、最後に今後の告知 10. **仕様**（基本情報を示す）: 赤帯英字見出しと黒太枠の仕様表 11. **シェア・フッター**（共有と法務表記）: SNS 丸アイコン、注釈、灰色地のリンク一覧とロゴ ## Imagery - 2〜3 頭身の SD キャラを白フチ＋色フチで切り抜く - キャラは武器やポーズで動きを出し、斜めに配置 - 背景にコマ割り線・集中線・網点を薄く重ねる - ゲーム画面は縦長スクショを黒枠に入れる - FV は放射線とカラフルな紙吹雪（菱形・十字）で賑やかに - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 900px 幅で、FV は横長ビジュアルにする - PC の概要・システムはパネルとスクショを左右 2 カラムにし、交互に入れ替える - PC のキャラカードは 5 列×2 段 - PC の仕様表はラベルと値を横並びの行にする - フッターリンクは PC で 1 行に並べる ## 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-c6584deb`（元 LP の URL から採番） - **元 LP**: https://jumble-rush.bn-ent.net/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。