DESIGN.md — 生成り×紺×炎オレンジのアニメ謎解きLP（Anime Collab Escape Game Kit LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、情報量多め・訴求型、力強い・インパクト
• キーワード: 生成り地・濃紺・炎オレンジ・斜めカット・アニメキャラ・謎解き
• 地の質感: 和紙のような淡いベージュ地に、淡い炎シルエットを透かし模様として敷く。濃紺帯は夜空とボケ光の質感。
• 形: 斜めに切ったセクション境界、角の小さいボタン、オレンジ線で縁取った六角形風の枠、円形アイコン。
• 温度感: 暖かい生成りと冷たい濃紺の対比で、やや暖かめ。

Colors

• 地は生成り#F9F4EE、ブロック内は白カードで区切る。
• 見出し・主要ボタンは濃紺で統一する。
• オレンジは炎アイコン・STEP番号・おすすめ商品枠など注目点のみに使う。
• 物語・動画セクションは夜空色の濃紺帯に白文字で反転させる。
• 水色は炎やシルエットの装飾専用で文字には使わない。
• floating-cta は文字 #FF7D2B × 背景 #FEFEFE のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C94E00、4.55:1）を使う。

Typography

• 見出しは中央揃え、上に炎シルエットの小アイコンを置く。
• 見出しはゲーム風の角ばったディスプレイ書体で字間を広く取る。
• 物語や作品紹介の本文は明朝で語りの雰囲気を出す。
• 手続き情報・価格・注記はゴシックで読みやすくする。
• 日付やSTEP番号はオレンジの欧文で表示する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。POINT・グッズは SP で 2 列。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは斜めカットの境界で切り替える。
• 見出し→炎アイコン→コンテンツの順で中央揃え。
• 販売ブロックは2つの商品カードを並べ、おすすめ側をオレンジ地にする。
• STEPは縦に積み、間に下向き三角を置く。
• FAQ・ヒントはアコーディオンで畳む。

Elevation & Depth

• カードは影ではなく右下にずらしたベージュの平面オフセットで浮かせる。
• 主ボタンもグレーのずらし影をつける。
• それ以外は基本フラット。

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: キャラは切り抜き、場面写真は横長長方形を隙間なく並べる。キャラアイコンは円形。
• セクション境界: 斜めの直線カット（右上がり・左上がりを交互）
• STEP枠は角を斜めに落とした八角形風のオレンジ線枠。
• POINT番号はオレンジ線の円に炎を載せる。
• 必要なもの等のアイコンはベージュ地の円。
• ボタンは角丸小の長方形。

Components

• 濃紺の購入ボタン（button-primary）: 左にオレンジの四角アイコン、右に＋や▷を置いた濃紺の長方形ボタン。
• 炎付き送信ボタン（button-flame）: 濃紺ボタンの右端にオレンジ炎の丸アイコンが重なり、ずらし影つき。
• 炎アイコン見出し（heading-flame）: 淡い炎シルエットを上に重ねた中央揃えのディスプレイ見出し。
• POINTカード（point-card）: 白カード上部にオレンジ円の番号と炎、水色シルエットのイラスト、短い説明。
• STEP枠（step-box）: 角を落としたオレンジ線枠、右上にキャラの顔アイコンが飛び出す。
• おすすめ商品カード（product-card-featured）: オレンジ地の枠内に白カード、左上に斜めの「おすすめ」バッジ。
• アコーディオン（accordion）: 濃紺帯または白帯の中央に項目名、右に▽。
• グッズカード（goods-card）: 淡い灰青の画像エリアと白の名称エリア、右下にオレンジの＋ボタン。
• 追従購入ボタン（floating-cta）: 右下固定の白丸に炎の装飾とオレンジ枠、短い購入誘導文字。

Do's and Don'ts

Do - 見出しの上には必ず炎モチーフを添える。 - セクション境界は斜めカットで動きを出す。 - オレンジは注目点だけに絞って使う。 - 物語・動画は濃紺の夜空帯で切り替える。 - 手順・必要なものはアイコン化して視覚的に見せる。

Don't - 真っ白な背景をページ全体に使わない。 - オレンジを大きな地色として多用しない（おすすめ枠のみ）。 - ピル型の丸いボタンにしない。 - 強いドロップシャドウやグラデーションボタンにしない。 - 見出しに細い明朝を使わない。

Page Structure

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

1. ファーストビュー（作品世界とイベント名を一目で伝える）: キャラ集合のキービジュアル全面、左上に白抜き筆文字キャッチ、右上に丸い購入バッジ。
2. リード（体験の概要と遊び方を示す）: 明朝の大きめ斜体風コピーと水色の炎装飾、ゲーム開始風のボタン画像。
3. 場面ギャラリー（作品の雰囲気を見せる）: アニメ場面カットを横一列に隙間なく並べる。
4. 特長（魅力を3点で伝える）: POINTカード3枚、番号円と炎、シルエットイラスト。
5. 動画（CMで期待感を上げる）: 斜めカットの夜空帯に動画埋め込み。
6. おためし謎解き（その場で体験させる）: オレンジ枠の問題画像、ヒントのアコーディオン、解答入力欄と送信ボタン。
7. ストーリー（物語への没入）: 夜空帯に白い明朝本文を中央寄せ。
8. キャラクター紹介（登場人物を紹介）: 左に名前と説明、右に全身立ち絵、下に丸アイコンの選択グリッド。
9. 必要なもの・プレイの流れ（準備と手順を示す）: 円形アイコン5つの横並びとSTEP枠3段。
10. 開始日・販売情報（購入に導く）: オレンジ線枠の日付帯、販売条件カード、通常版とおすすめ版の比較カード。
11. 特典・グッズ（追加購入を促す）: 特典バナー画像と4列のグッズカード、濃紺の購入ボタン2つ。
12. お知らせ（最新情報を伝える）: オレンジ日付と下線リンクのリスト、SNS誘導ボタン。
13. 注意事項・FAQ（不安解消）: 濃紺アコーディオン3本と問い合わせボタン。
14. フッター（関連情報への導線）: 関連バナー、ロゴ、コピーライトを中央揃え。

Imagery

• アニメ調のキャラは白背景から切り抜いて配置する。
• 炎のシルエットを水色・ベージュ・オレンジで装飾的に描く。
• 濃紺帯は夜空に金や白のボケ光を散らした背景。
• アイコンは単色フラットのシルエット風、円形ベージュ地に置く。
• 商品写真は真上からの物撮りで、淡い背景に並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムを基本にし、POINTカードは縦積みにする。
• グッズは PC 4 列から SP 2 列にする。
• 商品比較カードは SP で縦積み、おすすめ側を上にする。
• キャラ紹介は立ち絵を上、説明を下に配置する。
• 追従購入ボタンは 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 行書くと起動時に読み込まれる。