DESIGN.md — 深緑×ミント発光の体験型ゲームイベント LP（Dark Teal Sci-Fi Immersive Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: クール・先進的、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: HUD風パネル・発光ミントライン・暗い工業写真・コンクリート質感・ミッション感・細い角飾り枠
• 地の質感: コンクリート壁や暗い工場の写真を低明度で敷く。パネルは半透明の深緑で、外側がうっすら光る。
• 形: 角丸なしの矩形パネル。四隅に小さな三角の角飾りを付け、細い二重線で囲む。見出し下は両端に菱形が付いた細い横線にする。
• 温度感: 冷たい。青緑寄りの暗色で緊張感を出す。

Colors

• 地はすべて深緑黒の暗色にし、明るい背景のセクションは作らない。
• 見出しの英字と枠線は発光ミント 1 色にそろえる。
• 黄色は注意書き・料金補足・リンクだけに使い、面には使わない。
• 赤は残り期日など緊急性を示す数字だけに使う。
• パネルは背景写真の上に 70〜85% の不透明度で重ねる。
• 白い面は商品カードなど、物を見せる場所だけに使う。

Typography

• 英字見出しは細めのコンデンス体を大きく置き、その下に小さな日本語訳を中央ぞろえで添える。
• 日本語の見出しは太字にせず、字間を広めに取って静かに見せる。
• 本文は淡い灰緑の文字で、純白は避ける。
• 数字（期日・時間）はデジタル表示風にする。
• 強調語は黄色に変えるだけにし、太字は多用しない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長アイコン・プレイ形式・グッズは SP で 2 列または縦積み。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは英字見出し → 日本語サブ → 区切り線 → パネルの順に積む。
• 情報はすべて枠付きパネルの中に入れる。
• パネルを中央に置き、左右に背景写真を見せる。
• セクションの境目に、黄黒の警告ストライプ風の細い帯を入れてもよい。

Elevation & Depth

• 影ではなく、ミント色の外側グロー（0 0 12px、30% 程度）で浮かせる。
• パネルは二重枠（外側の細線と内側の細線）で奥行きを出す。
• ボタンは上が明るく下が暗いグラデーションとベベルで立体的にする。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの矩形。キャラクターは縦長の短冊に並べ、斜めに区切る。
• セクション境界: 直線で区切る。境目に暗い帯や警告ストライプを入れる。
• 角丸は使わず、四隅に三角の角飾りを付ける。
• 区切り線は両端に菱形が付いた 1px のミント線。
• ボタンは横長の矩形にする。
• STEP カードは右端にアイコンの線画を入れる。

Components

• HUD 風情報パネル（hud-panel）: 半透明の深緑面に細い二重枠と角飾りを付け、中に見出しと本文を入れる。
• 英字＋和文の見出し（section-title）: ミント色の大きな英字の下に、小さな日本語を添える。
• 菱形付き区切り線（diamond-divider）: 小見出しの下に引く、両端に菱形が付いた細い横線。
• デジタル期日ボード（countdown-board）: 金属調の枠の中に、赤いデジタル数字で終了日を出す。下に会場と一言を添える。
• 参加手順カード（step-card）: STEP 番号と手順名を横に並べ、右に線画アイコン、下に注釈を入れる。
• ベベル付きボタン（button-primary）: 暗い緑のグラデーションに明朝体の白文字を置く。開閉用は右に三角を付ける。
• 料金表（price-table）: 枠付きの暗い表。左列のラベルは黄色で、下に黄色の補足を付ける。
• グッズカード（goods-card）: 白い面に商品画像、品名、黒の大きな価格を入れる。
• 特徴アイコンタイル（feature-icon-tile）: 正方形の枠付きタイルに、人数や頻度の短いラベルと白い線画アイコンを入れる。

Do's and Don'ts

Do - 暗い背景写真の上に半透明パネルを重ね、没入感を作る。 - 見出しは英字と和文の 2 段構成で統一する。 - 枠線・角飾り・区切り線はミント 1 色にそろえる。 - 注意事項はテーマごとに別のパネルへ分け、箇条書きの点もミント色にする。 - 数字はデジタル表示風に見せ、ミッション感を出す。

Don't - 白や明るい背景のセクションを入れない。 - 角丸やピル型ボタンを使わない。 - 黄色や赤を広い面に使わない。 - ポップな丸ゴシックやパステル色を使わない。 - パネルのない状態で、本文を写真の上に直接置かない。

Page Structure

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

1. ファーストビュー（世界観とコラボ内容を一目で伝える）: 暗いキャラクタービジュアルの上に、筆系の太字コピーをミント色の発光で大きく重ねる。
2. 開催期日（公演期限で行動を促す）: コンクリート地に金属枠のボードを置き、赤いデジタル数字で日付を出す。
3. 体験写真の帯（会場の雰囲気を見せる）: 横一列に写真を並べ、上下に警告ストライプを入れる。
4. イントロダクション（体験の概要を説明する）: HUD パネルに説明文を入れ、右に特徴アイコンタイルを 3 つ縦に並べる。
5. お知らせ・キャンペーン（感染症対策やキャンペーンを告知する）: パネルの下に開閉式のボタンを置く。小さなバナーを添える。
6. ストーリー（物語への没入を促す）: 暗い都市写真の上に縦長パネルを置き、その下に動画を埋め込む。
7. キャラクター（登場人物を紹介する）: 縦長のポートレートを 3 枚並べ、英名と和名を重ねる。
8. 参加方法（手順を示す）: STEP カードを 4 枚縦に積み、右にアイコンを入れる。
9. イベント概要（期間・場所・地図・プレイ形式を伝える）: 小見出しと区切り線の下に情報と地図を置き、プレイ形式は 3 枚のカードにする。
10. チケット（料金・特典・購入方法を案内する）: 料金表、特典の画像と説明、予約カレンダー、アプリ案内の順に並べる。
11. グッズ（物販を紹介する）: 枠の中に白いカードをグリッドで並べ、価格を大きく出す。
12. 注意事項（ルールや注意を伝える）: テーマ別のパネルを縦に積み、末尾にリンクボタンを 3 つ並べる。

Imagery

• コンクリート壁・工場・暗い都市の夜景を、緑寄りの低彩度で背景に使う。
• 人物写真は、緑の照明が当たったセットで遊ぶ様子をドキュメント風に撮る。
• アイコンは白か淡いミントの単線画で、人・時計・建物などを描く。
• キービジュアルはシネマティックで暗く、青緑にトーンをそろえる。
• 警告ストライプやデジタル数字など、計器・施設を思わせるモチーフを足す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はパネルを中央 500〜600px 幅に収め、左右に背景写真を見せる。SP はパネルを画面幅の 90% にする。
• イントロとアイコンタイルの横並びは、SP では縦積みにしてタイルを 3 列にする。
• プレイ形式の 3 カードは、SP では縦積みにする。
• グッズのグリッドは SP では 2 列にする。
• 写真の帯は SP では横スクロールにするか、2 段に折り返す。
• 英字見出しは SP で 28〜30px、PC で 40px 前後にする。

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