DESIGN.md — 濃紺×雪結晶の謎解きイベント LP（Midnight Navy Snow Mystery Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、クール・先進的、情報量多め・訴求型、力強い・インパクト
• キーワード: 濃紺・雪の結晶・発光する明朝・ティールの帯・ミステリー・冬
• 地の質感: 濃紺のベタ塗り面に、光る雪結晶とノイズを散らした背景。帯は上下に細い白線を入れたグラデーション。
• 形: 四角い帯と角丸小さめのカードが中心。装飾は雪結晶モチーフに統一する。
• 温度感: 冷たい寒色。差し色の赤と金だけが温度を持つ。

Colors

• FV だけを氷色にし、2 画面目以降は濃紺地で統一する。
• ポイントの見出しは、ティールから紺へのグラデーション帯に白い細線を上下に入れる。
• 情報カードは淡グレー地に濃紺の文字。日付だけはくすんだ青にする。
• 赤は read more とバッジ、金は特典チケットだけに使う差し色にする。
• 物語の山場の強調文字はシアンのイタリックにする。
• 見出しの白文字には、水色の外光グローをかける。

Typography

• 大見出しは白の太い明朝に水色のグローをかける。
• 英字ラベルは、太いコンデンス体の下に小さな日本語訳を 2 段で添える。
• 本文は中央揃えで行間を広く取る。
• 強調箇所はシアンの太字イタリックで 2 行にする。
• 価格は数字を大きく、「円」を小さく書く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。会場一覧は 3 列、プレイ形式も 3 列。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出し帯とバナーは全幅で横いっぱいに使う。
• カードは左右 12px 前後の余白を取って並べる。
• 大見出しの上には雪結晶を 2〜3 個散らす。
• 会場カードは 3 列で、間隔は約 6px にする。
• アコーディオンは縦に並べ、間隔は 10px にする。

Elevation & Depth

• カードに影はほぼ付けず、地との明度差で浮かせる。
• 見出し文字には水色の外光グローをかける。
• バナー画像は白い細枠で縁取る。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 横長の長方形バナー。キャラクターは斜めに分割したパネルに入れる。
• セクション境界: 上下に白い細線を入れた横帯で区切る。
• ボタンは角丸の小さい長方形にし、右端に ▼ や → を付ける。
• アイコンは雪結晶の形に入れ込む。
• 会場カードは角丸 6px のグレーの箱にする。

Components

• 番号付きポイント帯（point-band）: 大きな斜体の数字と明朝の見出しを置いたグラデーション帯。上下に白線を入れる。
• 雪結晶付き発光見出し（glow-heading）: 白の明朝に水色のグロー。周囲に雪結晶を散らす。
• 英字ラベル見出し（en-label）: コンデンス体の英字の下に、小さな和訳を添える。
• 続きを読むボタン（button-readmore）: 赤い長方形に白い斜体文字と ▼。
• STEP カード（step-card）: 明るいグレーのカード。STEP 番号、見出し、線画アイコン、本文、ボタンの順に入れる。
• 料金表（price-table）: 左がティール（または金）の見出しセル、右がグレーの価格セル。上にタブ切替を置く。
• アコーディオン（accordion）: グレー（または濃ティール＋白枠）の帯に、中央の見出しと右端の ▼。
• 会場カード（venue-card）: 地域名を太字、館名を小さく書き、日付は青で 2 行にする。
• お知らせリスト（news-list）: グレーのカードに、青い日付と濃紺の見出しを交互に並べる。

Do's and Don'ts

Do - 2 画面目以降の地は濃紺で通す。 - 装飾は雪結晶とグローに統一する。 - 見出しは明朝、情報部分はゴシックで役割を分ける。 - 会場や日付はグリッドで整然と並べる。 - 差し色の赤・金・緑はボタンとラベルの小さな面積だけに使う。

Don't - 暖色の背景面を広く使わない。 - 大きな角丸やピル型を多用しない。 - 見出しを細いゴシックにしない。 - 濃紺地に濃い色の文字を直接載せない。 - 装飾モチーフを雪結晶以外に増やさない。

Page Structure

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

1. ファーストビュー（世界観と開催日を伝える。）: 氷色の背景にキャラクターイラストを置く。縦書きのコピー、六角形の日付バッジ、炎のようなロゴ、太い斜体のリードを重ねる。
2. 動画（CM で興味を引く。）: 雪をかぶせた暗めのサムネイルに、明朝の英字と再生ボタンを重ねる。
3. イベント紹介（体験の概要を伝える。）: 暗くしたコラージュの上に、グロー見出しと中央揃えの白い本文を置き、解説バナーへ誘導する。
4. ポイント 1・ストーリー（物語への期待を高める。）: 番号付きの帯、英字ラベル、中央揃えの本文に、シアンの強調と read more を付ける。
5. 登場キャラクター（人物を紹介する。）: 斜めに分割したパネルにキャラクターを並べ、黒い斜めラベルで名前を付ける。
6. ポイント 2・3（体験の価値と特典企画を示す。）: 帯の見出しの下に、写真とイラストを合成したビジュアルと、グッズのスライダーを置く。
7. 参加方法（参加の手順を示す。）: STEP カードを横スワイプで見せ、カード内にボタンを 2 つ置く。
8. プレイ形式（所要時間・人数・会場を示す。）: 雪結晶の形の中にアイコンを入れて 3 列に並べ、下に数値を書く。
9. チケット情報（価格と特典を伝える。）: タブ付きの料金表、注意事項のアコーディオン、特典バナー、施策バナーを 3 つ並べる。
10. チケット購入（地域別の購入ページへ誘導する。）: 会場カードを 3 列のグリッドで並べる。
11. 注意事項・FAQ（不安を解消する。）: 濃ティールに白枠のアコーディオンを 3 つ並べる。
12. ニュース（最新情報を伝える。）: グロー見出しの下に、グレーのカードで日付付きのリストを置く。

Imagery

• セル調のアニメイラストを主役にし、冷たい青の光と雪の粒子を重ねる。
• 雪結晶は線の細い白〜水色で描き、ぼかして浮遊させる。
• アイコンは単色の線画またはシルエットにする（赤の線画、灰色の雪結晶枠）。
• バナーは水色の氷の背景にキャラクターを置き、下部に色付きの帯と矢印を付ける。
• 実写を使う場合は暗い会場写真に青い照明を当てて合成する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% 幅のコンテンツにし、地の濃紺は全幅で残す。
• FV はキャラクターを左、ロゴを右に置く横構図にする。
• ストーリーとキャラクターは左右 2 カラムにする。
• STEP カードは 3 列、施策バナーも 3 列にする。
• 会場グリッドは PC で 5 列にする。

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