DESIGN.md — 原色ポップアートの街歩き謎解きイベントLP（Pop Art Puzzle Walk Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感
• キーワード: 原色ポップ・方眼紙・インクの飛び散り・黒い縁取り・斜めストライプ・付箋メモ
• 地の質感: 方眼紙の罫線、細かい斜めストライプの地、紙の付箋とピン
• 形: 黒線で縁取った角丸カードと、黒い影がずれて付くピル型ボタン
• 温度感: 明るく賑やか。少し温かみがある

Colors

• セクションごとに地色を白方眼・青・紫・白方眼・緑のように大きく切り替える
• セクションの境目には細いピンクの帯を引く
• 色地には細かい斜めストライプの柄を重ねる
• 見出しラベルはピンクのピル型に白文字で載せる
• ステップカードは1枚ずつピンク・青緑・紫・緑と色を変える
• 黄色はアヒル、インク、ストライプの差し色だけに使い、文字には使わない
• section-title-plate は文字 #FFFFFF × 背景 #E8618C のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E02762、4.53:1）を使う。
• label-pill は文字 #FFFFFF × 背景 #E8618C のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E02762、4.53:1）を使う。
• step-card は文字 #FFFFFF × 背景 #A77CB1 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9662A2、4.6:1）を使う。
• info-bar は文字 #FFFFFF × 背景 #EB5D54 のコントラスト比が 3.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#E5291D、4.5:1）を使う。
• button-answer は文字 #FFFFFF × 背景 #1F9E8C のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#1A8475、4.56:1）を使う。

Typography

• 全体を丸ゴシックで組み、柔らかく遊び心のある印象にする
• 文字間はやや広め（0.08〜0.3em）にとる
• 中央揃えを基本にし、本文は短い行で改行する
• 数字は欧文の丸みがある書体で大きく、曜日は小さく添える
• 注意事項だけは左揃えの小さい箇条書きにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ステップカードは PC で 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しプレートはセクションの上部中央に置く
• ステップカードの左上に、アヒルと番号の丸を重ねてはみ出させる
• 付箋メモは左右交互に少し傾けて置き、間にインクの飛び散りを配置する
• 問題カードはストライプの額縁の中に白いパネルを入れる
• ボタンは問題カードの下に縦に2つ、中央に並べる

Elevation & Depth

• カードとボタンには、ぼかしのない黒い影を右下へ2〜4pxずらして付ける
• 付箋メモには薄い落ち影を付け、ピンで留めたように見せる
• ぼかしの強いソフトシャドウは使わない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。イラストは切り抜いて重ねる
• セクション境界: 水平な直線。境目に細いピンクの帯を入れる
• 縁取りは黒の2px線で統一する
• 見出しプレートは角丸の長方形に黒い縁取りを付け、左右に筆とパレットのアイコンを添える
• ボタンは全幅にせず、幅は約60%のピル型にする

Components

• 見出しプレート（section-title-plate）: ピンクの角丸プレートに黒い縁取りと白文字。左右に筆とパレットのアイコン
• 項目ラベル（label-pill）: 開催日・価格などの小見出しに使う、ピンクのピル型ラベル
• ステップカード（step-card）: 白い見出し帯の下に色面のイラストと説明文。左上にアヒルと番号の丸
• 付箋メモ（sticky-note）: クリーム色の紙をピンで留め、中央揃えの本文を載せる
• アイコン付き条件帯（info-bar）: サーモンレッドの帯に、条件を4つアイコン付きで並べる
• 問題カード（quiz-frame）: 黄と青緑の斜めストライプの額縁。上部に緑のピル型タイトル、中に白いパネル
• ヒントボタン（button-hint）: 黄色のピル型ボタン。黒い縁取りとずれた影付き
• こたえボタン（button-answer）: 青緑のピル型ボタン。黒い縁取りとずれた影付き

Do's and Don'ts

Do - 地色はセクションごとに原色ではっきり切り替える - 黒い縁取りとずれた影で、統一したポップ感を出す - インクの飛び散りやマスコットを余白に散らす - 方眼紙の白地で情報セクションを整理して見せる

Don't - くすんだ色や低彩度のトーンにしない - ぼかし影やグラデーションボタンを使わない - 明朝体や細いゴシックで固い印象にしない - 装飾を本文の上に重ねて読みにくくしない

Page Structure

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

1. ファーストビュー（イベント名・期間・世界観を一目で伝える）: ピンク枠の中にコラージュイラスト、ロゴ、日付。キャラクターを縦書きコピーと一緒に置く
2. イントロ（案内役のあいさつとイベントの概要）: 方眼紙の地に付箋メモを2枚、左右交互に置く。インクとマスコットを散らす
3. 遊び方（参加条件と手順を示す）: アイコン付きの条件帯のあと、色違いの番号付きカードを5枚、2列で並べる
4. 開催情報（期間・価格・販売場所と地図を伝える）: 青いストライプの地に、ピンクのラベルと大きな白い数字。線画の地図を添える
5. SNS訴求（公式アカウントのフォローと、プレゼントへの誘導）: 紫の地に落書き風の白い線画。青い枠のバナーとキャンペーンカードを置く
6. 注意事項（ルールや注意点を網羅する）: 方眼紙の地に、小さな文字の箇条書きを並べる
7. 練習問題（謎解きを体験させて参加意欲を高める）: 緑の地にストライプ額縁の問題カード。下にヒントとこたえのボタン
8. フッター（主催と制作者の表記）: 青い地に黄色の落書き線画。白抜きのロゴを中央に置く

Imagery

• 太い線と原色で描いた、コラージュ調のポップアートイラスト
• 黄色いアヒルのマスコットを繰り返し登場させる
• 青・ピンク・黄のインクの飛び散りを装飾に使う
• スマイル、三角、星、波線などの手描き線画を背景に散らす
• 実写の写真は角丸で切り抜き、白いパネルの中に収める
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPはステップカードを1列にし、番号の丸は左上に残す
• 付箋メモはSPでは傾きを弱め、全幅の90%程度にする
• 装飾のインクは、SPでは数を減らして画面の端に寄せる
• PCはコンテンツ幅を約700pxに抑え、中央揃えにする

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