黒と蛍光緑のホラー謎解きイベント LP

Dark Neon Horror Mystery Event LP

黒と濃いグレーを地に、蛍光グリーンの発光ラインや文字を差し色にしたホラー・謎解きイベント向けの LP。夜景の写真、かすれた筆文字のタイトル、明朝体の見出しで不気味さと没入感を出す。CTA はすべて緑の枠線ボタンでそろえる。

エンタメ・ゲーム・アプリラグジュアリー・ダーククール・先進的力強い・インパクト情報量多め・訴求型SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は黒、#1A1A1A、#2B2C2C の 3 段階で切り替え、セクションの区切りを地の明るさで表す
差し色は蛍光グリーン 1 色に絞る。リード文、CTA、料金表の枠と文字に使う
見出しは白文字に緑の光彩をつけ、下に白い線と緑のグローを敷く
本文は白またはオフホワイト。グレーの文字は注釈だけに使う
写真は暗く寒色に寄せる。赤い信号など小さな赤だけをアクセントとして残す
安心ポイントの紹介だけは白地に黒文字の掲示板風ボックスにして、意図的に浮かせる

TYPOGRAPHY

書体

displayファーストビューの作品タイトル（かすれた筆文字）手書き・筆／ Yuji Boku 700 ／ 52px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション見出し（白に緑の光彩）明朝／ Shippori Mincho B1 800 ／ 30px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdPOINT の小見出しや STEP の見出し明朝／ Shippori Mincho B1 700 ／ 17px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

body-lg蛍光グリーンのリード文ゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文（明朝の落ち着いた語り口）明朝／ Noto Serif JP 400 ／ 14px ／行間 2

あなたの LP を、もっと伝わる形に。Aa 123

note注釈、補足、掲示板風のメタ情報ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.7

あなたの LP を、もっと伝わる形に。Aa 123

label-button枠線ボタンのラベル明朝／ Noto Serif JP 700 ／ 16px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

accentPOINT 番号のバッジ（太い欧文）欧文サンセリフ／ Montserrat 800 ／ 20px ／行間 1

あなたの LP を、もっと伝わる形に。Aa 123

見出しと本文は明朝体を基本にし、怪談のような語り口を出す
セクション見出しの直後に縦線のカーソル記号を置き、入力中の画面のように見せる
見出しには緑の text-shadow をつけて発光させる
FV のキャッチは縦書きにして短く改行する
料金や数値は明朝の太字で大きく見せ、補足は括弧付きの小さい文字にする
掲示板風ボックスの中だけはゴシックで、掲示板の書式を再現する

PAGE STRUCTURE

セクション構成

ファーストビュー世界観を一瞬で伝える夜の無人駅の写真を全面に敷き、縦書きの短いキャッチ、小さなジャンル名、かすれた筆文字の大きなタイトルを重ねる
リード題材と企画の概要を伝えるひび割れテクスチャのある濃いグレー地に、緑の太字ゴシック 3 行を中央揃えで置く
イベント紹介どんな体験かを説明する暗い写真の背景に発光見出しと本文を置き、2 つのリンクタイルと注釈ボックスを続ける
写真カルーセル空間の雰囲気を見せる夜の駅の写真を横スクロールで並べる
特長魅力を 3 つ示すPOINT 番号の円、明朝の見出し、写真、本文を 1 セットにして 3 回くり返す
スペシャル体験コンテンツへ誘導する暗い写真の背景の中央に緑の枠のバナーを置く
プレイ形式所要時間や人数などを示す発光アイコン 4 つを 2×2 で並べ、続けて必要な端末の案内カードを置く
ストーリー物語への興味をかき立てる線路の写真を背景に中央揃えの明朝文を置き、ぼかした続きと read more ボタンを添える
遊び方参加までの手順を示す発光する白枠の STEP カードを横スライドで並べる
安心ポイント不安をなくす掲示板風の白いボックスに 3 項目を並べる
チケット情報販売日程と料金を伝える緑の二重枠の小見出し、日程の文章、タブ付きの料金表、注意事項ボタンを順に置く
割引と CTA購入を後押しする角丸の割引カード 2 枚の後に、緑の二重枠の購入ボタンを置く
開催情報日程と会場を伝える空き状況カレンダー、地図、住所を、テクスチャのある暗い枠の中にまとめる

COMPONENTS

部品

主 CTA の二重枠ボタン button-primary黒地に緑の二重線で囲み、緑の明朝文字を中央に置く
詳細リンクボタン button-sub緑の 1 本線の枠に緑の文字を入れ、右端に ▼ をつける
発光するセクション見出し section-heading白い明朝文字にカーソル縦線を添え、下に緑のグローつきの白線を全幅で引く
POINT 番号の円 point-badge深緑の円の中に小さな POINT の文字と大きな数字を入れる
STEP カード step-card黒地を白い発光枠で囲み、STEP 番号、白いアイコン、見出し、区切り線、本文、ボタンを順に置く
プレイ形式のアイコングリッド icon-spec発光する白枠の正方形に白いアイコンを入れ、下にラベルと太字の値を置く
注釈ボックス notice-boxグレーの面に小さな白文字を中央揃えで置き、苦手な人向けの配慮を伝える
料金表 price-table緑の罫線で区切り、暗いグレーのセルに緑の文字を入れる。上に前売りと当日のタブを置く
掲示板風の安心ポイント bbs-box白地に番号、投稿者名、日時、本文を並べ、掲示板の書式で安心できる点を 3 つ並べる
割引の案内カード discount-card暗いグレーの面を白い角丸の枠で囲み、上にロゴ画像、下に本文と下線リンクを置く

守ること

地は黒からグレーの範囲に限定し、差し色は蛍光グリーンだけにする
見出しと枠線には必ず発光表現をつける
写真は暗く、夜の無人の雰囲気で統一する
本文は明朝体で行間を広めに取り、余韻を出す
ホラーが苦手な人への配慮を注釈ボックスで添える

DON'T

避けること

明るい背景色やパステル調の色を全体に使わない
塗りつぶしのカラフルなボタンや丸いピル型ボタンを使わない
グリーン以外の蛍光色を増やさない
明るく笑顔の人物写真を使わない
ドロップシャドウで立体感を出さない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黒と蛍光緑のホラー謎解きイベント LP（Dark Neon Horror Mystery Event LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト、情報量多め・訴求型
キーワード: 夜の駅・ネオングリーン発光・ホラー・謎解き・没入感・明朝見出し
地の質感: ひび割れや墨しぶきのテクスチャを暗いグレー地にうっすら重ねる。写真は暗く、低い彩度で見せる
形: 角丸なしの四角い枠線が基本。白や緑の線に外側への光彩をつける。割引の案内カードだけ角丸にする
温度感: 寒色寄りでとても暗い。蛍光グリーンだけが冷たく光る

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#33FF33`	ブランドを代表する蛍光グリーン（リード文・CTA 文字・枠線）	2%	推定
`background`	`#000000`	ページ全体の黒い地	40%	画素の実測
`background-alt`	`#1A1A1A`	特長セクションの濃いグレーの地	24%	画素の実測
`surface`	`#1A1A1A`	注釈ボックスやカードの面	8%	画素の実測
`dark-section`	`#2B2B2B`	プレイ形式セクションの中間グレーの地	8%	画素の実測
`text`	`#FAFAF5`	見出しと本文の白文字	4%	画素の主要色に補正
`secondary`	`#3A8A2E`	POINT 番号の円に使う深いグリーン	0%	推定
`cta`	`#2EC42B`	主 CTA の枠線（中は黒地）	0%	画素の実測
`on-cta`	`#33FF33`	CTA ボタンの文字色	0%	推定
`line`	`#FAFAF5`	見出し下の白い区切り線と STEP カードの枠	0%	画素の主要色に補正
`tint-1`	`#FEFEFE`	掲示板風の白いボックス（安心ポイントの紹介）	3%	画素の実測
`text-muted`	`#2B2C2C`	セクション間の細い区切り線	0%	画素の主要色に補正
`accent-1`	`#47824A`	掲示板ボックスの投稿者名に使う緑	0%	画素の実測
`secondary-accessible`	`#37822B`	AA を満たす補正値（計算）		計算

地は黒、#1A1A1A、#2B2C2C の 3 段階で切り替え、セクションの区切りを地の明るさで表す
差し色は蛍光グリーン 1 色に絞る。リード文、CTA、料金表の枠と文字に使う
見出しは白文字に緑の光彩をつけ、下に白い線と緑のグローを敷く
本文は白またはオフホワイト。グレーの文字は注釈だけに使う
写真は暗く寒色に寄せる。赤い信号など小さな赤だけをアクセントとして残す
安心ポイントの紹介だけは白地に黒文字の掲示板風ボックスにして、意図的に浮かせる
point-badge は文字 #FAFAF5 × 背景 #3A8A2E のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#37822B、4.57:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ファーストビューの作品タイトル（かすれた筆文字）	手書き・筆	Yuji Boku	700	52px	1.3	0.05em
`headline-lg`	セクション見出し（白に緑の光彩）	明朝	Shippori Mincho B1	800	30px	1.3	0.05em
`headline-md`	POINT の小見出しや STEP の見出し	明朝	Shippori Mincho B1	700	17px	1.6	0.03em
`body-lg`	蛍光グリーンのリード文	ゴシック	Noto Sans JP	700	16px	1.9	0.02em
`body-md`	本文（明朝の落ち着いた語り口）	明朝	Noto Serif JP	400	14px	2	0.05em
`note`	注釈、補足、掲示板風のメタ情報	ゴシック	Noto Sans JP	400	11px	1.7	0.02em
`label-button`	枠線ボタンのラベル	明朝	Noto Serif JP	700	16px	1.4	0.08em
`accent`	POINT 番号のバッジ（太い欧文）	欧文サンセリフ	Montserrat	800	20px	1	0em

見出しと本文は明朝体を基本にし、怪談のような語り口を出す
セクション見出しの直後に縦線のカーソル記号を置き、入力中の画面のように見せる
見出しには緑の text-shadow をつけて発光させる
FV のキャッチは縦書きにして短く改行する
料金や数値は明朝の太字で大きく見せ、補足は括弧付きの小さい文字にする
掲示板風ボックスの中だけはゴシックで、掲示板の書式を再現する
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。プレイ形式のアイコンは 2 列のグリッド
本文ブロックの幅: 画面幅の約 84%
余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
左右の余白は約 30px で固定する
セクション見出しは左寄せ。下に全幅の発光ラインを引く
POINT は番号の円と見出しを横に並べ、その下に写真と本文を縦に積む
POINT 同士の間に細いグレーの線を入れる
CTA は中央に置き、前後に広めの余白を取る
写真は横スクロールのカルーセルにする

Elevation & Depth

影は使わない。奥行きは発光（緑または白の外側 glow）で表す
STEP カードとアイコン枠には白い光彩をつける
掲示板風ボックスは上下の端を黒へグラデーションでぼかし、闇から浮かび上がるように見せる

Shapes

角丸: 小 0px ／中 4px ／大 16px。ボタンは角丸の長方形。
写真の切り抜き: 角丸なしの長方形。横長 3:2 前後で全幅に置く
セクション境界: 直線で切り替える。境界は地の明るさの差だけで示す
ボタンは角丸なしの四角い枠線にする。二重線の枠も使う
POINT 番号だけは正円にする
割引の案内カードは白い枠で角丸 16px にする
アイコンは白い線の正方形の枠に収める

Components

主 CTA の二重枠ボタン（button-primary）: 黒地に緑の二重線で囲み、緑の明朝文字を中央に置く
詳細リンクボタン（button-sub）: 緑の 1 本線の枠に緑の文字を入れ、右端に ▼ をつける
発光するセクション見出し（section-heading）: 白い明朝文字にカーソル縦線を添え、下に緑のグローつきの白線を全幅で引く
POINT 番号の円（point-badge）: 深緑の円の中に小さな POINT の文字と大きな数字を入れる
STEP カード（step-card）: 黒地を白い発光枠で囲み、STEP 番号、白いアイコン、見出し、区切り線、本文、ボタンを順に置く
プレイ形式のアイコングリッド（icon-spec）: 発光する白枠の正方形に白いアイコンを入れ、下にラベルと太字の値を置く
注釈ボックス（notice-box）: グレーの面に小さな白文字を中央揃えで置き、苦手な人向けの配慮を伝える
料金表（price-table）: 緑の罫線で区切り、暗いグレーのセルに緑の文字を入れる。上に前売りと当日のタブを置く
掲示板風の安心ポイント（bbs-box）: 白地に番号、投稿者名、日時、本文を並べ、掲示板の書式で安心できる点を 3 つ並べる
割引の案内カード（discount-card）: 暗いグレーの面を白い角丸の枠で囲み、上にロゴ画像、下に本文と下線リンクを置く

Do's and Don'ts

Do - 地は黒からグレーの範囲に限定し、差し色は蛍光グリーンだけにする - 見出しと枠線には必ず発光表現をつける - 写真は暗く、夜の無人の雰囲気で統一する - 本文は明朝体で行間を広めに取り、余韻を出す - ホラーが苦手な人への配慮を注釈ボックスで添える

Don't - 明るい背景色やパステル調の色を全体に使わない - 塗りつぶしのカラフルなボタンや丸いピル型ボタンを使わない - グリーン以外の蛍光色を増やさない - 明るく笑顔の人物写真を使わない - ドロップシャドウで立体感を出さない

Page Structure

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

ファーストビュー（世界観を一瞬で伝える）: 夜の無人駅の写真を全面に敷き、縦書きの短いキャッチ、小さなジャンル名、かすれた筆文字の大きなタイトルを重ねる
リード（題材と企画の概要を伝える）: ひび割れテクスチャのある濃いグレー地に、緑の太字ゴシック 3 行を中央揃えで置く
イベント紹介（どんな体験かを説明する）: 暗い写真の背景に発光見出しと本文を置き、2 つのリンクタイルと注釈ボックスを続ける
写真カルーセル（空間の雰囲気を見せる）: 夜の駅の写真を横スクロールで並べる
特長（魅力を 3 つ示す）: POINT 番号の円、明朝の見出し、写真、本文を 1 セットにして 3 回くり返す
スペシャル（体験コンテンツへ誘導する）: 暗い写真の背景の中央に緑の枠のバナーを置く
プレイ形式（所要時間や人数などを示す）: 発光アイコン 4 つを 2×2 で並べ、続けて必要な端末の案内カードを置く
ストーリー（物語への興味をかき立てる）: 線路の写真を背景に中央揃えの明朝文を置き、ぼかした続きと read more ボタンを添える
遊び方（参加までの手順を示す）: 発光する白枠の STEP カードを横スライドで並べる
安心ポイント（不安をなくす）: 掲示板風の白いボックスに 3 項目を並べる
チケット情報（販売日程と料金を伝える）: 緑の二重枠の小見出し、日程の文章、タブ付きの料金表、注意事項ボタンを順に置く
割引と CTA（購入を後押しする）: 角丸の割引カード 2 枚の後に、緑の二重枠の購入ボタンを置く
開催情報（日程と会場を伝える）: 空き状況カレンダー、地図、住所を、テクスチャのある暗い枠の中にまとめる

Imagery

写真は夜の駅や線路など人のいない場所で撮り、暗く寒色寄りに補正する
赤い信号や照明など、小さな光源をアクセントとして写し込む
背景にはひび割れや墨しぶきの黒いテクスチャをうっすら重ねる
アイコンは白い塗りのシンプルなピクトグラムにし、発光をつける
タイトルはかすれた筆文字で、白い文字に荒れた質感を出す
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC はコンテンツ幅を約 65% に絞って中央に寄せ、両脇は黒い地を見せる
PC の FV では縦書きのキャッチを左右に分け、タイトルを 1 行にまとめる
PC ではプレイ形式のアイコンを 4 列、STEP カードを 3 列で横に並べる
PC の割引カードは、ロゴを左、本文を右に置く横並びにする
PC のリード文は 2 行にまとめる

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

---
version: alpha
name: Dark Neon Horror Mystery Event LP
description: 黒と濃いグレーを地に、蛍光グリーンの発光ラインや文字を差し色にしたホラー・謎解きイベント向けの LP。夜景の写真、かすれた筆文字のタイトル、明朝体の見出しで不気味さと没入感を出す。CTA はすべて緑の枠線ボタンでそろえる。
colors:
  primary: '#33FF33'
  background: '#000000'
  background-alt: '#1A1A1A'
  surface: '#1A1A1A'
  dark-section: '#2B2B2B'
  text: '#FAFAF5'
  secondary: '#3A8A2E'
  cta: '#2EC42B'
  on-cta: '#33FF33'
  line: '#FAFAF5'
  tint-1: '#FEFEFE'
  text-muted: '#2B2C2C'
  accent-1: '#47824A'
  secondary-accessible: '#37822B'
typography:
  display:
    fontFamily: Yuji Boku
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Shippori Mincho B1
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Shippori Mincho B1
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.9
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  accent:
    fontFamily: Montserrat
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.0
rounded:
  sm: 0px
  md: 4px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 52px
  button-sub:
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    height: 44px
  section-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 80px
  point-badge:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 60px
  step-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 440px
  icon-spec:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 200px
  notice-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 180px
  price-table:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.primary}'
    typography: '{typography.body-md}'
    height: 260px
  bbs-box:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.dark-section}'
    typography: '{typography.note}'
    height: 260px
  discount-card:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 400px
---

# DESIGN.md — 黒と蛍光緑のホラー謎解きイベント LP（Dark Neon Horror Mystery Event LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、クール・先進的、力強い・インパクト、情報量多め・訴求型
- **キーワード**: 夜の駅・ネオングリーン発光・ホラー・謎解き・没入感・明朝見出し
- **地の質感**: ひび割れや墨しぶきのテクスチャを暗いグレー地にうっすら重ねる。写真は暗く、低い彩度で見せる
- **形**: 角丸なしの四角い枠線が基本。白や緑の線に外側への光彩をつける。割引の案内カードだけ角丸にする
- **温度感**: 寒色寄りでとても暗い。蛍光グリーンだけが冷たく光る

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#33FF33` | ブランドを代表する蛍光グリーン（リード文・CTA 文字・枠線） | 2% | 推定 |
| `background` | `#000000` | ページ全体の黒い地 | 40% | 画素の実測 |
| `background-alt` | `#1A1A1A` | 特長セクションの濃いグレーの地 | 24% | 画素の実測 |
| `surface` | `#1A1A1A` | 注釈ボックスやカードの面 | 8% | 画素の実測 |
| `dark-section` | `#2B2B2B` | プレイ形式セクションの中間グレーの地 | 8% | 画素の実測 |
| `text` | `#FAFAF5` | 見出しと本文の白文字 | 4% | 画素の主要色に補正 |
| `secondary` | `#3A8A2E` | POINT 番号の円に使う深いグリーン | 0% | 推定 |
| `cta` | `#2EC42B` | 主 CTA の枠線（中は黒地） | 0% | 画素の実測 |
| `on-cta` | `#33FF33` | CTA ボタンの文字色 | 0% | 推定 |
| `line` | `#FAFAF5` | 見出し下の白い区切り線と STEP カードの枠 | 0% | 画素の主要色に補正 |
| `tint-1` | `#FEFEFE` | 掲示板風の白いボックス（安心ポイントの紹介） | 3% | 画素の実測 |
| `text-muted` | `#2B2C2C` | セクション間の細い区切り線 | 0% | 画素の主要色に補正 |
| `accent-1` | `#47824A` | 掲示板ボックスの投稿者名に使う緑 | 0% | 画素の実測 |
| `secondary-accessible` | `#37822B` | AA を満たす補正値（計算） |  | 計算 |

- 地は黒、#1A1A1A、#2B2C2C の 3 段階で切り替え、セクションの区切りを地の明るさで表す
- 差し色は蛍光グリーン 1 色に絞る。リード文、CTA、料金表の枠と文字に使う
- 見出しは白文字に緑の光彩をつけ、下に白い線と緑のグローを敷く
- 本文は白またはオフホワイト。グレーの文字は注釈だけに使う
- 写真は暗く寒色に寄せる。赤い信号など小さな赤だけをアクセントとして残す
- 安心ポイントの紹介だけは白地に黒文字の掲示板風ボックスにして、意図的に浮かせる
- `point-badge` は文字 `#FAFAF5` × 背景 `#3A8A2E` のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#37822B`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの作品タイトル（かすれた筆文字） | 手書き・筆 | Yuji Boku | 700 | 52px | 1.3 | 0.05em |
| `headline-lg` | セクション見出し（白に緑の光彩） | 明朝 | Shippori Mincho B1 | 800 | 30px | 1.3 | 0.05em |
| `headline-md` | POINT の小見出しや STEP の見出し | 明朝 | Shippori Mincho B1 | 700 | 17px | 1.6 | 0.03em |
| `body-lg` | 蛍光グリーンのリード文 | ゴシック | Noto Sans JP | 700 | 16px | 1.9 | 0.02em |
| `body-md` | 本文（明朝の落ち着いた語り口） | 明朝 | Noto Serif JP | 400 | 14px | 2 | 0.05em |
| `note` | 注釈、補足、掲示板風のメタ情報 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em |
| `label-button` | 枠線ボタンのラベル | 明朝 | Noto Serif JP | 700 | 16px | 1.4 | 0.08em |
| `accent` | POINT 番号のバッジ（太い欧文） | 欧文サンセリフ | Montserrat | 800 | 20px | 1 | 0em |

- 見出しと本文は明朝体を基本にし、怪談のような語り口を出す
- セクション見出しの直後に縦線のカーソル記号を置き、入力中の画面のように見せる
- 見出しには緑の text-shadow をつけて発光させる
- FV のキャッチは縦書きにして短く改行する
- 料金や数値は明朝の太字で大きく見せ、補足は括弧付きの小さい文字にする
- 掲示板風ボックスの中だけはゴシックで、掲示板の書式を再現する
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。プレイ形式のアイコンは 2 列のグリッド
- **本文ブロックの幅**: 画面幅の約 84%
- **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
- 左右の余白は約 30px で固定する
- セクション見出しは左寄せ。下に全幅の発光ラインを引く
- POINT は番号の円と見出しを横に並べ、その下に写真と本文を縦に積む
- POINT 同士の間に細いグレーの線を入れる
- CTA は中央に置き、前後に広めの余白を取る
- 写真は横スクロールのカルーセルにする

## Elevation & Depth

- 影は使わない。奥行きは発光（緑または白の外側 glow）で表す
- STEP カードとアイコン枠には白い光彩をつける
- 掲示板風ボックスは上下の端を黒へグラデーションでぼかし、闇から浮かび上がるように見せる

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 16px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの長方形。横長 3:2 前後で全幅に置く
- **セクション境界**: 直線で切り替える。境界は地の明るさの差だけで示す
- ボタンは角丸なしの四角い枠線にする。二重線の枠も使う
- POINT 番号だけは正円にする
- 割引の案内カードは白い枠で角丸 16px にする
- アイコンは白い線の正方形の枠に収める

## Components

- **主 CTA の二重枠ボタン**（`button-primary`）: 黒地に緑の二重線で囲み、緑の明朝文字を中央に置く
- **詳細リンクボタン**（`button-sub`）: 緑の 1 本線の枠に緑の文字を入れ、右端に ▼ をつける
- **発光するセクション見出し**（`section-heading`）: 白い明朝文字にカーソル縦線を添え、下に緑のグローつきの白線を全幅で引く
- **POINT 番号の円**（`point-badge`）: 深緑の円の中に小さな POINT の文字と大きな数字を入れる
- **STEP カード**（`step-card`）: 黒地を白い発光枠で囲み、STEP 番号、白いアイコン、見出し、区切り線、本文、ボタンを順に置く
- **プレイ形式のアイコングリッド**（`icon-spec`）: 発光する白枠の正方形に白いアイコンを入れ、下にラベルと太字の値を置く
- **注釈ボックス**（`notice-box`）: グレーの面に小さな白文字を中央揃えで置き、苦手な人向けの配慮を伝える
- **料金表**（`price-table`）: 緑の罫線で区切り、暗いグレーのセルに緑の文字を入れる。上に前売りと当日のタブを置く
- **掲示板風の安心ポイント**（`bbs-box`）: 白地に番号、投稿者名、日時、本文を並べ、掲示板の書式で安心できる点を 3 つ並べる
- **割引の案内カード**（`discount-card`）: 暗いグレーの面を白い角丸の枠で囲み、上にロゴ画像、下に本文と下線リンクを置く

## Do's and Don'ts

**Do**
- 地は黒からグレーの範囲に限定し、差し色は蛍光グリーンだけにする
- 見出しと枠線には必ず発光表現をつける
- 写真は暗く、夜の無人の雰囲気で統一する
- 本文は明朝体で行間を広めに取り、余韻を出す
- ホラーが苦手な人への配慮を注釈ボックスで添える

**Don't**
- 明るい背景色やパステル調の色を全体に使わない
- 塗りつぶしのカラフルなボタンや丸いピル型ボタンを使わない
- グリーン以外の蛍光色を増やさない
- 明るく笑顔の人物写真を使わない
- ドロップシャドウで立体感を出さない

## Page Structure

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

1. **ファーストビュー**（世界観を一瞬で伝える）: 夜の無人駅の写真を全面に敷き、縦書きの短いキャッチ、小さなジャンル名、かすれた筆文字の大きなタイトルを重ねる
2. **リード**（題材と企画の概要を伝える）: ひび割れテクスチャのある濃いグレー地に、緑の太字ゴシック 3 行を中央揃えで置く
3. **イベント紹介**（どんな体験かを説明する）: 暗い写真の背景に発光見出しと本文を置き、2 つのリンクタイルと注釈ボックスを続ける
4. **写真カルーセル**（空間の雰囲気を見せる）: 夜の駅の写真を横スクロールで並べる
5. **特長**（魅力を 3 つ示す）: POINT 番号の円、明朝の見出し、写真、本文を 1 セットにして 3 回くり返す
6. **スペシャル**（体験コンテンツへ誘導する）: 暗い写真の背景の中央に緑の枠のバナーを置く
7. **プレイ形式**（所要時間や人数などを示す）: 発光アイコン 4 つを 2×2 で並べ、続けて必要な端末の案内カードを置く
8. **ストーリー**（物語への興味をかき立てる）: 線路の写真を背景に中央揃えの明朝文を置き、ぼかした続きと read more ボタンを添える
9. **遊び方**（参加までの手順を示す）: 発光する白枠の STEP カードを横スライドで並べる
10. **安心ポイント**（不安をなくす）: 掲示板風の白いボックスに 3 項目を並べる
11. **チケット情報**（販売日程と料金を伝える）: 緑の二重枠の小見出し、日程の文章、タブ付きの料金表、注意事項ボタンを順に置く
12. **割引と CTA**（購入を後押しする）: 角丸の割引カード 2 枚の後に、緑の二重枠の購入ボタンを置く
13. **開催情報**（日程と会場を伝える）: 空き状況カレンダー、地図、住所を、テクスチャのある暗い枠の中にまとめる

## Imagery

- 写真は夜の駅や線路など人のいない場所で撮り、暗く寒色寄りに補正する
- 赤い信号や照明など、小さな光源をアクセントとして写し込む
- 背景にはひび割れや墨しぶきの黒いテクスチャをうっすら重ねる
- アイコンは白い塗りのシンプルなピクトグラムにし、発光をつける
- タイトルはかすれた筆文字で、白い文字に荒れた質感を出す
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はコンテンツ幅を約 65% に絞って中央に寄せ、両脇は黒い地を見せる
- PC の FV では縦書きのキャッチを左右に分け、タイトルを 1 行にまとめる
- PC ではプレイ形式のアイコンを 4 列、STEP カードを 3 列で横に並べる
- PC の割引カードは、ロゴを左、本文を右に置く横並びにする
- PC のリード文は 2 行にまとめる

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

SOURCE

出典と注意

元の LP: https://realdgame.jp/s/kisaragi/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP