DESIGN.md — 深緑×古金の明朝系ファンタジーゲームLP（Dark Fantasy Gold Mincho Game LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、和風、力強い・インパクト、上品・高級
• キーワード: ダークファンタジー・古金の細枠・明朝の縦書き・墨の筆跡で区切る境界・羊皮紙と方位図の地紋
• 地の質感: 羊皮紙風の生成り地に方位図や魔法陣を薄く敷く。暗い帯には金色の光の粒と幾何学の地紋を重ねる。
• 形: 四角い枠に金の細線と角飾りを付ける。境界は墨のかすれや斜めの切り込みで作る。キャラクターはひし形に切り抜く。
• 温度感: 暗くて温かい（焦げ茶・古金）と、冷たく深い（深緑・黒）が交互に来る

Colors

• 地は深緑・黒が基本。生成りと砂色の明るい帯は、物語を伝える区間にだけ挟む。
• 装飾線・角飾り・CTAはすべて古金でそろえる。純粋な黄色は使わない。
• 暗い地の文字は淡い生成り、明るい地の文字は深緑黒にする。
• 主CTAだけを金の面にし、サブは白枠か焦げ茶の面で順位を付ける。
• 見出しの文字はうっすら発光させ、金の光の粒を背景に散らす。
• button-primary は文字 #FAF1E5 × 背景 #A29262 のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#7A6D48、4.57:1）を使う。

Typography

• 物語を伝える部分はすべて明朝で書き、ゴシックは購入情報とボタンだけに使う。
• 大見出しは縦書きの特大サイズにし、前に小さな句を縦に添える。
• 見出しの中で、重要な2〜3文字だけを一段大きくする。
• 暗い地の見出しには、金色の柔らかいぼかし（グロー）を付ける。
• 英字ラベルは字間を広くとった大文字のセリフ体にし、日本語の上に添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ゲーム画面のギャラリーだけ 2〜3 列の不揃いなグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• キャラクターのビジュアルは画面幅いっぱいに置き、本文はビジュアルの下部に重ねる。
• 見出しは中央か右寄りに縦書きで置き、左右非対称にする。
• 商品情報は区切り線で段に分け、左に項目名、右に値を置く。
• ナビカードは縦に4枚積み、カードの間は16px空ける。

Elevation & Depth

• 影はほとんど使わない。奥行きは写真の重なりと暗いグラデーションで出す。
• 動画やゲーム画面の枠は、金色の外側グローで浮かせる。
• 見出し文字に金の柔らかいぼかしを付ける。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形を基本にし、キャラクターの顔はひし形に切り抜いて並べる。立ち絵は背景なしの切り抜きで帯の上にはみ出させる。
• セクション境界: 墨のかすれた筆跡のような不規則な縁と、斜めの切り込みで帯を区切る。
• 枠は直角に近い形にし、四隅に金の角飾りや切り欠きを付ける。
• ボタンは角丸6px程度の長方形にする。
• 見出し帯の左右には、組紐風の金の幾何学文様を置く。

Components

• 金の予約ボタン（button-primary）: 左に買い物袋のアイコン、中央に2段の文字（大きい動詞と小さい店名）、右に丸い矢印を置く横長ボタン。
• 白枠のサブボタン（button-outline）: 暗い地の上に白い1px枠を付け、中央に文字、右端に丸い矢印アイコンを置く。
• 焦げ茶の案内ボタン（button-dark）: 焦げ茶の面に白文字と丸い矢印。3番目の優先度の導線に使う。
• ページ内ナビカード（nav-card）: 深緑の半透明パネルに切り欠き付きの金枠を付け、上に英字ラベル、下に日本語タイトルと二重矢印を置く。右側にはキャラクターの画像をフェードさせて重ねる。
• お知らせ枠（news-panel）: 深緑のパネルに装飾付きの見出しラベルを中央に置き、日付と1行の本文を並べる。右側には細いスクロールバーを付ける。
• 組紐装飾の帯見出し（heading-band）: 黒い帯の中央に明朝の見出しを置き、数字だけを大きくする。左右に金の幾何学文様、上下に金の細線を引く。
• 金枠の動画・画面サムネイル（framed-media）: 金の細枠と外側のグローを付けた画像。左上に小さな日付タブ、右下に英字ラベルと矢印を置く。
• ひし形の人物モザイク（diamond-gallery）: 大小のひし形に切り抜いた顔画像を重ねて横に並べ、端は画面外へはみ出させる。
• 縦書きの大見出し（vertical-heading）: 特大の明朝を縦書きで2列に組み、右の列に小さな前置きの句、横に金の細い縦線を添える。

Do's and Don'ts

Do - 明朝体と古金色を軸にして、重厚さを保つ。 - 暗い帯と明るい帯を交互に置き、境界は筆跡風にする。 - キャラクターやゲーム画面は大きく、帯をまたいで重ねる。 - 装飾線は1px前後の細い金線にし、角飾りを付ける。 - 購入情報は整った罫線のレイアウトで読みやすくする。

Don't - 鮮やかな原色やポップなグラデーションのボタンを使わない。 - ピル型ボタンや大きな角丸のカードを使わない。 - 物語の見出しに丸ゴシックや太いゴシックを使わない。 - 白一色の明るい背景をページの大部分に使わない。 - 強いドロップシャドウで浮かせない。

Page Structure

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

1. ファーストビュー（世界観とタイトル、発売日を一度に伝える）: 全面のキービジュアルに、中央下へタイトルロゴと明朝の発売日を重ね、右上に機種マークを置く。
2. 最新動画・お知らせ（最新の更新を知らせる）: 黒地に、金枠と日付タブ付きの動画サムネイル、その下に深緑のお知らせ枠を置く。
3. コンセプト提示（物語の二つの軸を対比させる）: ゲーム画面を背景に、2つの大見出しを細い×印でつないで縦に並べ、最後に一文を添える。
4. 主人公紹介（プレイヤーの立場を説明する）: 生成りの羊皮紙地に縦書きの大見出しを置き、その下に立ち絵と本文を続ける。下端は墨の筆跡で区切る。
5. 仲間キャラ紹介（主要キャラクター群の物語を示す）: 斜めに切り込んだ砂色の帯に縦書きの見出しを置き、群像の立ち絵、本文、場面写真のモザイクを続ける。
6. ゲームシステム導入（遊び方の概要を伝える）: 暗い背景に中央寄せの明朝見出しと本文を置き、金のグローを付けたゲーム画面を大きく見せる。
7. 特長2点（遊びの要点を2つ示す）: 組紐装飾の帯見出しのあと、全面の場面画像に縦書きの見出しと金枠、ひし形の再生ボタンを重ね、斜めの境界で2つを並べる。
8. キャラクター一覧（登場人物の多さを見せる）: 深緑の地紋に中央寄せの見出しと本文を置き、ひし形に切り抜いた顔をモザイク状に並べる。
9. ページ内ナビ（詳しいページへ誘導する）: 風景写真の上に、金枠付きのナビカードを4枚縦に並べる。
10. 商品情報・購入CTA（予約・購入へつなげる）: 深緑の地に金の上線が付いたパネルを置く。パッケージ画像、発売日、価格、金の予約ボタン、白枠ボタン、焦げ茶ボタンの順に並べる。
11. 関連バナー（同日発売の限定版や関連展開を紹介する）: 金枠付きの横長バナーを縦に並べ、右下に金の「詳しく見る」タブを付ける。

Imagery

• 厚塗りのアニメ調キャラクターイラストを、背景なしの切り抜きで大きく使う。
• ゲーム内の3D場面（闘技場、都市の俯瞰、戦場）は、暗めでセピアがかった色調にする。
• 背景には方位図・魔法陣・幾何学の地紋を、低いコントラストで敷く。
• 金の光の粒や舞う花びらで、神秘的な雰囲気を足す。
• 帯の境界は墨や絵具がかすれたような筆跡にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は横長のキービジュアルにし、お知らせと動画サムネイルを横に並べる。
• PC の対比見出しは、×印を挟んで左右に並べる。
• PC のキャラクター紹介では、立ち絵と縦書き見出し・本文を左右に振り分け、斜めの境界を強調する。
• PC の商品情報は、パッケージ画像を左、情報とボタンを右に置く2カラムにする。
• 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 行書くと起動時に読み込まれる。