DESIGN.md — 漆黒×深紅の明朝体シネマ映画LP（Dark Cinematic Film Promo LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、クール・先進的
• キーワード: 漆黒・明朝体・深紅のアクセント・場面写真・余白の沈黙・縦書き欧文
• 地の質感: ノイズのない純黒のフラット面。質感は写真のフィルムトーンだけに任せる。
• 形: 角丸なしの矩形。写真は裁ち落としか、左右にずらした長方形。
• 温度感: 冷たく重いダーク。写真の暖色の灯りが温度差をつくる

Colors

• 地は常に純黒。白黒以外の色は写真と深紅のみ。
• 深紅は見出し下の短い下線、ボタン右端の矢印ボックス、アクティブタブだけに使う。
• 本文は純白より少し落としたグレーにする。
• セクション名の縦書き欧文は黒に近い暗いグレーで透かしにする。
• 白い面は最下部の主ボタンだけに限定する。

Typography

• 和文はすべて明朝体で、ゴシックは使わない。
• 欧文見出しは細いセリフ体にして、すぐ下に短い深紅の下線を置く。
• 本文は行間を 2.0 前後と広くとる。
• 大きなコピーは短く改行して 3〜4 行で積む。
• クレジットは小さな中央揃えで詰めて組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。キャスト一覧は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 12px（375px 幅換算）
• 主要キャストは写真と名前を左右交互にずらして並べる。
• 場面写真は全幅で裁ち落とし、セクションの間に挟む。
• 見出しは中央揃え。本文ブロックは左揃え。
• セクション間には黒い余白を大きくとり、間を演出する。
• 縦書きの欧文透かしは右端に寄せて置く。

Elevation & Depth

• 影は使わず、すべてフラットにする。
• 奥行きは写真の明暗と黒地のコントラストで出す。
• ボタンは細い枠線だけで浮かせる。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。全幅で裁ち落とすか、左右に寄せて配置する
• セクション境界: 直線の境界と黒い余白だけで区切る
• 角丸は一切使わない。
• ボタンは細枠の矩形にして、右端に赤い正方形の矢印を付ける。
• 装飾線は 1px の細線と、短い赤の下線に限る。

Components

• 赤矢印付き枠ボタン（button-arrow）: 黒地に灰色の細枠、左に明朝の文字、右端に赤い正方形の矢印
• 下線付き欧文見出し（heading-underline）: 中央揃えのセリフ見出し。下に幅 20px ほどの深紅の線を付ける
• 縦書き欧文透かし（vertical-watermark）: 右端に 90 度回転させた巨大なセクション名を暗いグレーで置く
• 主要キャストブロック（cast-feature）: 大判の顔写真と、名前・赤線・役名・Profile ボタンを横に並べる。左右を交互にする
• キャストカード（cast-card）: 上に写真、下に名前・赤の細線・役名・小さな Profile ボタンを置く
• 予告編切替タブ（tab-movie）: 細枠の矩形タブを並べ、アクティブなものだけ赤で塗る
• ニュース帯（news-ticker）: 赤い小さなラベルと、1 行のお知らせ文
• 白い主ボタン（button-footer）: フッターに置く白い面のボタン。黒文字で、右に矢印

Do's and Don'ts

Do - 地は純黒で統一する。 - 和文は明朝体で統一する。 - 赤は小面積の差し色に限る。 - 写真は大きく見せ、余白で間をとる。 - セクション名は欧文セリフにして、赤い下線を付ける。

Don't - ゴシック体やポップな書体を使わない。 - 角丸・影・グラデーションのボタンを使わない。 - 赤を広い面に塗らない。 - 明るい背景色のセクションを挟まない。 - 写真に装飾フレームやスタンプを付けない。

Page Structure

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

1. ヘッダー（ページ内の各セクションへ移動させる）: 黒地の左にロゴ、右に欧文の小さなメニューとSNSアイコン、赤い劇場情報ボタン
2. ファーストビュー（作品世界を一瞬で伝える）: 全幅の場面写真。下に公開日と劇場を明朝で中央に置き、ニュース帯を添える
3. 作品紹介（作品の背景と制作陣を紹介する）: 中央揃えの小見出し・見出し・本文と、出演者名の羅列。右に縦書き透かし
4. ストーリー（物語の核心へ引き込む）: 左に大きな明朝コピーを短く改行して置き、右にあらすじ本文を置く
5. 場面写真（空気感を視覚で伝える）: 全幅のモノクロ・暖色の場面写真を挟む
6. キャスト（出演者を紹介する）: 主要 4 名は大判写真を交互配置し、その他は 4 列（SP は 2 列）のカードで並べる
7. 監督紹介（作り手の信頼を示す）: 左に写真、右に名前・肩書・経歴本文
8. 予告編（動画で興味を高める）: 全幅の動画埋め込みと、下に切替タブを並べる
9. 劇場情報CTA（鑑賞行動へ導く）: 中央に明朝の見出し、公開日、赤矢印ボタン
10. 壁紙配布（ファンとの接点を作る）: 左に見出しと説明とボタン、右に縦長のビジュアルとダウンロードボタン
11. クレジット・フッター（制作情報を示し、再び行動を促す）: 小さな中央揃えのクレジット、ロゴ、白い主ボタン、SNS の枠ボタン3つ

Imagery

• 映画のスチルのような、粒子感と浅い被写界深度の写真を使う。
• 人物は顔のアップを中心にし、無表情や汗で緊張感を出す。
• 暗い室内と、オレンジの灯りや炎の暖色を組み合わせる。
• 一部の写真はモノクロにして、生活感のある静けさを出す。
• イラストやアイコン装飾は使わない。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の左右 2 カラム（コピーと本文、写真と経歴）は、SP では縦積みにする。
• キャストグリッドは PC の 4 列から SP では 2 列にする。
• 縦書きの透かしは SP では小さくするか、非表示にする。
• ヘッダーメニューは SP ではハンバーガーメニューにまとめる。
• 予告編のタブは SP では 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 行書くと起動時に読み込まれる。