DESIGN.md — 黒×金の重厚な映画公式サイト LP（Gold and Charcoal Cinematic Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、上品・高級
• キーワード: 映画公式・黒×金・欧文セリフ見出し・明朝本文・写真コラージュ・年表
• 地の質感: フラットな炭黒の地。金の面は紙の質感と古い新聞記事の地紋を薄く重ねる
• 形: 角丸なしの直線的な矩形。白い細線の下線と縦の点線で区切る
• 温度感: 暗く重い色調に、暖かい金色をアクセントとして効かせる

Colors

• 地はほぼ炭黒（#1C1C1C）でそろえる。本文ボックスはさらに暗い黒にして、写真の上に重ねる。
• 金はキービジュアル、受賞歴、年表の 3 か所に絞る。
• 暗い地の上の見出しは白、人名や受賞歴は金で書く。
• 赤はチケット購入ボタンにだけ使う。
• 年表は金地に黒い文字と黒い点線で組み、反転した面としてページに変化をつける。
• timeline は文字 #615B50 × 背景 #C5AA3B のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E2D49B、4.53:1）を使う。

Typography

• 英字の見出しは大文字の欧文セリフで、中央にそろえる。
• 日本語のリード文は明朝にして、白い細線の下線を左寄せで引く。
• 本文は明朝で、行間 1.9 前後でゆったり組む。
• キャッチコピーは斜めに段をずらして並べ、番号を小さな筆記風の文字で添える。
• プロフィールは小さいゴシックで詰めて組み、情報量を見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC はキャストを 2 列、スタッフを 3 列で組む）
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは英字の大見出しで始め、その下に細い横線を引く。
• 本文ボックスは写真の端に重ねて、半透明の黒で置く。
• キャストは写真を上、名前と役名、本文を下に置く縦積みカードにする。
• 年表は中央の縦の点線を軸に、左右交互に出来事を置く。
• 区切りの余白は大きめにとり、映画のポスターのような余韻を残す。

Elevation & Depth

• 影はほぼ使わず、フラットに保つ。
• 立体感は写真と黒い面を重ねて出す。
• 動画プレイヤーのブロックだけ、背景写真から浮いて見えるようにする。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。シーン写真はずらして重ねるコラージュにする
• セクション境界: 直線で区切る。金の年表は角丸なしの矩形パネルにする
• 角はシャープに保つ。
• バナーとボタンは細い枠線付きの矩形にする。
• 年表の点は黒い小さな円にする。

Components

• チケット購入ボタン（button-ticket）: 赤地に白文字の矩形ボタン。購入パネルの中に置く
• チケット購入パネル（ticket-panel）: 白い面に料金・枚数を選ぶ欄とボタンを並べる
• 金枠のバナー（banner-outline）: 黒地に金の細い枠を付けた劇場情報のリンク
• 受賞歴のエンブレム（award-badge）: 月桂樹のアイコンと金文字で受賞・ノミネートを示す
• 英字セクション見出し（section-title）: 白い欧文セリフの大文字を中央に置き、下に細い線を引く
• 下線付きのリード文（lead-underline）: 明朝の 1 行に白い細線の下線を引き、3 行を積む
• 黒い本文ボックス（story-box）: 写真の上に重ねる黒い本文枠
• 役職ラベル（role-label）: 金地に黒文字の小さなタグ（監督・脚本など）
• 金地の年表（timeline）: 中央の縦の点線に年号を左右交互に置く

Do's and Don'ts

Do - 地は炭黒にそろえ、金は要所だけに使う。 - 見出しは欧文セリフ、本文は明朝で組む。 - 写真は映画のシーンらしいフィルム調の色味で、大きく見せる。 - 受賞歴は金文字と月桂樹で格調高く見せる。 - 年表のような反転した金の面を 1 か所入れて、リズムを作る。

Don't - パステル調やポップな配色にしない。 - ボタンを丸いピル型にしない。 - 金を広い範囲に多用せず、安っぽく見せない。 - 丸ゴシックやかわいいアイコンを使わない。 - 赤をチケット購入ボタン以外に使わない。

Page Structure

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

1. ファーストビュー（作品のビジュアルと公開日を印象づける）: 金一色のキービジュアル。人物の立像を左、縦書きのコピーを中央に置き、右にタイトル・受賞歴・公開日を並べる
2. チケット導線（前売り券の購入へ誘導する）: 黒地に枠付きバナーを 3 つ並べ、その下に白い購入パネルと赤いボタンを置く
3. 予告動画（予告編を見てもらう）: 暗くした背景写真の上に、動画プレイヤーとタブ切り替えを置く
4. 受賞歴（作品の権威を示す）: 月桂樹と金文字のエンブレムを 2 つ横に並べる
5. イントロダクション（作品の概要を伝える）: 英字の見出しの下に、下線付きのリード文を 3 行置く。本文の黒いボックスとシーン写真のコラージュを組み合わせる
6. キャッチコピーとストーリー（物語の世界観を伝える）: 斜めに段をずらした 3 つのルールのあと、全幅の写真の上に黒い本文ボックスを重ねる
7. 場面写真（映像の雰囲気を伝える）: 横一列に写真を並べたフィルムストリップ
8. キャスト（出演者を紹介する）: 2 列のカード。写真の下に、ダッシュ付きの名前（金）と役名、プロフィールを置く
9. スタッフ（制作陣を紹介する）: 監督は写真付きで大きく見せる。ほかのスタッフは役職ラベル付きのテキストを 3 列で並べる
10. 年表（題材の背景を深く伝える）: 金の紙のような面に、中央の点線の軸で年号と出来事を交互に置く
11. クロージング（余韻を残してクレジットを示す）: 全幅のシーン写真の下に、小さなクレジット表記を置く

Imagery

• 写真は 70〜80 年代風の暖色フィルム調。粒子感とやや低い彩度にする。
• キービジュアルは金一色のモノトーンで、彫像のような立体を中央に据える。
• シーン写真は大小をずらしたコラージュにする。
• 年表の地は古い新聞記事の文字を薄く透かす。
• アイコンは月桂樹と SNS のロゴだけに絞る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像しかないため、SP の数値は PC 画像からの推奨値。
• SP はすべて 1 カラムにする。キャストとスタッフは縦に積む。
• ファーストビューは SP で縦構図にし、ビジュアル→タイトル→公開日の順に積む。
• 本文ボックスは写真に重ねず、写真の下に続けて置く。
• 年表は SP で軸を左端に寄せ、出来事を右側にそろえる。
• チケット購入パネルは SP で全幅にする。

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