---
version: alpha
name: Noir Cinema Promo LP with Red Accent
description: 映画公式サイト型の LP。ほぼ黒の地に全面写真と白いカードを交互に置く。赤は題字・役職ラベル・購入ボタンだけに使う。英字の太いゴシック見出しと、明朝の人名で硬派で映画らしい雰囲気を作る。
colors:
  background: '#161616'
  surface: '#FFFFFF'
  primary: '#D7141E'
  cta: '#E70012'
  on-cta: '#FEF3F4'
  on-dark: '#FAFDFC'
  text-body: '#161616'
  line: '#F8FAF6'
  background-alt: '#F4F4F4'
  text-muted: '#EAEAEA'
  accent-1: '#94CA11'
  accent-2: '#F07800'
  cta-accessible: '#E20012'
  accent-2-accessible: '#A65300'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Roboto Condensed
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Shippori Mincho
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.04em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 10px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.06em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Roboto Condensed
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em
  accent:
    fontFamily: Noto Serif JP
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
rounded:
  sm: 0px
  md: 6px
  lg: 28px
  full: 999px
spacing:
  unit: 8px
  card: 30px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  hero-key-visual:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 580px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 38px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 48px
  button-pill-video:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 44px
  section-title-en:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-lg}'
    height: 30px
  comment-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 340px
  event-banner:
    backgroundColor: '{colors.text-muted}'
    textColor: '{colors.accent-2}'
    typography: '{typography.headline-md}'
    height: 100px
  boxed-campaign:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 1100px
  video-slider:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 300px
---

# DESIGN.md — 黒地×白カード×赤差し色の邦画公式 LP（Noir Cinema Promo LP with Red Accent）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
- **キーワード**: 映画公式サイト・ノワール・黒地・白カード・赤の差し色・全面写真
- **地の質感**: フラットな黒地。かすれた題字、スモークのグレー地、粗い質感のバナーで映画のざらつきを出す
- **形**: 角の立った四角が基本。白い細線の枠ボタンと直角の白カード。ピル型は動画ボタンだけ
- **温度感**: 冷たく硬い。写真の暖色の夜景と赤い差し色で熱を足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#161616` | ページの地（黒） | 45% | 画素の実測 |
| `surface` | `#FFFFFF` | 解説・コメントの白カード | 25% | 画素の実測 |
| `primary` | `#D7141E` | 題字の漢字・役職ラベルの赤 | 1% | 推定 |
| `cta` | `#E70012` | 購入・動画ボタンの赤 | 2% | 画素の実測 |
| `on-cta` | `#FEF3F4` | 赤ボタン上の白文字 | 0% | 画素の実測 |
| `on-dark` | `#FAFDFC` | 黒地の上の英字見出し・白文字 | 1% | 画素の実測 |
| `text-body` | `#161616` | 白カード内の本文 | 3% | 画素の主要色に補正 |
| `line` | `#F8FAF6` | 枠線ボタン・囲み枠の白い細線 | 0% | 画素の実測 |
| `background-alt` | `#F4F4F4` | 音楽セクションのスモーク調グレー地 | 5% | 画素の実測 |
| `text-muted` | `#EAEAEA` | サブボタンの薄いグレー面 | 0% | 画素の実測 |
| `accent-1` | `#94CA11` | 外部販売ボタンの黄緑 | 0% | 画素の実測 |
| `accent-2` | `#F07800` | イベント告知バナーのオレンジ文字 | 0% | 推定 |
| `cta-accessible` | `#E20012` | AA を満たす補正値（計算） |  | 計算 |
| `accent-2-accessible` | `#A65300` | AA を満たす補正値（計算） |  | 計算 |

- 地はほぼ黒の #161616 で統一する。読ませる文章だけを白カードに載せる
- 赤は題字の漢字・役職ラベル・購入ボタンに限り、1画面に1〜2か所までにする
- 黒地の見出しとナビは白一色にする。グレーの段階は作らない
- 写真の暖色（夜のネオン・室内灯）で画面の温度を作る。UI の色は増やさない
- 外部チケットサービスのボタンだけ先方の指定色（赤・黄緑）を使ってよい
- 音楽などの区切りに、スモーク調の明るいグレー地を1回だけ挟む
- `button-primary` は文字 `#FEF3F4` × 背景 `#E70012` のコントラスト比が 4.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E20012`、4.56:1）を使う。
- `button-pill-video` は文字 `#FEF3F4` × 背景 `#E70012` のコントラスト比が 4.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E20012`、4.56:1）を使う。
- `event-banner` は文字 `#F07800` × 背景 `#EAEAEA` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#A65300`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 公開日などの大きな英数字 | 欧文サンセリフ | Montserrat | 700 | 34px | 1.1 | 0.02em |
| `headline-lg` | セクションの英字見出し（全部大文字） | 欧文サンセリフ | Roboto Condensed | 700 | 20px | 1.2 | 0.08em |
| `headline-md` | セクションのリード見出し（2〜3行、中央揃え） | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.02em |
| `headline-sm` | コメントカードの人名・役名 | 明朝 | Shippori Mincho | 600 | 17px | 1.4 | 0.04em |
| `body-md` | あらすじ・コメントの本文 | ゴシック | Zen Kaku Gothic New | 500 | 10px | 2 | 0.06em |
| `note` | スタッフクレジット・注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.02em |
| `label-button` | 枠線ボタン・CTA の文字 | 欧文サンセリフ | Roboto Condensed | 700 | 16px | 1.2 | 0.1em |
| `accent` | 役名に添える小さな注記（／○○ 役） | 明朝 | Noto Serif JP | 500 | 9px | 1.4 | 0.02em |

- セクション見出しは英字の大文字1語にして、中央に置く。和文の見出しは添えない
- 人名には明朝を使う。本文は字間を広げたゴシックで書き分ける
- 本文は小さめにして行間を 2.0 前後と広く取り、長文でも詰まって見えないようにする
- 役職ラベル（主演・監督など）は人名の前に赤い明朝で小さく置く
- キャッチコピーはダッシュで余韻を残す短文にし、黒地に白文字で置く
- 題字の英字は、かすれた質感の極太体を写真の上に大きく重ねる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。特典カードなどの一覧は 3 列グリッド
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 80px、基本単位 8px、カード内 30px（375px 幅換算）
- 白カードは画面幅の約 92% にして、左右に黒い余白を細く残す
- コメントカードは縦に並べ、間を約 20px あける
- 全面写真は余白なしの画面幅いっぱいで、セクションの区切りに使う
- 見出しの上下は約 40px あける
- 購入まわりは白い細線の枠で囲んでまとめる
- SNS アイコンは正方形の枠線ボタンを横に 3 つ並べる

## Elevation & Depth

- 影は基本的に使わない。黒地と白カードの明暗差だけで階層を作る
- 購入ウィジェットのカードだけ角丸をごく小さくし、影はほぼ付けない
- 写真の上の文字は、写真側の暗さかグラデーションで読みやすくする

## Shapes

- **角丸**: 小 0px ／ 中 6px ／ 大 28px。ボタンは角丸の長方形。
- **写真の切り抜き**: 四角のまま画面幅いっぱいに裁ち落とす。特典カードは縦長の長方形
- **セクション境界**: 直線で切り替える。黒地 → 全面写真 → 白地の順に、境界を描かず色面だけで区切る
- 枠線ボタンは白の 1px 線で角は直角にする
- 白カードは角丸なし
- ピル型は動画・音楽への誘導ボタン1種だけに使う
- スライダーの前後ボタンは正方形にする

## Components

- **キービジュアル**（`hero-key-visual`）: 人物写真の帯を縦に重ね、かすれた英字題字を中央に縦に通す。縦書きのコピーと出演者名も重ねる
- **枠線ボタン**（`button-outline`）: 黒地に白の細線枠と英字の大文字。ニュースや劇場情報などへ誘導する
- **購入 CTA**（`button-primary`）: 赤い面に白文字を2段で入れた購入ボタン
- **動画誘導ピルボタン**（`button-pill-video`）: 赤いピル型で、再生アイコンと短いテキストを並べる
- **英字セクション見出し**（`section-title-en`）: 大文字の太い英字1語を中央に置く。装飾線は付けない
- **コメントカード**（`comment-card`）: 白い角なしカード。赤い役職ラベル・明朝の人名・小さな役名注記を中央に置き、下に字間の広い本文を左揃えで続ける
- **告知バナー**（`event-banner`）: ざらついたグレーの質感の地に、白縁取りの太い色文字で告知する。下に「詳しく」の小さなリンクを付ける
- **前売券の囲み枠**（`boxed-campaign`）: 白い細線で囲み、中に購入ボタン・白帯のラベル・3 列の特典画像を入れる
- **予告動画スライダー**（`video-slider`）: 16:9 のサムネイル、キャプション、ドットのページ送り、正方形の前後ボタンで構成する

## Do's and Don'ts

**Do**
- 地は黒で通し、長文だけを白カードで読ませる
- 赤は数か所に絞って使い、効かせどころを作る
- セクションの切り替えに全面写真を挟んで、映画の場面のような間を作る
- 人名は明朝、見出しは英字ゴシックと、役割で書体を分ける
- 本文は小さめにして、字間・行間を広く取る

**Don't**
- 角丸の大きいカードや柔らかい影を使わない
- 赤の面を広く塗らない
- パステル色やグラデーションのボタンを使わない
- 見出しにアイコンやイラストの装飾を付けない
- 黒地に灰色の小さい文字を置いて読みにくくしない

## Page Structure

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

1. **ファーストビュー**（作品の世界観と出演陣を一目で伝える）: 人物写真を帯状に重ね、かすれた英字題字・縦書きコピー・出演者名を入れる
2. **コピーと公開日**（公開日を覚えてもらう）: 黒地に白の短いキャッチコピーと大きな英数字の日付を置く
3. **SNS・ナビ・告知**（関連情報への導線）: 正方形の SNS ボタン、枠線ボタン 2 つ、質感のある告知バナーを縦に並べる
4. **チケット購入**（前売券の購入）: 白い購入ウィジェット、赤の CTA、細線で囲んだ特典紹介（3 列グリッド）を置く
5. **予告動画**（映像で興味を引く）: 英字見出しの下に動画スライダーを置く
6. **作品紹介**（作品の背景と見どころを伝える）: 白カードに太字リード見出しと長文を入れ、最後に太字の一文で締める
7. **場面写真**（空気感で区切る）: 場面写真を 2 枚、画面幅いっぱいに横に並べる
8. **あらすじ**（物語の導入）: 白地に見出しと本文を置き、その下に人物写真を白からのグラデーションで溶け込ませる
9. **人物相関図**（登場人物の関係を示す）: 暗い写真地に顔写真と赤・オレンジのラベル、細線で関係を描く
10. **コメント**（出演者とスタッフの声）: 白カードを縦に連続で並べる。人名は明朝、役職ラベルは赤
11. **主題歌**（音楽への導線）: スモーク調のグレー地にアーティスト写真・名前・赤いピル型ボタンを置く
12. **クロージング**（作品情報とシェア）: 主演の写真に題字・日付・クレジットを重ね、円形のシェアボタンとコピーライトを置く

## Imagery

- 夜の繁華街や室内灯の下で、暖色で低めの彩度の映画的な写真を使う
- 人物は真顔か強い目線でアップにし、背景は浅い被写界深度でぼかす
- 題字の英字はかすれて擦れた筆致の極太体にする
- グレーの煙やスモークのテクスチャを区切りの地に使う
- 顔の傷や刺青など硬派な要素をクローズアップで見せる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は上部に横並びの英字ナビを固定し、左端に SNS アイコンを置く
- PC のキービジュアルは横長にし、左に主演、右に脇役の写真を格子状に並べる
- PC の購入ウィジェットは横 1 行にまとめ、特典画像は 6 列に並べる
- PC の白カードは幅を約 60% に狭め、中央に置く
- PC の動画スライダーは 3 枚同時に見せる

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

:root {
  --color-background: #161616;
  --color-surface: #ffffff;
  --color-primary: #d7141e;
  --color-cta: #e70012;
  --color-on-cta: #fef3f4;
  --color-on-dark: #fafdfc;
  --color-text-body: #161616;
  --color-line: #f8faf6;
  --color-background-alt: #f4f4f4;
  --color-text-muted: #eaeaea;
  --color-accent-1: #94ca11;
  --color-accent-2: #f07800;
  --color-cta-accessible: #e20012;
  --color-accent-2-accessible: #a65300;
  --spacing-unit: 8px;
  --spacing-card: 30px;
  --spacing-section: 80px;
  --rounded-sm: 0px;
  --rounded-md: 6px;
  --rounded-lg: 28px;
  --rounded-full: 999px;
}

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