DESIGN.md — 雪と水彩ブルーの体験型謎解きイベントLP（Snowy Watercolor Mystery Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: やさしい・柔らかい、上品・高級、清潔・爽やか、情報量多め・訴求型
• キーワード: 雪・水彩にじみ・縦書き明朝・フィルム枠・青春・静けさ
• 地の質感: 薄グレー地に水色の水彩ブロットと白い雪の粒を散らした、紙のような柔らかい質感
• 形: 角丸はほぼ使わず、細い線の四角いカードと表で組む。キャラクターや人物は正円で切り抜く
• 温度感: 冷たく澄んだ寒色系。白と水色が中心で、青で引き締める

Colors

• 地は淡いグレーで統一し、水色の水彩にじみをセクションの背後に大きく敷く
• 青は縦書き見出し・アコーディオン・ニュース枠・購入カレンダーに使う。それ以外では使わない
• 本文中の強調語だけを水色系の文字色にし、太字は使わない
• カードや表は白で塗り、細い黒線で囲んで情報の面にする
• 購入CTAだけは紫系の差し色で目立たせる

Typography

• 書体は明朝体に統一し、ゴシックはバナー画像の中だけで使う
• セクション見出しは青の縦書きにし、隣に英字の小ラベルを縦に添える
• 本文は行間2.0でゆったり組み、段落の間は1行空ける
• 強調は文字色だけで行い、文字サイズは大きく変えない
• 大きな見出しの字間は0.1em以上空けて、静かな印象にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は左に縦見出し、右に本文の2カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• PCでは左15%に縦見出し、右に本文ブロックを置く。SPでは見出しを上に置き、本文の左に縦書きで残す
• プレイ形式は白いアイコンカードを4つ並べる。SPでは2×2
• 手順は番号付きの縦長カード4枚。SPでは2列または横スクロール
• 料金表は全幅の細線テーブルにする
• グッズは2列グリッドで、細線の正方形枠に画像を入れる
• 末尾に青帯のアコーディオンを3本縦に積む

Elevation & Depth

• 影はほぼ使わず、平面のまま見せる
• 白カードの区切りは極薄の影か細線にとどめる
• 雪の粒や水彩で奥行きを出し、立体効果には頼らない

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物・キャラクターは正円で切り抜く。商品は細線の正方形枠に入れる。場面写真はフィルムのコマ枠に並べる
• セクション境界: 直線の境界は作らず、水彩にじみの濃淡で区切りを感じさせる
• ボタンは細い黒線の小さな角丸長方形にする
• アコーディオンは角なしの青帯にし、右端に白い下向き矢印を置く
• フィルムの穴のある帯で写真を横に並べる装飾を入れる

Components

• 縦書きセクション見出し（vertical-heading）: 青い明朝体の縦書き見出しに、英字の小ラベルを縦に添える
• フィルム帯ギャラリー（film-strip）: 濃いグレーの帯に穴の模様をつけ、場面写真を4コマ並べる
• プレイ形式カード（info-icon-card）: 白い角丸カードの中央に線画アイコンを置き、上にティール色のラベル、下に値を書く
• 番号付き手順カード（step-card）: 上に青い数字、中に写真と小見出し、その下に説明文を入れた縦長の白カード
• 料金テーブル（price-table）: 細い黒線の表。ヘッダー行は薄灰で塗る
• 青帯アコーディオン（accordion-bar）: 全幅の青帯に白文字を中央寄せし、右端に下向き矢印を置く
• 細線サブボタン（button-outline）: 細い黒枠の小さなボタン（もっと読む・プロフィールなど）
• チケット日付カレンダー（date-calendar）: 青い枠の中に日付タブを横に並べる。選択中のタブは黄色。下に白い空き状況の欄を置く
• 追従購入ボタン（floating-cta）: 右下に固定する紫の円形ボタンで、白文字の2行表記
• グッズカード（goods-card）: 細線の正方形枠に画像と右下の虫眼鏡アイコン、下に商品名・価格・説明を置く

Do's and Don'ts

Do - 地に水色の水彩にじみと白い雪の粒を必ず散らす - 見出しは縦書きの明朝体で、青で統一する - 情報は白カードと細線の表で整然と並べる - 人物は正円に切り抜いて、詩的な余白をとる - 本文は行間を広くとり、物語を読ませる語り口にする

Don't - 太いゴシックや暖色のベタ塗りを見出しに使わない - 強い影やグラデーションのボタンを使わない - 背景を真っ白一色にしない - 青をあちこちに使いすぎない - 角丸の大きなポップなカードを使わない

Page Structure

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

1. ファーストビュー（作品の世界観を一目で伝える）: 雪景色のイラストを全面に敷き、左右に縦書きの大きなタイトルを置く。下に1行のリード文とフィルム帯を入れる
2. イントロダクション（物語の導入と期待感をつくる）: 縦見出しの横に明朝の本文を置き、強調語は水色にする。下に動画を埋め込む
3. プレイ形式（場所・時間・人数を簡潔に示す）: 中央見出しの左右に細線を引き、白いアイコンカードを4つ並べる
4. 初心者向け安心ポイント（初参加の不安を減らす）: 水色のバナーに、番号付きのリボン型の訴求を3つ並べる
5. ストーリー（没入感を高める）: 縦見出しと長めの本文を置き、続きは細線ボタンで開く
6. キャラクター（登場人物と声優を紹介する）: 円形のキャラクター画像と紹介文、円形の顔写真と小ボタンを並べる
7. 遊び方（参加までの流れを示す）: 番号付きの手順カードを4枚横に並べる
8. チケット情報（料金と注意事項を伝える）: 券種ごとの細線料金表、注釈、アコーディオン、割引バナーを順に置く
9. 会場（アクセスを示す）: 会場名に矢印リンクをつけ、住所と地図を埋め込む
10. チケット購入（日付を選んで購入させる）: 青い枠の日付カレンダーと空き状況の欄、会員バナーを置く
11. グッズ（関連商品を紹介する）: 2列の細線枠グリッドに、商品名・価格・説明を並べる
12. 特典（購入特典を伝える）: フィルム風の枠に入れたしおり画像と注釈リストを置く
13. ディレクター紹介・ニュース（作り手の信頼と最新情報を伝える）: 円形の顔写真とプロフィールを置き、青い枠に日付と見出しの一覧を入れる
14. FAQ・フッター（補足情報と公式導線を示す）: 青帯アコーディオンを3本置き、白いフッターにロゴ・SNS・バナーを並べる

Imagery

• 淡い水彩タッチのアニメ調イラストで、雪の校舎と制服の少女を描く
• 背景に水色の水彩にじみを大きく、ランダムに配置する
• 白い雪の粒を全面に散らし、季節感を出す
• 場面写真はやや寒色で彩度を抑え、フィルムのコマに入れる
• アイコンは黒の細い線画で統一する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは左に縦見出し、右に本文の2カラム。SPでは見出しを上に置いて1カラムにする
• プレイ形式の4カードは、SPで2×2にする
• 手順カードは、SPで2列または横スクロールにする
• グッズの2列はSPでも維持し、文字を小さくする
• 料金表は、SPで横スクロールさせるか列を減らす
• 追従CTAは、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 行書くと起動時に読み込まれる。