DESIGN.md — 生成り×えんじの和レトロ街歩きイベントLP（Retro Downtown Mystery Walk Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: レトロ、和風、親しみ・手作り感、情報量多め・訴求型
• キーワード: 和レトロ・下町観光・謎解き・紙の質感・飾り枠見出し・斜めカットの写真
• 地の質感: 生成りの和紙風ノイズ地、市松模様、麻の葉柄のえんじ地
• 形: 四隅に飾りのある額縁見出し、斜めカットの写真帯、角丸が小さい白いカード
• 温度感: 温かい。くすんだ暖色が中心で、水色を差し色にする

Colors

• 前半の物語・体験ゾーンは生成りの紙の地。そこに、くすみピンクの帯と市松模様の地を挟む。
• 後半の販売情報ゾーンは、えんじの麻の葉柄の地に白い大パネルを重ねる。
• 販売の種類ごとにボックスの見出し帯の色を変える（水色・からし色・ピンク）。下の面はその色を淡くした色にする。
• 日付・区分のバッジは、えんじの楕円に白い文字。
• リンクの文字はえんじにし、下線を付ける。
• 原色はほぼ使わない。全体を少し灰色に寄せたレトロな色調にそろえる。

Typography

• 見出しから注釈までほぼすべて明朝体でそろえ、レトロな印刷物の雰囲気を出す。
• セクション見出しは縦書きにし、額縁の中に置く。
• 見出しの左右には小さな星や菱形の飾りを付ける。
• 価格は数字を大きくし、「円」「税込」は小さく添える。
• 本文は中央揃えを基本にする。ただし体験の手順カードは左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストのジグザグは縦積みにする。アイコンは 3 列で折り返す
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 遊び方は、写真と白い説明カードを左右交互に配置する。
• セクションの境目に斜めカットの写真帯を挟んで場面を変える。
• 販売情報は、柄の地の上に白い大パネルを置き、その中に収める。
• 料金は 2 列のカードで並べる（SP では縦積み）。
• 販売場所ごとのカードには、店名・時間・住所・枠線ボタンを縦に並べる。

Elevation & Depth

• 影はほぼ使わない。紙・印刷物のようにフラットに見せる。
• 白いカードは薄い枠線か淡い影で地から浮かせる。
• 飾り枠の見出しには薄いドロップシャドウを付けてもよい。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形の写真に白いふちを付ける。帯状の写真は上下を斜めにカットする。
• セクション境界: 斜めカットの写真帯と、背景柄の切り替えで区切る
• バッジは横長の楕円にする。
• 条件を示すアイコンは白い正円の中に線画で描く。
• 見出しは四隅に扇形の飾りが付いた額縁にする。
• ボタンは角丸の小さい白地の枠線ボタンにする。

Components

• 額縁見出し（frame-heading）: 白地に紺の細線の枠。四隅にえんじの扇形の飾りを付け、文字は縦書きまたは横書き。
• 二重線の小見出し（double-line-heading）: 上下を紺の二重線ではさみ、左右に星の飾りを付ける。
• 区分バッジ（date-badge）: えんじの楕円に白い明朝の文字。日付の上に置く。
• 料金カード（price-card）: 色帯の見出しの下の淡い面に、大きな価格の数字を置く。
• 手順カード（step-card）: 市松模様の地の上に置く白い説明カード。写真と左右交互に並べる。
• 条件アイコン（icon-circle）: 白い正円にえんじの線画アイコン。下に短いラベルを付ける。
• 購入リンクボタン（button-outline）: 白地に濃色の細枠。「〜はこちら>>」形式の文字。
• 注意ボックス（notice-box）: えんじの細枠の角丸カード。左に淡い水色の円のアイコンを置く。

Do's and Don'ts

Do - 明朝体とくすんだ暖色で、昭和レトロの印刷物風にまとめる。 - 生成りの地には紙の粒子感を入れる。 - 余白に手描き風の小物イラスト（団子・バス・盆栽など）を散らす。 - 情報エリアは白いパネルに集め、色帯の見出しで区分する。 - 注釈は小さな灰茶色の文字で丁寧に添える。

Don't - ゴシック体の太字やビビッドなグラデーションは使わない。 - 大きな角丸やピル型のボタンは使わない。 - 影を強くしたり、ガラス風の表現を入れたりしない。 - 純黒の文字や純白だけの背景で、無機質に見せない。 - 1 つのボックスに区分の色を混ぜない。

Page Structure

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

1. ファーストビュー（イベントの世界観とタイトルを伝える）: 生成りの地にロゴ風の題字と短いキャッチを置く。右側に下町の街並みとキャラクターのコラージュ風イラスト。
2. 開催告知（開催日とひとことの導入を伝える）: 枠付きの開催日ラベルを置き、その下にえんじ色の 2 行のリードを中央揃えで続ける。
3. ストーリー（物語で参加意欲を高める）: くすみピンクの横帯。左に縦書きの額縁見出し、右に白い文字の物語文。
4. イベント紹介（体験の内容を説明する）: 斜めカットの街並み写真を置き、その上に額縁見出し。続いて写真を 3 枚並べ、中央揃えの説明文。
5. スペシャル（関連企画と動画を見せる）: 二重線の見出しの下に、バナー 2 枚と埋め込み動画を置く。
6. 遊び方（参加の流れを 4 ステップで示す）: 市松模様の地に、写真と白い説明カードを左右交互に配置する。
7. プレイ形式（条件をひと目で伝える）: 円のアイコンを 5 つ並べ、その下に持ち物などの注意ボックス。
8. 販売情報（販売日・プレイ可能時間・料金を示す）: 麻の葉柄のえんじ地に白い大パネル。バッジ・大きな日付・料金カード・特典の枠を並べる。
9. 購入方法（購入の経路ごとに案内する）: 水色・からし色・ピンクの色帯ボックスごとに、販売場所カードと枠線ボタンを置く。

Imagery

• 若い参加者が下町の老舗の前でキットを手に楽しむ、自然光の明るい写真。
• レトロな看板や商店街の街並みを、少し彩度を落として撮る。
• ファーストビューは版画やスクリーントーン風のコラージュイラストにする。
• 団子・バス・盆栽・カメラ・寿司など、土地にちなむ小物の手描き線画を余白に散らす。
• 背景には市松模様・麻の葉柄・和紙のテクスチャを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では写真とテキストを左右交互の 2 カラムにする。SP では写真を先、テキストを後に縦積みする。
• PC の料金カードは 2 列。SP では 1 列にする。
• 条件アイコンは PC で 5 列横並び。SP では 3 列＋2 列に折り返す。
• 縦書きの額縁見出しは、SP でも縦書きのままで中央に置く。
• 柄の地の白いパネルは、SP では左右に 12px ほどの余白を残す。

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