DESIGN.md — くすみ青緑と古革茶の怪談体験キット LP（Eerie Teal Retro Mystery Kit LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: レトロ、ラグジュアリー・ダーク、シンプル・ミニマル、親しみ・手作り感
• キーワード: 不穏・古物・物語没入・くすみ青緑・ノイズ質感・手書きメモ
• 地の質感: ざらついた砂嵐ノイズ、和紙・古紙風の斑点テクスチャ、マスキングテープ
• 形: 四角い帯見出しが基本。CTA は小さな角丸の矩形、補助ボタンはピル型
• 温度感: 低温でやや湿った、ひんやりした印象

Colors

• 物語パートは青緑・黒・茶褐色のノイズ地で暗く不穏にする
• 情報パートは明るいグレー紙地に切り替え、見出し帯だけ青緑にする
• 購入 CTA は必ず古革のダークブラウンに白文字
• 赤は販売状況など 1 語だけに使い、面には使わない
• 彩度の高い色は実績画像の中だけにとどめ、UI には入れない
• フッターは青緑の面に白抜き文字
• button-more は文字 #F5FEFF × 背景 #74A1A7 のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#517A80、4.61:1）を使う。
• band-heading は文字 #F5FEFF × 背景 #74A1A7 のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#517A80、4.61:1）を使う。
• story-strip は文字 #74A1A7 × 背景 #FEFFFE のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#517A80、4.53:1）を使う。

Typography

• FV コピーは縦書きにし、画面の左右に分けて配置する
• 見出しの字間は 0.15〜0.2em と広くとり、静けさを出す
• 見出しの上に小文字の英字セリフラベルと細い横線を添える
• ストーリー文は 1 行ずつ白帯に乗せ、帯の幅は行ごとに変える
• 声のメモは手書き書体で、整えすぎない
• FAQ の Q/A はセリフ体の頭文字で区別する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。how to play は横スクロールのカルーセル、スペック表示は 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 物語パートは全幅の写真・ノイズ地を使い、余白を少なくする
• 情報パートは左右に約 5% の余白をとり、中央にまとめる
• 帯見出しと内容を交互に縦へ積み、表のように見せる
• スペックは細い白枠の角丸カード 3 枚を横に並べる
• もっと見るボタンは右寄せ

Elevation & Depth

• ポラロイド写真と内容物の紙は軽いドロップシャドウで浮かせる
• ピル型のボタンには薄い外側の影をつける
• 帯見出しやカード枠は影なしのフラットにする
• マスキングテープは半透明で重ねる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 白枠のポラロイド風写真を少し傾けて置く。円形のシルエットアバターも使う
• セクション境界: 直線で背景色を切り替える。紙片やテープがセクションをまたいでもよい
• 帯見出しは角丸なしの長方形
• 主 CTA は角丸小さめの矩形と ▶ 記号
• 補助ボタンはピル型
• 黒塗りの墨でにじませたマスクで文字の一部を隠す

Components

• 購入 CTA（button-primary）: 古革風のダークブラウン矩形に白文字と ▶ をつけたボタン
• 詳細ページボタン（button-pill-dark）: 茶色のピル型。外部リンクアイコンつき
• SNS リンクボタン（button-pill-outline）: 白地にグレー枠のピル型
• もっと見る（button-more）: 青緑のピル型。右寄せで影つき
• 帯見出し（band-heading）: 全幅に近い青緑の帯に、字間を広げた白文字
• 英字ラベル付き見出し（section-label）: 小さな英字セリフと細線の下に、グレーの和文見出し
• 白帯ストーリー文（story-strip）: 写真の上に、行ごとの白帯と青緑の文字を重ねる
• 手順ポラロイド（polaroid-step）: 傾けた白枠写真に、番号と手順名のラベルを重ねる
• スペックカード（spec-card）: ノイズ地に白い細枠の角丸カード。大きな数字と単位を置く
• 声のメモ（memo-voice）: 方眼紙の紙片に円形シルエットと手書き文字を重ねる

Do's and Don'ts

Do - 実在しそうな古物の質感と怪談めいた空気を写真で出す - 情報パートは明るく整理し、物語パートと緩急をつける - 見出しには必ず英字ラベルと細線を添える - CTA は古革ブラウンでそろえる - ノイズや斑点のテクスチャを背景に薄く敷く

Don't - 鮮やかなポップ色を UI に使わない - 大きな角丸カードや可愛いイラストを使わない - ジャンプスケア的なグロ画像を使わない - 文字を詰めすぎない（字間は広めを保つ） - 白一色ののっぺりした背景にしない

Page Structure

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

1. ファーストビュー（不穏な世界観を一目で伝える）: ぼかした人物が古い鞄を持つ青緑の写真に、縦書きの大コピーと短い横書きの一文を重ねる
2. 導入ムービー（物語へ引き込む）: 黒枠の中に、モノクロのぼやけた映像と縦書きのテキスト
3. お客様の声（体験の評判を示す）: 茶色の革テクスチャに斜めの白見出しを置き、紙片メモを散らす
4. ストーリー（設定と背景を語る）: 青緑地から廃屋の写真へつなげ、行ごとの白帯に文章を乗せる。右端に縦書きの英字ラベル
5. 遊び方（体験の流れを示す）: ノイズ地にポラロイドの横カルーセルを置き、下にスペックカードを 3 枚
6. 内容物（キットの中身を見せる）: テープで留めた古紙に俯瞰写真。品名の一部を墨塗りで隠す
7. 商品詳細・CTA（購入情報と購入導線）: 斑点グレー地に青緑の帯見出しと中央寄せの値。中ほどに購入 CTA
8. 出展実績（信頼と実績を示す）: バナー画像とテープ留め写真の横並び、ピル型のボタン 2 つ
9. よくある質問（不安を解消する）: Q/A の頭文字で区切ったテキストと、右寄せのもっと見るボタン
10. 注意事項（安全面と年齢制限を伝える）: 黒丸の箇条書きで淡々と並べる
11. フッター（ロゴと規約への導線）: 青緑の面に白いロゴとリンク。右下に購入への固定タブ

Imagery

• 青緑寄りの低彩度に色を寄せ、人物はぼかして顔を見せない
• 古いレザー小物や廃屋のトタンなど、使い古した質感を写す
• 写真は白枠のポラロイド風にして少し傾け、テープで留める
• シルエットの人型アイコンを円の中に入れる
• 砂嵐ノイズ・墨のにじみ・古紙の斑点を装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では SP 幅の縦長カラムを中央に固定し、そのまま見せる
• PC の左右の余白には、くすんだ空と荒野の風景写真を全面に敷く
• 左の余白に紙片風のキービジュアル、右の余白に縦書きのタイトルとロゴを置く
• 固定の購入タブは 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 行書くと起動時に読み込まれる。