DESIGN.md — 漆黒×マゼンタ×金の明朝体映画 LP（Noir Mincho Cinema Thriller LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、力強い・インパクト
• キーワード: 漆黒・明朝体・マゼンタ差し色・金の飾り罫・シネマティック・静謐な緊張感
• 地の質感: ほぼ単色の黒い面に、ローキーな写真をそのまま置く。光沢や柄はなし
• 形: 直線と矩形が中心。角丸はほぼなし。細い二重罫の額縁で囲む
• 温度感: 冷たく張りつめた印象。くすんだ金とベージュで少しだけ温かみを足す

Colors

• 地はほぼ純黒。終盤のスタッフ紹介だけベージュ地に切り替えて変化をつける
• マゼンタは CTA ボタンとタイトル周りの英字装飾だけに使う
• セクション見出しの下の飾り罫と額縁はくすんだ金で描く
• 本文は白より少し温かいオフホワイトにする
• リード見出しは金色にして本文の白と分ける
• フッターは黒より少し明るい炭色にする

Typography

• 和文はすべて明朝体で統一し、ゴシック体は使わない
• セクション見出しは英字の大文字セリフを中央に置き、下に飾り罫を添える
• FV のコピーは縦書きで、画面の上端に並べる
• 本文は行間 2.0 前後、字間は少し広めにする
• キャスト名は和文名の下に英字名を muted 色で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ギャラリーは大小 2 枚組の交互配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しは中央揃え、本文は左揃えにする
• 写真ギャラリーは幅違いの 2 枚を左右で入れ替えながら積む
• キャスト一覧は二重罫の額縁の中に、縦長ポートレートを 1 人ずつ並べる
• メイン写真は画面幅いっぱいに置いてセクションを区切る
• CTA ボタンは横幅 80% ほどで縦に並べる

Elevation & Depth

• 影は使わず、フラットに見せる
• 奥行きは黒地とローキー写真の明暗差だけで出す
• 額縁は細い金の二重線で浮かせて見せる

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。ポートレートは縦長 3:4 で細い枠線を付ける
• セクション境界: 直線で地色を切り替える。全幅写真を区切りに挟む
• ボタンも写真も角はほぼ直角にする
• 丸はシェアアイコンとニュースの矢印だけに使う
• 飾り罫は点線と唐草模様を組み合わせた細いものにする

Components

• マゼンタ CTA ボタン（button-primary）: 英字と和文の 2 段ラベルを載せた矩形ボタン
• 線ボタン（button-outline）: 黒地に白の細い枠線を引き、小さな英字で詳細を開くボタン
• 英字見出し＋飾り罫（section-heading）: 大文字セリフの英字の下に、点線と唐草の金の罫を中央に置く
• 二重罫の額縁（frame-box）: キャストを金の細い二重線で囲む枠
• 販売バナー群（banner-stack）: 白地や画像のバナーを縦に積む。前売券や購入先への導線
• ニュース行（news-row）: 日付と見出しを左に、マゼンタの丸矢印を右に置き、下に区切り線を引く
• スタッフカード（staff-card）: ベージュ地の上に黒いカードを置き、写真・帯ラベル・略歴を縦に並べる
• 帯ラベル（name-label）: 役職と名前を載せたベージュの帯
• シェアアイコン（share-icons）: 白い丸に黒の SNS アイコンを 3 つ並べる

Do's and Don'ts

Do - 地は黒で通し、終盤だけベージュに切り替える - 和文は明朝体、見出しは英字のセリフ体にする - マゼンタはボタンとタイトル装飾だけに絞る - 写真はローキーで彩度を抑えたものを大きく使う - 余白を広めに取って静かに見せる

Don't - ゴシック体や丸ゴシックを使わない - 角丸のピル型ボタンや影を付けない - マゼンタを広い面や本文に使わない - 明るいパステル色やグラデーション背景を入れない - 見出しを太字ゴシックで大きく主張させない

Page Structure

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

1. ファーストビュー（作品の世界観と公開日を伝える）: 全幅のキービジュアル。縦書きコピー、マゼンタの大きな英字、白い明朝タイトルを重ねる
2. クレジット・CTA（公式 SNS と劇場情報へ誘導する）: 小さなクレジットの下に、マゼンタの矩形ボタンを縦に 2 つ並べる
3. 販売バナー（前売券やグッズの購入へ導く）: 幅 80% のバナーを 4 枚、縦に積む
4. ニュース（最新情報を知らせる）: 英字見出しと一覧へのリンク、日付付きの行、区切り線
5. 予告動画（映像で興味を引く）: 埋め込み動画の下に、マゼンタの小さなキャプションを添える
6. イントロダクション（作品の見どころを伝える）: 全幅写真、英字見出しと飾り罫、金色の中央揃えリード、左揃えの長い本文
7. 場面写真ギャラリー（作品の雰囲気を見せる）: 大小の写真を 2 枚組で交互に積む
8. ストーリー（あらすじを紹介する）: 英字見出しと飾り罫の下に、明朝体の本文を置く
9. キャスト（出演者を紹介する）: 二重罫の額縁の中に、縦長ポートレート・和英の名前・線ボタンを順に並べる
10. スタッフ（監督の経歴を紹介する）: ベージュ地の上に黒カードを置き、写真・帯ラベル・略歴を並べる
11. フッター・シェア（権利表記と拡散導線）: 炭色の地に極小のクレジットを置き、英字見出しと白丸の SNS アイコンを並べる

Imagery

• 写真は暗めの室内照明で撮った、低彩度・ローキーのシネマティックなスチル
• 人物は緊張した表情を寄りで撮り、背景は暗く落とす
• ポートレートは紫がかった暗い背景で、正面から撮った顔のアップ
• 装飾は細い金の唐草飾り罫と二重額縁だけにする
• イラストやアイコン装飾は使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はグローバルナビの英字メニューを上端の中央に置く
• PC のキャストは額縁の中で 4 列横並びにし、背景に暗い場面写真を敷く
• PC の販売バナーは 4 枚を横 1 列に並べる
• PC のギャラリーは 3 列のモザイクにする
• PC のスタッフカードは写真左・本文右の 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 行書くと起動時に読み込まれる。