---
version: alpha
name: Bold Blue Red Quiz Thriller Film LP
description: 濃い青と鮮やかな赤の2色を軸にした、劇場映画の公式サイト型LP。白地に薄い文字柄テクスチャ、青の全幅帯、暗いステージ写真の帯を交互に重ねる。欧文セリフの大文字見出しと赤い小さな和文サブ見出しを組み合わせる。角丸なしの四角い構成で、緊張感のある知的な雰囲気を出す。
colors:
  primary: '#024697'
  background: '#FFFFFF'
  surface: '#FEFEFD'
  cta: '#DA0A17'
  on-cta: '#FFFFFF'
  secondary: '#82182E'
  dark-section: '#010101'
  on-dark: '#F4F4F4'
  text: '#282828'
  accent-1: '#C9111B'
  accent-2: '#D4BC1E'
  accent-3: '#14998A'
  tint-1: '#80A1CA'
  line: '#1E8FE0'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.35
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Playfair Display
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.45
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.6
    letterSpacing: 0.05em
  accent:
    fontFamily: Noto Serif JP
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 2.0
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Serif JP
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.1em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 70px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-title:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 50px
  news-item:
    backgroundColor: '{colors.primary}'
    typography: '{typography.body-md}'
    height: 62px
  video-tab:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    height: 27px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 42px
  role-badge:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 30px
  comment-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 280px
  cast-chart:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 1400px
  banner-tile:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 100px
---

# DESIGN.md — 青×赤のクイズ・ミステリー映画 LP（Bold Blue Red Quiz Thriller Film LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、クール・先進的、情報量多め・訴求型
- **キーワード**: 青と赤の2色・クイズ番組風・ミステリー・四角いグリッド・ネオンの発光文字・相関図
- **地の質感**: 白地には薄いグレーの文字柄を大きく敷く。物語セクションは暗いステージ写真にネオンの発光文字を重ねる。
- **形**: 角丸なしの長方形が基本。正円を並べた役職ラベルや、大きなリング状の記号がアクセントになる。
- **温度感**: 冷たい青を主にして、赤で熱を差す。全体にシリアスで緊張感がある。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#024697` | ブランドの濃い青。全幅セクションの地とニュース帯に使う | 32% | 画素の実測 |
| `background` | `#FFFFFF` | ページの地。白から薄いグレーで、文字柄が透ける | 24% | 画素の実測 |
| `surface` | `#FEFEFD` | コメントカードと動画タブの白い面 | 8% | 画素の実測 |
| `cta` | `#DA0A17` | 外部サイト誘導ボタンと丸いラベルの赤 | 4% | 画素の実測 |
| `on-cta` | `#FFFFFF` | 赤ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `secondary` | `#82182E` | 相関図の中央エリアに使うえんじ色 | 6% | 画素の実測 |
| `dark-section` | `#010101` | 物語セクションの黒紺の地 | 12% | 画素の実測 |
| `on-dark` | `#F4F4F4` | 暗い地や青い地に置く白文字 | 1% | 画素の実測 |
| `text` | `#282828` | 見出しと本文の黒文字 | 2% | 画素の実測 |
| `accent-1` | `#C9111B` | 英字見出しの下に置く和文サブ見出しの赤文字 | 0% | 画素の主要色に補正 |
| `accent-2` | `#D4BC1E` | 相関図の枠線と矢印に使う黄色 | 0% | 画素の実測 |
| `accent-3` | `#14998A` | 相関図の双方向矢印に使う青緑 | 0% | 推定 |
| `tint-1` | `#80A1CA` | 動画タブで選択中の薄い青 | 0% | 画素の実測 |
| `line` | `#1E8FE0` | 相関図で使う水色の枠線 | 0% | 推定 |

- 地は「白テクスチャ → 青の全幅帯 → 暗い写真帯 → 青」の順に切り替え、単調にしない
- 使う色は青と赤の2色だけに絞る。赤は面積を小さくして、ボタン・丸ラベル・サブ見出しで差し色にする
- 青の地には白いカードや白いタブを置き、文字は青か黒にする
- 暗いセクションでは、キーになる問いを赤のネオン、結びの文を白と青のネオンで発光させる
- 黄・青緑・水色は相関図の線と矢印だけに使う
- ニュースの各項目は青の地に白文字にし、日付には白い下線を引く

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | キービジュアル上の問いかけコピー | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.35 | 0.08em |
| `headline-lg` | セクション名の欧文大文字見出し | 欧文セリフ | Playfair Display | 700 | 22px | 1.2 | 0.08em |
| `headline-md` | 作品紹介のリードコピー | ゴシック | Noto Sans JP | 900 | 22px | 1.45 | 0.04em |
| `headline-sm` | 物語セクションの発光するキーフレーズ | ゴシック | Noto Sans JP | 900 | 20px | 1.6 | 0.05em |
| `accent` | 欧文見出しの下に添える赤い和文サブ見出し | 明朝 | Noto Serif JP | 700 | 10px | 1.3 | 0.1em |
| `body-md` | 作品紹介とコメントの本文 | ゴシック | Noto Sans JP | 700 | 12px | 2 | 0.03em |
| `note` | スタッフクレジットと人物名の補足 | ゴシック | Noto Sans JP | 700 | 8px | 1.6 | 0.02em |
| `label-button` | 動画タブとリンクボタンの文字 | 明朝 | Noto Serif JP | 700 | 11px | 1.3 | 0.1em |

- セクション見出しは欧文セリフの大文字にし、その下に赤い小さな和文を中央揃えで添える
- 和文のコピーは極太ゴシックで、句読点のあとで改行して中央揃えにする
- 本文は太めのゴシックを左揃えにし、行間を2.0前後と広く取る
- 暗い地では文字に色付きの発光（text-shadow）をつける
- ボタンとタブの文字は明朝体にして、映画らしい品を出す
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。動画タブは 2 列、相関図は自由配置
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算）
- セクションは画面幅いっぱいの色帯で区切る
- 本文ブロックは左右に約4%の余白を取る
- セクションの間には出演者写真の横帯を挟んでつなぐ
- 動画タブは青い地の上に白いセルを2列で並べ、長い項目は2列分の幅にする
- 相関図は四角い枠と矢印で人物写真をつなぎ、階層を表す

## Elevation & Depth

- 影はほぼ使わず、色の面のコントラストで階層を出す
- 暗いセクションの文字だけに発光の影をつける
- バナー画像には薄い枠線や細い影をつけてもよい

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 人物は縦長の長方形で角丸なし。キービジュアルは顔を大きくトリミングする。
- **セクション境界**: 直線で色帯を切り替える。境界に人物写真の横帯を挟む
- ボタン・カード・タブはすべて角丸なしにする
- 役職ラベルは正円を1文字ずつ横に並べ、赤と青を交互にする
- 最後のボタンは赤いリング記号と長方形を重ねた形にする
- 人物写真の右下に、青丸に白い＋のアイコンを置く

## Components

- **欧文セクション見出し**（`section-title`）: 欧文セリフの大文字の下に赤い和文を小さく添え、中央に置く
- **ニュース帯**（`news-item`）: 青い長方形の中に、白い下線つきの日付と見出しを2段で置く
- **動画切替タブ**（`video-tab`）: 白いセルを青い地の上に2列で並べる。選択中のセルは薄い青にする
- **赤い外部リンクボタン**（`button-primary`）: 全幅の赤い長方形に白い明朝の文字を置き、背後に赤いリング記号を重ねる
- **丸文字の役職ラベル**（`role-badge`）: 正円の中に1文字ずつ入れて横に並べ、赤と青の帯の上に置く
- **コメントカード**（`comment-card`）: 青い地の上に置く白い長方形。本文は左揃え
- **人物相関図**（`cast-chart`）: えんじ色のエリアと黄・水色の枠でグループを分け、縦書きの肩書きと矢印で人物どうしをつなぐ
- **告知バナー**（`banner-tile`）: 青と赤のパターン柄に白い帯を重ねたバナーを中央に縦に並べる

## Do's and Don'ts

**Do**
- 青と赤の2色を明確に使い分ける
- セクション見出しは欧文と和文の2段構成で統一する
- 角を立てて、四角いグリッドで情報を整理する
- 暗いセクションのキーフレーズはネオン風に発光させる
- 白い地には薄い文字柄テクスチャを敷き、平板に見せない

**Don't**
- 角丸やピル型のボタンを使わない
- パステル色やグラデーションの装飾を足さない
- 赤を広い面に使いすぎない（キービジュアルは除く）
- 柔らかい丸ゴシックや手書き文字を使わない
- 影を多用して立体的に見せない

## Page Structure

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

1. **ヘッダー**（SNSへの導線とメニュー）: 左に四角いSNSアイコンを3つ、右に青いハンバーガーメニューを置く
2. **ファーストビュー**（作品の謎を問いかけて惹きつける）: 赤と青に塗り分けた背景に顔のアップを置く。上部に白い極太の問いかけ、縦書きの赤い異名、下部に白いタイトルロゴと公開状況を置く
3. **クレジットと告知バナー**（出演者・スタッフの表記と関連告知）: 白い地に中央揃えのクレジットを段階的に小さくして並べ、その下にバナーを縦に積む
4. **ニュース**（最新情報を伝える）: 青い帯を3つ積み、最後に一覧への文字リンクを置く
5. **予告編**（動画で興味を高める）: 青い全幅帯の中に動画埋め込みを置き、その下に白いタブのグリッドを並べる
6. **作品紹介**（作品の魅力と背景を説明する）: 白いテクスチャの地に、極太のリードを中央揃えで置き、そのあと左揃えの本文を3段落続ける
7. **あらすじ**（物語の緊張感を伝える）: 暗いステージ写真の上に中央揃えの白文字を置き、赤と青のネオン文字で山場を見せる
8. **キャスト相関図**（登場人物の関係を見せる）: 青い地にえんじ色のエリアと色付きの枠線・矢印を重ね、人物写真カードを配置する
9. **コメント**（作り手のメッセージを載せる）: 丸文字の役職ラベルと白いカードを1組にして、縦に並べる
10. **外部リンクとフッター**（関連サイトへの誘導とシェア）: 赤いリングとボタンを置き、白い地にシェアリンク・規約・著作権表記を青文字で並べる

## Imagery

- 人物写真は無表情で真剣な顔を、寄りで撮る
- キービジュアルは顔の半分を大きく切り取り、赤と青の背景に乗せる
- 物語のセクションは、青く光るステージ照明の暗い写真を使う
- シーンの写真を横長の帯にして、セクションの間に挟む
- 白い地には漢字や記号の大きなアウトライン柄を薄く敷く
- クイズ番組を思わせるリングやQの文字を記号的に使う
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はキービジュアルを横に広げ、3人の顔を並べた構図にする
- PC はニュースを1行の横帯にして、日付と見出しを横に並べる
- PC は動画タブを3列にする
- PC は相関図を横長に広げ、人物を左右に配置する
- PC でも本文の幅は中央の約80%に収める

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