--- 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/）からご連絡ください。