--- version: alpha name: Dark Noir Mystery Audio Game LP description: 深い黒緑と焦げ茶の黒を地に、金茶とパーチメント色で探偵ミステリーの雰囲気を作る謎解きゲームの LP。明朝系の太い見出しに欧文スクリプトの英字を重ね、ピンクの CTA と色分けした章ラベルをアクセントにしている。 colors: primary: '#1B2725' dark-section: '#1B1613' background: '#E8DEC3' surface: '#FFFFFF' background-alt: '#F4DBAC' secondary: '#A07C4E' accent-1: '#B29A75' cta: '#DA3985' on-cta: '#FFF5FF' marker: '#E7E44E' on-dark: '#FDFCFA' text: '#1B1614' line: '#ACA897' cta-accessible: '#D42879' secondary-accessible: '#8F6F46' typography: display: fontFamily: Shippori Mincho B1 fontSize: 52px fontWeight: 800 lineHeight: 1.2 headline-lg: fontFamily: Shippori Mincho B1 fontSize: 40px fontWeight: 800 lineHeight: 1.2 accent: fontFamily: Dancing Script fontSize: 24px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em label-button: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 40px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 70px heading-script: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 165px feature-icon-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 130px parchment-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 1000px cv-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.cta}' typography: '{typography.headline-md}' height: 260px case-spine: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' height: 340px accordion-gold: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 95px read-more: textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 58px tag-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' height: 40px --- # DESIGN.md — 黒緑×金茶のミステリー謎解きゲーム LP（Dark Noir Mystery Audio Game LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、レトロ、上品・高級、力強い・インパクト - **キーワード**: 探偵ノワール・古紙・金縁フレーム・明朝×スクリプト・キャラクター訴求 - **地の質感**: 黒板風のざらついた黒緑の地。古紙のように焼けたパーチメント。黒地に細い金色の罫線を引く。 - **形**: 角丸なしの四角が基本。細い罫線の枠とページの端が折れた紙の形を使う。 - **温度感**: 暗めで温かい（黒緑と焦げ茶に金茶を合わせる） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1B2725` | ブランドを代表する黒緑の地（キャラクター・章の紹介） | 28% | 画素の実測 | | `dark-section` | `#1B1613` | 焦げ茶系の黒の地（キャッチコピー・CM） | 14% | 画素の実測 | | `background` | `#E8DEC3` | ベージュの地（遊び方・ストーリー） | 13% | 画素の実測 | | `surface` | `#FFFFFF` | 遊び方パネルの白い地 | 7% | 画素の実測 | | `background-alt` | `#F4DBAC` | 古紙風のストーリー台紙 | 10% | 画素の実測 | | `secondary` | `#A07C4E` | 金茶の STEP 帯・ボタン帯 | 4% | 推定 | | `accent-1` | `#B29A75` | 見出しの金茶文字（強調語・人名） | 1% | 画素の実測 | | `cta` | `#DA3985` | 体験版ボタン・CV ラベルのマゼンタピンク | 2% | 画素の実測 | | `on-cta` | `#FFF5FF` | CTA 上の白い文字 | 0% | 画素の実測 | | `marker` | `#E7E44E` | キャッチコピーの強調語の黄色 | 0% | 画素の実測 | | `on-dark` | `#FDFCFA` | 暗い地の上の白い文字 | 3% | 画素の主要色に補正 | | `text` | `#1B1614` | 明るい地の上の本文・見出しの黒 | 2% | 画素の主要色に補正 | | `line` | `#ACA897` | STEP カードと黒い枠の細い罫線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#D42879` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#8F6F46` | AA を満たす補正値（計算） | | 計算 | - 暗い地は黒緑（primary）と焦げ茶の黒（dark-section）を交互に置き、間に明るいベージュのセクションをはさむ。 - 金茶は STEP 帯、見出しの強調語、人名、額縁に限って使い、高級感を出す。 - マゼンタピンクは体験版の CTA と声優ラベルだけに使う。 - 黄色の強調はファーストビューのキャッチコピーの 1 語だけにする。 - 章ラベルは章ごとに別の彩度の高い色（緑・赤・紫・ピンク・オレンジ）を文字色にする。 - 明るい地では文字を黒、暗い地では文字をオフホワイトにする。 - `button-primary` は文字 `#FFF5FF` × 背景 `#DA3985` のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D42879`、4.51:1）を使う。 - `cv-label` は文字 `#DA3985` × 背景 `#1B1613` のコントラスト比が 4.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 - `accordion-gold` は文字 `#FDFCFA` × 背景 `#A07C4E` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#8F6F46`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチコピー | 明朝 | Shippori Mincho B1 | 800 | 52px | 1.2 | 0.0em | | `headline-lg` | セクション見出し（遊び方・ストーリーなど） | 明朝 | Shippori Mincho B1 | 800 | 40px | 1.2 | 0.0em | | `accent` | 見出しの右下に重ねる英字 | 欧文スクリプト | Dancing Script | 400 | 24px | 1.0 | 0.02em | | `headline-md` | STEP の縦書き説明・アコーディオンの見出し | 明朝 | Noto Serif JP | 900 | 22px | 1.3 | 0.0em | | `headline-sm` | コメント主の名前（金茶） | 明朝 | Noto Serif JP | 700 | 24px | 1.4 | 0.0em | | `body-md` | ストーリーやコメントの本文 | 明朝 | Noto Serif JP | 400 | 15px | 1.9 | 0.03em | | `label-button` | CTA と READ MORE の文字 | 明朝 | Noto Serif JP | 700 | 22px | 1.2 | 0.02em | | `note` | クレジットや小さなラベル | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.0em | - 見出しは太い明朝にし、英字のスクリプトを薄い金茶で右下に重ねる。 - キャッチコピーは語ごとに文字サイズを変え、強調語を大きく、色を変えて見せる。 - STEP の説明と章のタイトルは縦書きにし、物語のような雰囲気を出す。 - 本文は明朝で、行間を 1.9 前後に広く取る。 - ゴシックは小さなラベルやクレジットだけに使う。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長アイコンとキャラクターのサムネイルは 3 列のグリッドにする。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 40px（375px 幅換算） - セクションは画面幅いっぱいの色面で区切る。 - コンテンツは左右に約 20px の余白を取って中央に置く。 - STEP は左の金茶の帯と右のイラストパネルで横長カードにし、縦に 3 枚重ねる。 - ストーリーは古紙風の台紙を 1 枚置き、内側に広い余白を取る。 - 章紹介は細い縦の帯を 7 本並べ、選んだ章だけをキャラクター画像に広げる。 - コメントは文章を途中で切り、READ MORE の枠で続きを開く形にする。 ## Elevation & Depth - 影はほぼ使わない。 - 遊び方パネルは外側に金色のぼかし（光彩）を付けて浮かせる。 - ストーリーの台紙は、ページの端が折れた紙の形と薄い影で立体感を出す。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は四角のまま帯状に並べる。キャラクターは切り抜いて地に重ねる。サムネイルは金の額縁で囲む。 - **セクション境界**: 直線で色を切り替える。 - ボタンとカードは角丸なしの四角にする。 - 枠は 1〜2px の細い線にし、黒地では白か金の線にする。 - CTA は二重線風の枠の中に、虫眼鏡のアイコンを右端に添える。 - ストーリーの台紙だけ、左下の角を丸く折り返した紙の形にする。 ## Components - **体験版 CTA**（`button-primary`）: ピンクの四角いボタン。白い明朝の文字を入れ、外側に白い枠を付け、右端に虫眼鏡の小さな絵を置く。 - **見出しとスクリプトの英字**（`heading-script`）: 太い明朝の見出しに、筆記体の英字を金茶で斜め下に重ねる。 - **STEP カード**（`step-card`）: 左の金茶の帯に STEP 番号を縦書きで入れ、右にアイソメトリックのイラストと縦書きの説明を置く。 - **特長アイコン 3 列**（`feature-icon-grid`）: 細い罫線で区切った 3 マスに、線画のアイコンと短いラベルを入れる。 - **古紙風のストーリーカード**（`parchment-card`）: 焼けた紙の質感の台紙に、明朝の本文を入れる。左下の角は折れている。 - **声優の縦書きラベル**（`cv-label`）: 黒地にピンクの縦書きで声優名を入れ、下にピンクのサンプルボイスボタンを付ける。 - **章の縦帯**（`case-spine`）: 背表紙のような細い縦の帯を並べる。章番号を色付きの枠に、章のタイトルを色付きの縦書きで入れる。 - **金茶のアコーディオン**（`accordion-gold`）: 金茶の地に白い枠と丸い顔写真、明朝の見出し、右端に＋アイコンを置く。黒地のバージョンも作る。 - **READ MORE ボタン**（`read-more`）: 暗い地に白い細枠を付け、左に明朝の英字、右に▼を置く。 - **左に帯の付いた小見出しラベル**（`tag-label`）: 黒い地の左端に金茶の縦の帯を付け、白い文字を入れる。 ## Do's and Don'ts **Do** - 暗い地と明るいベージュのセクションを交互に置き、場面が変わる感じを出す。 - 見出しには必ず筆記体の英字を添える。 - 物語らしい部品（STEP や章のタイトル）は縦書きにする。 - 金茶は額縁・帯・強調語に限って使う。 - キャラクターのイラストは切り抜いて大きく見せる。 **Don't** - 角丸やピル型のボタンを使わない。 - ピンクを CTA と声優ラベル以外に広げない。 - 丸ゴシックやポップな書体を使わない。 - はっきりした影やグラデーションのボタンを使わない。 - 明るいセクションを続けて置かない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と主役のキャラクターを印象づける）: 黒板風の黒緑の地に、主役キャラクターを大きく置く。かすれた白い縦書きのタイトルに筆記体の英字を重ね、隅に提供形式のバッジを付ける。 2. **キャッチコピーと CTA**（コンセプトを伝え、体験版へ誘導する）: 黒地に、共同制作者を示す帯、金茶と黄色で語ごとにサイズを変えたキャッチコピー、クレジット、ピンクの CTA を順に置く。 3. **利用シーンの写真の帯**（実際に遊んでいる様子を見せる）: 4 枚の写真を横に隙間なく並べる。 4. **遊び方**（3 ステップで手軽さを伝える）: ベージュの地に光彩付きの白いパネルを置き、STEP カードを縦に 3 枚、その下に特長アイコンを 3 列で並べる。 5. **ストーリー**（物語の設定とプレイヤーの役割を伝える）: 古紙風の台紙に見出しと明朝の本文を入れる。 6. **CM 動画**（動画で雰囲気を伝える）: 黒地に見出しを置き、横幅いっぱいに動画を埋め込む。 7. **キャラクター**（主役と声優を紹介する）: 黒緑の地に、主役の切り抜き画像、金茶の縦書きの名前、声優ラベル、金の額縁に入れたサブキャラクター 3 人を置く。 8. **章紹介**（全章のバリエーションを見せる）: 大きな明朝の見出しの下に章の縦帯を並べる。選んだ章だけをイラストに広げる。 9. **制作者などの補足情報**（声優や制作元を詳しく伝える）: 金茶と黒の 2 種類のアコーディオンを縦に並べる。 10. **制作者コメント**（作り手の思いで信頼感を出す）: 帯付きのラベル、金茶の人名、白い本文の抜粋、READ MORE の枠を順に置く。 ## Imagery - キャラクターは厚塗りのアニメ調イラストにし、ダークスーツと紫などの差し色で妖艶な雰囲気を出す。 - ファーストビューの背景は、チョークで描いたような黒緑の黒板風テクスチャにする。 - STEP のイラストはベージュと金茶の 2 色で描いたアイソメトリックの線画にする。 - 写真は温かい自然光の室内で、テーブルの上で遊んでいる手元を撮る。 - サブキャラクターはアンティークの金の額縁に入れる。 - ストーリーの台紙は焼けた古紙のテクスチャにする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツを中央の 60% ほどの幅に収め、両側も同じ色の地で塗る。 - PC のキャッチコピーは 1 行にまとめる。 - PC の STEP カードは 3 列に並べ、特長アイコンはその下で中央にそろえる。 - PC のキャラクターは主役を中央に置き、サブキャラクターの額縁を右側に縦に並べる。 - PC の章紹介は、広げた画像と縦帯を横に並べる。 - 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-bc2b995d`（元 LP の URL から採番） - **元 LP**: https://realdgame.jp/eureka/ - **解析に使った画像**: 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/）からご連絡ください。