---
version: alpha
name: Dark Teal Sci-Fi Immersive Event LP
description: ほぼ黒の深い緑青を地にして、ミント色の発光ラインと細い枠を重ねた近未来 SF 調のイベント LP。コンクリートや工業施設の暗い写真を背景にし、半透明の HUD 風パネルに情報を入れる。見出しは英字の細いコンデンス体に小さな日本語を添える。強調には黄色を少しだけ使う。
colors:
  primary: '#7FD9C8'
  background: '#1D3C37'
  background-alt: '#081C1A'
  surface: '#1A423D'
  secondary: '#3C635B'
  dark-section: '#061512'
  text-body: '#AFC3BF'
  accent-1: '#F2E45C'
  line: '#4FA898'
  cta: '#1C5B54'
  on-cta: '#FFFFFF'
  accent-2: '#F04A55'
  surface-alt-placeholder: '#F7F7F7'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Oswald
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Oswald
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  hud-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 240px
  section-title:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 56px
  diamond-divider:
    textColor: '{colors.line}'
    height: 8px
  countdown-board:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.accent-2}'
    typography: '{typography.accent}'
    rounded: '{rounded.sm}'
    height: 120px
  step-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    height: 64px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 44px
  price-table:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 200px
  goods-card:
    backgroundColor: '{colors.surface-alt-placeholder}'
    textColor: '{colors.dark-section}'
    typography: '{typography.headline-md}'
    height: 220px
  feature-icon-tile:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    height: 72px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#7FD9C8` | 発光ミント（英字見出し・枠線） | 2% | 推定 |
| `background` | `#1D3C37` | ページ地の深緑黒 | 35% | 画素の実測 |
| `background-alt` | `#081C1A` | 下部セクションのより暗い地 | 15% | 画素の実測 |
| `surface` | `#1A423D` | 半透明パネルの面 | 10% | 画素の主要色に補正 |
| `secondary` | `#3C635B` | 灰緑のコンクリート帯 | 11% | 画素の実測 |
| `dark-section` | `#061512` | パネル内の濃い面 | 12% | 画素の実測 |
| `text-body` | `#AFC3BF` | 本文の淡い灰緑 | 2% | 画素の主要色に補正 |
| `accent-1` | `#F2E45C` | 黄色の強調（注意・価格補足・STEP名） | 0% | 推定 |
| `line` | `#4FA898` | パネル枠・区切り線 | 1% | 推定 |
| `cta` | `#1C5B54` | ベベル付きの暗緑ボタン | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 推定 |
| `accent-2` | `#F04A55` | 期日表示の赤ネオン | 0% | 推定 |
| `surface-alt-placeholder` | `#F7F7F7` | グッズカードの白面 | 3% | 画素の実測 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大きな作戦名コピー | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.2 | 0.02em |
| `headline-lg` | セクションの英字見出し | 欧文サンセリフ | Oswald | 400 | 30px | 1.2 | 0.03em |
| `headline-md` | 日本語の小見出し（開催期間・チケット料金など） | ゴシック | Noto Sans JP | 400 | 18px | 1.5 | 0.08em |
| `headline-sm` | 英字見出しの下に添える日本語 | ゴシック | Noto Sans JP | 400 | 11px | 1.4 | 0.1em |
| `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em |
| `note` | 注釈・米印の補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `accent` | STEP番号・カウントダウンの数字 | 欧文サンセリフ | Oswald | 500 | 22px | 1.2 | 0.05em |
| `label-button` | ボタンのラベル | 明朝 | Noto Serif JP | 600 | 13px | 1.4 | 0.05em |

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

```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-de4f38f0`（元 LP の URL から採番）
- **元 LP**: https://mysterycircus.jp/s/realstealthgame-ff7r/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。