---
version: alpha
name: Dark Teal and Gold Period Mystery Film LP
description: 黒地を基調にして、深い青緑のグラデーションと渋い金色の見出しを組み合わせた映画公式サイトの型。重く緊張感のあるトーンを作る。キャストは顔写真に大きな漢字二文字を半透明で重ねて縦に並べ、ストーリーや原作のセクションは淡い青緑のすりガラス調の地で区切る。
colors:
  background: '#000000'
  primary: '#998747'
  dark-section: '#023C3E'
  secondary: '#0C3B3A'
  background-alt: '#C4CEC8'
  surface: '#DBDAD6'
  text: '#131110'
  on-dark: '#F3F8F7'
  accent-1: '#6B644B'
  accent-2: '#C8283C'
  cta: '#E51E0D'
  on-cta: '#FEF6F3'
  accent-3: '#9A8543'
  line: '#8A7440'
  accent-3-accessible: '#817038'
typography:
  display:
    fontFamily: Oswald
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.3
  body-lg:
    fontFamily: Shippori Mincho
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.03em
  accent:
    fontFamily: Noto Serif JP
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  label-button:
    fontFamily: Oswald
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  sm: 0px
  md: 4px
  lg: 6px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-title-en:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 60px
  cast-portrait:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 230px
  comment-accordion:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 40px
  cast-name:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 40px
  button-gold:
    backgroundColor: '{colors.accent-3}'
    textColor: '{colors.on-cta}'
    typography: '{typography.body-md}'
    height: 44px
  ticket-widget:
    backgroundColor: '{colors.on-cta}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 190px
  catch-band:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    height: 70px
  video-tabs:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 30px
  comment-box:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 340px
---

# DESIGN.md — 漆黒×深緑×金の時代劇映画 LP（Dark Teal and Gold Period Mystery Film LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、和風、力強い・インパクト、上品・高級
- **キーワード**: 漆黒・深緑グラデーション・古金色・時代劇・心理ミステリー・半透明漢字
- **地の質感**: 黒の平面に青緑のビネット状グラデーションを重ねる。明るいセクションには蜘蛛の巣状の細い線が入った霧のような地や、和紙のテクスチャを使う。
- **形**: 角丸のない長方形が中心。ボタンは横長の帯で、左から右へ暗くなるグラデーションをかける。
- **温度感**: 冷たく重い。金色の文字だけがほのかに温かさを足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#000000` | ページの基本地（漆黒） | 45% | 画素の実測 |
| `primary` | `#998747` | セクション見出し・人名の古金色 | 2% | 画素の実測 |
| `dark-section` | `#023C3E` | キャスト・監督セクション上部の深緑 | 8% | 画素の実測 |
| `secondary` | `#0C3B3A` | COMMENT帯ボタンの青緑 | 3% | 画素の実測 |
| `background-alt` | `#C4CEC8` | ストーリー・原作セクションの淡い青緑の地 | 8% | 画素の主要色に補正 |
| `surface` | `#DBDAD6` | 人物相関図の和紙調グレーの地 | 5% | 画素の実測 |
| `text` | `#131110` | 明るい地の上の本文の黒 | 2% | 画素の主要色に補正 |
| `on-dark` | `#F3F8F7` | 暗い地の上の本文・ボタン文字 | 1% | 画素の主要色に補正 |
| `accent-1` | `#6B644B` | FV下のキャッチ帯のオリーブブラウン | 1% | 画素の実測 |
| `accent-2` | `#C8283C` | 公開日の強調に使う赤 | 0% | 推定 |
| `cta` | `#E51E0D` | チケット購入ボタンの赤 | 0% | 画素の実測 |
| `on-cta` | `#FEF6F3` | 購入ボタン上の白文字 | 0% | 画素の実測 |
| `accent-3` | `#9A8543` | 原作サイトへの金色のボタン | 0% | 画素の実測 |
| `line` | `#8A7440` | キャストの区切りに入る金の細線 | 0% | 推定 |
| `accent-3-accessible` | `#817038` | AA を満たす補正値（計算） |  | 計算 |

- 地の 6 割以上は漆黒にする。セクションの頭だけ深緑から黒へのグラデーションで始める。
- 見出しと人名はすべて古金色にする。白い見出しは使わない。
- ストーリーと原作のセクションは、淡い青緑の霧グラデーションに暗色の本文を載せて明暗を反転させる。
- 購入ボタンの赤は外部チケットの部品と公開日だけに限る。
- COMMENT帯は青緑から黒へ横方向のグラデーションにし、文字は淡いグレーにする。
- `button-gold` は文字 `#FEF6F3` × 背景 `#9A8543` のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#817038`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | STORYなど英字のセクション見出し | 欧文サンセリフ | Oswald | 700 | 44px | 1.1 | 0.02em |
| `headline-lg` | キャスト名・監督名 | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.3 | 0.02em |
| `headline-sm` | 役名などの補足（人名の後ろにスラッシュで続ける） | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.3 | 0.0em |
| `body-lg` | あらすじの本文 | 明朝 | Shippori Mincho | 500 | 18px | 1.9 | 0.03em |
| `body-md` | コメントなどの本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.03em |
| `accent` | 受賞の文言など明朝の装飾 | 明朝 | Noto Serif JP | 500 | 18px | 1.4 | 0.02em |
| `label-button` | COMMENT帯などの英字ラベル | 欧文サンセリフ | Oswald | 500 | 13px | 1.0 | 0.08em |
| `note` | クレジット・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em |

- セクション見出しは英字の太い縦長サンセリフで中央に置き、金色のグラデーションをかける。
- あらすじは明朝で大きめに組み、物語性を出す。
- 人名は太いゴシックの金色にし、役名を一回り小さくスラッシュの後ろに続ける。
- コメントや説明文はゴシックで行間を 2.0 前後に広く取る。
- 写真に重ねる漢字は大きな明朝にし、半透明の白で載せる。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC はキャストの写真とテキストを左右交互に並べる 2 カラム。
- **本文ブロックの幅**: 画面幅の約 84%
- **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
- キャスト写真は幅約 60% の正方形で中央に置く。
- 写真→人名→COMMENT帯の順に縦に積み、1 人分の間隔を約 60px 空ける。
- 主要キャストと脇役の区切りに金の細線を全幅で入れる。
- 見出しの上下に 60〜80px の余白を取る。

## Elevation & Depth

- 影はほぼ使わない。奥行きはグラデーションとビネットで作る。
- 監督コメントの枠は半透明の青緑の面と細い枠線で浮かせる。
- 購入ウィジェットだけは白いカードにし、角丸をわずかに付ける。

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
- **写真の切り抜き**: 人物写真は正方形で角丸なし。書影は縦長の長方形。
- **セクション境界**: 直線で区切り、地の色やグラデーションの切り替えで分ける。
- ボタンは横長の長方形で角丸なしにする。
- 展開を示す＋記号はボタン右端に細線で描く。
- 相関図は四角い枠と矢印で組む。

## Components

- **英字セクション見出し**（`section-title-en`）: 太い縦長の英字に金色のグラデーションをかけ、中央に置く。
- **キャスト写真＋漢字の重ね**（`cast-portrait`）: 正方形の顔写真に、役柄を表す漢字二文字を半透明の明朝で大きく重ねる。
- **COMMENTアコーディオン帯**（`comment-accordion`）: 青緑から黒へのグラデーション帯。中央に英字ラベル、右端に＋記号を置く。
- **人名＋役名**（`cast-name`）: 金色の太い人名に、小さい役名をスラッシュで続ける。
- **金色のサブボタン**（`button-gold`）: 金色の長方形に白文字を置き、外部サイトへ誘導する。
- **チケット購入カード**（`ticket-widget`）: 白いカードの中に赤い購入ボタンと枚数の入力を置く。
- **あらすじキャッチ帯**（`catch-band`）: FV直下に置くオリーブブラウンの帯。白い太字 2 行を中央に載せる。
- **予告編の切替タブ**（`video-tabs`）: 動画の下に置く黒白のタブ列。SPでは横にスクロールさせる。
- **監督コメント枠**（`comment-box`）: 半透明の青緑の面に細い枠線を付け、白文字の本文を入れる。

## Do's and Don'ts

**Do**
- ページの大半は黒にし、金と深緑だけで格調を出す。
- 人物写真は低彩度で、硬いコントラストに統一する。
- 同じ型のキャストカードを反復し、全員を同じ格で並べる。
- 明るいセクションは霧のような青緑や和紙の質感にとどめる。

**Don't**
- 鮮やかな原色を広い面に使わない。
- 角丸やピル型のポップなボタンにしない。
- 白い見出しやカラフルなアイコンを入れない。
- 影の強いカードUIにしない。

## Page Structure

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

1. **ファーストビュー**（作品の世界観・出演者・公開日を一目で伝える）: 顔写真のグリッドに、大きな題字・英字の透かし・受賞の文言・赤い公開日・出演者名の列を重ねる。
2. **キャッチ帯・SNS**（あらすじを一言で示し、シェアを促す）: オリーブ帯に白文字を載せ、その下の黒地にシェアアイコンと公式SNSを並べる。
3. **キャンペーンバナー**（キャンペーンへ誘導する）: 深緑と金のバナーで、期限と賞品を帯で示す。
4. **チケット購入**（前売券を購入してもらう）: 黒地に白カードを置き、赤い購入ボタンを入れる。
5. **予告動画**（映像で興味を引く）: 全幅の動画に白い再生アイコンと月桂冠付きの受賞表示を重ね、下に切替タブを置く。
6. **ストーリー**（あらすじを伝える）: 淡い青緑の霧の地に金の英字見出しを置き、本文を大きな明朝で組む。
7. **キャストコメント**（出演者を紹介し、コメントを読ませる）: 深緑から黒へのグラデーションの地に、写真・人名・COMMENT帯を反復して並べる。区切りに金線を入れる。
8. **人物相関図**（登場人物の関係を示す）: 和紙調の地に、勢力ごとの色枠・矢印・顔写真で相関図を描く。SPでは横にスクロールさせる。
9. **原作紹介**（原作と作者のコメントを紹介する）: 霧の地に書影・金の見出し・本文・金のボタンを並べる。
10. **監督・脚本**（作り手のメッセージを伝える）: 深緑の地に、金の名前と半透明の枠に入れたコメントを置く。
11. **フッター**（クレジットと規約を載せる）: 黒地に極小のスタッフクレジット、ロゴ、リンク、著作権表記を並べる。

## Imagery

- 人物は正面〜斜めのバストアップで撮り、暗い背景に硬い光を当てて彩度を落とす。
- 写真には青緑の色かぶりを足し、黒を深く沈める。
- 役柄を表す漢字二文字を、写真の下半分に半透明の白い明朝で大きく重ねる。
- 背景には蜘蛛の巣や亀裂のような細い線を淡く入れる。
- 和紙のざらついたテクスチャを相関図の地に使う。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCではファーストビューの写真グリッドを横に広げ、キャンペーンを円形バナーにしてファーストビュー内に置く。
- PCのキャスト一覧は、写真とテキストを左右交互に並べるジグザグにする。
- PCのSNSリンクはヘッダー右上に固定する。
- PCの相関図はスクロールさせず全体を表示する。
- PCの原作紹介は、テキストを左・書影を右の 2 カラムにする。

## 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-0b8b0592`（元 LP の URL から採番）
- **元 LP**: https://movies.shochiku.co.jp/kokurojo-movie/
- **解析に使った画像**: 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/）からご連絡ください。