DESIGN.md — 古書と真鍮装飾の謎解きイベントLP（Antique Storybook Mystery Game Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: レトロ、親しみ・手作り感、情報量多め・訴求型
• キーワード: 古書・アンティーク・冒険・謎解き・布目テクスチャ・真鍮フレーム
• 地の質感: 麻布のような細かい布目の地。カードは古紙風で、ステッチ（点線）と角の破れ・折れがある
• 形: 装飾的な額縁型の見出しプレート、角丸のステッチ付きカード、スクロール装飾ボタン
• 温度感: 暖色寄り。焦げ茶とオリーブで落ち着かせ、紺で引き締める

Colors

• セクションごとに地を焦げ茶とオリーブで交互に切り替える。どちらにも布目テクスチャを重ねる
• 本文の読み物は必ず古紙色のカードに載せ、文字は焦げ茶にする
• 濃色地に直接置く情報（日時・価格）は白の太字にする
• 見出しプレートの色はセクションごとに変える（水色・ベージュ・赤・紺・からし）
• ピンク赤は答えボタンだけに使い、紺はアイコンタイルとフッターに使う
• 注意事項はからし色の地に分け、重要な文は黄色マーカーで強調する
• heading-frame は文字 #5D4820 × 背景 #9CBAC2 のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#A5C1C8、4.58:1）を使う。
• button-answer は文字 #FBE9E6 × 背景 #DB6C6C のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C93131、4.51:1）を使う。

Typography

• セクション名は明朝で字間を広く取り、額縁の中央に置く
• 額縁の上部には小さな欧文セリフのラベルを添える
• 数字は大きな縦長のサンセリフにし、単位と曜日は小さくする
• 本文は行間を2.0にして中央揃えか左揃えにする
• 謎の問題文は太く大きなゴシックで、段ごとに字下げしてずらす
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。手順カードは 2 列、アイコンタイルは 2〜4 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 各セクションは額縁見出し→カードの順で中央揃えにする
• 見出しの上下に 40px 以上の余白を取る
• 手順カードは左上に吹き出し型の step 番号を重ねる
• 小見出しの左右に装飾の横罫線を伸ばす
• 営業時間などは白い帯に横一列で並べる

Elevation & Depth

• カードには小さく柔らかい影（0 2px 6px 程度の茶色系）を付ける
• 額縁プレートとボタンは縁取りと影で立体感を出す
• 地のテクスチャとカードの間はステッチ線で区切り、強い影は使わない

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは切り抜きで配置し、場面絵は古い写真風の額で囲んで少し傾ける
• セクション境界: 直線で地の色を切り替える。フッターの上だけ金色の細い帯を入れる
• カードの縁は内側にステッチの点線を入れる
• 問題カードは角の一部を折れたような形にする
• ボタンは両端がスクロール装飾のプレート型にする
• アイコンタイルは角丸の小さい正方形で、白い点線の縁を付ける

Components

• 額縁見出しプレート（heading-frame）: アーチ型の上部ラベルと真鍮風の装飾枠の中に、セクション名を明朝で入れる
• 古紙カード（story-card）: 生成りの紙に薄い小物の線画を透かし、本文と場面絵を載せる
• 手順カード（step-card）: クラフト紙色のステッチ付きカード。左上に赤茶の吹き出し step 番号、中にイラストと説明を入れる
• 金色タブの小見出し（label-tab）: 両端が渦巻き装飾のベージュのラベル。左右に罫線を伸ばす
• 特徴アイコンタイル（icon-tile）: 紺の正方形に白アイコンと短い説明を2行で入れる
• 問題カード（quiz-card）: 山吹色のヘッダー帯に問題番号、下は古紙地に大きな問題文。右上には吊り金具の装飾を付ける
• 答えボタン（button-answer）: ピンク赤のスクロール型プレートボタン。ヒントボタンはベージュ版にする
• 営業時間の帯（hours-strip）: 白い横帯に、焦げ茶の曜日チップと時間を横一列で並べる。上に場所名とピンのアイコンを置く

Do's and Don'ts

Do - 地にはいつも布目テクスチャを敷く - 見出しはどのセクションも額縁プレートで統一する - キャラクターのイラストを各カードに添えて物語感を出す - 日時・価格は大きな数字で目立たせる - 注意事項は箇条書きにして、重要な文だけマーカーで強調する

Don't - 真っ白なフラットな地を広く使わない - ネオン色や彩度の高い青緑を入れない - 角丸の大きいモダンなピル型ボタンにしない - 本文を濃色地に小さく直接置かない - 装飾のない簡素な見出しを混ぜない

Page Structure

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

1. ファーストビュー（イベントの世界観と開催期間を伝える）: 左にタイトルロゴと日付、右に古書から街が飛び出すイラストを置く。下端に紺の帯を敷く
2. あらすじ（物語の導入で興味を引く）: 焦げ茶の地に水色の額縁見出しを置き、古紙カードに本文と場面絵を載せる
3. あそびかた概要（イベントの形式を説明する）: オリーブの地にロゴを置き、左右に小物のイラストを添えた説明帯を入れる
4. 持ちもの（必要なものを伝える）: 罫線付きの金色タブの下に、白文字の短い一覧を並べる
5. 参加の流れ（4ステップで手順を示す）: 2列×2段の手順カードに番号の吹き出しとキャラクターのイラストを入れる
6. 所要時間と特徴（コース別の時間と遊び方の特徴を伝える）: 罫線で挟んだ時間表の下に、紺のアイコンタイルを4つ並べ、注記を添える
7. 開催情報（期間・価格・販売場所を伝える）: 焦げ茶の地に赤い額縁見出しを置き、金色タブごとに大きな数字や営業時間の帯を並べる
8. お問い合わせ（連絡先を示す）: 電話番号を白の大きな文字で中央に置く
9. 練習問題（謎解きを体験してもらう）: 紺の額縁見出しの下に問題カードを置き、ヒントと答えのボタンを縦に並べる
10. 注意事項（参加時の注意を伝える）: からし色の地に箇条書きの小さな文字を並べ、重要な文はマーカーで強調する
11. 連動企画の告知（クリア後の特典に誘導する）: 生成りの地に明朝の告知文を置き、横長のバナーを入れる
12. フッター（主催と制作を表記する）: 紺の地に、角括弧付きのラベルとロゴ、コピーライトを中央揃えで置く

Imagery

• アニメ調で手描きの柔らかい塗りのキャラクター（少年と老紳士）を使う
• 古書・懐中時計・鍵・砂時計・眼鏡などの小物を、薄い線画にしてカードの背景に透かす
• メインビジュアルは開いた本から電車や本棚が飛び出す、絵本風の暖色イラストにする
• アイコンは白の単色ピクトグラムにする
• 装飾は真鍮やアンティーク額縁風の渦巻き模様にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も中央に約 480px 幅の 1 カラムで組み、SP とほぼ同じ構成にする
• SP では FV のロゴとイラストを縦に積む
• SP でも手順カードは 2 列を保ち、アイコンタイルは 2×2 に折り返す
• 右上にハンバーガーメニュー（紺の角丸の四角）を固定する
• 地のテクスチャは画面の全幅に広げる

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