DESIGN.md — 紺の水面と和紙白の伝奇ゲームLP（Japanese Folklore Mystery Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 和風、上品・高級、ラグジュアリー・ダーク
• キーワード: 和紙テクスチャ・水面の揺らぎ・波しぶき境界・墨の筆跡・朱赤の差し色・明朝見出し
• 地の質感: 白地はうっすら繊維が見える和紙調、紺地は水面のコースティクス模様。
• 形: セクション境界は波しぶきのギザギザ。ボタンは両端に波紋の装飾を入れた横長ピル型。
• 温度感: やや寒色寄り。紺と灰白で静かでひんやりした印象にし、朱赤で緊張感を足す。

Colors

• 白地と紺地を交互に重ね、物語の雰囲気を伝えるセクションは紺地にする。
• 白地の見出しは藍色の筆文字にし、下に灰色の墨かすれを敷く。
• 紺地の見出しは白文字にし、下に黒い墨かすれを敷く。
• 朱赤は本文中のキーワードとキャラ名の頭文字だけに使う。
• スペック表の項目名は水色、値は白にする。
• ロゴ帯とフッターは純白にし、和紙調の地と分ける。

Typography

• 本文も見出しも明朝系の太字に揃え、ゴシックは注釈とフッターだけにする。
• あらすじは中央揃えにし、1行を短く切って詩のように並べる。
• 強調語は本文より1.5倍大きくし、朱赤＋細い白フチにする。
• 紺地の文字には薄い影をつけて読みやすくする。
• キャラ名にはルビを小さく添え、頭の1文字を朱赤にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。スペックだけ項目名と値の 2 列表
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは中央に置き、下に墨の筆跡を横長に敷く。
• スクリーンショットは中央1枚＋左右を少し見せるカルーセル。
• キャラはサムネイルを横に並べて選ぶ形にし、上に大きな立ち絵と紹介文を出す。
• スタッフは役職・名前・代表作を中央揃えで縦に積み、薄い線で区切る。
• 各セクションの上下に60〜80pxの波しぶきの余白をとる。

Elevation & Depth

• ボタンとバナーは二重の紺の枠線と、うっすらした外側の光で立体感を出す。
• 動画のサムネイルとスクショのカードは細い濃紺の枠と軽い影をつける。
• 選択中のキャラサムネイルは白い光のふちで目立たせる。
• 強いドロップシャドウは使わない。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: キービジュアルは水彩がにじんだような円形のフェードで切り抜く。スクショとサムネイルは角丸の長方形。
• セクション境界: 白地と紺地の境目は、波しぶきや水泡のようなギザギザのマスクにする
• ボタンはピル型で、両端に波紋（渦）の飾りを入れる。
• バナーは角丸12〜16pxで、紺と灰の二重フチにする。
• 直線の境界は使わず、必ず波しぶきでつなぐ。

Components

• 波紋装飾ピルボタン（button-primary）: 濃紺の布のような地に白い明朝文字。両端に波紋の装飾、二重の枠線。
• 特別版バナー（banner-edition）: 左に白背景の商品写真、右に深緑の地に金色の筆文字。二重の紺の枠。
• 墨かすれ見出し（heading-brush）: 横長の墨の筆跡の上に、筆風の見出しを中央に重ねる。
• 対応機種ロゴ帯（platform-logos）: 白い帯に各ストアのロゴバッジを横に並べ、下に注釈を2行入れる。
• スクショカルーセル（carousel-shot）: 中央に大きなカード、左右の端にほかのカード。赤い矢印と、赤と灰のドットのページ表示。
• キャラ選択サムネイル（character-selector）: 角丸の正方形の顔アイコンを横に並べ、選択中は光るフチ。上に立ち絵・ルビ付きの名前・紹介文。
• スペック表（spec-table）: 線のない2列の表。左は水色の項目名を中央揃え、右は白い値。
• スタッフ紹介ブロック（staff-block）: 小さい役職名、藍色の大きな名前、代表作を中央に積み、細い灰の線で区切る。

Do's and Don'ts

Do - 白地と紺地を交互に重ね、境目は必ず波しぶきでつなぐ。 - 見出しには墨の筆跡を敷き、筆の質感を出す。 - 強調は朱赤の大きめの文字だけにし、1ブロックに2語までにする。 - 白地には和紙、紺地には水面のテクスチャをうっすら入れる。 - あらすじは中央揃えで短い行に分ける。

Don't - ビビッドなグラデーションやポップな色を足さない。 - 丸ゴシックやかわいい書体を使わない。 - セクション境界を直線やなめらかな曲線にしない。 - 朱赤をボタンの地や広い面に使わない。 - 単色ベタだけのフラットな背景にしない。

Page Structure

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

1. ファーストビュー（世界観と発売日を一目で伝える）: 和紙の白地に、円形にじみで切り抜いたキャラ集合イラスト。右に縦書きの短いコピー、下にロゴと藍色の大きな発売日。
2. 動画（トレーラーを見てもらう）: 灰色の水面の帯に、赤いフチの再生ボタン付きの横長サムネイルを全幅で置く。
3. 特別版の案内（上位版の購入へ誘導する）: 商品写真と深緑の筆文字を左右に分けた、二重枠のバナー。
4. 対応機種（購入先を示す）: 白い帯にストアのロゴを4つ横に並べ、小さい注釈を入れる。
5. 最新情報（SNSのフォローを促す）: 墨かすれ見出し、2行の案内文、波紋ボタン。
6. あらすじ（物語への興味を高める）: 紺の水面地に白い明朝を中央揃えで並べ、キーワードだけ朱赤で大きく。
7. スクリーンショット（ゲーム画面を見せる）: 白地に横スクロールのカルーセル、赤い矢印とドット。
8. 登場人物（キャラクターを紹介する）: 紺地に右寄せの立ち絵、左上に朱赤の頭文字の名前、紹介文、サムネイルで切り替え。
9. 制作スタッフ（作り手の実績で信頼を伝える）: 白地に役職・名前・代表作を中央に積み、線で区切る。
10. スペック（製品情報をまとめる）: 紺地に水色の項目名と白い値の2列表。
11. 締めのCTA・ガイドライン（購入と配信ルールの案内）: 特別版バナーをもう一度出し、波紋ボタンと権利表記の文章を続ける。
12. フッター（レーティング・SNS・規約）: 白地にロゴ群、SNSアイコン、2列のリンク、言語切り替え。

Imagery

• キャラはくっきりした線画に、落ち着いた彩度の塗りの劇画調にする。
• キービジュアルは海と空を背景に人物を集め、外側を水彩のにじみで白に溶かす。
• 背景は水中から見上げたような光の網目（コースティクス）を、紺に低いコントラストで入れる。
• セクション境界は白い波しぶき・水泡を、筆で散らしたようなブラシで描く。
• 装飾は波紋・渦の和柄と墨の筆跡に絞る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も中央 1 カラムのまま。コンテンツ幅は約 700px で、左右には背景のテクスチャを広げる。
• PC のキャラ紹介は、左に名前と紹介文、右に立ち絵の横並びにする。
• PC のスクショカルーセルは中央のカードを大きくし、左右のカードを多めに見せる。
• 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 行書くと起動時に読み込まれる。