---
version: alpha
name: Midnight Navy Cinematic Anime Film LP
description: ほぼ全面を深い紺色で塗り、鮮やかな青の巨大な欧文セリフ見出しと、反転させた鏡像で幻想的な夜を表現する映画告知LP。本文は白の明朝体を中央に揃え、場面写真には青い光彩をまとわせる。細い円弧の線と小さな菱形で、魔法らしい静けさを出している。
colors:
  background: '#12122E'
  primary: '#184FD5'
  text: '#FBFBFD'
  text-body: '#BEBFD0'
  text-muted: '#9799AC'
  line: '#172D6A'
  accent-1: '#2E9BE0'
  accent-2: '#3379FC'
  surface: '#EDF1F2'
  background-alt: '#B3DCE6'
  marker: '#3473FE'
  background-accessible: '#D1D1ED'
typography:
  display:
    fontFamily: Playfair Display
    fontSize: 110px
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.3
  accent:
    fontFamily: Noto Serif JP
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.4em
  body-lg:
    fontFamily: Noto Serif JP
    fontSize: 15px
    fontWeight: 600
    lineHeight: 2.0
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.02em
  note:
    fontFamily: Montserrat
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  label-button:
    fontFamily: Playfair Display
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 0px
  section: 100px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-title-mirror:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 180px
  news-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 95px
  link-view-more:
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 30px
  glow-image:
    height: 140px
  credit-grid:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 130px
  badge-ornament:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.background}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 36px
  video-banner:
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    height: 230px
  footer-links:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 80px
---

# DESIGN.md — 深夜紺×青発光の劇場アニメ告知LP（Midnight Navy Cinematic Anime Film LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、クール・先進的、シンプル・ミニマル
- **キーワード**: 深夜の紺・青い発光・鏡像タイポグラフィ・明朝体の物語性・細線の円弧・シネマティック
- **地の質感**: ほぼ単色の紺色の面。写真の周りにだけ青いグローをかけ、ほかに質感は付けない
- **形**: 角のない矩形の写真と、画面をまたぐ大きな細線の円・縦線。小さな菱形を区切りに使う
- **温度感**: 寒色で、夜の静けさと緊張感がある

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#12122E` | ページ全体の地色（深夜の紺） | 75% | 画素の実測 |
| `primary` | `#184FD5` | 巨大な欧文見出し・強調語の青 | 4% | 画素の実測 |
| `text` | `#FBFBFD` | 見出し・本文・人名の白 | 3% | 画素の実測 |
| `text-body` | `#BEBFD0` | 物語本文のやや灰がかった白 | 2% | 画素の実測 |
| `text-muted` | `#9799AC` | 日付・英訳の補足文字 | 0% | 画素の実測 |
| `line` | `#172D6A` | ニュース区切り線・円弧の細線 | 0% | 画素の主要色に補正 |
| `accent-1` | `#2E9BE0` | 見出し下のカタカナ副題（シアン寄りの青） | 0% | 推定 |
| `accent-2` | `#3379FC` | 写真の外周の青いグロー・バッジの面 | 1% | 画素の実測 |
| `surface` | `#EDF1F2` | ロゴ画像を置く明るい面 | 2% | 画素の実測 |
| `background-alt` | `#B3DCE6` | メインビジュアル上部の空の色（淡いミントグレー） | 8% | 画素の実測 |
| `marker` | `#3473FE` | 区切りの小さな菱形 | 0% | 画素の実測 |
| `background-accessible` | `#D1D1ED` | AA を満たす補正値（計算） |  | 計算 |

- ファーストビューより下は、すべて紺の単色を地色にする
- 青は巨大な見出しと、本文中の強調語 1 か所だけに使う
- 文字は基本的に白。日付と英訳だけをグレーに落とす
- 写真の外周には青いグロー（box-shadow）をかけ、夜に光っているように見せる
- 明るい面は、ロゴ画像を置く板だけに限定する
- 暖色は写真の中だけにとどめ、UI には使わない
- `section-title-mirror` は文字 `#184FD5` × 背景 `#12122E` のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#D1D1ED`、4.51:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクション名の巨大な欧文。画面からはみ出させ、下に鏡像を置く | 欧文セリフ | Playfair Display | 700 | 110px | 0.9 | -0.02em |
| `headline-lg` | イントロのキャッチ（強調語だけ青で大きくする） | 明朝 | Shippori Mincho | 800 | 30px | 1.4 | 0.02em |
| `headline-md` | スタッフ・キャストの人名 | 明朝 | Shippori Mincho | 700 | 22px | 1.3 | 0em |
| `accent` | 欧文見出しに重ねるカタカナの副題 | 明朝 | Noto Serif JP | 400 | 16px | 1.2 | 0.4em |
| `body-lg` | 物語の導入文（中央または右揃え） | 明朝 | Noto Serif JP | 600 | 15px | 2 | 0.05em |
| `body-md` | ニュースのタイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em |
| `note` | 日付・英訳・役職ラベル・著作権表記 | 欧文サンセリフ | Montserrat | 400 | 10px | 1.7 | 0.02em |
| `label-button` | View More のテキストリンク | 欧文セリフ | Playfair Display | 400 | 13px | 1.2 | 0.08em |

- 物語や人名は明朝体にする。ゴシック体はニュースとフッターだけに使う
- セクション見出しは、巨大な欧文セリフにカタカナ副題を重ねる組み合わせに統一する
- 巨大な欧文は画面幅を超えて左右を切り、下に半透明の上下反転コピーを置く
- キャッチは強調語だけを 1.5 倍の大きさと青で目立たせる
- 物語文の下には、小さなグレーの英訳を添える
- 役職は小さな太字、人名は大きな明朝の 2 段で組む
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。スタッフとキャストは 2 カラムのグリッド
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 100px、基本単位 8px、カード内 0px（375px 幅換算）
- ニュースは左右に余白を広めにとり、細い線で区切ったリストにする
- イントロ本文は中央揃えにし、行間を広くとる
- 場面写真は幅を変えながら縦に並べ、左右にずらして配置する
- スタッフ欄は、2 列の各項目の下に菱形を置いて区切る
- セクション見出しの前後は 80〜120px 空ける

## Elevation & Depth

- 影は使わず、写真の外周に青いグロー（0 0 20px rgba(46,107,255,.6)）をかける
- ロゴの板にも同じ青いグローをかける
- 巨大な見出しの鏡像は、不透明度 40% 程度とぼかしで奥に沈める

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの 16:9 または横長の矩形。外周に青く発光させる
- **セクション境界**: 境界線は引かない。巨大な欧文見出しと余白で区切る
- 画面をまたぐ大きな円弧と縦の細線（端に小さな点）を背景の装飾にする
- 区切りには 6px ほどの菱形を使う
- バッジは装飾的な額縁形（角を内側に切り欠いた形）にする
- 矢印は細線の先に点と小さな矢じりを付ける

## Components

- **鏡像付きの巨大欧文見出し**（`section-title-mirror`）: 画面幅を超える青い欧文セリフ。中央にカタカナ副題を重ね、下に反転してぼかしたコピーを置く
- **ニュースリスト**（`news-list`）: グレーの日付と白い太字タイトル（2 行で省略）を並べ、間を細い紺の線で区切る
- **View More リンク**（`link-view-more`）: 白のセリフ体の文字の右に、点と矢じりの付いた青い細線の矢印を添える
- **発光する場面写真**（`glow-image`）: 角丸なしの横長写真。外周を青く発光させ、サイズ違いで左右にずらして並べる
- **スタッフクレジット**（`credit-grid`）: 2 列のグリッド。小さな役職名と大きな明朝の人名を重ね、下に青い菱形を置く
- **額縁形のバッジ**（`badge-ornament`）: 青い面に紺の太字を入れた、装飾的な額縁形のラベル
- **予告動画バナー**（`video-banner`）: 場面写真の上に白い細線の丸い再生ボタンと、明朝の白いタイトルを重ねる
- **フッターリンク**（`footer-links`）: 縦線で区切った白の太字ゴシックのリンクと、小さな著作権表記

## Do's and Don'ts

**Do**
- 地色は紺一色に保ち、青は見出しと強調語に絞る
- セクション見出しは、毎回同じ鏡像付きの巨大欧文で統一する
- 写真には青いグローをかけ、夜に浮かぶ光のように見せる
- 物語文は明朝体にし、行間を 2.0 前後とって静かに組む
- 細線の円弧や縦線で、ゆったりした奥行きを出す

**Don't**
- 暖色や彩度の高いボタンで、販促っぽく見せない
- 角丸やドロップシャドウのカードを使わない
- 本文を丸ゴシックやポップな書体にしない
- 白や明るい背景のセクションを挟まない
- 装飾を詰め込みすぎて余白をなくさない

## Page Structure

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

1. **ファーストビュー**（作品の世界観と公開日を一目で伝える）: 全面にキービジュアルを置き、縦書きの明朝コピー、題字ロゴ、公開日を重ねる。左上に SNS アイコン、左端にキャラクターのサムネイルを縦に並べる
2. **予告動画**（動画の再生へ誘導する）: 場面写真の上に、白い細線の丸い再生ボタンと動画タイトルを置く
3. **ニュース**（最新情報を一覧で見せる）: 鏡像付きの見出しの下に、日付とタイトルを細線で区切ったリストを 5 件並べ、最後に View More を置く
4. **イントロダクション**（作品の背景と期待感を伝える）: 強調語だけ青い明朝のキャッチを置き、続いて中央揃えの長い明朝本文を組む
5. **ストーリー**（物語の導入を見せる）: 発光する場面写真を、大きさを変えながら左右にずらして並べ、その間に右揃えの明朝文と英訳を挟む。背景には大きな円弧と縦線を引く
6. **スタッフ・キャスト**（制作陣と出演者を示す）: 青い欧文の小見出しの下に、2 列のクレジットを菱形で区切って並べる
7. **音楽**（主題歌を紹介する）: 細い円の中に、額縁形のバッジ、発光するロゴの板、曲名、View More を中央に並べる
8. **関連バナー・シェア・フッター**（関連作品への導線とシェアを置く）: 横長のバナー、SNS アイコン、縦線で区切ったリンク、著作権表記を中央に並べる

## Imagery

- 夜や薄暗い室内の場面写真を使う。青白い魔法光が差すカットが中心
- 写真は横長に切り抜き、外周に青いネオンのようなグローをかける
- ファーストビューだけは、昼の森と洋館のような色の多いイラストで対比を作る
- 装飾は画面をまたぐ細線の円・縦線と、小さな菱形だけにする
- ロゴは明るい板の上に置き、青い光彩で囲む
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC のファーストビューは、2 枚のキービジュアルを左右に並べた横長の構成にする
- PC のニュースは、日付・タイトル・矢印を 1 行に収めた横長のリストにする
- PC のストーリーは、写真を 2 列にずらして配置し、文章を写真の脇に置く
- 巨大欧文の見出しは 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-77f47e71`（元 LP の URL から採番）
- **元 LP**: https://mahoyo-movie.com/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/11 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-22、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

:root {
  --color-background: #12122e;
  --color-primary: #184fd5;
  --color-text: #fbfbfd;
  --color-text-body: #bebfd0;
  --color-text-muted: #9799ac;
  --color-line: #172d6a;
  --color-accent-1: #2e9be0;
  --color-accent-2: #3379fc;
  --color-surface: #edf1f2;
  --color-background-alt: #b3dce6;
  --color-marker: #3473fe;
  --color-background-accessible: #d1d1ed;
  --spacing-unit: 8px;
  --spacing-card: 0px;
  --spacing-section: 100px;
  --rounded-sm: 0px;
  --rounded-md: 0px;
  --rounded-lg: 0px;
  --rounded-full: 999px;
}

W3C のデザイントークンの形式（Design Tokens Format Module 2025.10）の JSON です。Figma のプラグインや Style Dictionary などで読み込めます。