DESIGN.md — 濃紺×ネオン発光の夜間イベントLP（Neon Night Lantern Event LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ラグジュアリー・ダーク、ポップ・元気、情報量多め・訴求型
• キーワード: 夜空の濃紺・ネオン発光・ランタンの灯り・グラデーション帯・鍵括弧フレーム
• 地の質感: フラットな濃紺の面に、文字や帯の外側だけ光彩（グロー）をまとわせる。凹凸やテクスチャはない。
• 形: ピル型の帯とボタン。見出しは対角に置いたL字の鍵括弧で挟む。写真は角丸の長方形。
• 温度感: 地は寒色の夜、灯りと文字は暖色の黄で、冷たい地に温かい光が浮かぶ対比

Colors

• 地は濃紺から黒の夜色だけで通し、白い地のセクションは作らない
• 見出しと日付は淡黄にして、外側に黄色い光彩をつける
• 時間帯の帯はピンクから紫への横グラデーションで作り、外側にも光彩をつける
• ラベルはピンクの面に白文字。ピンクは小さな面積だけに使う
• 本文は白、注釈は白を少し小さくして使う
• 写真の暖色の灯りを、ページの華やかさの中心にする
• time-band は文字 #EAEBF5 × 背景 #F372CC のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C5118F、4.6:1）を使う。
• place-label は文字 #EAEBF5 × 背景 #F583C8 のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CA1080、4.54:1）を使う。

Typography

• 見出しは文字の間を広めにとり、黄色い光彩（text-shadow）をつける
• 日付は数字を大きくし、曜日は白い丸の中に小さく入れる
• 時刻の区切りは小さな三角記号を使う
• リード文は中央揃えにして、行間を広くとる
• 企画の説明文は左揃えの小さい文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。企画紹介は左に文章、右に写真の 2 分割
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 60px、基本単位 8px、カード内 8px（375px 幅換算）
• 時間帯の帯は画面の端近くまで広げる
• 企画の見出しは左上と右下のL字括弧で挟み、中央に置く
• 文章と写真は約4:6で横に並べる
• 企画ごとに、帯 → 場所 → 見出し → 説明と写真、の順で繰り返す

Elevation & Depth

• 影は使わず、外側の光彩だけで浮かせる
• 帯・ボタン・見出しの文字に、同じ系統の色の光彩を 10〜20px つける
• 写真には影をつけない

Shapes

• 角丸: 小 3px ／ 中 6px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸 6px 前後の縦長または横長の長方形
• セクション境界: 直線で区切る。ファーストビューは写真が濃紺の地へ溶け込むように終わる
• 時間帯の帯とボタンはピル型にする
• ラベルは角丸の小さい四角にする
• 見出しの括弧は細い光る線で描いたL字にする

Components

• ネオン見出し（neon-title）: 淡黄の文字に光彩をつけ、L字括弧で挟む企画名
• 時間帯グラデ帯（time-band）: ピンクから紫へのピル型の帯に、時間帯の名前と時刻、太陽か月のアイコンを載せる
• 場所ラベル（place-label）: ピンクの四角に白文字のラベルを置き、右に会場名を続ける
• 予約ボタン（button-primary）: 淡黄の小さなピル型ボタンで、黄色の光彩をつける
• 会場光帯（venue-bar）: 両端が暗く、中央に向かって明るくなる淡黄の帯に、会場を太字で載せる
• 会期表示（date-hero）: 大きなセリフ体の数字に、曜日を白い丸で添え、矢印でつなぐ
• 光る線の見出し（line-heading）: 見出しの上下に斜めの光るピンク紫の線を引く
• 部の小さなタグ（session-tag）: 白い角丸の面に濃紺の文字で、時間帯の名前を入れる

Do's and Don'ts

Do - 地は必ず濃紺系の夜色にする - 見出しと強調には光彩をつけて、ネオンのように見せる - 時間帯ごとにグラデーションの帯で区切る - 企画ブロックは同じ並び順を繰り返す - 写真は暖色の灯りが入った夜のシーンを選ぶ

Don't - 白や明るい色の背景のセクションを入れない - 黒い文字の段落を置かない - 濃い影や立体的なボタンを使わない - ピンクや紫を広い面に塗らない - 光彩をつけない平らな見出しにしない

Page Structure

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

1. ファーストビュー（イベントの世界観を一目で伝える）: 黒い夜空と灯りの写真の上に、手書き風のネオン管ロゴを重ね、下端は濃紺へ溶け込ませる
2. 会期・時間・会場（開催情報を伝える）: 大きな日付、ラベル付きの点灯時刻、淡黄の会場帯の順に中央に並べる
3. イベント概要（企画の趣旨を説明する）: 中央揃えの白い文章を 2 段落、行間を広くとって置く
4. 特別企画の導入（サブイベントを紹介する）: 光る線で挟んだ見出し、リード文、角丸のバナー画像、日程と時間帯のタグを並べる
5. 昼の部の企画（体験内容と予約の案内）: グラデーション帯、場所ラベル、括弧付きの見出し、左に文章と予約ボタン、右に写真
6. 夜の部の企画（体験内容と料金の案内）: 同じブロック構成に、時間と料金を丸いアイコン付きで載せ、注釈を添える
7. 物販・グルメ（販売内容を知らせる）: 同じブロック構成で、更新情報を注釈として入れる
8. 抽選会（参加方法を伝える）: 括弧付きの見出しに開催日を補足し、文章と写真を 2 分割で置く

Imagery

• ランタンや電飾など、暖色の灯りが密集した夜の写真を使う
• 背景をぼかした玉ボケで、幻想的に見せる
• 体験写真は人物を全身で入れた、明るい屋外の写真でもよい
• ロゴは細い線の手書き文字を、黄色いネオン管のように光らせる
• 星空や光の粒を、背景にうっすら散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央に約 75% 幅の 1 カラムで置き、左右には濃紺の余白を残す
• PC のファーストビューは横長の写真にして、ロゴを上の中央に置く
• 時間帯の帯は PC で幅を狭めて中央に置く
• 企画ブロックの文章と写真の 2 分割は、PC でも同じ形のまま使う

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