DESIGN.md — 漆黒と夜の街灯色のドキュメンタリー映画 LP（Nocturnal Urban Documentary Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、シンプル・ミニマル、クール・先進的
• キーワード: 夜の都市・漆黒・シネマティック・静謐・ネオン差し色・ドキュメンタリー
• 地の質感: フラットな黒地に、粒子感のある映画のスチル写真を全幅で入れる。グラデーションや装飾は使わない
• 形: 角はほぼ直角。ボタンだけを細い線のピル型にする
• 温度感: 冷たい。青緑寄りの夜の色

Colors

• 地はほぼ黒の #09080D 一色で通す。写真以外に面の色は使わない。
• 寄稿者名と短評は、黄緑→橙→紫→青の 4 色を順番に回して使う。
• 見出しと日付は白にする。本文は少し落としたグレーにする。
• 囲み枠と表のヘッダーには、黒より一段明るいチャコールを使う。
• 赤は「上映終了」などの小さな状態表示だけに使う。
• 写真は青緑系の夜景で揃え、ページ全体の色温度を冷たく保つ。

Typography

• セクション見出しは欧文の大文字にし、細いウェイトで字間を 0.2em 以上あける。
• 和文本文は細めにし、行間 2.0 と字間を広めにとって静かに読ませる。
• 公開日の告知だけは太字で大きくし、曜日を丸囲みの小さな文字で添える。
• 人名は差し色の中サイズで組み、その下に小さな肩書きを括弧付きで置く。
• 装飾的な書体は使わず、ゴシックと幾何学的な欧文だけで組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せの狭い 1 カラムで、写真だけを全幅にする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• テキスト部分の左右には大きな余白をとる。PC では本文幅を 50% 程度に絞る。
• セクションの間に全幅の夜景写真を挟んで区切る。
• 見出しは中央揃えにし、本文は左揃えの段落にする。
• 上映館は地域見出しと 4 列の表を、地域ごとに繰り返す。
• コメントは本文→人名→肩書きの順で縦に積み、間を広くあける。

Elevation & Depth

• 影は使わない。奥行きは写真と黒地の明暗差で出す。
• 囲み枠は、チャコールの面と細い線だけで浮かせる。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンはピル型。
• 写真の切り抜き: 全幅の横長写真は 16:9〜2:1 で切る。本文中の写真は角のない矩形、人物写真は縦長の矩形にする
• セクション境界: 直線。全幅写真を区切りに使う
• 写真には角丸を付けない。
• ボタンだけを細い線のピル型にする。
• 囲み枠はほぼ直角の矩形にする。

Components

• 線のピル型ボタン（button-outline-pill）: 透明の地にグレーの細い線を引き、白文字を入れる。予告編や詳細への導線に使う。
• 欧文大文字見出し（section-title-en）: 中央に置く細い欧文の大文字。字間を広くとり、下線などの装飾は付けない。
• 受賞歴の月桂冠（award-laurels）: 白の月桂冠アイコンに映画祭名を入れ、写真の上部に横一列に並べる。
• 色付き短評（review-quote）: 中央揃えの差し色の一文に、白の小さな出典を添える。4 色を順に回す。
• 寄稿コメント（comment-block）: 本文の下に、差し色の人名と括弧付きの肩書きを置く。
• 監督メッセージ枠（message-box）: チャコールの面に細い枠を付ける。中央に小見出しを置き、本文は左揃えにする。
• 上映館の表（theater-table）: 暗いヘッダー帯に 4 列を並べ、行は細線で区切る。劇場名にはリンクの下線を付け、備考の行を添える。
• 予告編サムネイル（trailer-thumb）: キービジュアルの上に、白い円の再生アイコンとラベルを重ねる。

Do's and Don'ts

Do - 地は黒で統一し、セクションの区切りには全幅の夜景写真を使う。 - 欧文の大文字見出しは、細いウェイトで字間を広くとる。 - 人名と短評の差し色は 4 色を順番に回す。 - 本文は行間を広くし、余白を多めにとって静けさを出す。 - 公開日などの告知だけは太字で大きく見せる。

Don't - 白地や明るいパステルの地を使わない。 - 塗りつぶしの派手な CTA ボタンや、影・グラデーションを使わない。 - 差し色を大きな面に使わない。文字だけに使う。 - 丸ゴシックや手書き風の書体を使わない。 - 写真に角丸や装飾フレームを付けない。

Page Structure

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

1. ファーストビュー（作品の世界観と受賞歴を一目で伝える）: 霧の街の全幅写真を敷き、上部に月桂冠を並べる。中央に白い題字、縦書きのコピー、線のピル型ボタンを置く。
2. クレジットと公開日（スタッフと公開日を告知する）: 黒地に小さなクレジットとロゴ列を置き、大きな太字の公開日と SNS アイコンを続ける。
3. イントロダクション（作品の背景を説明する）: 全幅の夜景写真の後に欧文見出しを置き、中央揃えのリード 2 行と左揃えの本文、横長写真を交互に並べる。
4. 注意書き（出演者保護など配慮の説明）: 黄色の小さな注記と、線のピル型ボタンを置く。
5. レビュー（海外メディアの評価で権威づける）: 差し色の短評を中央に縦に並べ、それぞれに小さな出典を添える。
6. コメント（著名人の声で共感を広げる）: 狭い本文幅でコメント本文と色付きの人名を繰り返す。
7. 監督プロフィール（作り手の人物像を伝える）: 縦長のポートレート、名前、略歴を置き、チャコールのメッセージ枠を 2 名分繰り返す。
8. 予告編（動画視聴へ誘導する）: キービジュアルに再生アイコンを重ねたサムネイルを置く。
9. 上映館一覧（鑑賞できる劇場を探してもらう）: 公開日の告知の後に、地域見出しと 4 列の表を地域ごとに並べる。

Imagery

• 夜明けや夜の都市を、青緑寄りの低彩度で撮った映画スチル。
• 街灯・看板・窓明かりが点々と光る、暗い路地や俯瞰の夜景。
• 人物は小さく後ろ姿や遠景で写し、孤独感を出す。
• 廃墟のような空きビル内部など、人の気配が薄い空間。
• 監督のポートレートは黒背景か暗い緑背景の縦長バストアップ。
• アイコンは白の線画だけにする（月桂冠・再生・SNS）。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では写真を全幅のまま使い、横長比率は少し縦に寄せる。
• SP の本文幅は 88% 程度に広げ、本文 13px・行間 2.0 を保つ。
• 上映館の表は SP ではカード化するか、地域と劇場名を 2 段に組む。
• 月桂冠の列は、SP では 2〜3 段に折り返す。
• 公開日の告知は SP では 2 行に分け、日付を 26px 前後にする。

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