DESIGN.md — 黒×ネオンと紺の白カード 謎解きイベントLP（Neon Night Transit Mystery Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、情報量多め・訴求型、ポップ・元気
• キーワード: 夜の地下鉄・ネオン発光・斜めカット写真・白カード情報整理・路線カラー帯
• 地の質感: 前半は黒の光沢とグロー。後半はフラットな白カード
• 形: 斜めに切った写真帯、角丸の白カード、ピル型のラベルとボタン、二重線の円アイコン
• 温度感: 前半は冷たく神秘的。後半は親しみやすく実用的

Colors

• 前半の世界観パートは黒地に白文字だけで組む
• 後半の情報パートは紺地に白カードを浮かべる
• 路線カラー（赤・緑・青）の細い多色帯で紹介文帯を上下から挟む
• 赤は小見出しのピルラベルに限定する
• 緑はアイコンの円線と項目名に使う
• FV直下はオリーブとえんじを斜めに対向させ、背景を三角形に分割する
• label-pill-red は文字 #FEF9F6 × 背景 #E85A5A のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E02222、4.55:1）を使う。
• icon-circle-info は文字 #1E9A45 × 背景 #FFFFFF のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1A873C、4.59:1）を使う。
• badge-tilt は文字 #FEF9F6 × 背景 #8AA63D のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#667B2D、4.53:1）を使う。

Typography

• 見出しは中央揃えにする
• 見出しの下に、両端に丸が付いた太い横線を引く
• 日付と価格は数字だけを約2倍に大きくし、単位は小さく添える
• 曜日は丸囲み文字で表記する
• 本文は中央揃えを基本にする
• 注釈は12px程度に小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。開催情報のアイコンのみ 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真帯は画面幅いっぱいに置き、上下を斜めにカットする
• 情報カードは左右16pxの余白で配置し、カード同士は紺地を約30px空けて並べる
• 遊び方のSTEPは横スライドのカードにし、右端に緑の矢印を置く
• 販売スケジュールは黒細線の四角枠で囲む
• CTAボタンは幅約60〜90%で中央に置く

Elevation & Depth

• 白カードには影を付けず、紺地とのコントラストで浮かせる
• STEPカードは右下にオリーブ緑のベタ影をずらして重ねる
• サブボタンには薄いドロップシャドウを付ける
• FVはネオンのグローで光らせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真帯は四角形のまま、上下辺を斜めにカット。特典などの物撮りは傾けて配置
• セクション境界: 斜めの直線カット。後半は角丸カードの切れ目を境界にする
• 情報カードは角丸24px
• ラベルとread moreボタンはピル型
• 販売ボタンは角丸なし、黒枠の四角
• アイコンは緑の二重線の円に入れる

Components

• 丸付き下線の見出し（heading-dot-line）: 中央揃えの見出しの下に、両端に丸が付いた太い横線を引く
• 白ピルボタン（button-pill-white）: 黒地の上に置く白いピル型ボタン。文字は黒
• 黒枠ボタン（button-outline-square）: 白地に黒い太枠の四角ボタン。文字の後ろに▶を付ける
• 赤ピルラベル（label-pill-red）: 開催期間や料金などの小見出しに付けるラベル
• 円アイコン情報（icon-circle-info）: 緑の二重線の円に線画アイコンを入れ、下に緑の項目名と値を置く
• STEPカード（step-card）: 写真、STEP番号、説明文、黒枠ボタンを縦に並べ、オリーブのずらし影を付ける
• 白情報カード（info-card）: 紺地に浮かべる角丸の白カード。上部に見出しを置く
• 斜めバッジ（badge-tilt）: オリーブ緑の角丸帯を傾け、特典の補足を白文字で入れる
• 路線カラー帯（line-stripe）: 赤・緑・青の細線を重ねた帯。紹介文ブロックの上下を区切る

Do's and Don'ts

Do - 前半は黒地で世界観、後半は紺地＋白カードで情報、と役割を分ける - 数字は大きく太く強調する - 見出しにはすべて丸付き下線を付けて統一する - 写真帯は斜めカットでリズムを付ける - 赤は小見出しラベルに絞って使う

Don't - 黒地パートにパステル色を広く敷かない - 白カードに強い影を付けない - 赤を本文や見出し全体に使わない - セクション境界をすべて水平線にしない - 見出しを左揃えにしない

Page Structure

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

1. ファーストビュー（世界観を一瞬で伝える）: 黒地に、正面から撮った車両の写真と赤緑のネオン光を置く。中央に明朝のロゴを大きく、縦書きのコピーを車両の横に添える
2. リード（イベントを要約する）: オリーブとえんじが斜めに対向する背景の上に、白の太字を中央に4行で置く
3. イベント紹介（体験の概要を伝える）: 散らしたポラロイド風の写真コラージュの下に、えんじの帯と白文字を置く。帯の上下は路線カラーの線で挟む
4. 動画（雰囲気を動画で伝える）: 動画の埋め込みを置き、下に全幅の写真をつなげる
5. イントロダクション（物語的な導入）: 黒地に中央揃えの白い本文を置き、白ピルの続きを読むボタンを付ける。下に斜めカットの写真
6. 遊び方（参加手順を示す）: 写真付きのSTEPカードを横スライドで見せる
7. 安心ポイント（初めての人の不安を解消する）: 3項目を、番号付きの生成りの札を並べたバナーにする
8. バリアフリー案内（対象者を広げる）: キャラクター入りの緑枠バナーを写真背景の上に置く。下部は赤帯
9. イベント概要（基本情報を示す）: 白カードに赤ラベルを付け、大きい数字の日付と2×2の円アイコンを並べる
10. 販売情報・料金・特典（購入条件を伝える）: 黒細線の枠に販売スケジュールを入れる。続けて大きい数字の価格、斜めバッジ、傾けた特典画像を置く
11. 購入情報CTA（購入へ誘導する）: 角丸の枠ボタンで販売店一覧を開閉させ、その下に通販ボタンを置く

Imagery

• 夜の車両を正面から撮り、ヘッドライトのフレアと赤緑のネオン光をかぶせる
• 駅や街中で二人組が楽しむ自然光の写真を使う
• 写真は白縁のポラロイド風にし、傾けて重ねたコラージュにする
• アイコンは単色の線画で、円の中に入れる
• やさしいキャラクターのイラストは案内バナーだけに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文を中央の約70%幅に収める
• PCの紹介ブロックは写真コラージュを左、文章を右にした2カラムにする
• PCのSTEPカードはスライドをやめ、3枚を横に並べる
• PCの円アイコンは4つを横一列に並べる
• PCのFVはロゴを左、車両写真を右に置く横長構図にする

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