DESIGN.md — 黒×深紅の重厚な刑事映画プロモLP（Crimson Noir Crime Film Promo LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 黒と深紅・メタリック縁取り文字・雪景色の灰白・ポスター的ビジュアル・グリッド配置・映画の緊張感
• 地の質感: ザラついたグランジ質感の黒地。放射状の赤い光、雪の粒、新聞活字のコラージュ風背景。
• 形: 角丸なしの長方形が基本。ボタンも四角いタイルで、細い白線で区切る。
• 温度感: 冷たく重い。赤が熱を加えるが、全体は暗く緊迫している。

Colors

• 地は黒を基本とし、作品紹介とあらすじだけ雪景色の灰白地に切り替える。
• 赤は見出し、ボタン、キャストの役名にだけ使う。広い面には使わない。
• FVは黒から深紅への放射状グラデーションに光の筋を重ねる。
• 灰白地の上の見出しは黒か深紅の極太文字にし、白の縁取りか影を付ける。
• 告知バナーは金・黄・白の帯を使い分け、黒地の中で目立たせる。
• 購入導線は緑と赤の2色ボタンを横に並べる。

Typography

• 大見出しは行ごとに左右へずらしたジグザグ配置にし、ポスターのような緩急を付ける。
• 極太見出しには白の縁取りか黒い影を付け、写真の上でも読めるようにする。
• 欧文ラベルは赤い太字セリフで、日本語見出しの右上か左上に重ねる。
• FVのキャッチは白の明朝縦書きで画面の右端に置く。
• 本文は太字ゴシックの詰め組みにし、写真の上でも潰れないよう白い影を付ける。
• キャストは役名を赤の小さい文字、俳優名を白の明朝で大きく、2段で表示する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。キャストは3列、動画切替ボタンは2〜4列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 0px、基本単位 8px、カード内 4px（375px 幅換算）
• セクション間に余白は入れず、背景の切り替えだけで区切る。
• 告知バナーは幅92%で縦に積み、間隔は約12px。
• キャストの主役は幅いっぱいの大きなカード、脇役は3列の小さなカードにする。
• 本文は写真の上に直接重ね、余白を詰めて情報量を見せる。
• 右端にページトップへ戻る赤い四角ボタンを固定する。

Elevation & Depth

• 影はほぼ使わない。フラットな面を重ねて構成する。
• 文字に付ける黒・白のドロップシャドウと縁取りで奥行きを出す。
• 写真の端は黒地へグラデーションで溶け込ませる。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いままトリミングする。人物は顔のアップか上半身で切り抜き、背景に溶け込ませる。
• セクション境界: 直線で区切る。写真の端をグラデーションでぼかしてつなぐ。
• ボタンとカードはすべて角丸0の長方形にする。
• 購入ボタンの中のラベルだけ白い角丸の小さなピルにしてよい。
• キャストカードの下部には黒い名前帯を付け、左端に赤い縦線を入れる。

Components

• チケット購入ボタン（button-purchase）: 緑と赤の2色ボタンを横に並べる。アイコン付きのロゴ文字の下に白いピル型ラベルを置く。
• 告知バナー（banner-announce）: 金・紺・白などの帯に極太文字を載せた横長のバナー。縦に積む。
• 動画切替ボタン（button-video-tab）: 深紅の四角いタイルに白文字。2〜4列で並べ、選択中は明るい赤にする。
• 作品名の見出し帯（heading-bar）: 黒地の上下に細い白線を引き、中央に白文字で作品名を置く。
• 欧文セクションラベル（label-en-section）: 赤い太字セリフ体の英字に白い縁取りを付け、見出しに重ねる。
• キャストカード（card-cast）: 人物写真の下に黒帯を付け、赤の役名と白の明朝の俳優名を2段で入れる。
• ページトップボタン（button-pagetop）: 右端に固定した赤い四角に白い三角を入れる。
• 予告動画枠（video-embed）: 白い細枠で囲んだ16:9の動画。背景は規制線テープ柄の黒地。

Do's and Don'ts

Do - 黒・深紅・灰白の3色を軸にして、色数を抑える。 - 見出しは極太かつ縁取り付きにし、ポスター級の迫力を出す。 - 人物写真は彩度を抑え、硬い表情のものを大きく使う。 - ボタン類はすべて角丸0の四角にし、硬い印象をそろえる。 - 背景にはグランジや雪、活字などの質感を必ず敷く。

Don't - パステル色や明るく柔らかい配色を使わない。 - 角丸やピル型のボタンを主役にしない。 - 広い余白で軽く見せない。情報は詰めて配置する。 - 赤を背景全面にベタ塗りしない（FVのグラデーションだけは例外）。 - 細くて軽い書体を見出しに使わない。

Page Structure

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

1. ファーストビュー（作品の顔と公開情報を伝える）: 黒から深紅への放射状の背景に主人公の顔のアップを置き、メタリックなタイトルロゴを2作分並べる。右端に縦書きの白い明朝コピーを置く。
2. 作品切替バナー（2作品への入口を示す）: 黒地と白地の2分割にタイトルロゴを並べる。
3. 告知バナー群（イベントやキャンペーンを知らせる）: 金・紺・白の横長バナーを縦に3枚積む。
4. 購入・関連リンク（チケット購入とグッズへ誘導する）: 緑と赤の2色購入ボタンを並べ、その下に関連商品のバナーを2列で置く。
5. 予告動画（映像で作品の魅力を見せる）: 規制線テープ柄の黒地に動画を埋め込み、下に作品別の赤い切替ボタンをグリッドで並べる。
6. 作品紹介（シリーズの実績と背景を伝える）: 雪景色の灰白地に極太の黒い大見出しをジグザグに置き、赤の副見出しと人物写真に本文を重ねる。
7. 場面写真（作品の世界観を見せる）: 場面写真を隙間なく並べたモザイク状のグリッド。
8. あらすじ（物語の導入を伝える）: 雪の家屋の写真に本文を重ね、下部に赤い明朝で締めのコピーを置く。
9. キャスト（出演者を紹介する）: グランジ質感の黒地に主役の大きなカードを置き、続けて3列のキャストカードを並べる。
10. エンディングビジュアル（余韻を残して締める）: 灰色の活字コラージュを背景に人物の後ろ姿を置き、赤い極太のコピーとクレジットを重ねる。

Imagery

• 人物写真は硬いライティングと低い彩度で撮り、眉間や目元に寄ったアップを使う。
• 背景には放射状の赤い光の筋、規制線テープ、雪景色を使う。
• 活字コラージュは灰色の太い明朝やゴシックを大小ランダムに敷き詰める。
• タイトルロゴはメタリックな銀や白に赤の縁取りを付けた立体文字にする。
• 場面写真はドラマチックなシーンを切り出し、隙間なく並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを横長にし、顔を中央、縦書きコピーを左、告知バナーを右の縦列に置く。
• PCの購入ボタンと作品ロゴはFVの左下にまとめる。
• PCの動画は幅約85%で中央に置き、切替ボタンは4〜6列に増やす。
• PCの作品紹介は人物写真を左に縦長で置き、右に本文と場面写真を並べる。
• PCのキャストは主役を左に大きく、残りを6列×2段で並べる。

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