---
version: alpha
name: Dark Fantasy Gold Mincho Game LP
description: 黒・深緑の暗い地と、生成り・砂色の明るい帯を交互に置く構成。金色の細い枠線と大きな明朝縦書き見出しで、重厚な戦記ファンタジーの世界観を出す。キービジュアルとゲーム画面を大きく見せ、最後は購入情報とバナーで締める。
colors:
  primary: '#A29261'
  on-primary: '#FAF1E5'
  cta: '#A29262'
  on-cta: '#FAF1E5'
  background: '#051D21'
  dark-section: '#000000'
  background-alt: '#FDF1E1'
  secondary: '#967D55'
  accent-1: '#524635'
  text: '#091C1B'
  on-dark: '#FAF1E5'
  line: '#8C7A52'
  surface: '#14252B'
  text-muted: '#B8A57A'
  cta-accessible: '#7A6D48'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Serif JP
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.9
    letterSpacing: 0.03em
  accent:
    fontFamily: Cinzel
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.25em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Shippori Mincho
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 6px
  lg: 10px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    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.md}'
    height: 62px
  button-outline:
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 34px
  button-dark:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 34px
  nav-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 96px
  news-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 120px
  heading-band:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 96px
  framed-media:
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 220px
  diamond-gallery:
    backgroundColor: '{colors.background}'
    height: 260px
  vertical-heading:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 320px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#A29261` | 古金（ボタン・枠線・装飾） | 4% | 画素の実測 |
| `on-primary` | `#FAF1E5` | 金ボタン上の文字 | 0% | 画素の主要色に補正 |
| `cta` | `#A29262` | 予約ボタンの面 | 0% | 画素の実測 |
| `on-cta` | `#FAF1E5` | 予約ボタン文字 | 0% | 画素の主要色に補正 |
| `background` | `#051D21` | ページの暗い基調地 | 30% | 画素の実測 |
| `dark-section` | `#000000` | 漆黒の帯（ゲームシステム等） | 20% | 画素の実測 |
| `background-alt` | `#FDF1E1` | 羊皮紙風の生成り帯 | 9% | 画素の実測 |
| `secondary` | `#967D55` | 砂色の帯（戦士紹介） | 8% | 画素の実測 |
| `accent-1` | `#524635` | 焦げ茶のサブボタン | 0% | 画素の実測 |
| `text` | `#091C1B` | 生成り地の見出し文字（深緑黒） | 1% | 画素の実測 |
| `on-dark` | `#FAF1E5` | 暗い地の見出し・本文（淡い生成り） | 2% | 画素の主要色に補正 |
| `line` | `#8C7A52` | 金の細枠線・区切り線 | 0% | 推定 |
| `surface` | `#14252B` | ニュース枠などの深緑パネル | 2% | 画素の実測 |
| `text-muted` | `#B8A57A` | 英字ラベル（金の淡色） | 0% | 推定 |
| `cta-accessible` | `#7A6D48` | AA を満たす補正値（計算） |  | 計算 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの大見出し（縦書きの特大文字） | 明朝 | Shippori Mincho | 800 | 64px | 1.1 | 0.02em |
| `headline-lg` | 見出しの前に添える小さな句（縦書き・横書き） | 明朝 | Shippori Mincho | 700 | 26px | 1.3 | 0.05em |
| `headline-md` | 帯見出し・中見出し | 明朝 | Shippori Mincho | 700 | 30px | 1.3 | 0.05em |
| `body-md` | あらすじ本文（中央寄せ・左寄せ） | 明朝 | Noto Serif JP | 600 | 13px | 1.9 | 0.03em |
| `accent` | 英字の小ラベル（OVERVIEW など） | 欧文セリフ | Cinzel | 500 | 9px | 1.4 | 0.25em |
| `label-button` | 購入ボタン・リンクボタン | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em |
| `note` | 価格・発売日などの商品情報 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.02em |
| `headline-sm` | ナビカードの日本語タイトル | 明朝 | Shippori Mincho | 700 | 17px | 1.4 | 0.05em |

- 物語を伝える部分はすべて明朝で書き、ゴシックは購入情報とボタンだけに使う。
- 大見出しは縦書きの特大サイズにし、前に小さな句を縦に添える。
- 見出しの中で、重要な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

```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-3b17463e`（元 LP の URL から採番）
- **元 LP**: https://www.nintendo.com/jp/games/switch2/aacsa/index.html
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 中（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。