DESIGN.md — ピンク×水色タイルのネオン銭湯イベントLP（Psychedelic Neon Bathhouse Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、かわいい、レトロ
• キーワード: 銭湯タイル・ネオン・サイケデリック・ぷっくり文字・ゆるキャラ・宇宙
• 地の質感: 手描き風の水色タイル、ピンクの立体粘土風テクスチャ、宇宙写真、水彩の玉石柄を全面に敷く
• 形: 角丸カード、ピル型ボタン、雲形（もこもこ）切り抜き、角丸の吹き出し
• 温度感: 高彩度で熱量が高い。ピンクと水色の補色に近い組み合わせ

Colors

• セクションごとに背景柄を水色タイル→ピンク立体→宇宙→ピンク水彩→蛍光グリーン→玉石柄と切り替える
• 派手な背景の上の文字は白カードか淡い水色カードに載せる
• 見出しと強調はピンク、項目ラベルは水色で2色を交互に使う
• ボタンはピンクの面に白文字で統一する
• 宇宙柄やピンク地の上の文字は白にしてグローや影を付ける
• 黒文字は水色タイル上の説明文に限る
• button-primary は文字 #FFF5FF × 背景 #FF8DD4 のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D90087、4.59:1）を使う。
• button-small は文字 #FFF5FF × 背景 #FE8DD4 のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D90289、4.57:1）を使う。
• intro-card は文字 #FE8DD4 × 背景 #E9FBFE のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D90289、4.56:1）を使う。
• speech-bubble は文字 #0ADDF9 × 背景 #FFFFFF のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#048192、4.6:1）を使う。
• info-list-card は文字 #FE8DD4 × 背景 #FFFFFF のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D90289、4.56:1）を使う。
• faq-accordion は文字 #FE8DD4 × 背景 #FFFFFF のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D90289、4.56:1）を使う。

Typography

• 大見出しはピンクと水色の太い丸文字。白フチとネオン風のグローを付ける
• 本文は全体を丸ゴシックにして柔らかくする
• 導入文は中央寄せで短く改行し、行間を広く取る
• 情報リストは水色ラベルとピンクの値を上下2段で並べる
• 暗い背景や柄の上の文字は白にして影を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。グッズとクリエイターは2列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面幅の約92%で中央に置く
• セクション見出しは境界線にまたがせて、背景の切替を隠す
• グッズは画像→名前→小ボタンを縦に積む
• クリエイターは雲形の写真を2列に並べ、下に白い名前を置く
• 装飾イラストはカードの端からはみ出させて配置する

Elevation & Depth

• カードに影は付けず、背景とのコントラストで浮かせる
• 見出しロゴには白フチと柔らかいグローを付ける
• 吹き出しは白地に水色の太い枠を付ける

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形。人物とロゴは雲形（もこもこ）にマスクする
• セクション境界: 基本は直線で切り替える。PCでは波形の境界も使う
• ボタンは必ずピル型にする
• 情報カードは大きめの角丸にする
• シズル写真には角丸の吹き出しを重ねる

Components

• ぷっくり文字の見出し（section-logo-heading）: ピンクと水色の丸文字に白フチとグローを付け、セクション境界にまたがせる
• 主CTAボタン（button-primary）: 幅いっぱいのピンクのピル型ボタン
• 詳しく見るボタン（button-small）: グッズの下に置く小さなピンクのピル型ボタン
• 導入カード（intro-card）: 淡い水色で半透明のカード。中央寄せのピンク文字を載せる
• 特長の吹き出し（speech-bubble）: 白地に水色の太い枠。上段に小さな説明、下段に太い名称を入れる
• 開催情報カード（info-list-card）: 白い角丸カード。水色ラベルとピンクの値を縦に並べる
• 雲形プロフィール（cloud-avatar）: もこもこの雲形に切り抜いた写真やロゴ。下に白い名前を置く
• FAQアコーディオン（faq-accordion）: ピンク文字で「Q.」と質問を書き、右に▼、下にピンクの線を引く
• 料金ラベル（price-label）: 白枠の角丸ラベルに白文字。ピンク地の上に置く

Do's and Don'ts

Do - セクションごとに強い柄の背景を切り替えて、非日常感を出す - 情報は白か淡い水色の角丸カードに載せて読みやすくする - 見出しは太い丸文字に白フチとグローを付けて統一する - ゆるいキャラのイラストをカードの端に散らす - ボタンはピンクのピル型に限定する

Don't - 落ち着いた低彩度の配色にしない - 明朝体や細いゴシックを使わない - 柄の上に黒い細字を直接置かない - 角ばったボタンや影の強いカードを使わない - ピンク・水色以外の色を見出しに使わない

Page Structure

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

1. ファーストビュー（世界観を一瞬で伝える）: 全面のポップなイラストに、巨大なぷっくり文字のロゴを重ねる。右上にハンバーガーメニュー
2. コンセプト紹介（体験の概要を伝える）: 水色タイル地に淡い水色カードを置き、中央寄せのピンク文字で書く。下にピルボタン
3. 見どころの紹介（体験内容を視覚で示す）: ピンクの立体テクスチャ地。完成予想図に吹き出しを4つ重ねる
4. 動画と開催概要（日程・会場・料金を伝える）: 埋め込み動画の下に、白い太字で日程・会場を書き、料金ラベルを置く
5. コンテンツ詳細（仕掛けを3つ説明する）: 水色タイル地。角丸写真の下にピンクの見出しと黒い本文を置き、縦に繰り返す
6. 開催情報（詳細を一覧で示す）: ピンク水彩地に白カード。水色ラベルとピンクの値を並べる
7. グッズ紹介（物販を訴求する）: 宇宙柄の暗い背景。商品画像・ピンクの商品名・小ボタンを縦に積む
8. クリエイター紹介（制作陣で信頼と話題性を出す）: ピンクの立体地に雲形写真を2列に並べ、白い名前を添える
9. アクセス（会場への行き方を示す）: 蛍光グリーン地に白い放射状の装飾。黒字の住所と角丸の地図を置く
10. よくある質問（疑問を解消する）: 水彩の玉石柄の上に白カードのアコーディオン。最後にもっと見るボタン
11. お問い合わせ（問い合わせへ誘導する）: 水面イラストの上に白文字を書き、幅広のピンクピルボタンを置く
12. フッター（SNS・運営情報を示す）: ピンク帯にロゴ・リンク・白丸のSNSアイコン。下の白地に運営ロゴを置く

Imagery

• 高彩度のピンク・水色・黄緑で描いた手描きのポップイラスト
• ゆるく脱力したキャラクターを、カードの角やセクション間に配置する
• 背景は手描きの水色タイル、粘土風のピンク立体、宇宙写真、水彩の玉石柄を使う
• 写真はネオン管風の発光を加えた、サイバーな色調にする
• 商品は切り抜き画像で、暗い背景上に浮かせて見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではカードの幅を約75%に抑え、中央に置く
• PCのコンテンツ詳細は、左に写真・右に文章の2カラムにする
• PCのグッズは2列、クリエイターは3列にする
• PCのFVは横長のイラストにロゴを中央に重ねる
• 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 行書くと起動時に読み込まれる。