DESIGN.md — 黒×血赤の破れ紙オカルト謎解きLP（Occult Mystery Tabloid Puzzle Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、レトロ、情報量多め・訴求型
• キーワード: オカルト雑誌・破れ紙・怪しげな黒・血赤テクスチャ・コラージュ・B級ミステリー
• 地の質感: 赤地はかすれ・飛沫のあるグランジ、灰地はぼかした背景写真、黒地は集中線。
• 形: 四角の黒箱に白二重罫、ベベル風灰枠カード、ピル型白ボタン、破れ紙の境界。
• 温度感: 暗く温度は低いが、赤と黄の強調で熱っぽさを出す。

Colors

• 黒・灰・赤テクスチャの3地をセクションごとに切り替える。
• 販売・購入情報は赤地の上に黒箱＋白二重罫で載せる。
• 情報ラベルは黄（販売系）と蛍光グリーン（スペック系）で役割を分ける。
• マゼンタは特典・外部案内の囲み枠と矢印アイコンに限定。
• 見出しは白文字に青のドロップシャドウで統一。
• POINT番号は赤の明朝で目立たせる。

Typography

• 全体を明朝で統一し、怪しげな雑誌感を出す。
• 見出しは白＋右下青シャドウ（2〜3px）。
• 英字見出しはセリフ体で並べる。
• 日付は数字のみ大きく、曜日は丸囲み。
• 本文は中央揃えが基本、カード内は左揃え。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、アイコンは2〜3列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション境界は破れ紙の白い縁で区切る。
• 情報箱は画面幅の約94%で白二重罫を内側に入れる。
• アイコン群は灰色の丸に黒線アイコン＋下にラベル。
• FAQ等は黄色下線のアコーディオンを縦に並べる。
• 境界付近に切り抜きのオカルト素材を半分はみ出して置く。

Elevation & Depth

• カードは灰色の立体ベベル枠で厚みを表現。
• How to Playの白カードに薄い影。
• ボタンは影なしのフラット。
• 切り抜き素材に暗いドロップシャドウ。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの矩形、モチーフは輪郭切り抜き
• セクション境界: 白い破れ紙のギザギザ境界
• 購入ボタンは白のピル型。
• ラベルは角なし矩形の黄・緑ベタ。
• 特典ラベルのみ黄色ピル。
• アイコン背景はかすれた灰色の円。
• 枠線は白二重罫か灰ベベル。

Components

• 購入ピルボタン（button-primary）: 白ピルに黒の明朝文字と右向き三角。
• 枠線サブボタン（button-outline）: 白地に黒枠の矩形、軽い影付き。
• 青影見出し（heading-shadow）: 白い太明朝に青の右下シャドウ。
• POINTカード（point-card）: 灰ベベル枠の黒箱、上に写真、赤いPOINT番号と白本文。
• 黄色ラベル（label-yellow）: 販売区分を示す黄ベタ矩形に黒太字。
• 緑スペックラベル（label-green）: 価格・内容物の項目名を蛍光緑ベタで示す。
• 二重罫情報箱（info-box-framed）: 赤地上の黒箱、内側に白の細い二重罫。
• 丸アイコン（icon-circle）: かすれ灰の円に黒の線画アイコン、下に白ラベル。
• 黄線アコーディオン（accordion-yellow）: ▼付き黄色文字と黄色の下線。
• 注意ボックス（caution-box）: 濃灰の角丸箱にマゼンタの警告アイコン。

Do's and Don'ts

Do - セクション切り替えには破れ紙境界を使う。 - 見出しは必ず白＋青シャドウの明朝。 - 販売情報は黒箱＋白二重罫にまとめる。 - UFO・目・石像などのオカルト素材を境界にはみ出させる。 - ラベルは黄と緑で役割を分ける。

Don't - 明るいパステルや白地を広く使わない。 - 丸ゴシックで可愛くしない。 - マゼンタを見出しや本文に多用しない。 - セクション境界を直線だけで済ませない。 - ボタンにグラデーションや色ベタを使わない。

Page Structure

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

1. ファーストビュー（世界観とタイトルを一撃で伝える）: 宇宙・UFO・遺跡のコラージュに赤い極太ロゴ、下部に黄黒の規制テープ風帯。
2. 告知帯（体験レポートへ誘導）: 赤ベタ帯に白文字と星記号。
3. 導入リード（体験の概要を短く訴求）: 体験写真2枚の下に白太明朝の中央揃えリード。
4. 動画（CMで雰囲気を見せる）: 青影見出しの下に16:9埋め込み動画。
5. 特長（3つのポイントを説明）: 黒地に灰ベベル枠のPOINTカードを縦に3枚。
6. プレイ形式・必要なもの（遊ぶ条件を示す）: 灰ぼかし地に丸アイコンを2列・3列、下にマゼンタ枠の案内箱。
7. ストーリー（物語で没入させる）: 集中線の黒地、導入文と白ピルの続きを読むボタン。
8. 遊び方（手順をステップ表示）: 白角丸カードのスライダー、マゼンタ矢印、枠線ボタン。下に安心ポイント図。
9. 商品概要（価格・内容物を示す）: 赤テクスチャ地に二重罫黒箱、メイン写真＋サムネ、緑ラベル。
10. 販売スケジュール（販売時期を伝える）: 黄色枠・黄色ラベルで区分、大きな日付数字。
11. 購入（購入先へ送客）: 白ピルボタンを縦積み、特典はマゼンタ枠で囲む。
12. よくある質問・注意事項（不安を解消）: 暗い背景に黄線アコーディオンを4本。
13. 関連リンク（運営・監修の紹介へ誘導）: 角丸のバナーボタン2つを縦並び。

Imagery

• UFO・巨大な目・モアイ・ピラミッド・古城を合成した過剰なコラージュ。
• 牛・人形・宇宙人などの切り抜きを境界に配置。
• 商品写真は鮮やかな布地の上で真上から撮る。
• 体験写真は自然光の室内で人物が冊子を読む姿。
• アイコンは太めの黒の線画。
• 背景はグランジ赤・ぼかし灰・集中線。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVを横長にし、キャッチを右の縦書きに。
• POINTカードと遊び方カードはPCで3列。
• 購入ボタンはPCで横3列。
• 情報箱はPCで中央約80%幅、ラベルと値を左右に並べる。
• 関連リンクのバナーはPCで横2列。

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