DESIGN.md — 赤×黒の斜め分割で見せる映画公式 LP（Red and Black Diagonal Cinema Thriller LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、レトロ
• キーワード: 赤黒の斜め分割・不条理スリラー・セリフ欧文・極太明朝・ジグザグ柄・フィルム質感
• 地の質感: 黒地に細いジグザグ線の柄、赤地に縦ストライプ柄を重ね、フィルムのようなざらつきを出す
• 形: 四角いブロックと斜めの境界が中心。人物写真だけ正円に切り抜く
• 温度感: 朱赤の熱さと黒の冷たさがせめぎ合う、高コントラストで不穏な空気

Colors

• 地は黒が基本。朱赤の面はファーストビュー、ニュース、主役の帯、レビューの節目にだけ使う
• 赤と黒の切り替えは水平線にせず、斜めの対角線で分ける
• 人名やセクションの欧文サブ見出しは朱赤の文字にする
• レビューの媒体名など引用元の強調は山吹色に限る
• 本文は黒地に白か薄い灰色。純白の面は小さなボタンやバナーに限る
• 青や緑など寒色の差し色は使わない。写真の色味だけに任せる

Typography

• 見出しは欧文セリフの大文字を置き、下に小さな和文の訳を添える二段組にする
• 煽りコピーは極太の明朝で、帯の中に中央揃えで置く
• 本文はゴシックで行間を 2.0 前後と広く取る
• 人名は和文ゴシックの赤、その下に欧文セリフを小さく添える
• 背景に作品の欧文タイトルを巨大な灰色の文字として薄く敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。場面写真は 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文ブロックは左右に約 9% の余白を取る
• セクション名は常に中央揃えにする
• テキストのセクションの間に、幅いっぱいの場面写真グリッドを挟む
• 人物紹介は丸い写真、役名、人名、本文の順に縦に積む
• レビューは同じ幅の横長カードを縦に並べる

Elevation & Depth

• 基本はフラットにし、影は使わない
• レビューカードには黒い柔らかな影を薄く落とす
• 奥行きは影ではなく、柄の地と写真の重なりで出す

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は灰色の太い枠で囲んだ正円。場面写真は角を丸めない矩形で、隙間なく並べる
• セクション境界: 赤と黒を斜めの対角線で分割するか、直線で切り替える
• ボタンとバナーは角丸にしない四角にする
• 角丸は音楽プレイヤーのような埋め込みカードだけに使う
• キャッチ見出しは白い縁取りの付いた赤黒の斜めバナーにする

Components

• 斜め分割のファーストビュー（diagonal-split-hero）: 朱赤と黒を対角に分けた地に人物写真を置き、極太明朝のタイトルと受賞の月桂冠バッジを重ねる
• 斜めのキャッチバナー（slanted-banner）: 白い枠付きの帯で、左が赤・右が黒。中央に白い明朝の短い見出しを置く
• MORE ボタン（button-more）: 白地に黒い二重の線で囲み、中央に欧文セリフを字間広めで入れる
• 欧文セクション見出し（section-title）: 灰色か赤の欧文セリフの大文字に、和文の小さなラベルを添える。背後に巨大なすかし文字を敷く
• 赤帯の煽りコピー（red-copy-band）: 幅いっぱいの朱赤の帯に、2 段の明朝コピーを置く。上の段は黄色寄り、下の段は白
• 丸い人物プロフィール（profile-circle）: 灰色の枠付きの正円写真の下に、役名、赤い人名、欧文名、本文を並べる
• レビューカード（review-card）: 黒い縦ストライプの矩形に、白い短い評言と山吹色の媒体名を置く
• ニュースカード（news-card）: 白枠付きのサムネイルの下に、太字の日付と見出しを置く。2 列で並べる

Do's and Don'ts

Do - 赤と黒の斜めの対角分割を、ページの冒頭と節目で繰り返す - 黒地にはジグザグの線の柄を、赤地には縦ストライプを敷き、質感を出す - 見出しは欧文セリフと和文の小さなラベルをセットにする - 場面写真のグリッドで、テキストのセクションを区切る - 人物写真は正円にし、灰色の枠で統一する

Don't - パステルや明るい白い地のセクションを作らない - ボタンをピル型や丸みのある可愛い形にしない - 丸ゴシックや手書きの書体を使わない - 赤を細かいアイコンなどに多用して散らかさない - 写真を角丸のカードに入れない

Page Structure

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

1. ファーストビュー（作品の世界観と公開情報を一瞬で伝える）: 赤黒の斜め分割の上に人物 2 人を並べ、受賞の月桂冠、公開日、極太の明朝タイトルを重ねる
2. キャッチバナーと音楽埋め込み（評判の高さを示し、サウンドトラックへ誘導する）: 斜めのバナーの下に、深紅で角丸の音楽プレイヤーカードを置く
3. 特典告知とニュース（最新情報と購入特典を知らせる）: 斜め分割の地に横長のバナー、2 列のニュースカード、MORE ボタンを並べる
4. 作品紹介（あらすじとテーマを伝える）: 顔のアップ写真から黒地へ移る。巨大なすかしタイトルと欧文見出しを置き、白い本文を続ける
5. 訴求コピー帯（主演と作品の核となる問いを強調する）: 赤い見出しのあとに、朱赤の帯の明朝 2 段コピーを置き、黒地の解説文へ続ける
6. 場面写真ギャラリー（映像の雰囲気を見せ、区切りにする）: 2 列のグリッドで写真を隙間なく並べる
7. キャスト（出演者を紹介する）: ジグザグ柄の黒地に、丸い写真と赤い人名、プロフィールを縦に並べる
8. 監督（作り手の経歴を示す）: 無地の黒地に、キャストと同じ丸い写真のプロフィール形式で置く
9. レビュー（海外メディアの評価で信頼を示す）: 朱赤のストライプ地に、黒いストライプのカードで評言と山吹色の媒体名を並べる
10. フッター（タイトルロゴで締める）: 黒地の中央に、赤い欧文ロゴと白い明朝タイトルを置く

Imagery

• 人物は無表情か不安げな顔を、正面から捉えたアップにする
• 暖色の照明と粗い粒子の、16mm フィルムのような色味にする
• 場面写真は赤や橙の照明やネオンを含むカットを選ぶ
• 受賞歴は灰色の月桂冠のモチーフで示す
• 背景は黒地に灰色の細いジグザグ線、赤地に暗い縦線を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは横長のキービジュアルにし、キャッチを左、音楽プレイヤーを右に浮かせる
• PC のニュースは 3 列に広げる
• PC のキャストは 2 列に並べ、丸い写真を小さくする
• PC のレビューは 3 列×2 段のカードにする
• PC の場面写真は横 1 列に 4〜5 枚並べる
• 本文は 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 行書くと起動時に読み込まれる。