---
version: alpha
name: Neon Night Event Adult-Humor LP
description: 真っ黒な地に、マゼンタ・シアン・イエローのネオン管風の文字や線画イラストを光らせた夜間限定イベントの LP。紫のレンガ壁、発光する枠線、太い丸ゴシックで、遊び心のある大人向けのムーディーさを出している。コラボ施設はネイビー・ブラウン・ワインの色違いのネオン枠カードで並べる。
colors:
  background: '#000000'
  primary: '#FE00FE'
  secondary: '#8200FF'
  accent-1: '#40D8F0'
  marker: '#FDFE02'
  on-dark: '#FFFFFF'
  dark-section: '#440046'
  tint-1: '#0D3344'
  accent-2: '#4C3514'
  accent-3: '#4D0E26'
  cta: '#010101'
  on-cta: '#FAFCFB'
  surface: '#FEFEFE'
  primary-accessible: '#D000D0'
typography:
  display:
    fontFamily: M PLUS Rounded 1c
    fontSize: 48px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Dela Gothic One
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: M PLUS Rounded 1c
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.75
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1.5
  accent:
    fontFamily: Montserrat
    fontSize: 36px
    fontWeight: 800
    lineHeight: 1.1
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 6px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 56px
  neon-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    height: 40px
  neon-frame-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 700px
  icon-circle:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 150px
  condition-label:
    backgroundColor: '{colors.marker}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 28px
  speech-bubble:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 60px
  product-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 180px
  price-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 90px
---

# DESIGN.md — 黒地にネオン管が光る夜間イベント LP（Neon Night Event Adult-Humor LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、ポップ・元気、力強い・インパクト、情報量多め・訴求型
- **キーワード**: ネオンサイン・夜・発光・ハート・マゼンタ×シアン・大人のユーモア
- **地の質感**: 黒い地に、ぼかした外側グロー（発光）を重ねる。ファーストビューとグッズ欄は暗い紫のレンガ壁テクスチャ。
- **形**: ネオン管風の角丸の枠、円形のアイコン台座、波線の見出し飾り、黒地に白枠の角丸ボタン
- **温度感**: 夜らしいクールな地色に、ホットピンクの熱っぽい発光を重ねた、妖しさと楽しさが同居する印象

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#000000` | ページ全体の黒地 | 55% | 画素の実測 |
| `primary` | `#FE00FE` | ネオンのマゼンタ（アイコン台座・見出し・価格） | 6% | 画素の実測 |
| `secondary` | `#8200FF` | 「他にも」パネルのバイオレット面 | 4% | 画素の実測 |
| `accent-1` | `#40D8F0` | シアンのネオン枠線・英字見出し | 2% | 推定 |
| `marker` | `#FDFE02` | 条件ラベルの黄色帯・強調の黄文字 | 2% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 黒地の上の白い本文 | 3% | 推定 |
| `dark-section` | `#440046` | イントロ欄の暗い紫の面 | 6% | 画素の主要色に補正 |
| `tint-1` | `#0D3344` | コラボカード1のネイビーの面 | 4% | 画素の実測 |
| `accent-2` | `#4C3514` | コラボカード2のブラウンの面 | 5% | 画素の実測 |
| `accent-3` | `#4D0E26` | コラボカード3のワインの面 | 4% | 画素の実測 |
| `cta` | `#010101` | 黒地に白枠のボタン | 1% | 画素の実測 |
| `on-cta` | `#FAFCFB` | ボタンの白文字 | 0% | 画素の実測 |
| `surface` | `#FEFEFE` | 商品写真を置く白い台紙 | 3% | 画素の実測 |
| `primary-accessible` | `#D000D0` | AA を満たす補正値（計算） |  | 計算 |

- 地は常に黒。面積の 5 割以上を黒にして、ネオンの発光を際立たせる
- マゼンタは主役のネオン色。見出し・価格・アイコンの台座に使う
- シアンは英字のセクション見出しと枠線に使い、マゼンタと対で光らせる
- イエローは「プレゼント」「割引」などお得情報の強調と条件ラベルだけに使う
- コラボカードはネイビー・ブラウン・ワインの暗い色で塗り分け、枠線だけを明るく光らせる
- 本文は黒地の上なら白を基本にする。注釈は小さな白文字にする
- `icon-circle` は文字 `#FFFFFF` × 背景 `#FE00FE` のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D000D0`、4.57:1）を使う。
- `product-card` は文字 `#FE00FE` × 背景 `#FEFEFE` のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D000D0`、4.53:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ネオン管風のタイトル・大きな割引率 | 丸ゴシック | M PLUS Rounded 1c | 900 | 48px | 1.1 | 0.02em |
| `headline-lg` | 英字のセクション見出し（ネオン管風の丸い英字） | 欧文サンセリフ | Montserrat | 800 | 28px | 1.1 | 0.08em |
| `headline-md` | プレゼント告知などの太い和文見出し | ゴシック | Dela Gothic One | 400 | 30px | 1.25 | 0.02em |
| `headline-sm` | コンテンツ名・商品名・項目名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.3 | 0.03em |
| `body-md` | 中央揃えの説明文 | ゴシック | Noto Sans JP | 700 | 13px | 1.75 | 0.03em |
| `note` | ※注釈・期間条件 | ゴシック | Noto Sans JP | 700 | 9px | 1.5 | 0em |
| `accent` | 価格・日付の大きな数字 | 欧文サンセリフ | Montserrat | 800 | 36px | 1.1 | 0em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 900 | 15px | 1.2 | 0.05em |

- 見出しは太字にし、文字色と同じ色の text-shadow を何重にもかけてネオン管のように光らせる
- 英字見出しの左右に、シアンの波線を飾りとして付ける
- 本文は中央揃えにし、短く改行して 1 行 20 字前後に収める
- 割引率などの大きな数字は、黄色の中抜き文字に点線のような発光を付ける
- ハート記号を語尾や区切りに使い、遊び心を出す
- 注釈は ※ を付けて小さく、左揃えにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品・メニューだけ 2 カラムのグリッドにする
- **本文ブロックの幅**: 画面幅の約 86%
- **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
- セクションは英字のネオン見出しで始め、その下に和文の小見出しを置く
- コンテンツの一覧は、大きな円アイコン・名前・2 行の説明を縦に積む
- コラボ施設は、色違いの角丸カードを縦に並べる
- 料金表は、項目と金額を点線のリーダーでつなぐ
- ファーストビューとグッズ欄だけは、背景にレンガ壁のテクスチャを敷く

## Elevation & Depth

- 影は使わず、発光（外側グロー）で立体感を出す
- ネオン枠は 2〜3px の線に、同じ色の box-shadow を 10〜20px ぼかして付ける
- イラストの背景には、マゼンタの大きな放射状グローを敷く
- 商品写真の白い台紙は、マゼンタに光る枠で囲む

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真は角丸なしの長方形か、白い台紙に載せる。ココアなどは円形に切り抜く
- **セクション境界**: 直線で切り替え、波線の飾りやネオンの横線で区切る
- カードとパネルは角丸 12〜20px の枠で囲む
- アイコンは正円の台座に載せる
- ボタンは角丸 8px で、右端に丸い再生アイコンを付ける
- 店舗ラベルなどは、シアンのピル型の小さなタグにする

## Components

- **黒地白枠ボタン**（`button-primary`）: 黒地に白い 1px の枠と白文字のボタン。右端に白丸の再生アイコンを付ける
- **ネオン英字見出し**（`neon-heading`）: 光る英字の見出し。左右にシアンの波線を飾りとして付ける
- **ネオン枠カード**（`neon-frame-card`）: 暗い色の面を、発光する角丸の枠で囲むカード。施設ごとに色を変える
- **円形アイコン**（`icon-circle`）: マゼンタの正円に白いシルエットのピクトを載せる。下に光る名前を置く
- **条件ラベル**（`condition-label`）: 黄色の帯に黒文字で、特典を受ける条件を 1 行で示す
- **ネオン吹き出し**（`speech-bubble`）: 黄色く光る線の吹き出し。中に短い誘い文句を入れ、集中線を添える
- **グッズカード**（`product-card`）: 光る枠付きの白い台紙に商品写真を置き、下に小さな説明・マゼンタの商品名・価格を並べる
- **料金リスト**（`price-list`）: 白枠の小さなタイトルの下に、区分と金額を点線のリーダーでつないで並べる

## Do's and Don'ts

**Do**
- 地は黒に保ち、色は発光させて使う
- 見出しとイラストは、ネオン管のような単線で描く
- マゼンタとシアンを対にして使い、イエローは強調だけに絞る
- 説明文は中央揃えの短い行にし、ハートなどの記号で軽さを出す
- カードは暗い色の面に、明るく光る枠線を組み合わせる

**Don't**
- 白や淡い色の背景をセクション全体に敷かない
- ドロップシャドウや立体的なグラデーションのボタンは使わない
- パステル調や彩度の低い色を主役にしない
- 細い明朝体などの上品すぎる書体を使わない
- グローを本文にまでかけて読みにくくしない

## Page Structure

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

1. **ファーストビュー**（イベント名と開催期間・営業時間を一目で伝える）: 紫のレンガ壁に、縦組みのネオンタイトルとハートのネオンを散らす。下に大きな日付と、枠で囲んだ営業時間を置く
2. **イントロダクション**（イベントの趣旨を伝える）: 暗い紫の面に、ネオンの英字見出しと光るキーワードを置き、中央揃えの短い本文を続ける
3. **来場特典**（全員プレゼントで来場を後押しする）: 黄色のネオン吹き出しと集中線で囲んだアイテムのイラストに、白い太字の見出しを添える
4. **展示の特長**（生き物の生態をイラストで見せる）: マゼンタのグローを敷いたネオン線画を縦に 5 点並べ、タップを促す吹き出しを付ける
5. **体験コンテンツ**（会場での体験を紹介する）: シアンのネオン枠の中に、円形アイコン・名前・説明を縦に積む。続けてバイオレットのパネルで追加コンテンツを見せる
6. **グッズ**（限定商品を紹介する）: レンガ壁の背景に、光る枠の商品カードを縦に並べ、マゼンタで価格を示す
7. **コラボ特典**（周辺施設の割引で回遊を促す）: ネイビー・ブラウン・ワインの色違いのネオン枠カードに、ラベル・割引率・写真・ボタンを入れる
8. **開催概要**（日時・会場・料金を伝える）: マゼンタの小見出しと白文字で、点線リーダーの料金表と注釈を並べる
9. **チケット購入**（購入方法を示して申し込みにつなぐ）: 黄色のピル型ラベル、白線の時間表、黒地白枠の購入ボタンを置く
10. **フッター**（公式 SNS への導線と法定表示を載せる）: 紫からマゼンタへのグラデーション面に、白い SNS ボタンを 2 列で並べ、白い小さな文字で表示を載せる

## Imagery

- 生き物を白・マゼンタ・シアン・イエローの単線で描き、ネオン管のイラストにする
- イラストの背景には、マゼンタの大きなぼかしグローを敷く
- ハート・キラキラ・泡などの小さなネオン装飾を周りに散らす
- ピクトは白いシルエットにして、マゼンタの円に載せる
- 写真は夜景や間接照明の暗めのカットを選び、白い台紙や枠に収める
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に SP 幅（約 400px）のカラムだけを置き、左右は黒地のままにする
- PC の左側には、タイトルロゴ・日付・運営ロゴを固定で置く
- PC の右側には、ネオン文字の縦メニューとチケットボタンを固定で置く
- カラム内のレイアウトは SP と同じにする

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