DESIGN.md — 黒×金のカジノ風 映画公式サイト LP（Black and Gold Casino Movie Promo LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、情報量多め・訴求型
• キーワード: 黒×金・札束テクスチャ・カジノ・極太英字見出し・斜め帯タイポ・映画告知
• 地の質感: モノクロ札束写真を暗く敷いた背景、金属的な金グラデーション
• 形: 角丸なしの直線的な矩形、斜めに走る金帯、金の細枠
• 温度感: 暗く重厚で熱気のある高揚感

Colors

• 地は黒と札束モノクロ写真の濃グレーのみ。彩度のある色は使わない
• 強調はすべて金。見出し・人名・リードは金グラデ文字
• 英字の大見出しは白で、金の中に白を立たせる
• 本文は白か薄グレーで、暗い地の上でのみ使う
• 装飾帯は暗い金と黒の 2 色で斜めに重ねる
• diagonal-band は文字 #050505 × 背景 #7F715A のコントラスト比が 4.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#83755D、4.53:1）を使う。

Typography

• 英字見出しは極太コンデンス体の大文字で中央揃え
• 日本語の強調はイタリック気味の極太ゴシックに金グラデ
• 本文は左揃え、行間 1.8 で詰め気味に長文を流す
• 人名は金で大きく、役名は【】で括り同じ行に並べる
• 装飾英字は帯の中で画面からはみ出すサイズで配置
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、キャストは 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは英字見出し→金リード→本文の順
• 背景写真はセクション全幅、本文は中央の狭い幅に
• キャストは縦長カードを隙間なく並べる
• 長文はボックス化せず地に直接置く

Elevation & Depth

• 影は使わず、明暗のコントラストで階層を作る
• 写真背景に黒の半透明を重ねて文字を読ませる
• 金の細枠で囲み面を浮かせる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は縦長矩形で切り抜き、下部に金プレートを重ねる
• セクション境界: 斜めに傾けた金の英字帯でセクションを区切る
• 角はすべて直角
• 斜め要素は約 -8〜-10 度で統一
• 丸は再生ボタンとアイコンのみ

Components

• 英字セクション見出し（section-title-en）: 白の極太コンデンス大文字を中央に配置
• 金リードコピー（gold-lead）: 金グラデの極太日本語を中央揃えで3行程度
• 斜め英字帯（diagonal-band）: 暗い金の帯に黒の巨大英字を斜めに流す区切り
• キャストカード（cast-card）: 縦長人物写真の下に金プレートで役名・俳優名、右下にトランプ柄の＋アイコン
• 予告動画（video-player）: 黒地に16:9動画、中央に金の円形再生ボタン
• 金枠コメントボックス（gold-frame-box）: 金の細線で囲んだ暗い面に金の人名見出しと本文
• コメントブロック（comment-block）: 金の人名【役名】見出し＋白の長文を縦に連ねる
• 公開日バッジ（release-badge）: FV右下の黒金エンブレム風の日付表示

Do's and Don'ts

Do - 地は黒と札束モノクロ写真で統一する - 強調は金グラデ文字だけで行う - 英字見出しは極太コンデンス大文字にする - 斜め金帯でセクションの切り替えを強調する - 人物写真は暗めの照明でコントラストを強くする

Don't - 白や明るい地のセクションを入れない - 赤・青など金以外の強調色を使わない - 角丸やピル型ボタンで柔らかくしない - 細い明朝や手書き書体を見出しに使わない - 背景写真を明るくして本文を読みにくくしない

Page Structure

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

1. ファーストビュー（作品世界と公開日を一目で伝える）: 金装飾の背景にキャスト集合写真、大きなロゴと公開日エンブレム、左に配信バナー
2. キャッチ帯（物語の核を一行で示す）: 黒地に白太字の一行コピー
3. 予告動画（映像で興味を引く）: 黒地に動画、金の再生ボタン
4. 作品紹介（作品の概要を伝える）: 札束背景に英字見出し、金リード、白の長文
5. あらすじ（物語の流れを伝える）: 金グラデの中央揃えテキストを連続配置
6. キャラクター（登場人物を紹介する）: 斜め金帯の上に縦長キャストカードを主要5人横並び、脇役は3列グリッド
7. キャッチ再掲（訴求を再強調）: 斜め英字帯に挟んだ金白のコピー
8. 主題歌（主題歌情報とコメント）: グループ写真、金タイトル、2列クレジット、金枠コメントボックス
9. コメント（キャスト・スタッフの声）: 金の人名見出し＋白本文を縦に多数連ねる
10. フッター（規約リンクと権利表記）: 黒帯に小さな白リンクとコピーライト

Imagery

• 札束やコインをモノクロで敷き詰め、黒を重ねて暗くした背景
• 人物はスーツ姿、暗いスタジオで硬いライティング
• 金の延べ棒・コイン・トランプ柄を装飾に使う
• 金は金属質のグラデーションで光沢を出す
• キャスト写真はグレー背景で胸上の縦長構図
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は英字見出しを 36〜40px に縮小
• キャラクター主要5人は 2〜3 列に折り返す
• 脇役グリッドは 3 列から 2 列へ
• 主題歌の2列クレジットは 1 列に積む
• FV は集合写真を縦に切り出しロゴを下に置く
• 斜め帯は角度を保ち高さだけ縮める

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