DESIGN.md — 漆黒×鋼青×朱赤の叙事詩映画 LP（Dark Cinematic Epic Movie LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的
• キーワード: 漆黒・戦火・叙事詩・シネマティック・鋼青・朱赤
• 地の質感: 黒地にごく細い斜めストライプが入る。写真は暗く、炎のオレンジが光源になる
• 形: 角丸なしの四角が基本。細い枠線のボタンと水平線で見出しを挟む
• 温度感: 冷たい黒と青が基調で、写真の炎と赤文字で熱をさす

Colors

• 地は黒で固定し、写真の暗部と境目なくつなげる
• 作品タイトルと枠線は鋼青、公開日と短いコピーだけを朱赤にする
• 本文は白の太字ゴシック。補足はグレーに落とす
• 購入導線は販売サービスの色（赤・白・緑）をそのまま使い、作品の配色とは切り分ける
• フッターだけを鋼青の面にしてページを締める
• nav-outline-button は文字 #3E5A75 × 背景 #000001 のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#C8C8FF、4.5:1）を使う。
• button-primary は文字 #F3F4F1 × 背景 #E40112 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E10112、4.51:1）を使う。

Typography

• 感情に訴えるコピーは明朝、説明はゴシックの太字、と役割で書体を分ける
• 英字見出しは大文字にして字間を広く取り、下に小さな日本語の読みを添える
• 作品タイトルは和文の太字の下に字間の広い英字を重ねる
• 巨大コピーは朱赤の明朝で写真の上に重ね、人物の顔は避けて配置する
• 本文は白の太字で、黒地でも負けない濃さにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビボタンだけ 3 等分
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• キービジュアルは全幅・縦長で、タイトルと日付を下部に置く
• 紹介文は左揃えのブロックで、写真の下端の暗がりから始める
• 購入ブロックは中央寄せで幅を狭め、ボタンを縦に積む
• ニュースは画像カードを 1 枚ずつ見せるスライダーにし、左右に矢印を置く

Elevation & Depth

• 影は使わず、写真の明暗とグラデーションで奥行きを出す
• 写真の下端は黒へのグラデーションで溶かす
• カードは影の代わりに赤や鋼青の 1px 枠で浮かせる

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形。下端は黒へフェードさせる
• セクション境界: 直線で切り替える。写真セクションは上は直線、下はグラデーションで黒へ溶かす
• ボタンは角丸なしの矩形で、細い枠線をつける
• 見出しは左右の細い水平線で挟む
• 装飾的な曲線やアイコンは使わない

Components

• 枠線ナビボタン（nav-outline-button）: 予告編・劇場情報・公式SNSへの導線を3つ横に並べる。黒地に鋼青の枠線と文字
• 前売券購入ウィジェット（ticket-widget）: 黒い枠の中に、価格・枚数の選択欄・合計金額・赤い購入ボタン・グレーのサブボタンを縦に並べる
• 販売サービスの購入バナー（button-primary）: 全幅に近い矩形のバナーボタンを白・緑・赤の3色で縦に積む
• 線つき英字見出し（section-title-lined）: 白の英字大文字の下に小さな日本語を添え、左右に細いグレーの線を引く
• ニュースカード（news-card）: 赤い細枠で囲んだ写真に赤い帯のタイトルを重ね、下に赤の日付とグレーの本文を置く
• 一覧へのゴーストボタン（button-ghost）: 鋼青の1px枠と小さな鋼青の文字で作る横長のボタン
• 作品タイトルのまとまり（title-lockup）: 監督名の小見出し、和文タイトル、英字タイトル、朱赤の公開日を中央に積む
• 鋼青フッター（footer-bar）: 規約リンク、ロゴ、コピーライトを白の小さな文字で中央に縦に並べる

Do's and Don'ts

Do - 写真は暗く、コントラストを強くし、光源を一点に絞る - 朱赤は公開日と巨大コピーなど 1 画面に 1 か所だけ使う - 出演者名はキービジュアル上部に小さく横一列で並べる - 英字見出しは字間を広く取り、日本語の読みを添える - 黒地を広く残し、要素を詰め込みすぎない

Don't - 白や明るい地のセクションを挟まない - 角丸やピル型のボタン、ドロップシャドウを使わない - 原色の青や緑を作品側の装飾に使わない - ポップな手書き文字やイラストを入れない - 巨大コピーを人物の顔に重ねない

Page Structure

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

1. ファーストビュー（作品の世界観とタイトル・公開日を一瞬で伝える）: 全幅の縦長キービジュアル。上に出演者名、下にタイトル、英字タイトル、朱赤の日付を置く
2. ナビゲーション（予告編・劇場・SNSへ誘導する）: 鋼青の枠線ボタンを3つ横に並べる
3. 前売券購入（チケット購入につなげる）: 埋め込みの購入ウィジェットの下に、販売サービスのバナーボタンを3つ縦に積む
4. ニュース（最新情報を伝える）: 線つき英字見出しの下に画像カードのスライダーを置き、最後に一覧へのゴーストボタン
5. イントロダクション（物語の魅力を情緒的に訴える）: 全幅の場面写真に朱赤の巨大明朝コピーを重ね、黒へフェードした下に明朝の見出しと白い太字の本文を置く
6. タイトル再掲（作品名と公開日を記憶に残す）: 黒地の中央に鋼青のタイトルと朱赤の日付を置く
7. フッター（規約と権利表記）: 鋼青の面に白の小さな文字を中央に並べる

Imagery

• 炎・火の粉・煙の中に人物や巨大な造形物を置いた、低い位置から見上げる構図
• 全体を暗く、ティール寄りにグレーディングし、オレンジの光をアクセントにする
• 場面写真は寒色で彩度を落とし、霧がかった遠景を入れる
• 写真の下端は黒へのグラデーションでつなぎ、上に文字を載せる
• イラストやアイコンは使わず、写真と文字だけで構成する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルを横長にし、人物を右、タイトルのまとまりとナビを左に置く
• PC の購入ウィジェットは横長にし、購入バナーは3つを横一列に並べる
• PC のニュースはカードを3枚横に並べるスライダーにする
• PC のイントロダクションは本文を中央揃えにし、巨大コピーを画面右側に大きく置く
• PC は右上に MENU ボタンを固定し、フッターは横一行の帯にまとめる

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 行書くと起動時に読み込まれる。