DESIGN.md — 生成り×紺×焦げ朱のスリラー映画 LP（Dystopian Thriller Movie Promo LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、上品・高級、情報量多め・訴求型
• キーワード: 映画告知・サバイバル・緊張感・明朝見出し・セクション色替え
• 地の質感: 生成りの地に紙のようなざらつき。写真は彩度を落とした映画調で、朱のセクションには写真を重ねて焼け色に染める
• 形: 角丸はほぼ使わない直角の箱。細い罫線と矩形カードが基本
• 温度感: 上は乾いた温かみのある生成り、中盤は冷たい紺、終盤は熱い焦げ朱へ移る

Colors

• セクションごとに地色を変える。順番は生成り→ベージュ→紺→焦げ朱→黒
• 強調文字は生成り地で深紅、ルール文の要点だけマゼンタにする
• 紺地では役職ラベルにピンク、本文は白を使う
• 焦げ朱地には焦げ茶カードを置き、名前はオレンジにする
• 購入ボタンだけ純赤にし、ほかの要素には使わない
• 写真は彩度を落として地色になじませる

Typography

• 見出しは明朝で格調を出し、本文はゴシックで読みやすくする
• 英字のセクション名はセリフ体で字間を広めにとる
• ルール文は強調語だけ大きく太くし、色も変える
• ストーリーは中央揃えの明朝で短く改行する
• 人物名の下に英名を小さなスモールキャップス風で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、写真帯は横スクロール
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 14px（375px 幅換算）
• セクションの境界に全幅の写真帯を挟む
• カード同士の間隔は約 24px
• 本文ブロックの左右余白は約 26px
• セクション名は中央に置き、上下に大きく余白をとる

Elevation & Depth

• 影は使わず、面の色の差で階層を作る
• コメントカードは半透明の焦げ茶で背景写真を透かす
• コメントカードには細い明るい枠線を付ける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角でトリミング。顔写真は縦長の矩形にする
• セクション境界: 直線。境界に全幅の写真帯を入れる
• 角丸は購入ブロックのごく小さいものだけにする
• ナビは上下の細い罫線で挟むだけにする
• カードは直角で作る

Components

• 購入ボタン（button-primary）: 黒い購入ボックスの中に置く赤い太帯ボタン
• 動画切替タブ（button-dark-tab）: 動画の下に縦に積む黒い帯ボタン
• 罫線ナビ（nav-rule-links）: 上下の罫線で挟んだ英字ラベルとアイコンを 2 つ並べる
• ルール番号ラベル（rule-badge）: 黒地に白の小さな斜体ラベル。強調文の上に置く
• キャストカード（cast-card）: 左上に顔写真、右に名前・英名・赤の役名、下に本文と出演作を置く
• 監督コメント枠（comment-box）: 紺地の上に置く濃紺グレーの箱に長文を入れる
• コメントカード（quote-card）: 焦げ茶地に引用符、明朝の本文、右下にオレンジの名前と肩書きを置く
• 書籍誘導バナー（promo-banner）: 黒地の左に書影、右に明朝 2 行と矢印リンクを置く

Do's and Don'ts

Do - セクションごとに地色をはっきり切り替える - 見出しには明朝と英字セリフ体を組み合わせる - 写真は彩度を落とし、暗部を深く残した映画調にする - 強調色は深紅を主にし、同じ画面で増やしすぎない - 人物情報はカード単位で同じ構成を繰り返す

Don't - 丸ゴシックやポップな角丸ボタンは使わない - ドロップシャドウを強くかけない - パステル色や明るすぎる青は入れない - 購入ボタンの赤をほかの装飾に流用しない - 見出しを横書きゴシックだけで済ませない

Page Structure

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

1. ファーストビュー（作品の世界観と公開日を一目で伝える）: 全幅のポスター。かすれた大きな筆文字、ロゴ、日付、赤のコピーを重ねる
2. ナビ・購入（劇場・公式SNS・前売り購入へ誘導する）: 罫線ナビ、黒い書籍バナー、黒い購入ボックスと赤ボタンを置く
3. 予告動画（予告編を見せる）: 埋め込み動画の下に黒いタブを 3 本積む。下に共有アイコンを並べる
4. イントロダクション（ルールと話題性を伝える）: 生成り地。ルール番号ラベル付きの強調文を 4 行、深紅の明朝大見出しと本文を続ける
5. ストーリー（あらすじを情緒的に伝える）: 中央揃えの明朝で短く改行する。下に群像写真と横スクロールの写真帯を置く
6. キャスト（出演者を紹介する）: ベージュ地にキャストカードを縦に並べる
7. スタッフ（監督・原作者などの実績を伝える）: 紺地。ピンクの役職ラベル、白い名前、監督コメント枠を置き、下端は夜景写真へつなぐ
8. 著名人コメント（第三者の評価で期待感を高める）: 焦げ朱地に写真を重ねる。名前一覧と焦げ茶のコメントカードを縦に積む
9. クレジット（作品の公式情報を記載する）: 黒地にグレーのロゴとクレジットを小さな文字で中央に置く

Imagery

• 曇天や夕暮れ、霧の夜道を彩度を落としたシネマトーンで撮る
• 群衆が並んで歩くワイドな写真を、セクションの境界に帯として使う
• 人物写真は正面寄りのバストアップで、縦長の四角にトリミングする
• キービジュアルにはかすれた筆文字を大きく重ねる
• 焦げ朱のセクションでは写真に色を乗算して焼けた色調にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルを横長にし、筆文字を左右に振り分ける
• キャストカードは PC で 2 カラムにする
• コメントカードも PC で 2 カラムにする
• 購入ボックスは PC で横長にし、左右 2 分割にする
• スタッフの本文は PC で横幅を広げ、1 カラムのまま保つ
• 写真帯は PC では 4〜5 枚を横に並べて見せる

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