DESIGN.md — 黒×蛍光黄緑×臙脂のコラージュ映画 LP（Ransom-Note Collage Punk Movie LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、レトロ、ポップ・元気
• キーワード: 脅迫状風切り抜き文字・破れ紙・コラージュ・蛍光色・ダークファンタジー・映画公式
• 地の質感: ざらついた紙、破れた紙の端、写真の切り抜き、グランジ。
• 形: 角丸なし。ぎざぎざの破れ境界と、ガタついた切り抜き写真の輪郭。
• 温度感: 黒と臙脂の暗い地に、蛍光黄緑と赤をぶつけた熱いトーン。

Colors

• セクションごとに地色を白・黒・臙脂・生成りで大きく切り替える。
• 蛍光黄緑はキービジュアルと予告サムネだけに使う。
• 赤はCTA・日付ラベル・MOREリンクに限定する。
• 役名はマゼンタ帯に白文字、俳優名は黒文字にする。
• 暗い地の本文は白、明るい地の本文は黒にする。
• 見出しの切り抜き文字は多色。ただし彩度は落とした古紙調にする。
• role-label は文字 #FFFFFF × 背景 #E8185A のコントラスト比が 4.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E61759、4.53:1）を使う。
• vertical-catch は文字 #070707 × 背景 #E0101C のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EE111E、4.54:1）を使う。

Typography

• 見出しは英字一語にする。1文字ずつ色と傾きの違う紙片に載せる。
• 役名は文字ごとに区切ったマゼンタ帯に載せる。
• 本文は小さめの太ゴシックで、行間は広く取る。
• 縦書きキャッチは赤帯に黒の極太文字を載せ、斜めに傾ける。
• 欧文ラベルはコンデンス系の太字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。キャストは 2 列グリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算）
• 各セクションは中央の見出しから始める。
• 主要キャストは大きい2枚、脇役は小さめ2列にして階層をつける。
• ニュースは横長の黒カードを縦に積む。
• 予告は横スライダーにして、隣の動画を左右にのぞかせる。
• 背景写真の上に本文を中央寄せの狭い幅で置く。

Elevation & Depth

• 影は使わない。紙を重ねた感じで奥行きを出す。
• 見出しの背後に、くすんだピンクの扉イラストを半透明で敷く。
• 写真セクションには暗いオーバーレイを重ねる。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は手で破ったような不規則な輪郭で切り抜く。
• セクション境界: 破れ紙のぎざぎざ境界で、斜めに傾けて区切る。
• 角丸は使わない。
• セクション境界は直線を避け、破れ紙にする。
• 見出し・ラベルは少し傾けてもよい。

Components

• 切り抜き文字見出し（ransom-heading）: 英字を1文字ずつ色違いの紙片に配置した見出し。
• チケット誘導バナー（ticket-banner）: 赤い帯に白文字と矢印。左端に商品サムネを置く。
• ニュースカード（news-card）: 左にサムネ、右に赤い日付ラベルとタイトルを置く黒い横長カード。
• 役名ラベル（role-label）: 写真下端に重ねる、1文字ずつ区切ったマゼンタの帯文字。
• キャスト写真（cast-photo）: 破れた輪郭で切り抜いた人物写真。下に役名と俳優名を重ねる。
• 縦書き赤帯キャッチ（vertical-catch）: 斜めに傾けた赤帯に、黒い極太の縦書きコピーを載せる。
• MOREリンク（more-link）: 赤い太字の英字と右矢印だけのテキストリンク。
• 予告動画スライダー（trailer-slider）: 中央にサムネと再生ボタン。左右に隣のスライドがはみ出す。

Do's and Don'ts

Do - 見出しは必ず切り抜き文字風にする。 - セクション境界は破れ紙で作る。 - 写真は不規則な輪郭で切り抜く。 - 地色は黒・臙脂・白・生成りの大胆な切り替えで構成する。 - 赤とマゼンタはラベルと誘導に絞る。

Don't - 角丸やピル型ボタンは使わない。 - ドロップシャドウやガラス調の装飾は入れない。 - パステル調や上品なトーンにまとめない。 - 直線の境界や四角いままの写真を並べない。 - 蛍光黄緑を本文の背景に使わない。

Page Structure

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

1. ファーストビュー（作品の世界観と公開日を伝える）: 蛍光黄緑のコラージュキービジュアルに、黒地のロゴ・日付・SNS・チケットバナーを組み合わせる。
2. 予告動画（映像で興味を引く）: 破れ紙で区切った黒い帯に、切り抜き見出しと横スライダーを置く。
3. ニュース（最新情報を伝える）: 白地。扉イラストの上に黒い横長カードを3件積み、赤いMOREリンクを置く。
4. 作品紹介（作品の背景を説明する）: 臙脂の地にモノクロ写真を透かし、白い本文を中央に置く。
5. あらすじ（物語への導入）: 暗い毛並み写真の地に、縦書き赤帯キャッチと白い本文を並べる。
6. キャスト（出演者を紹介する）: 白地に、破れ輪郭の写真と役名ラベルを階層的なグリッドで並べる。
7. ギャラリー（場面写真を見せる）: 破れ紙の生成り帯に、縦長の写真を横に並べる。
8. フッター（シェア導線）: 白地に、赤い小さなSHAREラベルのみを置く。

Imagery

• 人物写真を切り抜いて重ねたコラージュにする。
• 写真の輪郭は破れ紙風にする。
• 場面写真は赤・紫に色かぶりさせた強いトーンにする。
• 背景にモノクロのざらついた写真を暗く敷く。
• 扉などのモチーフを、くすみピンクのイラストで添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは左右2分割（ビジュアル／ロゴ）。SPでは縦に積み、ビジュアルを先に置く。
• PCのキャストは2〜4列。SPでは2列にする。
• ギャラリーはSPで横スクロールにする。
• 縦書きキャッチはSPで本文の上に縮小して置く。
• SPの切り抜き見出しは28〜34pxに抑える。

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