DESIGN.md — 夕焼け水彩と紫の物語体験イベント LP（Twilight Watercolor Story Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、情報量多め・訴求型
• キーワード: 夕焼けグラデーション・水彩のにじみ・罫線ノート・手書き英字・青春・紫の文字
• 地の質感: 白地に水彩絵の具のにじみを散らし、紙とノートのような質感を出す。
• 形: 角丸なし〜小さめの角丸。細い紫の線と枠で区切る。
• 温度感: 淡いピンクと紫で、少し涼しく切ない温度感。

Colors

• 地は白を基本にし、文字・線・アイコンはすべて紫系でそろえる。黒文字は使わない。
• 強調キャッチだけピンク→紫のグラデーション文字か濃いピンクにする。
• 予約など行動ボタンは濃いマゼンタ、主 CTA はピンク→オレンジのグラデーション。
• カードの面は淡ピンク、補足・特典の面はラベンダー、開閉パネルは青白で使い分ける。
• セクション背景には淡いピンク〜紫の水彩にじみを、見出しの背後に重ねる。

Typography

• 英字見出しは筆記体にし、下に細い紫線を引く。
• 情緒的な見出しは明朝、情報部分はゴシックで分ける。
• 本文は行間を約 2 倍にして、1 行ごとに罫線を引く。
• 文字色はすべて紫系。ピンクはキャッチだけに使う。
• 情報系の見出しは左右に横線を伸ばして中央に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコン情報とグッズは 2 カラム。
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 26px。
• 見出しは中央揃え、本文は左揃え。
• 罫線ノートの段落の間には空行を 1 行入れる。
• グッズは正方形の枠に入れて 2 列に並べ、下に名前と価格を置く。
• セクションの間は広めに空け、水彩にじみで区切る。

Elevation & Depth

• 影はほぼ使わず、平面で構成する。
• 奥行きは水彩のにじみと細い紫の枠で出す。
• 主 CTA だけ、グラデーションでわずかに浮いて見せる。

Shapes

• 角丸: 小 0px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は細い紫枠の四角。キャラクターは白地に全身で切り抜く。
• セクション境界: 直線のみ。水彩にじみの背景で境目をぼかす。
• カード・表・アコーディオンは角丸なし。
• 主 CTA だけ小さめの角丸を付ける。
• 特典の告知は紫の破線で囲む。
• STEP 番号は丸で囲んだ数字にし、横線とつなぐ。

Components

• グラデーション主 CTA（button-primary）: ピンク→オレンジのグラデーションに白い太字。中央に置く。
• 会場予約バー（button-venue）: カードの幅いっぱいのマゼンタの帯。文字の右に下向き三角を置く。
• 筆記体見出し（heading-script）: 紫の筆記体英字の下に細線。背後に水彩にじみを敷く。
• 横線つき中央見出し（heading-line）: 中央の太字ゴシックの左右に紫の細線を伸ばす。
• 罫線ノート本文（ruled-text）: 1 行ごとにラベンダーの横罫線を引いた本文ブロック。
• 会場カード（venue-card）: 淡ピンクの面に、地域名・白い区切り線・会場名・日程・予約バーを縦に並べる。
• 開閉パネル（accordion）: 青白の面を紫 2px の枠で囲み、中央に太字、右端に V 字の矢印。
• タブ付き料金表（price-table）: 紫と淡ピンクのタブ。その下に紫の細線で区切った表。
• 枠付き声優写真（profile-photo）: 紫の細枠で囲んだ写真。右側に名前と下線付きのリンク文字。
• 筆跡背景アイコン（icon-spec）: 紫の線のアイコンの背後にラベンダーの筆跡。下にラベルと値を置き、2 列で並べる。

Do's and Don'ts

Do - 見出しの背後には必ず淡いピンク〜紫の水彩にじみを置く。 - 文字と線は紫系で統一し、白地を多めに残す。 - 物語の文は罫線ノート形式で静かに見せる。 - 購入導線は会場ごとのカードで、地域名・日程・ボタンの順に並べる。 - 注意事項や FAQ はアコーディオンでたたむ。

Don't - 黒や濃いグレーの文字を使わない。 - 原色の青・緑やビビッドな色の面を広く使わない。 - 影の強いカードや立体ボタンにしない。 - 丸ゴシックやポップ体でにぎやかにしない。 - 水彩を濃くしすぎて文字の可読性を落とさない。

Page Structure

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

1. ファーストビュー（作品の世界観を一目で伝える）: 夕焼け空と人物のアニメイラストを全面に敷き、白い明朝の縦書きタイトルとコピーを重ねる。
2. リード・動画（公演の告知と映像紹介）: グラデーション文字で 3 行の告知を下線付きで中央に置き、下に動画の埋め込み。
3. イントロダクション（概要と問いかけ）: 写真のコラージュと筆記体見出し。ピンクの明朝キャッチに紫の本文を続ける。
4. ストーリー（あらすじで没入させる）: 淡い空の写真を背景に罫線ノート本文。最後に台詞と read more リンク。
5. キャラクター・声優（登場人物の紹介）: 水彩の上に全身キャラ、名前、説明、枠付きの声優写真を並べる。
6. 主題歌・メッセージ（作り手の思いを伝える）: 筆記体見出しと曲名。開催メッセージは長い罫線ノートにし、署名は右揃え。
7. プレイ形式（人数・時間などの基本情報）: 筆跡背景つきの線アイコンを 2×2 で並べる。
8. 遊び方（参加手順を示す）: STEP と丸数字を横線でつなぎ、各手順の見出しと本文、主 CTA を置く。
9. 安心ポイント・キャンペーン（初心者の不安を解消し、特典を告知する）: バナー画像を幅いっぱいに縦に並べる。
10. チケット情報（料金と特典を示す）: タブ付き料金表、アコーディオン、破線で囲んだ特典ボックス、販売期間の中央揃えテキスト。
11. チケット購入（会場ごとの予約）: 淡ピンクの会場カードを縦に並べ、マゼンタの予約バーを付ける。
12. グッズ（物販の紹介）: 枠付きの正方形商品画像を 2 列に並べ、＋アイコン、商品名、価格を付ける。下にラベンダーの特典ボックス。
13. 注意事項・FAQ（補足情報）: 紫枠のアコーディオンを 3 つ縦に並べる。
14. フッター（運営情報）: 淡ピンクの地にバナー、ロゴ、クレジット、三角の PAGE TOP を置く。

Imagery

• マジックアワーの空：ピンク・紫・オレンジの雲を描いたアニメ背景イラスト。
• 学生キャラは白背景の全身の立ち絵。水彩のにじみを背後に置く。
• 水彩のにじみはピンク・ラベンダー・水色を淡く、輪郭をぼかして描く。
• アイコンは紫の単色で、線または塗りのシンプルなピクト。
• 実写は夕景の風景や体験の様子。少し青みのある映画的な色調にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルを横長に切り取り、縦書きのタイトルを左右に分けて置く。
• PC ではイントロとキャラ紹介を写真・本文の左右 2 カラムにする。
• PC では開催メッセージや遊び方の STEP を 2 カラムにする。
• PC のチケット以降は、中央の白い帯（幅約 60%）に収め、外側に淡ピンクの水彩背景を敷く。
• グッズは PC でも 2 列のまま、幅を絞って中央に置く。

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