---
version: alpha
name: Gothic Gold Ornate Anime Film LP
description: 生成りグレーの地に、くすんだ金の細い欧文セリフ・明朝体・装飾罫を合わせたアニメ映画の公式サイト型。導入部だけ赤褐色から灰色へのグラデーション地に白い明朝体を中央揃えで置き、物語は絵画風の背景にアーチ型の額縁カードで見せる。スタッフ・キャストは金の役職名と黒の明朝体の名前を 2 カラムで並べ、静かで格調ある見せ方にしている。
colors:
  background: '#EEEFEA'
  primary: '#927B2B'
  secondary: '#927519'
  text: '#282925'
  text-body: '#332B25'
  text-muted: '#B09A6A'
  dark-section: '#4C2B19'
  on-dark: '#D7D4CF'
  surface: '#EEEFEA'
  line: '#DED7C4'
  accent-1: '#F6DCE0'
  accent-2: '#180F0D'
  secondary-accessible: '#6F5913'
  primary-accessible: '#7E6A25'
typography:
  display:
    fontFamily: Cinzel Decorative
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 21px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Shippori Mincho
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Shippori Mincho
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.04em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 9px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.03em
  note:
    fontFamily: Cormorant Garamond
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.05em
  accent:
    fontFamily: Cormorant Garamond
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.03em
rounded:
  sm: 0px
  md: 4px
  lg: 200px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 100px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  film-strip-slider:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 200px
  visual-band-link:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 60px
  news-item:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 80px
  arch-frame-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 1400px
  ribbon-heading:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.surface}'
    typography: '{typography.headline-lg}'
    height: 70px
  marquee-heading:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 110px
  credit-pair:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 70px
  circle-icon:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    rounded: '{rounded.full}'
    height: 44px
  ticket-badge:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 56px
---

# DESIGN.md — 生成り地×金装飾のダーク幻想アニメ映画 LP（Gothic Gold Ornate Anime Film LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、レトロ
- **キーワード**: 金の装飾罫・生成り地・明朝体・細い欧文セリフ・フィルム枠・アーチ額縁
- **地の質感**: マットな生成り地に、油彩風の背景とセピアのグラデーションを重ねる。紙と絵画のような質感。
- **形**: 直線の細い金罫、アーチ型の額縁、リボン形の見出し帯、フィルムの穴の帯、円形のアイコン枠。
- **温度感**: 落ち着いた暖色寄り。生成り地と金・赤褐色で、静かで重い印象。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#EEEFEA` | ページの地色（生成りグレー） | 50% | 画素の実測 |
| `primary` | `#927B2B` | 金（見出し欧文・役職名・装飾） | 3% | 画素の実測 |
| `secondary` | `#927519` | 金リボン・額縁の濃い金 | 2% | 画素の実測 |
| `text` | `#282925` | 名前・見出しの黒文字 | 2% | 画素の実測 |
| `text-body` | `#332B25` | ニュース・物語本文 | 2% | 画素の主要色に補正 |
| `text-muted` | `#B09A6A` | 日付・注記の淡い金茶 | 0% | 推定 |
| `dark-section` | `#4C2B19` | 導入部のグラデーション地（赤褐色） | 10% | 画素の実測 |
| `on-dark` | `#D7D4CF` | 暗い地の上の白文字 | 2% | 画素の実測 |
| `surface` | `#EEEFEA` | 物語の額縁カードの面 | 6% | 画素の実測 |
| `line` | `#DED7C4` | ニュースの区切り線 | 0% | 画素の主要色に補正 |
| `accent-1` | `#F6DCE0` | バナーの淡いピンク | 0% | 推定 |
| `accent-2` | `#180F0D` | フィルム帯の黒 | 2% | 画素の主要色に補正 |
| `secondary-accessible` | `#6F5913` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#7E6A25` | AA を満たす補正値（計算） |  | 計算 |

- 地は生成りグレーで統一する。暗い地は導入部だけにする。
- 見出しの欧文・役職名・罫線・アイコン枠はすべて同じくすんだ金にする。
- 本文中の強調語は太字の金にする。赤など他の強調色は使わない。
- 暗い地は赤褐色から灰色への縦グラデーションにし、文字は白にする。
- ピンクは外部リンクのバナーだけに使い、ほかには広げない。
- 黒は名前と、フィルム枠などの映像まわりの枠に限る。
- `visual-band-link` は文字 `#D7D4CF` × 背景 `#927519` のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#6F5913`、4.56:1）を使う。
- `ribbon-heading` は文字 `#EEEFEA` × 背景 `#927519` のコントラスト比が 3.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#6F5913`、4.55:1）を使う。
- `circle-icon` は文字 `#927B2B` × 背景 `#EEEFEA` のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#7E6A25`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの欧文見出し（横にループして並ぶ） | 欧文セリフ | Cinzel Decorative | 400 | 80px | 1.0 | 0.02em |
| `headline-lg` | 導入部の締めのリード | 明朝 | Shippori Mincho | 500 | 22px | 1.7 | 0.08em |
| `headline-md` | スタッフ・キャストの名前 | 明朝 | Shippori Mincho | 500 | 21px | 1.4 | 0.04em |
| `headline-sm` | 役職名・役名（金） | 明朝 | Shippori Mincho | 500 | 12px | 1.4 | 0.05em |
| `body-lg` | 導入部の本文（中央揃え） | 明朝 | Shippori Mincho | 500 | 14px | 1.9 | 0.04em |
| `body-md` | ニュース・物語の本文 | ゴシック | Zen Kaku Gothic New | 400 | 9px | 2.0 | 0.03em |
| `note` | 日付・コピーライト・フッターのリンク | 欧文セリフ | Cormorant Garamond | 400 | 8px | 1.5 | 0.05em |
| `accent` | 画像上のラベル（ZOOM+ など） | 欧文セリフ | Cormorant Garamond | 500 | 12px | 1.2 | 0.03em |

- 和文はすべて明朝体を基本にする。小さい本文だけゴシックでもよい。
- 欧文見出しは細くて長い装飾セリフを特大で置き、左右を画面の外まではみ出させてループ状に並べる。
- 見出し語の間に金の★を挟む。
- 導入部の本文は中央揃えにし、段落の間を広く空ける。
- 役職名は小さい金、名前は大きい黒にして、上下 2 段の対比を作る。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。スタッフ・キャストは 2 カラムのグリッド。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
- キービジュアルは全幅で置き、下端を地色へフェードさせてからロゴと日付を続ける。
- 動画はフィルム帯で全幅の横スライダーにする。
- ビジュアルのリンクは全幅の細い帯にし、上下を金罫と中央の飾りで挟む。
- ニュースは日付と見出しを左揃えにし、細い線で区切る。
- セクションの間はたっぷり空けて余白で間を作る。

## Elevation & Depth

- 影はほぼ使わず、平面的に作る。
- 奥行きは写真・絵画の背景とグラデーションで出す。
- 額縁カードは影を付けず、金の二重線で浮かせる。

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 200px。ボタンは角丸の長方形。
- **写真の切り抜き**: 全幅の矩形。物語セクションは上部がアーチ型の額縁で切り抜く。
- **セクション境界**: 直線で切り替える。キービジュアルの下だけフェード。フッターの前に両端が星形の金の細罫を入れる。
- ボタンを角丸にしない。
- SNS アイコンとページトップは金線の円形にする。
- 見出し帯はリボン形にする。
- ページトップは円に沿って文字を回した円形にする。

## Components

- **フィルム帯の動画スライダー**（`film-strip-slider`）: 上下に黒いフィルムの穴の帯を付けた全幅のスライダー。中央に細い欧文で再生の文字、左右に矢印を置く。
- **金罫の帯リンク**（`visual-band-link`）: 上下を金の二重罫で挟んだ横長の画像帯。左にラベル、右に拡大の表記。中央の上下に唐草の飾りを付ける。
- **ニュース行**（`news-item`）: 小さい金の日付の下に本文を置き、細い線で区切る。
- **アーチ額縁カード**（`arch-frame-card`）: 上部がアーチになった生成りのカード。金の二重線で縁取り、上部に放射状の線とリボンの見出しを付ける。
- **リボン見出し**（`ribbon-heading`）: 金のリボン帯の中に生成り色の欧文見出しを入れる。
- **ループ欧文見出し**（`marquee-heading`）: 特大の金の細いセリフ体を★区切りで横に繰り返し、画面からはみ出させる。
- **役職と名前のセット**（`credit-pair`）: 金の小さい役職名の下に黒い明朝体の名前を置き、中央揃えで 2 カラムに並べる。
- **円形の金線アイコン**（`circle-icon`）: SNS 用の円形ボタン。金の二重線に金のロゴを入れる。
- **チケットの丸バッジ**（`ticket-badge`）: キービジュアルの右下に重ねる黒い円形バッジ。金の線と文字で入れる。

## Do's and Don'ts

**Do**
- 金は 1 色に絞り、線・文字・装飾すべてで統一する。
- 装飾は細い線と小さな唐草・星にとどめて、品よく見せる。
- 和文は明朝体にして、字間をやや広げる。
- 暗い導入部は 1 か所だけにして、生成りの地との対比を作る。
- セクションの間は大きく空ける。

**Don't**
- 鮮やかな原色のボタンや、太いゴシックの訴求文字は使わない。
- ドロップシャドウやグラデーションのボタンは使わない。
- 角丸のカードやポップなアイコンを使わない。
- 純白の地にしない。
- 金の装飾を太くしすぎない。

## Page Structure

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

1. **ファーストビュー**（作品の世界観と公開日を伝える）: 全幅の絵画風キービジュアルの下端を生成りへフェードさせ、金と黒のロゴ・副題・公開日を中央に置く。
2. **作品紹介バナー**（シリーズ紹介ページへ誘導する）: 淡いピンクの横長バナーにキャラクター画像と矢印を入れる。
3. **動画**（予告映像を見せる）: フィルム帯の横スライダー。
4. **ビジュアル一覧**（公開中のビジュアルへのリンク）: 金罫の帯リンクを縦に並べる。
5. **リードコピー**（制作陣と位置づけを一言で伝える）: 中央揃えの明朝体 2 行を、上下の大きな余白の中に置く。
6. **お知らせ**（最新情報を伝える）: 日付と見出しのリストを細い線で区切る。
7. **導入**（作品の歴史と新作の意義を語る）: 赤褐色から灰色へのグラデーション地。背景に巨大な欧文を薄く透かし、白い明朝体を中央揃えで置く。最後は大きいリードで締める。
8. **あらすじ**（物語を紹介する）: 絵画風の背景の上にアーチ額縁カードを置き、リボン見出しを付ける。キーワードは金の太字にする。
9. **スタッフ**（制作陣を一覧で見せる）: ループ欧文見出しの下に、役職と名前のセットを 2 カラムで並べる。
10. **キャスト**（声優を一覧で見せる）: スタッフと同じ型で並べる。
11. **フッター**（SNS・関連サイト・権利表記）: 金の星罫の下に円形の SNS アイコン、関連ロゴ、小さいリンクと権利表記、円形のページトップを並べる。

## Imagery

- キービジュアルは油彩風で、暖色の雲と暗い岩肌を背景にキャラクターが舞う構図にする。
- あらすじの背景は暗い絵画テクスチャを全面に敷く。
- 装飾は金の唐草・星・放射線など、アンティークの書籍風にする。
- 動画のサムネイルは暗めのアニメ場面に細い白の欧文を重ねる。
- 導入部の背景には巨大な欧文を低いコントラストで敷く。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は本文幅を約 70% の中央寄せにする。帯リンクも幅を絞る。
- PC のフィルム帯は複数の動画を横に並べて見せる。
- PC のスタッフ・キャストは 3 カラムにする。
- PC の額縁カードは幅 50% ほどで中央に置き、左右は背景の絵画を見せる。
- PC では導入部の本文行を長くし、改行を減らす。
- 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-404656d5`（元 LP の URL から採番）
- **元 LP**: https://www.madoka-magica.com/wr/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。