---
version: alpha
name: Neon Night Event Gray Grid LP
description: 夜景写真とネオンサイン風ロゴを使った黒基調のファーストビューの下に、グレー地の出演者写真グリッドが続く野外イベント告知 LP。装飾は抑えて、写真とネオンのイラストで華やかさを出す。
colors:
  primary: '#E8203C'
  dark-section: '#020101'
  background: '#A6A6A6'
  background-alt: '#F9F9F9'
  on-dark: '#FEFFFF'
  accent-1: '#F5C518'
  accent-2: '#5FD3F0'
  accent-3: '#B58CF0'
  cta: '#3DB54A'
  on-cta: '#F9FAFB'
  surface: '#FEFDFD'
  text: '#000000'
  line: '#C9C2B7'
  cta-accessible: '#2C8336'
  background-accessible: '#767676'
typography:
  display:
    fontFamily: Monoton
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Dela Gothic One
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.5
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 700
    lineHeight: 1.4
  accent:
    fontFamily: Caveat
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  full: 999px
spacing:
  unit: 8px
  card: 0px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  header-bar:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 44px
  neon-hero:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 420px
  lineup-panel:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 560px
  info-strip:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 18px
  badge-free:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    height: 18px
  performer-tile:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 162px
  section-title:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 40px
  info-table:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 300px
  back-to-top:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    rounded: '{rounded.sm}'
    height: 20px
---

# DESIGN.md — 黒×ネオン×グレーの夜市イベント LP（Neon Night Event Gray Grid LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、シンプル・ミニマル
- **キーワード**: ネオンサイン・夜市・黒背景・グレー地のグリッド・出演者紹介・野外イベント
- **地の質感**: 黒地に発光するネオン管風のイラスト。下部はフラットなグレー面で、質感は付けない
- **形**: 角丸なしの四角い写真枠と表。直線的で装飾は最小限
- **温度感**: 上部は夜のにぎわいを感じるネオン色で温かく、下部は無彩色のグレーで落ち着いている

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#E8203C` | ネオンの赤（ロゴの主発光色） | 2% | 推定 |
| `dark-section` | `#020101` | FV・出演者告知パネルの黒地 | 24% | 画素の実測 |
| `background` | `#A6A6A6` | 出演者グリッド・インフォメーションのグレー地 | 40% | 画素の実測 |
| `background-alt` | `#F9F9F9` | フッターのごく薄いグレー地 | 6% | 画素の実測 |
| `on-dark` | `#FEFFFF` | 黒地・グレー地の見出しと本文の白文字 | 3% | 画素の実測 |
| `accent-1` | `#F5C518` | 日程ラベルの黄色文字 | 0% | 推定 |
| `accent-2` | `#5FD3F0` | ネオンの水色（ロゴの縁取り） | 1% | 推定 |
| `accent-3` | `#B58CF0` | ネオンの紫（イラスト内の枠線） | 0% | 推定 |
| `cta` | `#3DB54A` | 入場無料バッジの緑 | 0% | 推定 |
| `on-cta` | `#F9FAFB` | バッジ上の白文字 | 0% | 画素の主要色に補正 |
| `surface` | `#FEFDFD` | 日程情報バーの白地 | 0% | 画素の実測 |
| `text` | `#000000` | 白い情報バー上の黒文字 | 0% | 画素の主要色に補正 |
| `line` | `#C9C2B7` | インフォメーション表の行区切り線 | 0% | 画素の主要色に補正 |
| `cta-accessible` | `#2C8336` | AA を満たす補正値（計算） |  | 計算 |
| `background-accessible` | `#767676` | AA を満たす補正値（計算） |  | 計算 |

- ページ上部は黒、出演者紹介以降はミディアムグレー、フッターは薄いグレーの 3 段で地色を切り替える
- 色が鮮やかなのはネオンのイラストと写真だけ。UI の部品には赤・水色・紫を使わない
- グレー地の上の見出し・名前・表の文字はすべて白にする
- 日程ラベルだけ黄色にして、出演者名の白と区別する
- 緑は「無料」などのバッジ 1 か所にだけ使う
- 写真の余白は黒で埋め、黒い枠のように見せる
- `badge-free` は文字 `#F9FAFB` × 背景 `#3DB54A` のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#2C8336`、4.56:1）を使う。
- `info-table` は文字 `#FEFFFF` × 背景 `#A6A6A6` のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#767676`、4.53:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ネオン風のロゴ（画像で作る） | 装飾・ディスプレイ | Monoton | 400 | 64px | 1.1 | 0.05em |
| `headline-lg` | セクション見出し（英字・和文） | ゴシック | Noto Sans JP | 700 | 28px | 1.3 | 0.02em |
| `headline-md` | 黒パネル内の英字小見出し | 欧文サンセリフ | Dela Gothic One | 400 | 20px | 1.2 | 0em |
| `headline-sm` | FV の日付とイベント名 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em |
| `body-md` | 出演者リスト・表の本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.5 | 0em |
| `note` | 写真下の名前キャプションと注記 | ゴシック | Noto Sans JP | 700 | 8px | 1.4 | 0em |
| `accent` | 黒パネル脇の縦書き手書き英字 | 欧文スクリプト | Caveat | 400 | 14px | 1.2 | 0.05em |

- 見出しは太字のゴシックで中央に置き、飾りは付けない
- ネオンのロゴは文字ではなく画像として描く
- 日程の表記は［日付(曜日)］の形で黄色にし、行頭に置く
- 写真の名前は白の極小太字で、写真の下中央に置く
- 英字と和文の見出しを混ぜてもよいが、書体は 1 種類にそろえる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は写真が 2 カラム、それ以外は 1 カラム
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算）
- 出演者の写真は正方形のタイルを 2 列に並べ、縦横の間隔を約 10px にする
- 名前のキャプションと次の行の写真の間は 24px ほど空ける
- 黒パネルは左右に 12px ほどの余白を残して置く
- インフォメーションは 2 列の表にし、中央寄せで 72% 幅にする
- パネルの最下部に、日程・時間・場所を 1 行で並べた帯を付ける

## Elevation & Depth

- 影は使わず、すべてフラットにする
- 奥行きはネオンの発光表現（グロー）だけで出す
- 右下に固定する小さな黒い四角の「トップへ戻る」ボタンにも影は付けない

## Shapes

- **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
- **写真の切り抜き**: 正方形の黒い枠の中に、元の比率のまま写真を収める（上下左右の余りは黒）
- **セクション境界**: 直線で地色を切り替えるだけ
- 写真枠・バッジ・表はすべて角丸なし
- 丸い形はネオンのイラストの中だけで使う
- 表の区切りは細い横線のみ

## Components

- **固定ヘッダー**（`header-bar`）: 黒地に白太字のサイト名を左、ハンバーガーメニューを右に置く
- **ネオンのファーストビュー**（`neon-hero`）: 暗くした夜景写真の上にネオンのロゴを置き、下に日付・イベント名・告知を白で中央揃えにする
- **出演者告知パネル**（`lineup-panel`）: 黒地にネオンのイラストと英字の小見出しを置き、黄色の日程と白の出演者名をリストで並べる
- **日程情報バー**（`info-strip`）: 白い帯に日付・時間・場所を 1 行で並べ、右端に緑のバッジを付ける
- **無料バッジ**（`badge-free`）: 緑の四角に白文字の小さなラベル
- **出演者タイル**（`performer-tile`）: 黒い正方形の枠に写真を入れ、下に白の極小キャプションで名前を置く
- **セクション見出し**（`section-title`）: グレー地の上に白太字で中央に置く。下線などの飾りは付けない
- **開催概要の表**（`info-table`）: 項目と内容の 2 列で、白太字を中央に揃え、行を細い線で区切る
- **トップへ戻るボタン**（`back-to-top`）: 右下に固定する黒い小さな四角に、白い上向き矢印を入れる

## Do's and Don'ts

**Do**
- ファーストビューとパネルは黒地にし、ネオンの発光を引き立てる
- 出演者写真は同じサイズの枠に収め、整ったグリッドにする
- 日程は黄色、名前は白というように情報の種類で色を分ける
- 開催概要は最後に表でまとめる
- 協賛・主催のロゴはフッターの白い地にまとめて置く

**Don't**
- UI 部品に角丸・影・グラデーションを付けない
- グレー地の上に黒やネオン色の本文を置かない
- ネオン色をボタンや見出しの面の色に使わない
- 写真をトリミングして枠を埋めず、黒の余白で収める
- セクションの間に波形や斜めの区切りを入れない

## Page Structure

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

1. **ヘッダー**（サイト名とメニューへの導線）: 黒地の細い帯に白文字のサイト名とハンバーガーメニュー
2. **ファーストビュー**（イベントの世界観と日程を一目で伝える）: 夜の屋台写真の上にネオンのロゴを大きく置き、日付・名称・告知を白で中央に置く
3. **出演者告知パネル**（ステージ別の出演者と日程を一覧で見せる）: 黒パネルの上半分にネオンのイラストを置き、下半分にジャンル別の英字見出しと日程付きのリストを並べる。左右に縦書きの手書き英字を添える
4. **開催情報バー**（日時・場所・料金を要約する）: 白帯 1 行に日時と場所を並べ、右端に緑の無料バッジを置く
5. **ライブ出演者**（アーティストを写真で紹介する）: グレー地に白い見出しを置き、黒枠の写真タイルを 2 列で並べて名前を添える
6. **パフォーマー紹介**（大道芸人を写真で紹介する）: ライブ出演者と同じ 2 列のタイル。縦長の写真は左右を黒で埋める
7. **開催概要**（名称・日程・場所・主催などの正式な情報を示す）: 白い大見出しの下に、2 列の表を線で区切って中央に置き、最後に助成の注記を添える
8. **協賛ロゴ・フッター**（主催者を示し、SNS への導線を置く）: 白地にロゴを並べ、薄いグレーの帯にコピーライトと SNS アイコンを置く

## Imagery

- ファーストビューは、夕暮れから夜の屋外で電球が灯る屋台の写真を暗くし、手前を少しぼかす
- ロゴは赤・水色・黄・紫のネオン管風の線画にして、外側にグローを付ける
- パネルのイラストは、招き猫・提灯・富士山・地名の看板などを和風モチーフのネオンで描き、星形のきらめきを散らす
- 出演者写真はアーティスト写真をそのまま使い、色や加工の統一はしない
- 大道芸の写真は全身が入る縦長の構図にし、余白を黒で埋める
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はヘッダーにテキストのメニュー（各セクション・言語切り替え・SNS）を横に並べる
- PC は出演者グリッドを 3 列にし、中央 75% 幅に収める
- PC の黒パネルは中央 85% 幅にし、左右にグレー地を見せる
- PC の開催概要の表は 50% 幅ほどの中央寄せにする
- ファーストビューの構成は SP と PC で同じで、ロゴの大きさだけを調整する

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