DESIGN.md — 紫×マゼンタの夜祭りネオン系イベントLP（Neon Night Festival Event LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、和風
• キーワード: 夜祭り・花火・ネオン看板・斜めストライプ・提灯・縁日
• 地の質感: 星を散らした夜空グラデーションと斜めストライプ柄。花火のイラストを周囲に重ねる
• 形: 八角形の看板枠、波形や円形の写真切り抜き、斜めに切ったセクション境界
• 温度感: 夜の暗い紫に、熱いマゼンタと金色を灯したにぎやかな暖色寄り

Colors

• 地は濃紫の夜空グラデーションにして、星の粒をちらす
• イベントごとにマゼンタ・青・紫と地色を切り替えて区切る
• ストライプ地は同系色2トーンの45度斜線にする
• 見出しは白と金色を組み合わせ、要の1語だけネオンピンクにする
• 情報の表は白い角丸カードに入れ、見出しバーはマゼンタで塗る
• CTAはマゼンタのピル型に白文字で作る

Typography

• 見出しは極太で、白の縁取りやネオン風の光彩をつける
• 番号つき見出しは提灯アイコンの中に斜体の英数字を入れる
• 大見出しは1行を短くして2〜3行に積む
• 本文は小さめの白文字で、行間を広めにとる
• 英字ラベルは日本語見出しの上に小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。写真は重ねて斜めに散らす
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション見出しは中央の看板枠に入れる
• イベントブロックは番号見出し、時間タグ、写真群、説明文、情報カードの順に並べる
• 写真は左右にずらして重ね、動きを出す
• 花火イラストを左右の端にはみ出させて置く
• 情報は左にラベル、右に値の2列表にする

Elevation & Depth

• 写真カードに濃紫の太い縁と軽い影をつける
• 看板見出しはマゼンタの光彩でネオン風にする
• 白カードは影なしで、角丸だけで浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 円形・花形の波線・角丸長方形を混ぜ、重ねて配置する
• セクション境界: 斜めにカットした直線の境界でストライプ地を切り替える
• 見出し枠は角を落とした八角形の看板にし、左右に装飾の耳をつける
• タグとラベルはピル型にする
• 写真の切り抜きは1ブロックで2〜3種類を組み合わせる

Components

• チケット購入CTA（button-primary）: マゼンタのピル型ボタン。白文字で、右に三角矢印をつける
• ネオン看板見出し（heading-signboard）: 濃紺の八角形の枠をマゼンタの縁で囲む。英字ラベルの下に極太の白見出しを置く
• 提灯番号見出し（heading-numbered）: 提灯アイコンの中に番号を入れ、横に白と金の極太見出しを2〜3行で積む
• 開催時間タグ（tag-time）: 濃紫の小さなピル型ラベル。右に時刻を白文字で添える
• 情報カード（info-card）: 白い角丸カード。上部にマゼンタのピル型見出しバーを置き、下に2列表と注釈を入れる
• 概要ラベル（label-pill-white）: 白いピル型に紫文字で項目名を入れ、右に値を置く
• 料金表（price-table）: 濃紺のピル型見出しバーの下に、左に縦線マーカーをつけた行を点線で区切って並べる
• 強調の塗りバッジ（badge-catch）: マゼンタ地に白の太字で短い訴求を入れる。縦書き版も使う

Do's and Don'ts

Do - イベントごとに地色とストライプを変えて区切りをはっきりさせる - 花火・提灯・うちわのイラストを余白に散らす - 写真は形の違う切り抜きを重ねて動きを出す - 要の1語だけネオンピンクで大きくする - 情報は白カードにまとめて読みやすくする

Don't - 白地のセクションを続けない（マップ帯だけにする） - 細い明朝体やパステル調を使わない - 写真を四角形のまま整列させない - 暗い地に小さな濃い色の文字を置かない - 強調色を青や緑に変えない

Page Structure

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

1. ファーストビュー（イベント名と会期を一目で伝える）: 花火と浴衣の人物写真を全面に敷く。中央に筆文字ロゴを置き、下部に白い極太の日付帯を入れる
2. 導入（イベントの世界観を見せる）: 夜空の紫の地に斜めの極太見出しを置く。円形写真を散らし、縦書きの塗りバッジを添える
3. 開催概要（期間・時間・場所を示す）: 看板見出しの下に、白ピルのラベルと値の表を置く。タイムテーブルは色付きの縦線と点線で区切る。下端に提灯のガーランドを渡す
4. イベント①（縁日エリアを紹介する）: マゼンタのストライプ地に番号見出しを置く。波形の写真を重ね、白い情報カードを添える
5. イベント②（参加型ゲームを紹介する）: 斜めに切った境界から青のストライプ地に変える。大きな写真と円形の写真を組み合わせる
6. イベント③（メインの花火を訴求する）: 濃紺から紫への夜空グラデーションにする。ネオンピンクの大見出しと塗りバッジを置き、花火写真を花形の切り抜きで重ねる
7. 会場マップ（会場の場所を示す）: 薄灰のストライプ地にマップを紫の枠で囲む。足場と提灯、人物のイラストで飾る
8. チケットプラン（料金とセット券を伝える）: 紫からマゼンタへのストライプ地にする。写真バナーと料金表を置き、白い極太の訴求文で締める
9. クロージングCTA（購入へ誘導する）: ロゴと会期をもう一度見せ、マゼンタのピル型ボタンを置く

Imagery

• 夜の花火と浴衣の家族やカップルを、彩度の高い写真で使う
• 屋台や提灯の写真は暖色の照明が映えるものを選ぶ
• 写真は波形・円・花形に切り抜き、濃紫の縁をつける
• 放射状の花火イラストを金・ピンク・水色で描き、画面端に置く
• 提灯・うちわ・かき氷などの和柄アイコンを添える
• 会場マップはフラットなイラスト調で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央を約70%幅にして、両端に花火イラストを大きく見せる
• PCのイベントブロックは写真と説明文を左右2列に並べる
• PCのファーストビューは横長の写真コラージュにして、ロゴを中央に置く
• PCは見出し・タグ・バッジを横1行にまとめる
• 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 行書くと起動時に読み込まれる。