DESIGN.md — 紫×ピンクと木札見出しの謎解きイベントLP（Fantasy Purple Theme Park Mystery Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型、レトロ
• キーワード: ファンタジー・絵本風キャラクター・木目の札見出し・紫のグラデーション・波形の境界・石畳の柄
• 地の質感: 木目、石畳の柄、絵画風の背景イラストを使う。情報部分はフラットな面で見せる。
• 形: 角丸カード、ピル型のラベル、丸いキャラクターアイコン、額縁風の装飾枠、波形の境界
• 温度感: やや暖かい。夜祭りのような紫に、温かいピンクと木の茶色を合わせる

Colors

• 物語パートは濃い紫と紫の地にする。情報パートは生成り色の地にして、読ませる場所を分ける。
• 強調文字、ピル型ラベル、フッターはローズピンクに統一する。
• 外部リンクボタンだけ紺にして、主CTAの紫と区別する。
• FAQと注意事項は淡いラベンダーの面で控えめにまとめる。
• 見出しはどのセクションでも木目の茶の札に白文字で入れる。
• 黄色はページ送りの現在位置など、ごく小さな面だけに使う。
• heading-wood-plank は文字 #FFF4F8 × 背景 #CA8D55 のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9D6431、4.55:1）を使う。
• label-pill は文字 #FFF4F8 × 背景 #E25879 のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D72550、4.58:1）を使う。

Typography

• 本文は中央揃えを基本にし、短い行で改行する。
• 物語の重要な語は、ピンクの太字にして文中で強調する。
• 見出しは明朝系の太字に白抜きと縁取りを付け、木札の上に置く。
• 難しい漢字にはルビを付けて、子どもでも読めるようにする。
• 注意事項は小さな文字の箇条書きで、行間を詰める。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。プレイ形式は 4 列、安心ポイントは 3 列、キャラクターアイコンは 4＋3 列で並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算）
• 各セクションは木札見出しから始め、続けて中身を置く。
• スライダーは左右にピンクの三角矢印、下にドット送りを付ける。
• 開催情報は、ピンクのラベルとその下の値の組を縦に積む。
• FAQは全幅の折りたたみ行を8px間隔で並べる。
• 紫と生成り色の境界は波形にする。

Elevation & Depth

• スライドカードに薄い影を付ける。
• FAQ行は影なしで、下に細い白線を入れる。
• 主CTAは金色の縁取りで立体感を出す。
• 全体はフラットにまとめ、装飾の立体感はイラストで出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: キャラクターは金縁の円形アイコンで切り抜く。紹介は額縁型の枠に入れる。
• セクション境界: 波形（スカラップ）の境界、またはまっすぐな色の切り替え
• ラベルとボタンはピル型にする。
• カードの角丸は8px程度にする。
• 見出しは両端が尖ったリボン状の木札にする。
• 持ち物の図解は不定形なブロブの上に置く。

Components

• 木札見出し（heading-wood-plank）: 両端が尖った木目の板に白い縁取り文字を載せた見出し
• おためしCTA（button-primary）: 濃い紫のピル型ボタン。金縁で囲み、左にキャラクターのシルエット、上に吹き出しを付ける
• 外部リンクボタン（button-link）: 紺のピル型ボタン。白文字に右向き矢印を付ける
• 項目ラベル（label-pill）: 情報の項目名を入れる小さなピンクのピル型ラベル
• プレイ形式タイル（info-tile）: 白い角丸タイルに、アイコンと所要時間・人数などを入れて4つ並べる
• 手順スライダー（slider-card）: 白いカードにピクトグラム、番号付きの見出し、説明を入れる。左右に三角矢印を付ける
• キャラクター額縁（character-frame）: 濃い紫の額縁に金の唐草装飾を付け、キャラクターの絵と名前、紹介文を入れる
• FAQ行（faq-accordion）: 淡いラベンダーの角丸の行。左に「Q：」と質問、右に下向きの山形アイコンを置く
• 追従丸バッジ（floating-badge）: 濃紺の丸いバッジ。キャラクターのアイコンと2行の文字を入れ、右側に追従させる

Do's and Don'ts

Do - セクションの見出しは、すべて木札で統一する。 - 紫系の地と生成り色の地を交互に置き、境界は波形にする。 - 強調語はピンクの太字だけで表す。 - キャラクターのイラストは、各所で案内役として登場させる。 - 情報欄はピンクのラベルと中央揃えの値で簡潔に並べる。

Don't - 寒色のビジネス調にしない。 - 見出しをプレーンな文字だけにしない。 - 強調色を3色以上混ぜない。 - 写真を中心に構成しない。イラストを主役にする。 - 本文を長い左揃えの段落にしない。

Page Structure

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

1. ファーストビュー（世界観と開催期間を伝える）: 絵画風のキーアートに装飾ロゴと大きな日付を重ね、右に追従バッジを置く
2. 導入（イベントの概要を伝える）: 紫の街並みの背景に、帯見出し、吹き出し、短い説明文を重ね、下端にシルエットを並べる
3. プレイ形式（遊ぶ条件を一目で伝える）: 濃い紫の地に4つのタイルを並べ、スマホが必要な旨をピンクの帯で示す
4. 初心者向けの安心ポイント（参加の不安を取り除く）: 3列の丸アイコンカードに短い説明を付ける
5. あらすじ（物語への没入を促す）: 石畳柄の地に中央揃えの文を置き、要所をピンクで強調する
6. キャラクター（登場人物を紹介する）: 丸いアイコンを並べ、その下に額縁のスライダーで一人ずつ紹介する
7. 遊び方（手順と持ち物を説明する）: 紫の地に手順スライダーと持ち物の図解を置き、最後に主CTAを置く
8. 開催情報（日程・料金・場所・販売所を伝える）: 生成り色の地に、ピンクのラベルと値を縦に並べ、リンクボタンを添える
9. ジャンル解説（体験の種類を説明する）: 藤色の地に木の枠のボードを置き、小物のイラストを添える
10. よくある質問（疑問を解消する）: ラベンダーの折りたたみ行を並べる
11. 注意事項（利用条件を伝える）: くすみ紫の見出し帯の下に、小さな文字の箇条書きを置く
12. シェアとフッター（拡散と運営者の表示）: ピンクの地にSNSの丸アイコンとキャラクターを置き、クレジットを並べる

Imagery

• キャラクターは、絵本やアニメ風に描いた擬人化動物の手描きイラストにする。
• 背景は夕暮れの欧風の街並みを、紫とピンクの絵画調で描く。
• 手順の説明は、紺色の単色ピクトグラムで描く。
• 小物は、宝箱・鍵・剣などの厚塗り風アイコンにする。
• 装飾は、金の唐草模様、星のきらめき、石畳の柄を使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、中央に SP 幅の縦長カラムをそのまま置く。
• PC の左側にはキービジュアルと導入文を固定表示する。
• PC の右側には SNS アイコンとページ内ナビを縦に並べる。
• 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 行書くと起動時に読み込まれる。