DESIGN.md — 漆黒×深紅の潜入体験イベント LP（Dark Tactical Stealth Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト、情報量多め・訴求型
• キーワード: ステルス・ミリタリー・グリッチ・ネオン・緊張感・任務
• 地の質感: 黒地にデジタルノイズ・斜線ストライプ・ひび割れガラス・水面の光のテクスチャを重ねる
• 形: 角丸のない直線的な矩形。斜めの切り込みと、斜線ハッチを入れた帯
• 温度感: 冷たい（黒・紺に深紅を差す）

Colors

• 地は黒か濃いグレーにして、ノイズやテクスチャを重ねる
• 赤は CTA・期限告知・見出し横の縦バーだけに使う
• 深紅の面は 1 セクションの帯としてだけ敷く
• 黄色は購入方法の帯だけに限定し、ページの転換点にする
• 料金表の青・赤紫・緑は券種を見分ける色として使う
• 本文は白、注釈は灰色にする
• price-table は文字 #F8F9FB × 背景 #5684B8 のコントラスト比が 3.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#4775A9、4.55:1）を使う。

Typography

• 英字の大見出しは斜体のアウトライン（またはネオン調の縁取り）にし、右下に和文の小見出しを添える
• FV のコピーは明朝の太字にし、白に影をつけて写真の上に置く
• 本文はゴシックの白で、行間を広めに取る
• 小見出しの左には赤い縦バーを置く
• 縦書きの欧文（Mission など）を装飾として左端に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長タイルとステップは 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの頭に大きな欧文見出しを置き、すぐ下から本文を始める
• 特長は 2×2 のタイルで隙間なく並べる
• ステップは番号付きのカードを横に並べる（SP では 2 列×2 段）
• 時刻表・料金表は全幅のダークテーブルにする
• CTA ボタンは中央揃えで、1〜2 個を並べる

Elevation & Depth

• 影は基本的に使わず、枠線とテクスチャの重なりで奥行きを出す
• FV のコピーには黒のドロップシャドウをつける
• マップは暗い枠の四隅に緑のコーナーマーカーをつけて浮かせる

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸のない矩形。写真の右上に「＋」の拡大アイコンを付ける
• セクション境界: 斜めに切ったグレーの帯と、テクスチャの切り替えで区切る
• 角丸は 0〜4px に留める
• カードの右下は斜めにカットするか、斜線で影をつける
• 見出しラベルには斜線ハッチの帯を背負わせる
• ボタンの右端に丸い矢印アイコンを置く

Components

• 赤い主 CTA（button-primary）: 赤い面に白文字、右端に丸い矢印アイコン。購入方法の選択に使う
• 白地赤枠のサブボタン（button-outline）: 白い面に赤の枠と赤文字、右に赤い丸矢印
• 期限の告知枠（deadline-badge）: 黒地に赤い細枠で囲んだ一行の告知
• ひび割れガラスの特長タイル（feature-tile）: 黒地にひび割れのテクスチャ、ざらついた白いピクトと斜体の見出し
• 番号付きステップカード（step-card）: 紺グレーの面に細い斜体の番号、太字のタイトル、短い説明。右下を斜めにカット
• 赤い縦バーの小見出し（heading-bar）: 左に赤の縦線を置いた白い太字の見出し
• 色分けした料金表（price-table）: 券種ごとに青・赤紫・緑で塗り分けた行と、黒いヘッダー
• 購入案内の黄色帯（purchase-band）: 黄色い帯に黒い見出しを置き、下に購入方法を 3 行並べる

Do's and Don'ts

Do - 黒地にはノイズ・グリッチ・水面の光などのテクスチャを必ず敷く - 欧文の大見出しは斜体のアウトラインにし、和文の小見出しと組み合わせる - CTA は赤と白（赤枠）の 2 種類に絞る - 表は濃いグレーの罫線で区切り、情報を整理する - 写真は暗いトーンで、緑や青の光が差すものを使う

Don't - パステルカラーや明るい白地を広く使わない（購入エリアを除く） - 角丸やピル型のボタンを使わない - 柔らかい丸ゴシックや手書きの書体を使わない - 赤を本文の装飾に多用しない - やわらかいグラデーションの背景にしない

Page Structure

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

1. ファーストビュー（世界観と任務の提示）: 暗い写真の上に、明朝の太字コピーと火花のエフェクトを重ねる
2. 期限告知・導入文（期限による緊急性と概要の提示）: 赤枠の告知を置き、斜めのグレー帯に白い斜体の導入文を載せ、赤いバナーを添える
3. 動画・お知らせ（最新情報）: 埋め込み動画と、濃いグレーの枠のお知らせ一覧
4. 特長（遊びの特徴を 4 つ伝える）: ひび割れガラスのタイルを 2×2 で並べ、下に写真ギャラリーを置く
5. ストーリー（物語への没入）: 青いアウトラインの欧文見出しの下に、白い本文を置く
6. マップ（会場内の構造の紹介）: 深紅の帯の上に、ネオン線で描いたフロアマップを置く
7. 遊び方の流れ（参加までの手順）: 01〜04 のステップカードと、白地赤枠のボタン群
8. ミッション詳細（ルールと装備の説明）: 青い水面テクスチャの上に、人物図解と赤い縦バーの小見出しを並べる
9. 日時・時刻表（開催情報）: 斜線の帯に置いた開催期間のカードと、ダークテーブル
10. 料金（券種と価格）: 色分けした料金表と、詳細へのボタン
11. 購入方法（コンバージョン）: 黄色い帯の見出しの下に、明るいグレー地で赤ボタンを 3 行並べ、カレンダーを置く
12. ブランド紹介・フッター（コラボの説明と権利表記）: ノイズの帯の上にロゴと短い文。最下部は小さな白文字

Imagery

• 暗い室内で、懐中電灯や緑・青のライトに照らされた人物を写した写真
• 背景にはピクセルノイズ・グリッチ・斜線ストライプを使う
• アイコンはかすれた質感の白いピクトにする
• マップはネオン線と斜線ハッチで描いた見取り図にする
• 人物の装備図解は、モノクロのシルエットに引き出し線と英字の注記を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の約 75% 幅に組む。SP では 90% 幅の 1 カラムにする
• 特長タイルは SP でも 2 列のまま、高さを詰める
• ステップは PC の 4 列から、SP では 2 列×2 段にする
• 時刻表・料金表は横スクロールさせず、列を絞って全幅で表示する
• 欧文の大見出しは SP で 40〜48px に縮める

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