DESIGN.md — 黒×紫ゴシックの謎解き書籍LP（Gothic Purple Mystery Book LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、レトロ、上品・高級
• キーワード: ゴシックホラー・古書・深紫・飾り枠・ミステリー・縦長スクロール
• 地の質感: 黒〜紫の縦グラデーションに霧や煙のテクスチャを重ねる。カードは灰色の紙にかすれた汚れを入れる
• 形: 角丸なしの四角カード。四隅にL字の飾り枠を置き、セクション間は唐草模様の帯で区切る
• 温度感: 冷たく妖しい。暗く沈んだ寒色の紫

Colors

• 地の色は黒から深紫への縦グラデーションに統一し、明るい白地は使わない
• 本文を多く載せる部分は灰色の紙カードにし、文字は黒にする
• 強調語は文字色を紫にして、太字の中でさらに目立たせる
• 数値や条件を見せるカードだけ羊皮紙色の地にえんじの見出しを使う
• 黄色はリンクと小さな注目点だけに使う
• 最下部の商品・購入エリアは地を一段明るい紫に切り替える
• page は文字 #333333 × 背景 #000000 のコントラスト比が 1.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#9C9C9C、4.6:1）を使う。

Typography

• セクション見出しはブラックレター風の英字＋小さな和文ゴシックの2段にする
• 英字見出しには銀から紫へのグラデーションを入れる
• 物語調の本文は明朝の中央揃えで、短い行で改行する
• 導入コピーは太いゴシックの斜体にして、斜めの帯に乗せる
• カード内は明朝体で落ち着いた古書の雰囲気を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦に積み、手順はカルーセルにする
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• 各セクションは英字見出しで始め、中央揃えにする
• カードは幅を画面の約75〜80%にして左右に余白を取る
• セクション境界に唐草模様の細い帯を入れる
• カード同士の間隔は約24pxにする
• 画像バナーは幅80%で中央に置く

Elevation & Depth

• 影はほとんど使わず、平面的に作る
• 立体感はカード四隅の飾り枠と紙の質感で出す
• 背景の霧のテクスチャで奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角のまま切り抜く。章一覧は斜めに切った帯を重ねる
• セクション境界: 唐草模様の横帯と、背景グラデーションの切り替え
• 角丸は使わず、すべて直角にする
• カード四隅に星入りのL字飾り枠を置く
• 羊皮紙カードは二重線の枠と四隅の渦巻き装飾にする
• 番号は黒い丸の中に白い明朝数字を入れる

Components

• ゴシック英字見出し（section-heading）: ブラックレター風の英字にグラデーションを入れ、下に和文の小見出しを付ける
• 斜め帯コピー（slanted-band）: 淡い紫灰の平行四辺形の帯に、太い斜体の黒文字を乗せる
• 飾り枠カード（framed-card）: 灰色の紙カード。四隅に星入りのL字飾り、上部に英字の番号ラベルを置く
• 羊皮紙情報カード（parchment-card）: 羊皮紙色の地に二重線の枠と渦巻き装飾を付け、アイコン・えんじの見出し・条件を並べる
• 手順カード（step-card）: 灰色カードの左上に黒丸の番号、中央に線画アイコン、下に見出しと説明を置く。左右の矢印で送る
• 紫の見出し帯（label-bar）: 紫の矩形に白い明朝文字を乗せ、下に渦巻きの飾りを付ける
• 仕様表（spec-table）: 左の項目名を白線の枠で囲み、右に値を書く。リンクは黄色の下線付き
• 予約ボタン（button-primary）: 紫の矩形に細い白枠を付け、中央に白文字、右端に矢印を置く。縦に並べる

Do's and Don'ts

Do - 地は黒〜深紫のグラデーションを保つ - 見出しは必ずゴシック英字と和文小見出しの組み合わせにする - 本文が長い部分は飾り枠付きの灰色カードに収める - 物語の文章は明朝の中央揃えで短く改行する - セクション境界に唐草模様の帯を入れる

Don't - 角丸やピル型のボタンを使わない - 白地や明るいパステルの面を広く使わない - ポップな丸ゴシック体を使わない - 鮮やかな原色をメインの装飾に使わない - ドロップシャドウを強くかけない

Page Structure

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

1. ファーストビュー（世界観とタイトルを一目で伝える）: 紫の書店イラストを全面に敷き、白い筆文字風タイトルと浮かぶ本を重ねる
2. 導入コピー＋動画（実績と新作であることを伝える）: 黒地に霧を重ね、白文字の実績と斜め帯のコピー3段、その下に動画を埋め込む
3. この本について（物語の導入で引き込む）: 飾り枠付きの紙カードに、明朝の中央揃えで物語風の文章を書く
4. 世界観の解説（題材の背景を説明する）: 左右に線を引いた見出しの下に、暗い地で白い明朝の本文を置く
5. 関連イベント告知（連動企画を案内する）: 短い白文字の案内とバナー画像を置く
6. シリーズ紹介（シリーズの既刊を見せる）: 紫の見出し帯と説明文の後に、書影のカルーセルを置く
7. ポイント（特長を3つ伝える）: 番号付きの飾り枠カードを3枚縦に並べる
8. 収録章一覧（旅する舞台を見せる）: 章ごとに色の違うイラストを斜めの帯にして積み、大きな章番号を入れる
9. 遊び方（手順とプレイ条件を伝える）: 手順カードのカルーセルの後に、羊皮紙カード3枚と安心ポイントのバナーを置く
10. 商品概要（仕様と販売場所を示す）: 紫地に書影、商品名、枠線付きの仕様表を置く
11. 予約・購入CTA（購入へ誘導する）: 白い見出し帯、淡色ラベルに書いた予約期間、紫の矩形ボタンを縦に並べる

Imagery

• 紫を基調にした、劇画調で少し暗いゴシックホラーのイラスト
• 古い書架やチェック柄の床など、古書店の舞台背景
• 背景には灰色の霧や煙のテクスチャを薄く重ねる
• アイコンは黒またはこげ茶の単色シルエット・線画にする
• 星や渦巻きの装飾は古いアンティーク調にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央の約50%幅にまとめ、背景は全幅にする
• PC ではポイントカードを3列の横並びにする
• PC では手順カードを2×2のグリッドにする
• PC では羊皮紙カードを3列にする
• PC の商品概要は書影を左、仕様表を右の2カラムにする
• PC ではシリーズの書影を4冊横に並べる

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