DESIGN.md — 紫ピンクのネオンポップな謎解き宿泊 LP（Pastel Neon Pop Illustration Hotel Mystery Event LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、かわいい、クール・先進的
• キーワード: オーロラ背景・紫ピンクグラデーション・黒線イラスト・ピクセル英字ラベル・片角R・ゲーム感
• 地の質感: ホログラム調の淡い背景に、細かいノイズが乗ったグラデーション面を重ねる
• 形: 片側の上角だけ大きく丸めた色面、黒枠の角丸カード、黒い影を落とすピル型ボタン
• 温度感: やや涼しめで夢っぽい。ピンクの差し色で温かさを足す

Colors

• 外側の地は淡いオーロラ調にし、中央カラムだけに色面を置く
• セクションごとに紫・ピンク・青のグラデーション面を切り替えてリズムを出す
• 英字ラベルと小見出しはマゼンタで統一する
• 主ボタンは紫の塗りに白文字、黒いオフセット影を付ける
• 色面の上の文字は白、淡い地の上の文字は黒にする
• 価格と注釈の強調はマゼンタや紫の文字で示す
• button-primary は文字 #FCFDFE × 背景 #CF66FE のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B617FD、4.55:1）を使う。
• label-pixel は文字 #FCFDFE × 背景 #E0267A のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DC1F75、4.59:1）を使う。
• info-label は文字 #FCFDFE × 背景 #E0267A のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DC1F75、4.59:1）を使う。
• accordion は文字 #E0267A × 背景 #FFFFFF のコントラスト比が 4.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DC1F75、4.53:1）を使う。
• badge-ribbon は文字 #FCFDFE × 背景 #9866FA のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8950F9、4.5:1）を使う。
• floating-cta は文字 #FCFDFE × 背景 #E794D8 のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CB2EAF、4.53:1）を使う。

Typography

• 大見出しは細めのウェイトで字間を 0.2em ほど広げる
• 見出しの上にピクセル風の英字ラベルを小さく置く
• サブ見出しはマゼンタで縦書きにし、図版の左に添える
• 本文は 13px 前後の中太ゴシックにする
• 色面の上のリード文は白で、字間をやや広げる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。中央カラムは端末幅の約 75% で、左右に背景を見せる
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央カラムの外側にはオーロラ背景だけを見せる
• セクションの色面は中央カラム幅いっぱいに敷く
• 図版の左に縦書き見出しを置く 2 列構成を繰り返す
• 図版の下に本文を 2〜4 行で添える
• セクションの間に小さな星などの飾りを置く

Elevation & Depth

• ボタンには右下へ黒いオフセット影を付ける（ぼかしなし）
• カードは影を付けず、黒い枠線で区切る
• 装飾イラストはセクションの端からはみ出させる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 60px。ボタンはピル型。
• 写真の切り抜き: 黒枠の角丸長方形（角丸 8px）
• セクション境界: 上側の片方の角だけを大きく丸めた色面で切り替える
• セクションの色面は片側の上角だけ半径 60px ほど丸める
• 写真とイラストは 1.5px の黒枠と角丸 8px で囲む
• ラベルは角丸なしの長方形にする

Components

• 詳細ボタン（button-primary）: 紫のピル型ボタン。右端に矢印を置き、黒い枠線とオフセット影を付ける
• 英字ラベル（label-pixel）: マゼンタの長方形に白いピクセル風英字。見出しの右上に置く
• 項目ラベル（info-label）: イベント詳細の各項目名。マゼンタの帯を中央に置き、下に値を太字で書く
• 図版カード（illust-card）: 黒枠・角丸のグラデーションイラスト。左に縦書きの見出しかステップ番号を添える
• プランカード（plan-card）: 白い横長カード。左にサムネイル、中央にプラン名と価格、右に丸い矢印を置く
• アコーディオン（accordion）: 上下を黒線で区切った白い行。左にマゼンタの項目名、右に紫の＋を置く
• 斜体の強調帯（badge-ribbon）: 紫やピンクの立体的な帯に白い太字を斜体で置く。背景には虹色のにじみを敷く
• 追従予約ボタン（floating-cta）: 画面の右下に固定する、ホログラム調の円形ボタン

Do's and Don'ts

Do - 中央カラムの外側にオーロラ背景を見せる - イラストは黒線とグラデーションの塗りで統一する - セクションごとにピクセル風の英字ラベルを付ける - 色面は片側の角だけを大きく丸める - ボタンには黒いオフセット影を付ける

Don't - 写真に黒枠を付けずに配置しない - 濃い原色を背景いっぱいに使わない - ぼかしの強いソフトな影を使わない - 明朝体を使わない - すべての角を均等に丸めない

Page Structure

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

1. ファーストビュー（世界観を一目で伝える）: 全面イラストに大きな手書き風ロゴを重ねる。左に縦書きのコラボ表記、上にハンバーガーメニューを置く
2. リード（イベントの概要を伝える）: 紫のグラデーション帯に白い中央揃えの文。右下に人物の写真を丸く切り抜いて添える
3. ストーリー（物語への没入を誘う）: ピンク紫の片角R面にエンブレムと語りかけの文。左に縦書きの見出しを置く
4. 特長（体験の魅力を 3 点で示す）: 縦書きの見出しとイラストカード、説明文の組を 3 つ繰り返す
5. 参加方法（手順を示す）: 水色の地に STEP1〜3 を縦書き。イラストカードと短い説明を並べ、最後に注意事項を置く
6. イベント詳細（日時・人数・場所を伝える）: ピンクの面にマゼンタのラベルと中央揃えの値を積む。白い枠の住所欄、ボタン、写真を続ける
7. 食事（付帯価値を訴求する）: 斜体の強調帯、黒枠の写真、マゼンタの店名、ボタンの順に並べる
8. 受賞実績（信頼を補強する）: リボン型のバッジの下に写真と説明を置く
9. 宿泊予約（プランを選んで申し込ませる）: 青から紫へのグラデーション面に検索条件と白いプランカードを並べ、下に注釈を置く
10. ブランドメッセージ（情緒で後押しする）: 淡いピンクの地に中央揃えの詩的な文と大きなピル型ボタン
11. 注意事項・よくある質問（不安を解消する）: アコーディオン形式の行と、制作会社の紹介を並べる
12. フッター（主催者とシェア導線を示す）: 紫の面にロゴ、シェアボタン、クレジットを置く

Imagery

• 人物は顔を省略したフラットなイラストにし、黒い輪郭線で描く
• 塗りはピンク・紫・青のグラデーションに粒子状のノイズを乗せる
• ケーキ・薔薇・鍵・星など記念日らしい小物を端からはみ出させる
• 写真は明るく鮮やかに撮り、黒枠の角丸で囲む
• 背景はホログラムのような虹色のにじみにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央カラムは 480px 前後に固定し、左右にオーロラ背景を広げる
• PC の左右の余白にロゴや予約ボタンを固定して置いてもよい
• 追従ボタンは SP では右下に固定する

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