DESIGN.md — 黒×橙×生成りの重厚な映画公式 LP（Dark Cinematic Prestige Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、上品・高級
• キーワード: 漆黒・焼けた橙・生成りの極太見出し・映画的・歴史・重厚
• 地の質感: フラットな黒地。写真のフィルム調の粒子とコントラストで質感を出す
• 形: 角丸なしの長方形。バナー・写真・枠線ボタンはすべて直角
• 温度感: 黒地で冷たく締め、橙と生成りで温かみと緊張感を足す

Colors

• 地は常に純黒。色面は橙バナーと赤茶セクションに限定する
• 大見出しは生成りベージュ、時代背景セクションの見出しのみ橙にする
• 本文は白で、黒地か赤茶地の上だけに置く
• 橙は作品ロゴ・告知バナー・日付など、目を引かせたい所にだけ使う
• 英字のセクション見出しは淡いゴールドで控えめにする
• banner-feature は文字 #FCFAF5 × 背景 #EB6101 のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C25001、4.53:1）を使う。

Typography

• 見出しは超極太ゴシックで行間を詰めて塊に見せる
• 英字の見出しの下に小さな和文ルビを中央揃えで添える
• 本文は小さめの白文字・左揃えで、行間を広く取る
• 数字や賞の回数は小さく縦組みにして見出しの頭に添える
• 装飾は書体の太さと色だけで出す。影や縁取りは使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物一覧は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 80px、基本単位 8px、カード内 8px（375px 幅換算）
• 本文やバナーは左右に約 10% の余白を取る
• 場面写真の帯は画面幅いっぱいに置き、セクションの区切りにする
• 告知バナーは縦に 6px 前後の間隔で並べる
• セクション見出しは中央揃え、本文は左揃えにする
• 人物グリッドは写真どうしの間を 6px 程度にする

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真の明暗と黒地とのコントラストで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形。角丸なしで写真を裁ち落とす
• セクション境界: 直線で区切る。幅いっぱいの写真帯と、色面の切り替えで境界を作る
• すべての要素を直角にする
• 枠線は 1〜2px の細い線にする
• 斜めや波形の区切りは使わない

Components

• サムネ付き告知バナー（banner-feature）: 左 1/4 にサムネか黒面ラベル、右に橙面と白の極太文字を置いた横長の帯
• 橙枠の特集バナー（banner-outline）: 黒地に橙の枠線。上段に字間を広げた英字、下段に和文の見出し
• 英字＋ルビ見出し（section-title）: 淡いゴールドの英字見出しの下に小さな和文を添える。中央揃え
• もっと見るボタン（button-more）: 黒地にグレーの細枠、白い英字を字間広めで置いた横長ボタン
• ニュースカード（news-card）: グレー枠で囲んだ黒サムネに作品ロゴを置き、下に橙の日付と白い太字タイトル
• ランキング実績（ranking-badge）: 左にサービスのロゴ、右に明朝体で「第1位」を大きく。下に調査日の注記
• 場面写真の帯（photo-strip）: 場面写真を横に並べたコラージュを画面幅いっぱいに置き、区切りにする
• スタッフ紹介（staff-block）: 小さなゴールドの役職ラベル、白い太字の氏名、左揃えの経歴本文の 3 段構成

Do's and Don'ts

Do - 地は純黒で通し、色面は橙と赤茶の 2 種に絞る - 大見出しは生成りベージュの超極太で 2〜3 行の塊にする - セクションの間に場面写真の帯を挟み、映画らしいリズムを作る - 告知は同じ形の横長バナーを縦に並べて整理する - モノクロ写真を交ぜて、時代と格調を表す

Don't - 角丸・ピル型・ドロップシャドウを使わない - パステル色や明るい背景のセクションを入れない - 見出しに丸ゴシックや手書き風の書体を使わない - 橙を本文やベタ面に広げすぎない - アイコンやイラストで飾らない

Page Structure

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

1. ファーストビュー（作品の格と公開日を一目で伝える）: 夕焼け色のキービジュアルの上に、受賞実績の極太白文字、縦書きのキャッチ、橙の作品ロゴ、日付を重ねる
2. 告知バナー群（イベントや映像などへ誘導する）: サムネ付きの橙バナーを約 10 本、縦に積む
3. 特集・関連商品（コメントや書籍などへ導く）: 橙枠の特集バナー 1 本と、写真付きの横長バナーを 2 本置く
4. 実績ランキング（評価の高さを数字で示す）: ロゴと明朝体の「第1位」を 2 段に並べ、調査日の注記を添える
5. ニュース（最新情報を見せる）: 英字見出しの下に枠付きカードを 2 列並べ、もっと見るボタンを置く
6. 紹介文（作品の概要と評価を伝える）: 幅いっぱいのモノクロ写真の後に、生成りの超大見出しと白い本文を置く
7. ストーリー（あらすじで興味を深める）: 写真帯の後に、生成りのキャッチ見出しと本文を置く
8. 時代背景（作品の背景を解説する）: 赤茶の地にして、橙の見出しと白い本文を置き、写真帯で締める
9. 登場人物（キャストを一覧で見せる）: 顔写真を 2 列×8 段のグリッドに並べる
10. スタッフ（制作陣の実績を伝える）: 大きな写真の下に、役職・氏名・経歴を中央見出し＋左揃え本文で繰り返す
11. 締めのロゴ（作品名と公開日を印象に残す）: 黒地の中央に、橙の作品ロゴと白い日付を置く

Imagery

• 夕焼けや炎のような橙と茶の空を背景にした、人物ポスター風のキービジュアル
• 粒子感のある高コントラストなモノクロの場面写真
• 温かみのある色調に抑えたカラーの人物クローズアップ
• 撮影現場を写したドキュメンタリー風の写真
• 複数の場面写真を隙間なく並べた横長のコラージュ帯
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は最上部に黒い横並びのグローバルナビを固定する
• PC では告知バナーが 3 枚並びのカルーセルになり、左右に矢印が付く
• PC のニュースは 3 列、登場人物は 4 列にする
• PC の大見出しは 1 行にまとめ、本文の幅を広げる
• PC のスタッフ紹介は、主要な 1 名の下に 3 列のグリッドで並べる

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