DESIGN.md — 夜空紺×薄青×金の謎解きイベント LP（Starry Night Museum Mystery Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、上品・高級
• キーワード: 星空・夜の博物館・神秘・謎解き・金の光・霧の青
• 地の質感: 背景に星空と建物のイラストを薄く敷く。半透明の面を重ねて奥行きを出す
• 形: 角丸なしの四角形が基本。カードの対角の角に細い L 字線を添え、アイコンは円形の台座に置く
• 温度感: 寒色が中心。金色の差し色で温かみを少し足す

Colors

• 夜色の濃紺地と霧の薄青地をセクションごとに交互に使う
• 英字の小見出しは必ず金色で、字間を広く取る
• 夜色地では文字を白にし、項目名・商品名を金にする
• 薄青地のカードは白を薄くかけた半透明の青にし、文字は濃いグレーにする
• 購入ボタンは薄青地の上で濃紺の帯にする。強い色は使わない
• 鮮やかな色はバナー画像の中だけに抑える

Typography

• 見出しは英字の金ラベルと和文見出しを 2 段にし、中央揃えにする
• 和文見出しは字間を 0.1em 以上取る
• ストーリーの本文は中央揃えにし、短い行で改行する
• 説明文は左揃えにする
• 価格は数字を太く大きくし、「円」は小さくする
• 小見出しは「── 見出し ──」の形で、両側に金の線を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。グッズは 2 列、プレイ形式のアイコンは 2×2
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの上下余白は 60〜80px
• セクションごとに地の色を濃紺と薄青で切り替える
• カードは画面幅の約 90% で中央に置く
• 一覧のカードどうしは 30px ほど空ける
• 背景イラストは全幅に薄く敷く

Elevation & Depth

• 影は使わない
• 奥行きは半透明の面の重ねで表現する
• カードの対角に細い L 字線を少しずらして置き、浮いて見せる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角で、帯状に横へ並べる。アイコンは円形の半透明台座に乗せる
• セクション境界: 直線で地の色を切り替える
• ボタンもカードも角は直角にする
• ボタンの右端に丸囲みの矢印アイコンを置く
• 四角い枠の角に L 字線を添える
• 円は、アイコン台座と矢印アイコンだけに使う

Components

• 英字ラベル付き見出し（section-heading）: 金の英字ラベルを小さく置き、その下に和文見出し。脇に小さな星のきらめきを添える
• 角線つき半透明カード（corner-card）: 半透明の面の左上と右下に、細い L 字線をずらして重ねる
• 購入ボタン帯（button-primary）: カード下に置く全幅の濃紺の帯。中央に白文字、右端に丸囲みの下向き矢印
• 続きを読むボタン（button-outline）: 細い枠線だけの横長ボタン。右端に矢印を置く
• アコーディオン（accordion）: 半透明の帯の中央に見出し、右に丸囲みの矢印。角に L 字線を添える
• 円形アイコン情報（icon-circle）: 半透明の円に白い線画のアイコン。下に金の項目名と白い値を置く
• タブ付き料金表（price-table）: 白いタブと暗いタブで切り替える。白線の格子に白の太字で価格を載せる
• グッズカード（goods-card）: 白台の正方形画像の下に、金の商品名、白の価格、説明を縦に積む

Do's and Don'ts

Do - 濃紺と薄青のセクションを交互に置く - 英字の見出しラベルは金色にし、字間を広く取る - 星のきらめきを見出しの脇に小さく添える - カードの角に L 字線を添えて世界観を出す - 背景に星空や建物のシルエットを薄く敷く

Don't - 角丸やピル型のボタンを使わない - 赤やオレンジなど鮮やかな CTA 色を使わない - 濃いドロップシャドウを付けない - 純白の地のセクションを作らない - ポップな丸文字を見出しに使わない

Page Structure

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

1. ファーストビュー（世界観を一目で伝える）: 星空と建物のイラストを全面に敷く。縦書きの短い詩的コピーと、明朝の装飾ロゴを置く
2. リード（体験の概要を伝える）: 濃紺の帯に、淡い金で 3 行の中央揃え文を置く
3. 体験写真の帯（実際の雰囲気を見せる）: 写真を横一列にすき間なく並べる
4. 概要・ポイント（魅力を 3 点で伝える）: 番号付きの角線カードをスライダーで見せ、線画イラストを添える
5. 動画（臨場感を伝える）: 縦長の動画を中央に埋め込む
6. ストーリー（物語への没入を促す）: 薄青地に中央揃えの短い行を並べ、枠線の続きを読むボタンを置く
7. プレイ形式（基本情報を示す）: 円形アイコンを 2×2 に並べ、金の項目名と白い値を添える
8. 遊び方（参加までの手順を示す）: イラスト付きの角線カードをスライダーで見せ、白いボタンを置く。下に安心ポイントのバナーを続ける
9. チケット情報（料金と販売日程を示す）: タブ付き料金表と注意事項のアコーディオンを置く。割引の枠と日程の帯見出しを続ける
10. チケット購入（会場別の購入へ誘導する）: 会場ごとに角線カードを縦に積み、会場名・会期・濃紺の購入ボタンを入れる
11. キャンペーンバナー（SNS 投稿を促す）: 全幅の画像バナーを置く
12. グッズ（物販を紹介する）: 2 列のグッズカードに、金の商品名と価格・説明を載せる
13. よくある質問・注意事項（疑問を解消する）: 薄青地に半透明のアコーディオンを縦に並べる

Imagery

• 夜空・流れ星・夕焼けのグラデーションを描いたアニメ調の背景イラストを使う
• 背景には建物のシルエットや星空を、薄い青のフィルターで敷く
• アイコンは白か黒の細い線画で、星・望遠鏡・ドームなどのモチーフにする
• 写真は暗めの室内で、驚いた表情や展示物を写したもの
• バナーは濃紺の星空に金の文字と星座線をあしらう
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではコンテンツ幅を約 50% に絞り、中央に置く
• PC のポイントと遊び方は、スライダーをやめて 3 列で並べる
• PC のプレイ形式アイコンは 4 列の横一列にする
• PC のグッズは 3 列にする
• 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 行書くと起動時に読み込まれる。