DESIGN.md — 紺黒×シアンのサイバーHUD風ゲームLP（Dark Cyber HUD Game Title LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、ラグジュアリー・ダーク、力強い・インパクト
• キーワード: HUD・グリッチ・発光ライン・暗い深海色・斜めの切り抜き・極太欧文
• 地の質感: 暗い背景に細いグリッド線、極小の英字テキストを敷き詰め、半透明のキャラ絵を重ねた奥行きのある質感
• 形: 角丸のない直角の矩形。四隅のブラケットや細い枠線、斜めの平行四辺形で切り抜く
• 温度感: 寒色で冷たい。赤の差し色で緊張感を出す

Colors

• 地はほぼ紺黒〜漆黒の2段階に限定し、明るい地は作らない
• シアンは発光ライン・小見出し・リンクに使い、面で広く塗らない
• 赤は作品名の強調ラベルとキーコピーのみ。1画面1〜2か所に抑える
• マゼンタとシアンの色ずれは大見出しのグリッチ表現に限る
• カードは青緑の半透明面に細いシアン枠を付け、背景絵を透かす
• 仕様表とフッターは漆黒の地＋シアン文字＋暗シアン罫線で締める

Typography

• 大見出しは極太の欧文大文字。白にシアンとマゼンタの1〜2pxずれを付ける
• 見出しの左上に短い白線、下に端に丸を付けたシアンの発光ラインを置く
• 長い見出しは2行に割って右寄せにしてもよい
• あらすじ本文は短く改行し、行間2.2以上でゆっくり読ませる
• 日付・番号・ボタン・ラベルは字間の広い欧文太字にする
• スタッフ欄は英字の役職ラベルを小さく、和文役職を太字、人名を大きくの3段にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カルーセルは左右に次の項目を少し見せる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは左右交互に寄せ、ラインを画面端からのばす
• 本文ブロックは左右6%の余白で中央に置く
• カードは縦に積み、間隔は12px前後
• カルーセルは中央1枚＋左右矢印の四角ボタン
• 仕様表は左に項目名・右に値の2列、行ごとに罫線

Elevation & Depth

• 影は使わず、発光（シアンのglow）で浮き上がらせる
• カードは半透明面＋細枠で背景から分ける
• 背景に大きな半透明の英字やキャラ絵を敷いて奥行きを出す
• 四隅のL字ブラケットでフレームを示す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 直角の矩形、キャラ一覧は斜めの平行四辺形。スクショは角度を変えて重ねる
• セクション境界: 基本は直線で切り替える。スタッフ欄だけ斜めの細線で区切る
• 角丸は使わない
• ボタンは細枠の矩形
• カード右下に大きな半透明の連番数字を置く
• 画像の端に細いHUDバーやメーター風の線を添える
• 動画サムネイルは中央に円形の再生アイコン

Components

• グリッチ大見出し（glitch-section-title）: 極太の英字に色ずれを付け、左上に短い白線、下に丸付きのシアン発光ラインを置く
• MOREボタン（button-more）: 濃い青緑の面に細いシアン枠、欧文太字の矩形ボタン。幅は約半分
• ニュースカード（news-card）: 半透明の青緑面に細枠。日付・本文を並べ、右下に大きな薄い連番を置き、下端に二重線
• 赤の強調ラベル（red-tag）: 本文の中で作品名などを赤い矩形に白文字で入れる
• 帯付き見出し（band-heading）: 画像の下に半透明の青緑帯を敷いた白文字の見出し。キーワードは赤やシアンで目立たせる
• 斜め切り抜きキャラカルーセル（slant-character-carousel）: 平行四辺形のカードを横に並べる。中央は赤地に全身絵。カウンターと四角い矢印ボタンを付ける
• 四角い矢印ボタン（arrow-button）: 半透明の暗い面に細いシアン枠、中央に白い山形の矢印
• 仕様表（spec-table）: 漆黒の地で左にシアンの小さい項目名、右にシアンの値。行ごとに暗シアンの罫線
• カウントダウン表示（countdown-badge）: 右上に数字＋欧文の残り日数。レーダー風の円とクロスヘアの線を重ねる

Do's and Don'ts

Do - 地は紺黒で統一し、シアンの細線と発光で情報を整理する - 大見出しは英字の極太体にグリッチを付ける - 背景にグリッド・極小英字・半透明キャラ絵を重ねて奥行きを出す - 赤はキーワードと主役キャラにだけ使う - カード・ボタンは直角の細枠にする - 番号や日付は欧文の太字で表示する

Don't - 白や明るい色の地のセクションを作らない - 角丸やピル型のボタンを使わない - ドロップシャドウで浮かせない - 赤やマゼンタを面として広く塗らない - 丸ゴシックや手書き体を使わない - 情報を枠のない平らな配置にしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（世界観とキービジュアル、発売日・対応機種を伝える）: 全画面の縦長キャラ絵。下部にロゴ・日付・機種ロゴを白で重ね、上部に言語切替・音声ボタン・カウントダウンを置く
2. 体験版バナー（今すぐ遊べる導線を作る）: キャラ入りの横長バナーをスライダーにしてドットで送る。下に細枠のサブボタン
3. お知らせ（最新情報を伝える）: グリッチ見出しの下に連番入りの半透明カードを3枚並べ、MOREボタンを置く
4. あらすじ紹介（物語の導入とクリエイター陣を伝える）: 斜めに重ねたゲーム画面のスクショ、行間の広い白い本文、赤ラベル、赤の大きな強調コピー
5. ゲームシステム（遊び方の2本柱を伝える）: 四隅ブラケット付きのプレイ画面に帯付き見出しを重ね、MOREボタンを置く
6. キャラクター（登場人物の魅力を伝える）: 斜めに切り抜いたキャラカードのカルーセル。カウンター・肩書き・名前・声優名を付ける
7. キーワード（世界観の用語を解説する）: 写真＋シアンの用語名＋解説文のカードをカルーセルにし、左右に矢印を置く
8. トレーラー（動画で訴求する）: 再生アイコン付きのサムネイル、シアンのラベル、右下に四角い矢印ボタン
9. スタッフ（制作陣の実績で信頼を作る）: 青緑の地に大きなキャラ絵を透かし、役職英字・役職・人名・代表作を縦に並べる
10. 製品仕様（価格・機種などの基本情報を示す）: 漆黒の地にシアン文字の2列表と罫線
11. シェア・フッター（拡散と各種リンク）: シアンのSNSアイコン3つ、欧文太字のリンク、小さな注記と著作権表記

Imagery

• アニメ調のキャラ絵を主役にする。暗い夜景＋青紫のライティング
• 背景の絵は暗く落として半透明で敷き、上に格子線を重ねる
• ゲーム画面のスクショを少し回転させて重ね、HUDバー風の線を添える
• 主役キャラの後ろは赤一色の斜めの面で目立たせる
• 極小の英字を背景に並べてデータ感を出す
• レーダー円・クロスヘア・丸付きの線など、計器のような装飾を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは見出しを1行に収め、左右に交互に寄せる
• PCのファーストビューは横長の集合絵にし、体験版バナーを左下に小さく置く
• PCのカルーセルは左右の項目を大きく見せ、横いっぱいに並べる
• PCのスタッフ欄は左にキャラ絵、中央に役職、右に人名の横並び
• PCのフッターは左に仕様表、右にシェアとリンクの2カラム
• PCのニュースカードは中央寄せで幅約75%

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 行書くと起動時に読み込まれる。