DESIGN.md — 黄×黒の駅サイン風 映画公式 LP（Subway Signage Yellow Thriller Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 駅サイン・黄と黒・矢印・白タイル・無機質・ループ
• 地の質感: フラットなベタ塗りに、白タイル目地や蛍光灯の地下通路写真を重ねる。光沢やグラデーションは使わない。
• 形: 角丸なしの矩形が基本。太い矢印やシェブロンを大きく置いて斜めの動きを出す。
• 温度感: 黄色は明るいが、グレーと黒で冷たく無機質。不穏で緊張感がある。

Colors

• 地は黄・グレー・白タイルの 3 種をセクションごとに切り替える。
• 文字は黒が基本。黒地には白か黄を載せる。
• 強調語は黒ベタに白抜きの文字にする。
• 黄の上に色を足さない。アクセントは黒だけで作る。
• 写真セクションは寒色の低彩度グレーでまとめる。

Typography

• サインや告知は極太ゴシックで、駅の表示のように組む。
• 情緒的なキャッチと人名は明朝にして、サインとの対比をつける。
• 和文の見出しの上に英字の大文字ラベルを添える。
• 数字は大きく扱い、右向きの矢印と組み合わせる。
• 本文は行間 2.0 でゆったりと読ませる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。告知は 2 列、出口ナビは 3×3
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 20px を確保する。
• セクションの境目は地色の切り替えだけで示す。
• キャストは写真・色面・名前を非対称に重ねたブロックにする。
• スタッフは写真の右に肩書きと名前を置き、その下に本文を流す。
• 出口ナビは正方形の黄パネルを 3 列で均等に並べる。

Elevation & Depth

• 影は使わない。完全にフラットにする。
• 立体感は黒帯と色面の重なりで作る。
• パネルには細いグレーの枠線を付けることがある。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形のまま切り抜き、色面と重ねる
• セクション境界: 直線で切り替える。巨大な矢印やシェブロンを境目にまたがせる
• 角丸は SNS アイコンの枠以外では使わない。
• 矢印は太い線で作り、先端は直角にする。
• ボタンはグレーの細い縁取りがある矩形にする。

Components

• 告知ボタン（notice-button）: 黒地に黄の太字を載せた上段と、黄地の下段に日付や開催情報を分けた矩形ボタン。2 列で並べる。
• 黒帯バナー（black-banner）: 横幅いっぱいの黒帯に、黄の極太文字と記号を置く。
• 出口サイン（exit-sign）: 黄地に上向きの矢印と、大きな数字・小さな英字を組んだ駅サイン風のナビ。
• 案内板（info-board）: 黒いヘッダーの下にグレーのパネルを置き、和文のルールと英訳を交互に並べる。
• 白抜き強調（highlight-word）: 見出しの中の 1 語を黒ベタで囲み、白文字にする。
• 出口番号タイル（exit-tile）: 正方形の黄パネル。左上に小ラベル、右上に英単語、下部に大きな数字と右向きの矢印を置く。
• キャストブロック（cast-block）: 写真・黄か黒の色面・明朝の役名・大きな英字の名前を、非対称に重ねて組む。
• 流れるテロップ（marquee）: 電光掲示板風のドット書体を、黄文字で横に流す帯。

Do's and Don'ts

Do - 黄・黒・グレーの 3 色で構成する。 - 矢印と番号でページを回遊させる。 - 白タイルの目地や蛍光灯の通路写真で、地下空間らしさを出す。 - 見出しは英字ラベルと和文の 2 段で組む。 - 角は全部直角にする。

Don't - 角丸やドロップシャドウは使わない。 - 黄色以外の鮮やかな色を足さない。 - グラデーションで華やかにしない。 - やわらかい手書き書体は使わない。 - 暖色系の写真は使わない。

Page Structure

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

1. ファーストビュー（作品の世界観と公開状況を伝える）: 地下通路の写真の上に、黄色の巨大ロゴ・受賞バッジ・SNS アイコン・上映中コピーを置く。
2. テロップ帯（仕掛けへの誘導）: 電光ドット書体のテキストを横に流す。
3. クレジット・告知（出演者と最新情報を案内する）: 黄地に出演者名とクレジットを置き、黒ヘッダー付きの告知ボタンを 2 列で並べる。
4. シェア・出口ナビ（拡散と回遊）: 黒帯、SHARE のアイコン列、出口サイン風ボタンの順に並べる。
5. ルール案内（世界観のルールを示す）: 白タイル面の上に、案内板パネルを中央に置く。
6. 映像（予告編への導線）: 通路写真の上に動画サムネイルを置き、黄色い丸矢印の再生ボタンを付ける。
7. イントロダクション（あらすじと話題性を伝える）: 黄地に巨大なシェブロンを置き、明朝の見出しと長文の本文を組む。
8. キャスト（出演者を紹介する）: グレー地に非対称のキャストブロックを縦に積み、末尾に矢印を置く。
9. スタッフ（制作陣を紹介する）: グレー地に、写真・肩書き・明朝の名前・本文の順で人物ごとに並べる。
10. プロダクションノート（読み物コンテンツへの導線）: 通路写真を背景にリード文を置き、0〜8 の出口タイルを 3×3 で並べる。
11. フッター（規約とコピーライト）: 黄地に小さな黒文字を中央揃えで置く。

Imagery

• 蛍光灯が並ぶ白タイルの地下通路を、一点透視で寒色・低彩度に撮る。
• 人物は無表情か不穏な表情で、白壁やタイルの前に立たせる。
• 白タイルの目地はベクターの格子パターンで描く。
• 太い黒や黄色の矢印・シェブロンをグラフィックとして大きく置く。
• 駅サイン風のピクトや番号表示を装飾に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では告知ボタンと受賞バッジを FV の下部に 1 列で並べる。
• PC のキャストは横並びにし、横スクロール風に見せる。
• PC のスタッフは 3 人を 3 カラムに並べる。
• PC のプロダクションノートは、左にリード文、右に 3×3 タイルを置く 2 カラムにする。
• 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 行書くと起動時に読み込まれる。