--- version: alpha name: Japanese Folklore Mystery Game LP description: 和紙のような白地と、水面の揺らぎが入った深い紺の帯を交互に重ねたゲーム告知LP。境界は波しぶき状のギザギザ。見出しは毛筆の墨かすれの上に置いた明朝系の太字で、重要な語だけ朱赤で目立たせる。和風ミステリーの不穏さと上品さを両立した型。 colors: primary: '#2B4262' background: '#F2F2F2' surface: '#FFFFFE' dark-section: '#232A3D' cta: '#323952' on-cta: '#FBF8FC' text: '#2E4261' text-body: '#2D2C30' on-dark: '#E6EBEF' accent-1: '#B8353C' accent-2: '#84C1F0' line: '#BEC9CE' secondary: '#CFCFCE' accent-3: '#025A53' typography: display: fontFamily: Shippori Mincho B1 fontSize: 34px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Yuji Syuku fontSize: 32px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho B1 fontSize: 26px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.04em body-lg: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.04em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 600 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Shippori Mincho B1 fontSize: 22px fontWeight: 800 lineHeight: 1.6 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Shippori Mincho B1 fontSize: 18px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px banner-edition: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 140px heading-brush: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 64px platform-logos: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 64px carousel-shot: rounded: '{rounded.md}' height: 230px character-selector: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-lg}' rounded: '{rounded.md}' height: 72px spec-table: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 60px staff-block: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 170px --- # DESIGN.md — 紺の水面と和紙白の伝奇ゲームLP（Japanese Folklore Mystery Game LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 和風、上品・高級、ラグジュアリー・ダーク - **キーワード**: 和紙テクスチャ・水面の揺らぎ・波しぶき境界・墨の筆跡・朱赤の差し色・明朝見出し - **地の質感**: 白地はうっすら繊維が見える和紙調、紺地は水面のコースティクス模様。 - **形**: セクション境界は波しぶきのギザギザ。ボタンは両端に波紋の装飾を入れた横長ピル型。 - **温度感**: やや寒色寄り。紺と灰白で静かでひんやりした印象にし、朱赤で緊張感を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2B4262` | 紺の水面セクション地 | 30% | 画素の実測 | | `background` | `#F2F2F2` | 和紙調の白地 | 30% | 画素の実測 | | `surface` | `#FFFFFE` | プラットフォームロゴ帯・フッター | 9% | 画素の実測 | | `dark-section` | `#232A3D` | 濃紺ボタン地・豪華版バナー枠 | 3% | 画素の実測 | | `cta` | `#323952` | 主ボタン地（紺） | 2% | 画素の主要色に補正 | | `on-cta` | `#FBF8FC` | ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#2E4261` | 白地の見出し（藍色） | 1% | 画素の実測 | | `text-body` | `#2D2C30` | 白地の本文 | 2% | 画素の実測 | | `on-dark` | `#E6EBEF` | 紺地の本文 | 2% | 画素の実測 | | `accent-1` | `#B8353C` | 強調語の朱赤 | 0% | 画素の実測 | | `accent-2` | `#84C1F0` | スペック項目名の水色 | 0% | 画素の実測 | | `line` | `#BEC9CE` | スタッフ間の区切り線 | 0% | 画素の主要色に補正 | | `secondary` | `#CFCFCE` | 見出し下の墨かすれ（灰） | 2% | 画素の実測 | | `accent-3` | `#025A53` | 豪華版バナーの深緑 | 2% | 画素の実測 | - 白地と紺地を交互に重ね、物語の雰囲気を伝えるセクションは紺地にする。 - 白地の見出しは藍色の筆文字にし、下に灰色の墨かすれを敷く。 - 紺地の見出しは白文字にし、下に黒い墨かすれを敷く。 - 朱赤は本文中のキーワードとキャラ名の頭文字だけに使う。 - スペック表の項目名は水色、値は白にする。 - ロゴ帯とフッターは純白にし、和紙調の地と分ける。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 発売日などFVの大見出し | 明朝 | Shippori Mincho B1 | 800 | 34px | 1.3 | 0.02em | | `headline-lg` | セクション見出し（筆風） | 手書き・筆 | Yuji Syuku | 700 | 32px | 1.3 | 0.08em | | `headline-md` | スタッフ名・キャラ名 | 明朝 | Shippori Mincho B1 | 800 | 26px | 1.4 | 0.04em | | `body-lg` | あらすじ・キャラ紹介の本文 | 明朝 | Noto Serif JP | 700 | 15px | 2.2 | 0.04em | | `body-md` | スペック・告知本文 | 明朝 | Noto Serif JP | 600 | 14px | 1.8 | 0.02em | | `accent` | 本文中の朱赤キーワード（大きめ） | 明朝 | Shippori Mincho B1 | 800 | 22px | 1.6 | 0.04em | | `note` | ※注釈・フッターリンク | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | ボタン文字 | 明朝 | Shippori Mincho B1 | 800 | 18px | 1.2 | 0.06em | - 本文も見出しも明朝系の太字に揃え、ゴシックは注釈とフッターだけにする。 - あらすじは中央揃えにし、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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-e5acde0a`（元 LP の URL から採番） - **元 LP**: https://www.jp.square-enix.com/paranormasight/file38/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。