DESIGN.md — 深紫×古地図の海賊ファンタジー謎解きイベントLP（Dark Purple Pirate Fantasy Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、情報量多め・訴求型、レトロ
• キーワード: 深紫・羊皮紙・海賊・古地図・金縁・ファンタジー
• 地の質感: 暗い紫の地に、海図・羅針盤・舵輪の線画がうっすら透けて重なる。見出しは焼けた羊皮紙の質感にしている。
• 形: 巻物型の見出し帯、細い金線で縁取った角ばったカード、円形メダルのアイコン、斜めに切ったセクション境界
• 温度感: 冷たい紫を主に、羊皮紙の茶色で温かみを少し加える

Colors

• 地は深紫#200030と、さらに暗い紫紺を帯状に交互に置く
• 見出しは必ず羊皮紙色の巻物にのせ、文字は焦げ茶にする
• 誘導ボタンは紫の地に白文字で、細い明るい線で縁取る
• 販売中などの状態ラベルは青緑にする
• 小見出しは水色の文字で暗い地から浮かせる
• 料金表やスケジュールの表だけは白地にし、見出しを紫の帯にする

Typography

• 見出しは明朝か装飾欧文セリフにして、古文書のような雰囲気を出す
• 本文は小さめのゴシックで、中央揃えにする
• 注意書きは ※ で始めて左揃えにする
• 金額の数字だけを太く大きくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコンの並びは 2〜4 列、ボタンは 2 列にする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは巻物見出しを中央に置いて始める
• 特長アイコンは円形メダルを横に並べ、下にラベルを付ける
• 会場情報は縦に積んだカードで、左上に都市名のメダルを重ねる
• ボタンは中央に置き、幅は本文幅の約70%にする
• セクション境界は斜めに切り、地の色を切り替える

Elevation & Depth

• 影はほとんど使わず、金縁や明るい線で浮かせる
• メダル型アイコンにはうっすら外側に光る効果を付ける
• 羊皮紙の巻物には、焼けた縁の濃淡で立体感を出す

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角に白い縁を付けて少し傾け、ポラロイド風にする。グッズは楕円の金縁フレームに入れる
• セクション境界: 斜めのカット（紫の濃淡で切り替える）
• ボタンとカードは角ばった四角に細い線を付ける
• タブとトグルだけはピル型にしてよい
• アイコンは円形メダルにする

Components

• 巻物見出し（scroll-heading）: 羊皮紙の巻物の上に、焦げ茶の明朝または装飾欧文の見出しを置く
• 紫の帯ボタン（button-primary）: 紫の地に明るい線で縁取り、右端に矢印を付けた横長のボタン
• 円形メダルアイコン（medal-icon）: 紫の円の中に線画アイコンを入れ、下に見出しとリンクを置く
• 正方形の誘導バナー（square-banner）: 紫か青緑の正方形に金縁を付け、手書き風の強調文字を添える
• キャラクター切り替えタブ（character-tabs）: 黒地に紫の枠を付けた四角いタブ。選択中のタブは紫で塗る
• 羊皮紙プロフィールカード（parchment-card）: 端がめくれた古紙に、名前・説明・イラストを縦に並べる
• 料金表（price-table）: 紫の見出し行の下に白いセルを並べる。行見出しは薄い藤色にする
• 会場アコーディオンカード（venue-card）: 紫のグラデーションのカードに金縁を付け、左上に都市名メダル、右上に販売中ラベル、下部に開閉の帯を置く
• 販売状態ラベル（status-badge）: カードの右上に付ける、青緑の小さな四角いラベル

Do's and Don'ts

Do - 暗い紫の地に羊皮紙と金の装飾を組み合わせる - 背景に海図・羅針盤・舵輪の線画を低い不透明度で敷く - 見出しは必ず巻物の装飾で統一する - 情報量が多い箇所は表とカードで整理する - ボタンの右端には矢印を付ける

Don't - 白や明るい色をページの地に使わない（表は例外） - ボタンを丸いピル型にしない - ポップな原色を足さない - 見出しをただのテキストだけにしない - 強い影やぼかしで現代的な見た目にしない

Page Structure

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

1. ファーストビュー（世界観とタイトルを一目で伝える）: 夜の幽霊船を背景に、キャラクターを全面に配置する。下部に大きな装飾タイトル、縦書きでキャッチを置く
2. 導入（イベントの概要を短く伝える）: 羊皮紙の古地図の帯に明朝の一文と説明を置き、その下に風景写真を横一列に並べる
3. ポイント（見どころを示す）: 巻物見出しの下に、傾けた写真と紫のボタンを置く。その下に3つのメダルアイコンを並べる
4. 登場人物（キャラクターを紹介する）: 斜めの紫の帯の上にタブを置き、羊皮紙カードで切り替えて見せる
5. ストーリー（物語への没入感を高める）: 中央揃えの白文字の本文と、2つの正方形の解説バナー
6. 参加形式（所要時間・人数などを示す）: 4つの色違いの円形メダルと、正方形の誘導バナーを並べる
7. 料金表（価格を明示する）: 前売りと当日のトグルを付けた白い表。続けて特典グッズの画像と注釈を置く
8. 販売スケジュール（チケット販売の時期を伝える）: 紫の見出し帯付きの白い枠に、日程とバナーを入れる
9. 開催都市（会場ごとの予約へ誘導する）: 紺地に会場カードを縦に積み、都市名メダルと販売中ラベルを付ける
10. グッズ（物販を紹介する）: 楕円の金縁フレームに商品を入れて2列に並べ、名前と価格を添える。最後に紫のボタンを置く
11. 注意事項・FAQへの誘導（補足情報へ誘導する）: 羊皮紙の質感をもつ横長の大きなバナーに、矢印を付ける

Imagery

• アニメ調のキャラクターイラストを主役にし、紫と緑の夜の光で描く
• 古地図・羅針盤・舵輪・海賊旗などのモチーフを、紫の線画で背景に薄く敷く
• 焼けて縁が焦げた羊皮紙のテクスチャを見出しやカードに使う
• コウモリや金貨などの小さな装飾を散らす
• 実写の写真はセピアや暗い色調に寄せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPC版でも中央約70%幅の縦長構成なので、SPはそのまま1カラムで幅90%にする
• SPのメダルアイコンは2列×2段にしてもよい
• SPでも正方形バナーは2列を保つ
• 料金表はSPで横スクロールさせず、セルの文字を小さくして収める
• 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 行書くと起動時に読み込まれる。