DESIGN.md — 星空ネイビー×ネオン発光のナイトイベントLP（Starry Night Neon Glow Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、上品・高級
• キーワード: 星空・ネオン発光・夜のショー・記念イベント・弧のカーブ・セクション色分け
• 地の質感: 濃紺に細かな星粒と流れ星のライン、ややノイズのある夜空テクスチャ
• 形: セクション上下を大きな弧で切り替え、カードは大きめ角丸
• 温度感: 寒色主体の夜。マゼンタと金で華やかさと温度を足す

Colors

• 地は濃紺の星空を基本にし、テーマ別にマゼンタ・緑・金の単色セクションへ切り替える
• 暗い地の文字は白、見出しは白に外側グロー（発光）を付ける
• リスト見出しはシアン、注意見出しは黄色で目立たせる
• 日付バッジは日ごとにマゼンタ／緑で色分けし、以降の紹介セクションも同色で統一
• フッター情報のみ白地＋黒文字で落ち着かせる
• ボタンは金色の地に黒文字で上品に
• info-card は文字 #FFFFFF × 背景 #4F86C6 のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#3D78BC、4.55:1）を使う。

Typography

• 大見出しは極細ウェイトで大きく、白文字に柔らかな発光シャドウを付ける
• リード文は明朝で中央揃え、短い行で改行し行間を広く取る
• 説明・注意は太めのゴシックで読みやすく
• 英字見出しと和文見出しを組み合わせて特別感を出す
• 日付は大きな数字＋小さな曜日の英字で組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム中央揃え
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 26px（375px 幅換算）
• 各セクションは全幅の色面で区切る
• 見出し・リードは中央揃え、詳細リストは左揃え
• 写真は横幅いっぱいか左右にずらして交互配置
• セクション上下に十分な余白（80px前後）を取り夜空を見せる

Elevation & Depth

• 影はほぼ使わず、文字の発光グローで奥行きを出す
• 概要カードは半透明の明るい青面で浮かせる
• セクション境界に暗いグラデーションを入れて弧を立体的に見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形の写真と切り抜き（背景透過）の被写体を併用
• セクション境界: 大きな弧（下に膨らむ／上に膨らむカーブ）＋暗色グラデーション
• セクションの切り替えは必ず弧で行う
• ボタンは角を面取りした八角形風の金プレート
• 日付バッジ上部に小さな角丸ラベルを載せる
• SNSアイコンは黒の正円

Components

• 日付バッジ（date-badge）: 2日程を横並びにし、色分けした面に大数字の日付と時刻、上に小ラベル
• 発光見出し（glow-heading）: 極細書体の白文字に外側グローをかけた大見出し
• 英字サブタイトル帯（subtitle-band）: 両端がフェードする色帯の中に英字の細い大文字
• ダイヤ付きリスト（diamond-list）: ◆付きシアン見出し＋※注釈を字下げで続ける
• 開催概要カード（info-card）: 半透明の水色角丸カードに項目名：値と注意事項
• スラッシュ見出し（slash-heading）: 左右に斜線を置いた太字見出し
• 金プレートボタン（button-gold）: 角を切った金色プレートに英字＋小さな和文
• SNS丸アイコン（sns-circle）: 黒い正円に白ロゴ、横並び

Do's and Don'ts

Do - 夜空の濃紺に星粒と流れ星ラインを散らす - 見出しは細い書体＋発光で幻想的に - 日程ごとにテーマ色を決め、バッジと紹介セクションで揃える - セクションの境は大きな弧でつなぐ - リード文は明朝で中央揃え・短い行で改行

Don't - 太く重いゴシックを大見出しに使わない - 夜空セクションに白い面を多用しない - 直線の境界で色面を切り替えない - ビビッドな色を同じセクション内で混ぜすぎない - ドロップシャドウの強いカードを使わない

Page Structure

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

1. ファーストビュー（イベントの世界観と日程を一目で伝える）: 夜空の光る演出写真に細いロゴ・発光タイトル、右に縦書きコピー、下部に色分け日付バッジ
2. コンセプト（開催の想いを情緒的に伝える）: 星空地に明朝の大見出しと中央揃えのリード文
3. メッセージ動画（関係者のコメントで期待を高める）: 弧で始まるロイヤルブルー面に英字発光見出し、説明文、全幅動画
4. 観覧エリア案内（観覧場所と注意事項を伝える）: 発光見出し＋ダイヤ付きリスト、黄色の注意見出し、マゼンタ面に演出イメージ写真
5. 1日目の関連レース紹介（当日の目玉を紹介）: マゼンタ面に大きな日付数字、英字帯、説明、切り抜き写真
6. 2日目の関連レース紹介（もう一方の目玉を紹介）: 緑面に同じ型で配置し、星空へ弧で移行
7. 開催概要（日時・料金・場所・注意を整理）: 星空地に半透明の水色角丸カード
8. 関連企画（周辺コンテンツへ誘導）: 金色面にスラッシュ見出し、説明、バナー画像を縦並び
9. シェア・施設情報（拡散と基本情報の提示）: 白地にセリフ英字見出し、黒丸SNS、表形式の施設情報、金プレートボタン
10. フッター（注意文言と運営表記）: 中央揃えの小さな注釈と黒帯ロゴ

Imagery

• 夜空に光点で描いたモチーフが浮かぶ長秒露光風の写真
• 深い青の空に細かな星粒と斜めの流れ星ライン
• 主役の被写体は背景を切り抜き、色面の上に躍動的に配置
• 演出イメージはネオンカラーの光の線画
• 関連バナーは賑やかな赤橙や夕景写真で差をつける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはSP幅のカラムを中央左寄りに固定表示
• PC背景は星空をぼかした全面画像
• PC右側にロゴと目次ボタン（濃紺の小さな四角ボタン）を固定配置
• コンテンツ内のレイアウトはSPと同一

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