---
version: alpha
name: Retro Downtown Mystery Walk Event LP
description: 和紙のような生成り地に、えんじ・くすみピンク・紺を差したレトロな下町観光イベントのLP。明朝体の見出しと、飾り枠付きの縦書き見出し、ジグザグに並ぶ写真とテキストで体験の流れを伝える。後半は麻の葉柄のえんじ地の上に白い大パネルを置き、料金や販売情報を表とボックスで整理している。
colors:
  background: '#FCE9DA'
  primary: '#9F454B'
  secondary: '#DC7E7E'
  surface: '#FEFEFE'
  background-alt: '#FEFEFE'
  text: '#362E2F'
  accent-1: '#52B5ED'
  tint-1: '#E6F4FD'
  accent-2: '#E4B25A'
  tint-2: '#FEF4E2'
  accent-3: '#E25D8F'
  line: '#34394E'
  text-muted: '#7B6D69'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.15em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.2em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Serif JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.7
  accent:
    fontFamily: Shippori Mincho
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.2
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 6px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  frame-heading:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.sm}'
    height: 120px
  double-line-heading:
    textColor: '{colors.line}'
    typography: '{typography.headline-sm}'
    height: 32px
  date-badge:
    backgroundColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 28px
  price-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 90px
  step-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 90px
  icon-circle:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 64px
  button-outline:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 44px
  notice-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 90px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FCE9DA` | 生成りの和紙風の地 | 25% | 画素の実測 |
| `primary` | `#9F454B` | えんじ。帯・バッジ・柄地に使う | 12% | 画素の主要色に補正 |
| `secondary` | `#DC7E7E` | くすみピンクのストーリー帯 | 6% | 画素の実測 |
| `surface` | `#FEFEFE` | 情報エリアの白いパネル | 22% | 画素の実測 |
| `background-alt` | `#FEFEFE` | 市松模様の淡いベージュ地 | 8% | 画素の実測 |
| `text` | `#362E2F` | 見出しと本文の濃い焦げ茶 | 3% | 画素の主要色に補正 |
| `accent-1` | `#52B5ED` | 水色の料金・事前販売の見出し帯 | 2% | 画素の実測 |
| `tint-1` | `#E6F4FD` | 水色帯の下の淡い水色の面 | 5% | 画素の実測 |
| `accent-2` | `#E4B25A` | からし色の当日販売の見出し帯 | 1% | 画素の実測 |
| `tint-2` | `#FEF4E2` | からし帯の下の淡いクリーム面 | 3% | 画素の実測 |
| `accent-3` | `#E25D8F` | ピンクのオンライン販売帯 | 1% | 画素の実測 |
| `line` | `#34394E` | 見出しの二重線とカードの枠線 | 1% | 画素の実測 |
| `text-muted` | `#7B6D69` | 注釈の灰茶の文字 | 2% | 画素の主要色に補正 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ロゴのような大見出し・開催日 | 明朝 | Shippori Mincho | 700 | 28px | 1.3 | 0.02em |
| `headline-lg` | 飾り枠の中のセクション見出し（縦書きも可） | 明朝 | Shippori Mincho | 700 | 22px | 1.4 | 0.15em |
| `headline-md` | えんじ色のリード見出し | 明朝 | Shippori Mincho | 700 | 18px | 1.5 | 0.05em |
| `headline-sm` | 二重線ではさむ小見出し | 明朝 | Noto Serif JP | 600 | 15px | 1.5 | 0.2em |
| `body-md` | 本文・説明文 | 明朝 | Noto Serif JP | 400 | 13px | 1.9 | 0.03em |
| `note` | 注釈・※の文 | 明朝 | Noto Serif JP | 400 | 10px | 1.7 | 0.0em |
| `accent` | 価格の数字 | 明朝 | Shippori Mincho | 500 | 26px | 1.2 | 0.0em |
| `label-button` | バッジ・ボタンの文字 | 明朝 | Noto Serif JP | 600 | 12px | 1.4 | 0.05em |

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

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-af8681f4`（元 LP の URL から採番）
- **元 LP**: https://realdgame.jp/s/asakusanazo/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。