DESIGN.md — 黄×黒の太明朝で組む邦画公式サイト LP（Yellow and Black Bold Mincho Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、レトロ、情報量多め・訴求型
• キーワード: 黄×黒の強いコントラスト・太明朝の縦組み・昭和の手配書風・場面写真の帯・情報テーブル
• 地の質感: 黒地に薄い擦れ・煙のテクスチャ。劇場情報は白い大理石・紙のようなムラのある地。
• 形: 角丸なしの直線基調。写真は白い太枠付きの正方形。地域タブだけピル型。
• 温度感: 黄色が熱く、黒と灰色が冷たく引き締める。全体に硬派で骨太。

Colors

• 地色は黄→黒→灰白→黄→黒→灰白の順に、セクションごとに大きく切り替える。
• 黄色地の文字は黒だけにし、他の色は加えない。
• 黒地の大見出しは白を基本に、キーワード1行だけ黄色にする。
• 上映館テーブルは見出し行を黄色、本文行を白と生成りの交互にする。
• ラベルやタブは黒地に白か黄の文字にする。
• 写真の色はそのまま使い、UI に中間色は増やさない。

Typography

• 和文はすべて明朝体で統一し、ゴシックは使わない。
• タイトルとコピーは縦組みにして、昭和の映画ポスターのような雰囲気を出す。
• 大見出しは極太の明朝で、1行を短く区切る。
• 本文は小さめの明朝で、行間 1.8 で読みやすくする。
• 人物名の後ろには、読み仮名を小さく括弧書きで添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。登場人物は 2 列のグリッド（主演だけ 1 列で中央）。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算）
• セクション見出しは小さめの明朝で中央に置き、上下に余白をとる。
• 場面写真の帯は画面幅いっぱいに置き、余白なしで並べる。
• 本文ブロックは左揃えにし、左右に 5% の余白をとる。
• コメントは引用ごとに右寄せの署名と短い横線で区切る。
• 上映館の表は地域・劇場・公開日・備考の 4 列にする。

Elevation & Depth

• 影はほぼ使わず、平面のまま色面で区切る。
• 人物写真は白い太枠（4px 程度）で浮いて見せる。
• 劇場情報は、テクスチャ地の上に白パネルを重ねて一段上げる。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 人物は正方形に白枠付きで切り抜く。場面写真は横長の矩形で、全幅に並べる。
• セクション境界: 直線で色面を切り替える。斜めや波形の区切りは使わない。
• カード・表・写真は角丸なしにする。
• ピル型は地域タブと SNS ボタンだけに限る。
• 装飾線は細い黒の直線だけにする。

Components

• 縦組みタイトル付きキービジュアル（hero-vertical-title）: 黄色地に人物写真を右に配置し、極太明朝の縦組みタイトルと公開日、出演者名の羅列、字間の広い英字タイトルを重ねる。
• 黒地の導入大見出し（dark-lead-heading）: テクスチャの黒地に白の極太明朝を3行で置き、中央の1行だけ黄色にする。
• 人物カード（cast-card）: 白枠の正方形写真の下に黒帯の役名ラベルを付け、その下に太字の名前と読み仮名を置く。
• 役名ラベル（role-label）: 小さな黒い帯に白文字で役名を入れ、写真と名前の間に置く。
• コメント引用（comment-block）: 黒地に白の本文を数行置き、右寄せの太字で署名と肩書きを添え、短い横線で区切る。
• 地域タブ（region-tab）: 黒いピル型のボタンに黄色の文字を入れ、横並びで折り返す。
• 上映館テーブル（theater-table）: 黄色の見出し行の下に、白と生成りを交互にした行を並べる。行は細い線で区切り、劇場名には下線を付ける。
• SNS シェアボタン列（share-buttons）: 丸い黒アイコンと、各 SNS 色の小さなピルを中央に並べる。

Do's and Don'ts

Do - 黄色と黒の面を、セクション単位で大きく交互に使う。 - 見出しも本文も明朝体で統一する。 - 人物写真は同じサイズの正方形に揃え、白枠を付ける。 - 場面写真は全幅の帯にして、物語の空気を差し込む。 - 情報量の多い一覧は、表組みで整理する。

Don't - 角丸カードや柔らかいパステル色は使わない。 - ゴシック体の大見出しは使わない。 - 黄色地に黄色系や灰色の文字を載せない。 - 影やグラデーションのボタンで装飾しすぎない。 - 写真をイラストや丸型の切り抜きに置き換えない。

Page Structure

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

1. ファーストビュー（作品名・公開日・出演者を一目で伝える）: 黄色地に右側の人物写真、縦組みの極太タイトル、受賞バッジ、出演者名の羅列を置く。
2. SNS 埋め込み・作品データ（最新情報とクレジットを示す）: 黒地に SNS の埋め込み枠と、小さな黄色文字のクレジット一覧を並べる。
3. 場面写真の帯（作品の世界観を見せる）: モノクロ寄りの写真と手配書風の画像を、全幅に並べる。
4. 作品の導入（テーマと背景を語る）: テクスチャの黒地に、3行の大見出しと長文の白い本文、人物の切り抜き写真を置く。
5. あらすじ（物語の概要を伝える）: 全幅のカラー場面写真の下に、白地で中央の見出しと本文を置き、さらに写真の帯を続ける。
6. スタッフ（制作陣の経歴を紹介する）: 黄色地に、役職・太字の名前・プロフィール文を縦に積む。
7. 登場人物（キャストと役柄を紹介する）: 濃い黄色地に主演を1人大きく置き、その下に3列（SP では2列）の人物カードを並べる。
8. コメント（著名人の推薦で信頼を補強する）: 黒地に引用文と右寄せの署名を、横線で区切って縦に並べる。
9. 劇場情報（上映館を探せるようにする）: 灰白のテクスチャ地に白パネルを置き、地域タブと地方別の表を並べる。
10. フッター（作品名の再提示と共有を促す）: 黒地にタイトルロゴと SNS ボタン、右端にモノクロの人物写真を置く。

Imagery

• 人物は眼鏡やうつむき気味の表情を、ややローキーで撮った実写にする。
• 場面写真は昭和の街・新聞・薄暗い室内などのモノクロ・低彩度を基調にし、カラーは温かい室内灯の場面に絞る。
• 手配書や古い掲示物風の画像を差し込み、時代感を出す。
• 黒地には、煙や擦れのような粗いテクスチャを敷く。
• 劇場情報の地は、白い大理石や紙のムラのある質感にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文幅を約 70% に絞って中央に置くため、SP では 90% に広げる。
• 登場人物は PC の 3 列から 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 行書くと起動時に読み込まれる。