赤×青×黒の発光見出しヒーロー映画 LP

Heroic Red Blue Black Movie Promo LP

深紅・コバルトブルー・漆黒の 3 色で地をはっきり切り替える映画公式サイト型の LP。極太の英字ディスプレイ見出しに白い発光をかけ、和文サブ見出しと細い横線を組み合わせる。人物写真とスライダーを主役にして、劇場の高揚感を出す。

エンタメ・ゲーム・アプリ力強い・インパクトクール・先進的情報量多め・訴求型SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

セクションごとに地を赤・黒・青で切り替え、同じ色を続けない
見出しと本文は基本白にして、外側に白〜淡色の発光をかける
黄色は強調コピー・日付バッジ・スライダーの現在位置だけに使う
赤い強調コピーは写真背景や暗い地の上に置き、白い縁取りの発光をつける
グレーや白は外部バナーなどの小さい面だけに使う

TYPOGRAPHY

書体

display英字のセクション見出し装飾・ディスプレイ／ Teko 700 ／ 48px ／行間 1.05

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg和文の大キャッチゴシック／ Noto Sans JP 900 ／ 30px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-md英字の小見出し（WHO? など）欧文サンセリフ／ Montserrat 800 ／ 30px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm和文サブ見出し・人物名ゴシック／ Noto Sans JP 900 ／ 19px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

body-md中央揃えの本文ゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

noteニュース本文・日付・注記ゴシック／ Noto Sans JP 500 ／ 10px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonMORE ボタンの英字装飾・ディスプレイ／ Teko 600 ／ 16px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

accentタイトルロゴ風の字間の広い英字欧文サンセリフ／ Montserrat 800 ／ 26px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

英字の極太見出しの下に、細い横線つきの和文サブ見出しを置く 2 段構成にする
本文は太字・中央揃えにして、1 行を短めに改行する
見出しには発光（text-shadow）をかけ、映画のロゴのような質感にする
ニュースの文字だけは小さめの左揃えにする

PAGE STRUCTURE

セクション構成

ファーストビュー作品の世界観と公開日を伝える全画面のキービジュアルの上にロゴ風の英字と公開日、ハッシュタグを置く。左上に赤いメニュー、右上に赤丸の SNS ボタン
外部バナー関連サイトやチケット購入へ誘導する黒地の上に横長バナーを縦に並べる
動画スライダー予告編を見てもらう赤地の上に 16:9 の動画カードをスライダーで並べ、下にドットを置く
ニュース最新情報を伝える黒地にメタリックな英字見出しを置き、サムネイル付きの行を 5 件並べて、MORE ボタンで締める
作品・人物の紹介主人公の魅力を伝える赤地に発光する英字見出し、大キャッチ、光る枠ボックスの本文を置く
Q&A 形式の解説基本情報を短く伝える斜めにマスクしたアクション写真から青地へつなぎ、英字の小見出し・和文のサブ見出し・短い本文を 5 組並べる
あらすじ物語の導入を伝えるぼかした写真背景に白の本文。途中に赤い大コピーを入れる
登場人物人物を陣営ごとに紹介する味方側を赤地、敵側を青地のスライダーに分け、縦長の人物カードで見せる
ロゴ帯とフッター印象を締め、シェアしてもらう黒地にシンボルを大きく置く。その下の赤地に、シェアのテキストリンク、ロゴ、SNS 丸アイコン、規約リンクを並べる

COMPONENTS

部品

MORE ピルボタン button-primary横幅いっぱいの濃赤のピル型。上半分を明るくし、中央に英字を置く
発光英字見出し heading-glow極太の英字に白い発光。下に横線で挟んだ和文サブ見出しを置く
ニュース行 news-rowサムネイル、黄色の日付バッジ、2 行の本文を並べ、グレー線で区切る
日付バッジ date-badge黄色地に黒の小さな日付
人物スライダーカード character-card縦長の人物写真の下部に名前・役者名・説明を重ね、光る枠で囲む。右に丸い矢印、下にドットを置く
光る枠ボックス framed-box濃赤の地に細い枠を引き、上下を光るラインで飾る。黄色の見出しと白の本文を入れる
SNS 丸ボタン sns-circle赤の円の中に白いアイコン
動画スライダー video-slider16:9 のサムネイルの中央に黒丸の再生ボタン。左上に白地のタイトル帯を斜めに切って置き、下にドットを並べる

守ること

赤・青・黒の地をセクションごとに交互に使う
英字の見出しは極太にして、必ず発光をつける
人物写真は逆光や虹色のフレアが入ったポスター調にする
スライダーでは次のカードを少しはみ出させて、横スクロールできることを伝える

DON'T

避けること

パステルや淡い地色を使わない
細い明朝体や手書き風の書体を使わない
カードに大きな角丸や柔らかい影をつけない
黄色を広い面に使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 赤×青×黒の発光見出しヒーロー映画 LP（Heroic Red Blue Black Movie Promo LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: 力強い・インパクト、クール・先進的、情報量多め・訴求型
キーワード: ヒーロー・発光文字・3 原色ブロック・映画ポスター・スライダー・斜めの切り替え
地の質感: ベタ塗りの面に、グロー（外側の光）付きの白文字と、ぼかした写真背景を重ねる
形: 四角いブロックが基本。CTA だけ大きなピル型。写真は斜めにマスクする
温度感: 高温で高コントラスト。赤の熱さと青の冷たさを交互に置く

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#B60402`	ブランドの赤（セクション地）	22%	画素の実測
`secondary`	`#0056B6`	コバルトブルーのセクション地	17%	画素の実測
`dark-section`	`#000000`	ニュースとロゴ帯の黒地	15%	画素の実測
`background`	`#000000`	ページ基調の黒	10%	画素の実測
`cta`	`#B60400`	MORE ボタンの濃赤	1%	画素の実測
`on-cta`	`#FFF3F1`	ボタン上の白文字	0%	画素の実測
`on-dark`	`#F8F8F0`	色地の上の白文字	3%	画素の主要色に補正
`accent-1`	`#F5C400`	黄色の強調見出し・日付ラベル	0%	推定
`accent-2`	`#C52722`	黒地の上の赤い強調コピー	0%	画素の主要色に補正
`accent-3`	`#1167B4`	サブ見出しの青文字	0%	画素の主要色に補正
`background-alt`	`#A40301`	濃赤の枠つきボックス地	4%	画素の実測
`line`	`#555555`	ニュース一覧の区切り線	0%	推定
`surface`	`#FEFEFE`	バナーカードの白	2%	画素の実測
`marker`	`#F2D200`	日付バッジの黄色地	0%	推定

セクションごとに地を赤・黒・青で切り替え、同じ色を続けない
見出しと本文は基本白にして、外側に白〜淡色の発光をかける
黄色は強調コピー・日付バッジ・スライダーの現在位置だけに使う
赤い強調コピーは写真背景や暗い地の上に置き、白い縁取りの発光をつける
グレーや白は外部バナーなどの小さい面だけに使う

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	英字のセクション見出し	装飾・ディスプレイ	Teko	700	48px	1.05	0.02em
`headline-lg`	和文の大キャッチ	ゴシック	Noto Sans JP	900	30px	1.3	0.02em
`headline-md`	英字の小見出し（WHO? など）	欧文サンセリフ	Montserrat	800	30px	1.1	0.0em
`headline-sm`	和文サブ見出し・人物名	ゴシック	Noto Sans JP	900	19px	1.4	0.02em
`body-md`	中央揃えの本文	ゴシック	Noto Sans JP	700	13px	1.9	0.02em
`note`	ニュース本文・日付・注記	ゴシック	Noto Sans JP	500	10px	1.6	0.0em
`label-button`	MORE ボタンの英字	装飾・ディスプレイ	Teko	600	16px	1.0	0.08em
`accent`	タイトルロゴ風の字間の広い英字	欧文サンセリフ	Montserrat	800	26px	1.0	0.4em

英字の極太見出しの下に、細い横線つきの和文サブ見出しを置く 2 段構成にする
本文は太字・中央揃えにして、1 行を短めに改行する
見出しには発光（text-shadow）をかけ、映画のロゴのような質感にする
ニュースの文字だけは小さめの左揃えにする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。PC は本文を中央に寄せ、ニュースは横長の行で並べる
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
セクションは全幅のベタ地で区切り、上下に約 64px の余白を取る
見出し・本文はすべて中央揃えにする
スライダーは 1 枚を大きく見せ、右に次のカードを少しはみ出させる
ニュースは左にサムネイル、右に日付と本文を置き、線で区切る

Elevation & Depth

影ではなく、発光（グロー）で文字と枠を浮かせる
人物カードは内側を細い光る線で縁取る
ボタンは上下 2 トーンの赤で立体感を出す

Shapes

角丸: 小 2px ／中 4px ／大 999px。ボタンはピル型。
写真の切り抜き: 人物は縦長の長方形。アクション写真は対角線の斜めマスクで切る
セクション境界: 基本は水平に切り替える。写真セクションだけ斜めに分ける
カード・バナーは角丸なし、またはごく小さくする
SNS アイコンは円形のボタンにする
主ボタンだけ大きなピル型にする

Components

MORE ピルボタン（button-primary）: 横幅いっぱいの濃赤のピル型。上半分を明るくし、中央に英字を置く
発光英字見出し（heading-glow）: 極太の英字に白い発光。下に横線で挟んだ和文サブ見出しを置く
ニュース行（news-row）: サムネイル、黄色の日付バッジ、2 行の本文を並べ、グレー線で区切る
日付バッジ（date-badge）: 黄色地に黒の小さな日付
人物スライダーカード（character-card）: 縦長の人物写真の下部に名前・役者名・説明を重ね、光る枠で囲む。右に丸い矢印、下にドットを置く
光る枠ボックス（framed-box）: 濃赤の地に細い枠を引き、上下を光るラインで飾る。黄色の見出しと白の本文を入れる
SNS 丸ボタン（sns-circle）: 赤の円の中に白いアイコン
動画スライダー（video-slider）: 16:9 のサムネイルの中央に黒丸の再生ボタン。左上に白地のタイトル帯を斜めに切って置き、下にドットを並べる

Do's and Don'ts

Do - 赤・青・黒の地をセクションごとに交互に使う - 英字の見出しは極太にして、必ず発光をつける - 人物写真は逆光や虹色のフレアが入ったポスター調にする - スライダーでは次のカードを少しはみ出させて、横スクロールできることを伝える

Don't - パステルや淡い地色を使わない - 細い明朝体や手書き風の書体を使わない - カードに大きな角丸や柔らかい影をつけない - 黄色を広い面に使わない

Page Structure

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

ファーストビュー（作品の世界観と公開日を伝える）: 全画面のキービジュアルの上にロゴ風の英字と公開日、ハッシュタグを置く。左上に赤いメニュー、右上に赤丸の SNS ボタン
外部バナー（関連サイトやチケット購入へ誘導する）: 黒地の上に横長バナーを縦に並べる
動画スライダー（予告編を見てもらう）: 赤地の上に 16:9 の動画カードをスライダーで並べ、下にドットを置く
ニュース（最新情報を伝える）: 黒地にメタリックな英字見出しを置き、サムネイル付きの行を 5 件並べて、MORE ボタンで締める
作品・人物の紹介（主人公の魅力を伝える）: 赤地に発光する英字見出し、大キャッチ、光る枠ボックスの本文を置く
Q&A 形式の解説（基本情報を短く伝える）: 斜めにマスクしたアクション写真から青地へつなぎ、英字の小見出し・和文のサブ見出し・短い本文を 5 組並べる
あらすじ（物語の導入を伝える）: ぼかした写真背景に白の本文。途中に赤い大コピーを入れる
登場人物（人物を陣営ごとに紹介する）: 味方側を赤地、敵側を青地のスライダーに分け、縦長の人物カードで見せる
ロゴ帯とフッター（印象を締め、シェアしてもらう）: 黒地にシンボルを大きく置く。その下の赤地に、シェアのテキストリンク、ロゴ、SNS 丸アイコン、規約リンクを並べる

Imagery

人物は正面から撮り、腕組みなど力強いポーズにする。逆光で虹色のレンズフレアを入れる
アクション写真は動きのブレや破片を入れ、青みに色補正する
背景用の写真は空や高層ビルを強くぼかし、暗めに落とす
シンボルマークは金色のベベルがかった立体表現にする
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC はヘッダーに英字のグローバルナビを横に並べる
PC のファーストビューは横長にして、人物を右、タイトルを左に置く
PC の Q&A は写真を左半分に斜めに置き、テキストを右寄せにする
PC のスライダーはカードを 2 枚以上並べて見せる
PC のニュース行は右端に矢印をつける

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
version: alpha
name: Heroic Red Blue Black Movie Promo LP
description: 深紅・コバルトブルー・漆黒の 3 色で地をはっきり切り替える映画公式サイト型の LP。極太の英字ディスプレイ見出しに白い発光をかけ、和文サブ見出しと細い横線を組み合わせる。人物写真とスライダーを主役にして、劇場の高揚感を出す。
colors:
  primary: '#B60402'
  secondary: '#0056B6'
  dark-section: '#000000'
  background: '#000000'
  cta: '#B60400'
  on-cta: '#FFF3F1'
  on-dark: '#F8F8F0'
  accent-1: '#F5C400'
  accent-2: '#C52722'
  accent-3: '#1167B4'
  background-alt: '#A40301'
  line: '#555555'
  surface: '#FEFEFE'
  marker: '#F2D200'
typography:
  display:
    fontFamily: Teko
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Montserrat
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.1
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 19px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.9
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.6
  label-button:
    fontFamily: Teko
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.08em
  accent:
    fontFamily: Montserrat
    fontSize: 26px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: 0.4em
rounded:
  sm: 2px
  md: 4px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  heading-glow:
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 90px
  news-row:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 88px
  date-badge:
    backgroundColor: '{colors.marker}'
    typography: '{typography.note}'
    height: 12px
  character-card:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 430px
  framed-box:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 420px
  sns-circle:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    rounded: '{rounded.full}'
    height: 40px
  video-slider:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 240px
---

# DESIGN.md — 赤×青×黒の発光見出しヒーロー映画 LP（Heroic Red Blue Black Movie Promo LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、クール・先進的、情報量多め・訴求型
- **キーワード**: ヒーロー・発光文字・3 原色ブロック・映画ポスター・スライダー・斜めの切り替え
- **地の質感**: ベタ塗りの面に、グロー（外側の光）付きの白文字と、ぼかした写真背景を重ねる
- **形**: 四角いブロックが基本。CTA だけ大きなピル型。写真は斜めにマスクする
- **温度感**: 高温で高コントラスト。赤の熱さと青の冷たさを交互に置く

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#B60402` | ブランドの赤（セクション地） | 22% | 画素の実測 |
| `secondary` | `#0056B6` | コバルトブルーのセクション地 | 17% | 画素の実測 |
| `dark-section` | `#000000` | ニュースとロゴ帯の黒地 | 15% | 画素の実測 |
| `background` | `#000000` | ページ基調の黒 | 10% | 画素の実測 |
| `cta` | `#B60400` | MORE ボタンの濃赤 | 1% | 画素の実測 |
| `on-cta` | `#FFF3F1` | ボタン上の白文字 | 0% | 画素の実測 |
| `on-dark` | `#F8F8F0` | 色地の上の白文字 | 3% | 画素の主要色に補正 |
| `accent-1` | `#F5C400` | 黄色の強調見出し・日付ラベル | 0% | 推定 |
| `accent-2` | `#C52722` | 黒地の上の赤い強調コピー | 0% | 画素の主要色に補正 |
| `accent-3` | `#1167B4` | サブ見出しの青文字 | 0% | 画素の主要色に補正 |
| `background-alt` | `#A40301` | 濃赤の枠つきボックス地 | 4% | 画素の実測 |
| `line` | `#555555` | ニュース一覧の区切り線 | 0% | 推定 |
| `surface` | `#FEFEFE` | バナーカードの白 | 2% | 画素の実測 |
| `marker` | `#F2D200` | 日付バッジの黄色地 | 0% | 推定 |

- セクションごとに地を赤・黒・青で切り替え、同じ色を続けない
- 見出しと本文は基本白にして、外側に白〜淡色の発光をかける
- 黄色は強調コピー・日付バッジ・スライダーの現在位置だけに使う
- 赤い強調コピーは写真背景や暗い地の上に置き、白い縁取りの発光をつける
- グレーや白は外部バナーなどの小さい面だけに使う

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 英字のセクション見出し | 装飾・ディスプレイ | Teko | 700 | 48px | 1.05 | 0.02em |
| `headline-lg` | 和文の大キャッチ | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em |
| `headline-md` | 英字の小見出し（WHO? など） | 欧文サンセリフ | Montserrat | 800 | 30px | 1.1 | 0.0em |
| `headline-sm` | 和文サブ見出し・人物名 | ゴシック | Noto Sans JP | 900 | 19px | 1.4 | 0.02em |
| `body-md` | 中央揃えの本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.9 | 0.02em |
| `note` | ニュース本文・日付・注記 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.0em |
| `label-button` | MORE ボタンの英字 | 装飾・ディスプレイ | Teko | 600 | 16px | 1.0 | 0.08em |
| `accent` | タイトルロゴ風の字間の広い英字 | 欧文サンセリフ | Montserrat | 800 | 26px | 1.0 | 0.4em |

- 英字の極太見出しの下に、細い横線つきの和文サブ見出しを置く 2 段構成にする
- 本文は太字・中央揃えにして、1 行を短めに改行する
- 見出しには発光（text-shadow）をかけ、映画のロゴのような質感にする
- ニュースの文字だけは小さめの左揃えにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC は本文を中央に寄せ、ニュースは横長の行で並べる
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
- セクションは全幅のベタ地で区切り、上下に約 64px の余白を取る
- 見出し・本文はすべて中央揃えにする
- スライダーは 1 枚を大きく見せ、右に次のカードを少しはみ出させる
- ニュースは左にサムネイル、右に日付と本文を置き、線で区切る

## Elevation & Depth

- 影ではなく、発光（グロー）で文字と枠を浮かせる
- 人物カードは内側を細い光る線で縁取る
- ボタンは上下 2 トーンの赤で立体感を出す

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 999px。ボタンはピル型。
- **写真の切り抜き**: 人物は縦長の長方形。アクション写真は対角線の斜めマスクで切る
- **セクション境界**: 基本は水平に切り替える。写真セクションだけ斜めに分ける
- カード・バナーは角丸なし、またはごく小さくする
- SNS アイコンは円形のボタンにする
- 主ボタンだけ大きなピル型にする

## Components

- **MORE ピルボタン**（`button-primary`）: 横幅いっぱいの濃赤のピル型。上半分を明るくし、中央に英字を置く
- **発光英字見出し**（`heading-glow`）: 極太の英字に白い発光。下に横線で挟んだ和文サブ見出しを置く
- **ニュース行**（`news-row`）: サムネイル、黄色の日付バッジ、2 行の本文を並べ、グレー線で区切る
- **日付バッジ**（`date-badge`）: 黄色地に黒の小さな日付
- **人物スライダーカード**（`character-card`）: 縦長の人物写真の下部に名前・役者名・説明を重ね、光る枠で囲む。右に丸い矢印、下にドットを置く
- **光る枠ボックス**（`framed-box`）: 濃赤の地に細い枠を引き、上下を光るラインで飾る。黄色の見出しと白の本文を入れる
- **SNS 丸ボタン**（`sns-circle`）: 赤の円の中に白いアイコン
- **動画スライダー**（`video-slider`）: 16:9 のサムネイルの中央に黒丸の再生ボタン。左上に白地のタイトル帯を斜めに切って置き、下にドットを並べる

## Do's and Don'ts

**Do**
- 赤・青・黒の地をセクションごとに交互に使う
- 英字の見出しは極太にして、必ず発光をつける
- 人物写真は逆光や虹色のフレアが入ったポスター調にする
- スライダーでは次のカードを少しはみ出させて、横スクロールできることを伝える

**Don't**
- パステルや淡い地色を使わない
- 細い明朝体や手書き風の書体を使わない
- カードに大きな角丸や柔らかい影をつけない
- 黄色を広い面に使わない

## Page Structure

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

1. **ファーストビュー**（作品の世界観と公開日を伝える）: 全画面のキービジュアルの上にロゴ風の英字と公開日、ハッシュタグを置く。左上に赤いメニュー、右上に赤丸の SNS ボタン
2. **外部バナー**（関連サイトやチケット購入へ誘導する）: 黒地の上に横長バナーを縦に並べる
3. **動画スライダー**（予告編を見てもらう）: 赤地の上に 16:9 の動画カードをスライダーで並べ、下にドットを置く
4. **ニュース**（最新情報を伝える）: 黒地にメタリックな英字見出しを置き、サムネイル付きの行を 5 件並べて、MORE ボタンで締める
5. **作品・人物の紹介**（主人公の魅力を伝える）: 赤地に発光する英字見出し、大キャッチ、光る枠ボックスの本文を置く
6. **Q&A 形式の解説**（基本情報を短く伝える）: 斜めにマスクしたアクション写真から青地へつなぎ、英字の小見出し・和文のサブ見出し・短い本文を 5 組並べる
7. **あらすじ**（物語の導入を伝える）: ぼかした写真背景に白の本文。途中に赤い大コピーを入れる
8. **登場人物**（人物を陣営ごとに紹介する）: 味方側を赤地、敵側を青地のスライダーに分け、縦長の人物カードで見せる
9. **ロゴ帯とフッター**（印象を締め、シェアしてもらう）: 黒地にシンボルを大きく置く。その下の赤地に、シェアのテキストリンク、ロゴ、SNS 丸アイコン、規約リンクを並べる

## Imagery

- 人物は正面から撮り、腕組みなど力強いポーズにする。逆光で虹色のレンズフレアを入れる
- アクション写真は動きのブレや破片を入れ、青みに色補正する
- 背景用の写真は空や高層ビルを強くぼかし、暗めに落とす
- シンボルマークは金色のベベルがかった立体表現にする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はヘッダーに英字のグローバルナビを横に並べる
- PC のファーストビューは横長にして、人物を右、タイトルを左に置く
- PC の Q&A は写真を左半分に斜めに置き、テキストを右寄せにする
- 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-7d1156ef`（元 LP の URL から採番）
- **元 LP**: https://wwws.warnerbros.co.jp/superman/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://wwws.warnerbros.co.jp/superman/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP