DESIGN.md — 漆黒×錆オレンジの洋画サスペンスLP（Dark Rust Thriller Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、レトロ
• キーワード: 漆黒・錆テクスチャ・焼けたオレンジ・明朝の不穏さ・映画ポスター
• 地の質感: 黒の地に、錆・汚れのようなざらついた赤茶テクスチャを敷く。写真は暗く周縁を落とす。
• 形: 角丸なしの直角ボタンと写真。装飾は短い下線と左の縦棒のみ。
• 温度感: 暗く冷たい地に、警告的な暖色オレンジを差す。

Colors

• 地は黒と錆テクスチャの暗赤茶を、セクションごとに交互に切り替える。
• 見出し・役名・コメント者名はすべて錆オレンジに統一する。
• 本文は白。暗い地で白以外の本文色は使わない。
• ゴールドは評価の数値や受賞など権威づけに限定する。
• 情報表だけ白地に黒文字で、可読性を優先する。
• 鮮やかな青・緑などは使わない。
• button-primary は文字 #FFF7E6 × 背景 #FE6901 のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BE4F01、4.57:1）を使う。

Typography

• 見出しは英字大文字セリフ＋直下に短いオレンジ下線を置く。
• 情緒的なキャッチ・引用は明朝。説明文は太ゴシック。
• 本文は字間を広めに取り、行間は2.0前後にする。
• 名前は和名オレンジ＋欧文小さめの2段で表記する。
• コメント者名は右寄せにし、頭にダッシュを付けて大きく出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。キャストのみ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• 見出しは中央揃え。INTRODUCTION・STORYだけ左揃え。
• 本文は左右 16px 余白の左揃え。
• 場面写真は余白なしの 2×2 タイルで帯状に挟む。
• 劇場表は地区ごとに区切り、表の間は 40px 空ける。
• セクション境界は余白とテクスチャ切替のみで表現する。

Elevation & Depth

• 影は使わない。奥行きは暗い写真のビネットで出す。
• 背景写真に黒のグラデーションを重ね、文字を浮かせる。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。人物は横長、監督写真は縦長
• セクション境界: 直線。黒地と錆テクスチャの切替や、写真のフェードで区切る
• ボタン・表・写真はすべて直角にする。
• 線は細い 1px のオレンジ枠か、短い下線だけ。
• 丸・アイコン装飾は使わない。

Components

• 英字見出し＋下線（section-title）: オレンジのセリフ大文字と、幅60px・太さ2pxの下線
• 劇場情報ボタン（button-primary）: オレンジ地の矩形。小さい英字と大きい和文の2段
• 予告切替タブ（tab-trailer）: 再生アイコン付き。選択中はオレンジ、非選択は白地
• 評価スコア（score-badge）: ゴールド枠ラベルの下にゴールドの大数字
• キャストカード（cast-card）: 横長写真の下に、役名(白)・俳優名(オレンジ)・欧文名を中央揃えで3行
• コメント（comment-block）: 明朝の引用文を左揃えにし、右下にダッシュ付きのオレンジ名前と肩書
• 劇場表（theater-table）: 左にオレンジ縦棒の地区見出し。白地の4列表で劇場名に下線リンク
• 問い合わせボタン（button-outline）: 黒地にオレンジ細枠、白文字の矩形

Do's and Don'ts

Do - 黒と錆テクスチャを交互に敷いて、不穏なムードを保つ。 - 見出し・名前の強調はすべて同じ錆オレンジにする。 - 写真は暗く、彩度を落としたシネマ調で使う。 - 英字見出しには必ず短い下線を添える。

Don't - 角丸やピル型のボタンを使わない。 - 白やパステルの地をセクション背景に使わない（表のみ例外）。 - ポップな絵文字・イラストを入れない。 - オレンジ以外の強調色を増やさない。

Page Structure

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

1. ファーストビュー（作品の印象と評判を一瞬で伝える）: ポスター写真を全面に敷く。上部に白の賛辞コピー、かすれ明朝のオレンジタイトル、月桂樹の受賞バッジを置く
2. 評価と公開日（信頼性と公開情報を示す）: 黒地にゴールド枠ラベルと大きなスコア数字。下に明朝オレンジの公開日と劇場名
3. CTAバナー群（劇場情報・前売券・イベントへ誘導する）: 錆テクスチャ地にオレンジボタン、赤のチケットバナー、イベント告知バナー、協賛ロゴを並べる
4. 予告編（映像で関心を高める）: 2つのタブで切り替える動画埋め込み
5. イントロダクション（作品の位置づけを説明する）: 暗い人物写真を背景に、左揃え見出し、かぎ括弧の大キャッチ、白本文
6. ストーリー（あらすじを伝える）: 縦書き灰色キャッチと、周縁を暗く落とした写真の後に白本文
7. キャスト（出演者を紹介する）: 錆テクスチャ地に2列のキャストカード
8. スタッフ（監督の経歴を紹介する）: 縦長写真を中央に置き、役職・名前・長めの経歴本文を続ける
9. 場面写真（世界観を見せる）: 余白なしの 2×2 グリッド
10. レビュー（海外メディアの評価を示す）: 暗い場面写真の上に、白の斜体明朝で短評、ゴールドで媒体名を5件並べる
11. コメント（著名人の推薦を並べる）: 錆テクスチャ地に、引用文と右寄せオレンジ名前を繰り返す
12. 劇場一覧（上映館を探してもらう）: 地区見出しと白い4列表を地区ごとに続ける
13. フッター（クレジットと問い合わせ）: 小さい白のクレジット、大きいタイトルロゴ、オレンジ枠ボタン

Imagery

• 写真は低彩度・暗部を潰したシネマ調。周縁にビネットをかける。
• 背景写真は人物を大きくぼかし、黒グラデーションで文字領域を確保する。
• 錆・汚れ・焼けのような赤茶グランジテクスチャを背景に使う。
• タイトル文字はかすれ・ダメージ加工のあるオレンジ明朝にする。
• 人物写真は自然光の場面スチル。演出しすぎない。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を写真左とタイトル・情報右の横組みにする。
• PC のキャストは 4 列、場面写真は 4 枚横 1 列。
• PC のスタッフは写真左・テキスト右の 2 カラム。
• PC の STORY は縦書きキャッチと写真を左、本文を右に置く。
• PC のCTAボタンは横並び。劇場表は幅いっぱいに広げる。

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