--- version: alpha name: Dark Street Brawler Game Teaser LP description: 黒地にキャラクターの立ち絵を大きく敷いた、ゲームティザーサイトの型。見出しは極太で縦長の欧文コンデンス体を使う。差し色はティールの細枠と赤のラベル帯で、少しだけ入れる。グラフィティや筆のかすれ、斜めのカットでストリートの荒々しさを出す。 colors: background: '#000000' primary: '#30B5A7' secondary: '#A52323' surface: '#000000' background-alt: '#1F1D1C' text: '#FFFFFF' text-muted: '#CBCCC7' cta: '#FEFEFE' on-cta: '#000000' accent-1: '#061731' accent-2: '#01439B' accent-3: '#127211' line: '#CBCCC7' typography: display: fontFamily: Bebas Neue fontSize: 44px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Bebas Neue fontSize: 36px fontWeight: 700 lineHeight: 1.0 headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em label-button: fontFamily: Oswald fontSize: 15px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 300 lineHeight: 1.7 letterSpacing: 0.05em accent: fontFamily: Oswald fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 20px section: 0px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title-condensed: textColor: '{colors.text}' typography: '{typography.display}' height: 56px lead-red-band: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 64px button-more: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 50px spec-row: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 66px store-button: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 50px hero-banner: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 66px slider-arrows: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' height: 38px pagetop-button: backgroundColor: '{colors.surface}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 36px news-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 360px --- # DESIGN.md — 黒とティールの荒々しいゲームティザー LP（Dark Street Brawler Game Teaser LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的 - **キーワード**: 黒地・キャラクター立ち絵・極太コンデンス見出し・グラフィティ・ティールの細枠・斜めカット - **地の質感**: 黒地にざらついたグラフィティや筆のかすれを薄く重ねる。動画部分には走査線ノイズを入れる。 - **形**: 角丸はほぼ使わない。四角形と斜めの切り欠き、平行四辺形の枠が基本。 - **温度感**: 夜の街のような寒色寄りのダーク。差し色の赤とティールで熱を加える。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページ全体の地色 | 45% | 画素の実測 | | `primary` | `#30B5A7` | 枠線・ラベル・スライダー点のティール | 1% | 画素の実測 | | `secondary` | `#A52323` | リード見出しの帯・筆跡の赤 | 3% | 画素の実測 | | `surface` | `#000000` | 仕様表の行の黒いパネル | 6% | 画素の実測 | | `background-alt` | `#1F1D1C` | グラフィティ柄セクションの濃いグレー地 | 10% | 画素の主要色に補正 | | `text` | `#FFFFFF` | 見出しと本文の白文字 | 4% | 推定 | | `text-muted` | `#CBCCC7` | フッターリンクと注釈のグレー文字 | 2% | 画素の主要色に補正 | | `cta` | `#FEFEFE` | MOREボタンや動画再生ボタンの白い面 | 1% | 画素の実測 | | `on-cta` | `#000000` | 白ボタン上の黒文字 | 0% | 画素の実測 | | `accent-1` | `#061731` | 1つ目のストア購入ボタン（濃紺） | 1% | 画素の実測 | | `accent-2` | `#01439B` | 2つ目のストア購入ボタン（青） | 1% | 画素の実測 | | `accent-3` | `#127211` | 3つ目のストア購入ボタン（緑） | 1% | 画素の実測 | | `line` | `#CBCCC7` | セクションやフッターの区切り線 | 0% | 画素の主要色に補正 | - 地色はほぼ黒で統一する。濃紺や濃グレーは写真やテクスチャの陰で出す程度にとどめる。 - ティールは細い枠線、項目ラベル、スライダーの点など、線や小さな文字だけに使う。 - 赤はリード見出しの帯と筆跡の装飾に限る。1セクションに1か所まで。 - 白い面はMORE・再生などの小さなボタンだけに使う。 - 購入ボタンは各ストアのブランド色で塗り、白い細枠と白いロゴを載せる。 - 本文は白、注釈やフッターはグレーにして明度で階層を分ける。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出し（英字1語） | 欧文サンセリフ | Bebas Neue | 700 | 44px | 1 | 0em | | `headline-lg` | 動画見出しの中抜き文字の繰り返し | 欧文サンセリフ | Bebas Neue | 700 | 36px | 1 | 0em | | `headline-md` | 赤帯に載せる日本語のリード見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.05em | | `body-md` | 写真の上に重ねる紹介文・あらすじ | ゴシック | Noto Sans JP | 500 | 13px | 2 | 0.08em | | `headline-sm` | 仕様表の項目ラベル（ティール） | ゴシック | Noto Sans JP | 700 | 11px | 1.5 | 0.1em | | `label-button` | MOREなどのボタン文字 | 欧文サンセリフ | Oswald | 700 | 15px | 1 | 0.02em | | `note` | 商標の注記・著作権表記 | ゴシック | Noto Sans JP | 300 | 11px | 1.7 | 0.05em | | `accent` | ニュースの日付やスライダーの番号 | 欧文サンセリフ | Oswald | 500 | 11px | 1.4 | 0.05em | - セクション見出しは英字1語にする。極太のコンデンス体で、頭文字を大きくしたスモールキャップ風に組む。 - 見出しは左寄せで画面幅の半分近くまで大きくする。製品仕様の見出しだけは中央に置く。 - 日本語の本文は字間を広めにし、行間を2.0前後にして写真の上でも読めるようにする。 - 写真の上に載せる文字は白に限り、背景の暗い部分に配置する。 - 動画見出しは同じ英単語を縦に4回並べる。1つだけを白い塗り文字にし、残りは中抜きにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。仕様表とボタンは中央寄せの幅狭ブロックにする。 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 0px、基本単位 8px、カード内 20px（375px 幅換算） - セクション同士は余白を挟まず、全幅の写真や地色を直接つなげる。 - 見出しと本文は左端を12px前後にそろえる。 - 仕様表と購入ボタンは画面幅の約78%で中央に置く。 - 1セクションの高さは画面1〜2枚分にし、キャラクターの写真を背景いっぱいに使う。 - ニュースとキャラクターは横スライダーにし、矢印ボタンか番号表示を付ける。 ## Elevation & Depth - 影はほとんど使わない。黒いパネルの重なりと写真の暗さで奥行きを出す。 - 写真の上の文字は、背景の暗い部分と弱いグラデーションで読みやすくする。 - トップへ戻るボタンは丸形にし、ティールの細枠で浮いて見せる。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の矩形、または斜めにカットした平行四辺形。キャラクター一覧は斜めの枠で横に並べる。 - **セクション境界**: 斜めのカット、白い細線、筆で擦ったような赤い筆跡 - ボタンとパネルは角丸なしの四角形を基本にする。 - 仕様表の各行は左上をティールの斜めの折れ線で装飾する。 - 購入ボタンは左上の角を斜めに落とした形にし、白い細枠を付ける。 - 見出し横のメニューアイコンは正方形にし、ティールの枠で囲む。 ## Components - **英字セクション見出し**（`section-title-condensed`）: 極太コンデンス体の英字1語。白文字で左寄せにする。 - **赤帯リード見出し**（`lead-red-band`）: 赤い面の上に白い太字で2行のリードを載せる。見出しの直下に置く。 - **MOREボタン**（`button-more`）: 右寄せの白い四角形。黒い英字と、枠付きの小さな矢印アイコンを並べる。 - **仕様表の行**（`spec-row`）: 黒いパネル。上にティールの小さなラベル、下に白い太字の値を並べる。左上をティールの斜めの線で装飾する。 - **ストア購入ボタン**（`store-button`）: 各ストアのブランド色で塗り、白いロゴと白い細枠を付ける。左上の角を斜めに落とす。縦に3つ並べる。 - **ヒーロー内の告知バナー**（`hero-banner`）: キャラクターの画像と文字を入れた横長バナー。ティールの細枠で囲み、角を斜めにカットする。 - **スライダー矢印**（`slider-arrows`）: 黒い正方形に白い矢印を入れる。見出しの右側に2つ並べる。 - **トップへ戻るボタン**（`pagetop-button`）: 黒い丸にティールの細枠を付け、白い上向き矢印を入れる。区切り線の上に重ねる。 - **ニュースカード**（`news-card`）: 正方形のサムネイル、日付、タイトルを縦に並べる。カードの右に白い縦線を引いて区切る。 ## Do's and Don'ts **Do** - 地色は黒にし、キャラクターの写真やイラストを全幅で大きく見せる。 - 見出しは英字の極太コンデンス体1語にし、大きく左寄せで置く。 - 差し色はティールの線と赤の帯の2色に絞る。 - グラフィティや筆のかすれ、走査線のテクスチャを薄く重ねて街の荒々しさを出す。 - 購入ボタンはストアのブランド色を守り、縦に並べる。 **Don't** - 白や明るい地色のセクションを作らない。 - 丸いピル型ボタンや大きな角丸カードを使わない。 - パステルカラーやグラデーションの派手な塗りを増やさない。 - 日本語の見出しを大きく主役にしない。主役は英字の見出しにする。 - 写真の明るい部分に本文を重ねて読みにくくしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャラクターとタイトルロゴで世界観を一目で伝える）: 夜の街を背景に主要キャラクター3人を重ねて描く。対応機種のロゴを左上に、言語切替を右上に置く。下部にロゴ、発売時期の一文、告知バナーをまとめる。 2. **ニュース**（最新のお知らせを知らせる）: グラフィティ柄の暗い地に英字見出しと矢印を置き、カードを横スライダーで見せる。 3. **動画**（ゲームプレイの映像へ誘導する）: 中抜き文字を繰り返した見出しを置き、走査線入りの映像の静止画に白い再生ボタンを重ねる。赤い筆跡で装飾する。 4. **作品紹介**（シリーズの歴史と新作の魅力を伝える）: 全幅のキャラクター写真の上に、英字見出し、赤帯のリード、白い本文、MOREボタンを重ねる。 5. **ストーリー**（世界観とあらすじで没入感を高める）: 敵キャラクターの写真を全幅で敷き、長めの本文を白文字で重ねる。 6. **キャラクター**（登場人物を一覧で見せる）: 斜めの枠でキャラクターを横に並べるスライダー。左下に英字見出しと番号表示を置く。 7. **製品情報・購入**（仕様を示し、ストアの購入ページへ誘導する）: 中央に英字見出しを置く。ティール装飾付きの黒いパネルを縦に並べ、その下にストアボタンを3つ置く。 8. **フッター**（公式リンク、関連ロゴ、権利表記を示す）: 黒地の中央にリンクを並べる。下に企業と機種のロゴ群、細い区切り線、グレーの注記を置く。 ## Imagery - キャラクターはセルルックの3Dか、劇画調のイラストにする。拳を構えるなど動きのあるポーズで全身または半身を描く。 - 背景はネオンがにじむ夜の都市にし、紫と青の寒色で暗く仕上げる。 - グラフィティ文字やスプレーのかすれを、モノクロで薄く地に敷く。 - 動画の静止画には走査線やブラウン管風のノイズを重ねる。 - 赤い筆で擦ったような跡を、セクションの端に少しだけ入れる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではヒーローのキャラクターを左に、ロゴと告知を右に置く横長の構図にする。 - PCのニュースはカード3枚を横に並べて一覧表示する。 - PCの動画は中抜き文字の見出しを左に、映像を右に置く2分割にする。 - PCの仕様表は2カラムにし、ラベルと値を横並びにする。 - PCのストアボタンは3つを横に並べる。 - PCのフッターは、ロゴ群と注記を左に、公式リンクを右に置く2カラムにする。 ## 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-cf8bead2`（元 LP の URL から採番） - **元 LP**: https://www.arcsystemworks.jp/ddrev/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。