DESIGN.md — 紫黒×ネオンのアーケードカード商品 LP（Neon Cyber Dark Trading Card Product LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、力強い・インパクト、ラグジュアリー・ダーク
• キーワード: ネオン・サイバー・斜めカット・発光・ダーク・コレクション
• 地の質感: 暗い紫黒の地に、ぼかした六角形や円形の HUD 模様、ドットグリッド、うっすら光るグローを重ねる
• 形: 平行四辺形の帯、斜めに切ったライン、細い三角マーカー。角丸はほとんど使わない
• 温度感: 寒色寄り。マゼンタの差し色で熱を足す

Colors

• 地は紫黒（#130F29）と赤紫黒（#1D091E）を交互に使い、真っ白や明るい地は使わない
• 見出し帯はロイヤルブルーの斜めの面にマゼンタのライン 1 本を重ねてネオン感を出す
• キャラ別の帯は赤・シアン・緑・青・金など色を変えて区別する
• 文字は白か明るいグレーだけにする。色付きの文字は使わない
• 商品写真の周りにシアンやマゼンタの外側グローをつけて発光させる
• 金色は記念ロゴのワンポイントだけに使う

Typography

• 見出しは極太ゴシックにして、斜体をかけるとスピード感が出る
• セクション見出しの下に、文字を大きく空けた小さな英字サブタイトルを必ず添える
• 背景には、セクション名などの大きな英字を薄い輪郭文字の透かしで入れる
• 本文は中央揃えで 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。