--- version: alpha name: Neon Cyber Dark Trading Card Product LP description: 深い紫黒の地に、マゼンタ・シアン・ブルーのネオン帯と斜めのカットを重ねたサイバー調の LP。商品の写真とカード画像を光らせて並べ、キャラクター別に色を変えた斜め帯の見出しで 1 枚ずつ紹介する。 colors: background: '#0B0914' background-alt: '#1D091E' dark-section: '#0B0A14' primary: '#E0207A' secondary: '#3041CF' accent-1: '#2FD6C8' accent-2: '#C8A24A' accent-3: '#5CE02A' surface: '#0B0A14' text: '#FFFFFF' text-body: '#E6E6EE' text-muted: '#5A5F86' line: '#2F3056' typography: display: fontFamily: Montserrat fontSize: 22px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Share Tech Mono fontSize: 9px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.3em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading-band: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 64px character-title-band: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 32px product-label: textColor: '{colors.text}' typography: '{typography.label-button}' height: 20px view-tag: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 20px glow-card: rounded: '{rounded.sm}' height: 260px hud-bg-ornament: backgroundColor: '{colors.line}' rounded: '{rounded.full}' height: 120px watermark-text: textColor: '{colors.line}' typography: '{typography.display}' height: 30px --- # DESIGN.md — 紫黒×ネオンのアーケードカード商品 LP（Neon Cyber Dark Trading Card Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、力強い・インパクト、ラグジュアリー・ダーク - **キーワード**: ネオン・サイバー・斜めカット・発光・ダーク・コレクション - **地の質感**: 暗い紫黒の地に、ぼかした六角形や円形の HUD 模様、ドットグリッド、うっすら光るグローを重ねる - **形**: 平行四辺形の帯、斜めに切ったライン、細い三角マーカー。角丸はほとんど使わない - **温度感**: 寒色寄り。マゼンタの差し色で熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#0B0914` | ページ全体の紫黒の地 | 40% | 画素の実測 | | `background-alt` | `#1D091E` | 赤紫寄りの暗い地の帯 | 15% | 画素の主要色に補正 | | `dark-section` | `#0B0A14` | フッター付近や最暗部 | 10% | 画素の主要色に補正 | | `primary` | `#E0207A` | 見出し帯の下に引くネオンマゼンタのライン | 2% | 推定 | | `secondary` | `#3041CF` | 見出し帯のロイヤルブルーの斜め面 | 3% | 画素の実測 | | `accent-1` | `#2FD6C8` | シアン系の HUD 線やフレームの縁 | 1% | 推定 | | `accent-2` | `#C8A24A` | 記念ロゴの金色 | 1% | 推定 | | `accent-3` | `#5CE02A` | キャラ別帯の差し替え色（緑） | 0% | 推定 | | `surface` | `#0B0A14` | キャラ名を載せる黒い斜め帯 | 2% | 画素の主要色に補正 | | `text` | `#FFFFFF` | 見出しの白文字 | 1% | 推定 | | `text-body` | `#E6E6EE` | 本文の明るいグレー文字 | 1% | 推定 | | `text-muted` | `#5A5F86` | 見出し下の英字サブタイトル | 0% | 推定 | | `line` | `#2F3056` | 背景の六角形・幾何学模様の線 | 6% | 画素の主要色に補正 | - 地は紫黒（#130F29）と赤紫黒（#1D091E）を交互に使い、真っ白や明るい地は使わない - 見出し帯はロイヤルブルーの斜めの面にマゼンタのライン 1 本を重ねてネオン感を出す - キャラ別の帯は赤・シアン・緑・青・金など色を変えて区別する - 文字は白か明るいグレーだけにする。色付きの文字は使わない - 商品写真の周りにシアンやマゼンタの外側グローをつけて発光させる - 金色は記念ロゴのワンポイントだけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | タイトルロゴ下の英字サブタイトル | 欧文サンセリフ | Montserrat | 700 | 22px | 1.2 | 0.02em | | `headline-lg` | リード見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.4 | 0.02em | | `headline-md` | セクション見出し（帯の上の文字） | ゴシック | Noto Sans JP | 900 | 22px | 1.3 | 0.04em | | `headline-sm` | キャラ名の斜め帯（斜体） | ゴシック | Noto Sans JP | 800 | 15px | 1.3 | 0.02em | | `body-md` | 中央揃えの説明文 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.03em | | `accent` | 見出し下の小さな英字や背景の大きな透かし英字 | 欧文サンセリフ | Share Tech Mono | 400 | 9px | 1.2 | 0.3em | | `note` | 画像の注記と権利表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | 商品写真に添えるラベル（斜体） | ゴシック | Noto Sans JP | 700 | 12px | 1.3 | 0.02em | - 見出しは極太ゴシックにして、斜体をかけるとスピード感が出る - セクション見出しの下に、文字を大きく空けた小さな英字サブタイトルを必ず添える - 背景には、セクション名などの大きな英字を薄い輪郭文字の透かしで入れる - 本文は中央揃えで 2〜3 行に収める - 文字色は白系だけにし、強調は太さとグローで表す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品の比較は 2 列、カード一覧は 3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 見出し帯は画面の端から端まで伸ばし、端を斜めに切る - キャラ紹介はキャラの大きなビジュアルを左に置き、右側にカードを重ねる - 商品写真は中央に大きく置き、下に斜体のラベルを添える - FRONT と BACK のような表示切り替えラベルは写真の左下に置く - 要素どうしの間隔はゆったり取り、暗い地の余白を残す ## Elevation & Depth - 影の代わりに、シアンやマゼンタの外側グロー（blur 20〜30px）で要素を浮かせる - 商品写真には暗い落ち影をつけて背景から浮かせる - カード画像には細い光の縁をつける ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: カードや商品は角そのままの長方形。キャラのビジュアルは切り抜いて、端を背景へフェードさせる - **セクション境界**: 斜めのネオン帯と三角マーカーで区切る - 帯やラベルは平行四辺形（skew -15° 程度）にする - 帯の両端には細い斜線のストライプ（//）を飾りとして置く - 丸い形は背景の HUD リングだけに使う ## Components - **ネオン見出し帯**（`section-heading-band`）: 白い極太の見出しを、ブルーの斜め面とマゼンタのラインからなる帯の上に置き、下に英字サブタイトルを添える - **キャラ名の斜め帯**（`character-title-band`）: 黒い平行四辺形の帯に白い斜体のキャラ名を載せる。両端の斜線ストライプはキャラごとに色を変える - **商品ラベル**（`product-label`）: 商品写真の下に、白い斜体で品名と個数を書く - **表示切り替えタグ**（`view-tag`）: 写真の左下に、シアンの下線つきで英字ラベルを置く - **発光カード**（`glow-card`）: 縦長のカード画像。外側にネオンのグローをつける - **HUD 背景装飾**（`hud-bg-ornament`）: 半透明の六角形・リング・ドットグリッドを背景に散らして、画面の奥行きを出す - **透かし英字**（`watermark-text`）: キャラ帯の上に、シーズン名などの大きな英字を薄い輪郭文字で置く ## Do's and Don'ts **Do** - 地は常に暗い紫黒にして、ネオンの色を際立たせる - 見出しはすべて同じネオン帯の型でそろえる - キャラごとに帯のアクセント色を変えて、一覧に変化をつける - 商品とカードには必ずグローをつけて発光させる - 英字サブタイトルと透かし英字でゲームの UI 風の雰囲気を作る **Don't** - 白や明るい地のセクションを作らない - 丸いピル型のボタンや柔らかい角丸のカードは使わない - パステル色や暖色の淡い色は使わない - 本文を長文で組まない - グローなしのフラットな商品写真だけで並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と記念感を一瞬で伝える）: キャラ 3 体が派手に光るキービジュアルの下に、金の記念ロゴとタイトルロゴを置く 2. **導入**（セットの概要を伝える）: 白い極太のリード見出しと、中央揃えの 3 行の説明文 3. **セット内容**（同梱物を一覧で見せる）: ネオン見出し帯の下に、商品写真 2 点とカード 9 枚（5＋4 枚）を並べ、それぞれラベルを添える 4. **商品詳細 1**（ケースの質感と使い方を見せる）: 短い説明文と、表・裏の写真を 2 列×2 段で並べ、表示切り替えタグを付ける 5. **商品詳細 2**（スタンドの意匠を見せる）: シアンに光る大きな写真 2 枚と、フレームの拡大写真に説明文を添える 6. **カード紹介**（収録カードを 1 枚ずつ見せる）: キャラ名の斜め帯、大きなキャラビジュアル、カード画像のブロックを 9 回繰り返し、帯の色をキャラごとに変える 7. **注記・権利表記**（画像の注意と権利を示す）: 暗い地に小さな文字を中央揃えで置く ## Imagery - CG のメカキャラを強い逆光とネオンの光の粒子で描き、ダイナミックな構図にする - 商品写真は黒い背景で物撮りし、ネオンのグローを足す - カード画像は虹色の光沢と箔の表現で光らせる - 背景は六角形パターン、HUD リング、ドット、斜めのラインを半透明で重ねる - キャラのビジュアルは切り抜いて、画面の端からはみ出す大きさで置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP ではカード一覧を 3 列にし、商品写真は 2 列を保つ - キャラ紹介はビジュアルを背景に回し、帯とカードを中央に縦に積む - 見出し帯は画面幅いっぱいに伸ばし、文字は 22px 前後にする - 背景の透かし英字は小さくするか、はみ出させて切る ## 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-881b685c`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000245000/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（2/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。