DESIGN.md — 朱赤×切手縁のレトロ郵便謎解きイベント LP（Retro Postal Stamp Mystery Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: レトロ、ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 切手のギザ縁・手紙・郵便モチーフ・朱赤ベタ地・マスキングテープ見出し・ペン画の落書き・市松・菱形パターン
• 地の質感: 地はフラットなベタ塗り。市松模様や菱形の連続柄を地紋に重ね、カードの縁は切手の目打ちのように波打たせる。
• 形: 角丸は小さめで矩形が基本。プレイ形式のアイコンだけ二重の円にする。
• 温度感: 暖色の朱赤が主役。ミントとくすんだ青緑を差し色にして、レトロで温かい印象にする。

Colors

• 地は朱赤のベタ。情報は生成りか白のカードに載せる。
• ストーリーなど読ませる帯は淡ピンク地にして、朱赤と交互に置く。
• 購入ボタンは深紅のベタに白文字。黒い影をずらして付ける。
• 情報の項目ラベルは青紫ベタに白文字の小さな帯にする。
• ミント・水色緑は、テープ・リンク・▼記号・特典帯だけに使う。
• 強調したい本文は、淡いピンクの下線マーカーで示す。
• フッターは深紅に切り替え、ロゴと文字は白にする。
• info-label は文字 #FFFFFF × 背景 #8AAAFD のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#326AFB、4.57:1）を使う。

Typography

• 書体はゴシック 1 系統でそろえる。装飾書体はキービジュアル画像の中だけにする。
• ストーリーの文章は中央揃えにし、段落の間を広くあける。
• 日付の数字は大きく、年・月・日の漢字は小さくして差をつける。
• 曜日は丸囲みの小さな文字で添える。
• 注意文の重要な一文だけ赤字の太字にする。
• 全角英字は字間を広げて表示する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。プレイ形式の円アイコンだけ 3 列で並べる。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは画面の左右に 5% ずつ余白を取って中央に置く。
• セクション見出しのラベルは、カードの上辺にかかる位置に中央配置する。
• カードの中の項目は、黒い横線で区切って縦に積む。
• 各項目は「青紫ラベル→中央揃えの値」の順で並べる。
• 写真の帯は横に並べ、縁を切り取ってはみ出させる。

Elevation & Depth

• ボタンとカードには、ぼかしなしの黒い影を右下に 3px ずらして付ける。
• ぼかしの効いたソフトな影は使わない。
• 外部リンクのバナーにだけ、ごく薄い影を付ける。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの矩形。アイコンは白い円の中に置き、外側に赤い二重の輪を付ける。
• セクション境界: 直線で切り替える。情報カードの縁は切手の目打ちのような波形にし、地紋は市松か菱形にする。
• 主要なカードは、生成り地に黒の細枠を入れ、外周を白いギザ縁で囲む。
• 見出しラベルは白い矩形に黒枠を付け、両端に斜めのテープを貼る。
• ボタンは横長の矩形で、角丸は小さくする。
• 折りたたみ（アコーディオン）は白い矩形に黒枠とし、文字の両側に ▼ を置く。

Components

• 購入ボタン（button-primary）: カード幅いっぱいの深紅の矩形に白太字。黒い影をずらして付ける。
• テープ付き見出し（label-tape）: 白い矩形に黒枠と黒太字。両端に水色のマスキングテープを斜めに貼る。
• 切手縁カード（stamp-card）: 生成り地に黒い細枠。外周を白いギザ縁にし、角に消印のイラストを添える。
• 項目ラベル（info-label）: 青紫ベタに白文字の小さな帯。開催期間・会場などの項目名に使う。
• 円形アイコンバッジ（icon-circle）: 白い円の中に黒い線画アイコンと 2 行の短いラベル。外側に赤い二重の輪を付ける。
• 安心ポイント帯（point-panel）: ミント緑の地に、番号を縦書きにした白いカードを 3 つ並べる。右端に線画アイコン。
• 折りたたみ（アコーディオン）（accordion）: 白い矩形に黒枠。中央の文字の両側にミント色の ▼ を置く。
• 特長ボックス（feature-box）: 黒い細枠の矩形に、太字の小見出しと下線マーカー付きの本文。

Do's and Don'ts

Do - 情報は必ず切手縁のカードに入れて、朱赤の地から浮かせる。 - 影は黒い一色で、ぼかさずにずらして付ける。 - セクションの境目に、ペンや手紙など手描きの線画を添える。 - 地紋は市松と菱形を交互に使い分ける。 - 数字の情報は大きな太字にして中央に揃える。

Don't - グラデーションやガラス風の半透明は使わない。 - 大きな角丸やピル型のボタンにしない。 - 寒色を地の色にしない。 - 装飾書体を本文に使わない。 - カードを黒枠なしの浮いた白い面にしない。

Page Structure

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

1. ファーストビュー（世界観とタイトルを伝える）: 全面イラストに切手のコラージュと太い縁取りのタイトルを重ねる。
2. リード文（開催の概要を一言で伝える）: 朱赤の地に白い太字を 3〜4 行、中央揃えで置く。
3. 写真の帯（体験の様子を見せる）: 横長の写真を並べ、上下を縞の線で挟む。
4. イベント紹介（魅力を 3 点で伝える）: 黒枠のカードの中に特長ボックスを 3 つ縦に積む。
5. プレイ形式（条件をひと目で伝える）: 円形のアイコンバッジを 3 列で並べ、その下に注意カードを置く。
6. ストーリー（物語への没入を促す）: 淡ピンクの帯に、中央揃えの文章を置く。
7. 動画（PR 動画を見せる）: 黒枠付きの動画を埋め込み、周りに荷札のイラストを散らす。
8. 遊び方（参加の手順を伝える）: 市松の地に、写真付きの手順カードを横スライドで並べる。
9. 安心ポイント（初めての人の不安を解く）: ミント緑の帯に、番号付きカードを 3 つ置く。
10. イベント情報（日時・会場・料金を伝える）: 切手縁のカードに、項目ラベルと地図を区切り線で積む。
11. 購入方法（購入に誘導する）: 商品写真と販売方法ごとの購入ボタンを並べる。
12. よくある質問・注意事項（補足情報を伝える）: 折りたたみを 3 つ縦に並べ、関連リンクのバナーを添える。
13. フッター（主催者と SNS を示す）: 深紅の地に白いロゴ、SNS アイコン、バナーを置き、画面下に購入ボタンを固定する。

Imagery

• キービジュアルは太い主線のレトロなアニメ調イラストにする。網点と斜線で陰影を付ける。
• 切手・封筒・消印・荷札といった郵便モチーフを、コラージュのように散らす。
• 余白の装飾には、黒いペンで描いたラフな線画（万年筆・巻物・時計など）を使う。
• 写真は明るい自然光で、手元やスマートフォンの操作など体験の一場面を撮る。
• 商品写真は黄色などのビビッドな単色背景に置いて、真上から撮る。
• アイコンは黒い単線の線画にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 70% に絞り、両側に朱赤の地を広く見せる。
• PC では特長ボックスを 3 列、円形アイコンを 5 つ横一列に並べる。
• PC の情報カードは、左に項目ラベル、右に値を置く 2 列にする。
• PC では遊び方の手順カードを 3 列で並べ、矢印で送れるようにする。
• PC のキービジュアルは横長のイラストにし、タイトルを右側に置く。

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