DESIGN.md — 生成り地×細身セリフのミニシアター映画 LP（Arthouse Film Editorial Off-White LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: シンプル・ミニマル、上品・高級、ラグジュアリー・ダーク
• キーワード: エディトリアル・細身セリフ・生成り・フィルム写真・不穏・余白
• 地の質感: 生成りの紙のような平らな地。暗い面だけ写真をぼかし、ノイズを重ねる
• 形: 角丸なしの長方形が基本。写真は四角でそのまま置き、線は細い罫線だけ
• 温度感: やや冷たく静か。暗い面で温度を下げ、黄色の文字だけが光る

Colors

• ページの 7 割は生成り地にし、文字は墨色と濃いグレーの 2 段階で書く
• 色を出すのは写真に任せ、UI に彩度の高い色は使わない
• レビューとコメントだけは暗い写真を敷いた面にし、名前と引用は黄色にする
• 劇場リストは白の面に変えて、情報のブロックだと分かるようにする
• 購入用の色付きボタンは置かない。リンクは墨色の文字に下線を引くだけにする

Typography

• 見出しは欧文一語の細身セリフだけにし、和文の見出しは添えない
• 人名は和文ゴシックの太字と欧文セリフを 2 行で重ねる
• 本文は小さめにして行間を 2.0 前後まで広げ、余白で読ませる
• 和文のタイトルはファーストビューで縦書きにする
• 役名は細い斜線のあとに小さく書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は人物を左に写真、右に本文の 2 カラムにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は 14px 程度と狭くし、見出しは左揃えにする
• 人物写真は画面幅の約 70% で中央に置く
• 写真の帯は左右いっぱいに広げて、セクションの区切りにする
• ファーストビューでは巨大な欧文タイトルを写真に重ねる
• コメントはカードにせず、名前・肩書き・本文を縦に流す

Elevation & Depth

• 影は使わない。平らな面だけで構成する
• 暗い面はぼかした写真に暗いオーバーレイを重ねて奥行きを出す
• 埋め込みプレイヤーだけ角丸の暗いカードになる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。人物は縦長か正方形で切る
• セクション境界: 直線で切り替える。左右いっぱいの写真帯と、暗い写真面の切り替えで区切る
• ボタンの形は作らず、文字に下線を引くリンクにする
• 罫線は 1px の淡いグレーだけにする
• 動画と音楽の埋め込み以外では角丸を使わない

Components

• 重ね文字のファーストビュー（hero-title-overlay）: 縦長の写真に巨大な細身セリフの欧文タイトルを重ね、右端に和文の縦書きを置く
• 欧文一語の見出し（section-heading）: 装飾なしで左に揃えた細身セリフの見出し
• 下線付きの MORE リンク（link-more）: 中央か左に置いた欧文セリフの文字と、その下に引いた 1px の線
• ニュースの行（news-item）: グレーの日付の下に 2 行までの本文を置く
• レビューの引用（press-quote）: 暗い写真の上に黄色の明朝寄りの引用を置き、その下に短い線と媒体名を添える
• 人物プロフィール（profile-block）: 写真、和文の名前、欧文の名前、斜線付きの役名、長い本文の順に縦に並べる
• 劇場リスト（theater-table）: 白い面に地域・劇場・電話・公開日の 4 列を置き、行を細い罫線で区切る
• コメントの項目（comment-entry）: 暗い面に黄色の名前を置き、横にグレーの肩書き、下に白の本文を書く

Do's and Don'ts

Do - 生成り地と細身セリフの欧文で上質な余白をつくる - 写真はフィルム調で、少し色あせた階調にする - 暗い面ではアクセントを黄色だけにする - 人名は和文と欧文の 2 段で書く - クレジットは小さな文字で縦線区切りにして詰めて並べる

Don't - 角丸のカードや影を多用しない - 彩度の高い CTA ボタンや装飾バッジを置かない - 太いゴシックで大きな見出しを作らない - アイコンやイラストの装飾を足しすぎない - 白一色の地にしない（生成りを保つ）

Page Structure

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

1. ファーストビュー（作品の世界観と公開日を伝える）: 写真に巨大な欧文タイトルを重ね、縦書きの和題、公開日、監督とキャストの欧文、映画祭のロゴ、SNS アイコンを置く
2. イントロダクション（作品の評価と概要を伝える）: 左右いっぱいの写真に見出しを重ねる。その下に受賞の注記、3 行の太字リード、長い本文、写真帯を続ける
3. ストーリー（あらすじを伝える）: 太字の短い詩的なリードを 4 行置き、その下に本文を続ける
4. 予告編（動画で引き込む）: 動画の埋め込みを 2 本縦に並べ、それぞれにセリフ体のキャプションを付ける
5. ニュース（最新情報を伝える）: 日付と本文の行を 2 件並べ、下に MORE リンクを置く
6. 海外レビュー（第三者の評価を見せる）: 暗い写真の面に黄色の引用を 3 件、媒体名を添えて縦に並べる
7. プレイリスト（作品の音の世界を広げる）: 音楽サービスの埋め込みカード
8. 監督・原作（作り手を紹介する）: 中央に縦長のポートレートを置き、プロフィールを続ける。原作は表紙画像と書誌情報、MORE リンクで見せる
9. キャスト・スタッフ（出演者を紹介する）: 写真、名前、役名、本文の並びを繰り返す。写真のない人物は文字だけにする
10. 劇場情報（どこで観られるかを伝える）: 白い面に罫線の 4 列の表を置く
11. 著名人コメント（共感と期待を高める）: 暗いぼかし写真の面に、黄色の名前と白い本文を長く縦に流す。途中にイラストを 1 枚挟む
12. フッター（クレジットと配給を示す）: 手書き風のタイトル、小さなスタッフクレジット、作品データ、配給ロゴを置く

Imagery

• 35mm フィルム風で、少し粒子が出て色があせた写真にする
• 人物は水色の背景紙の前で真正面に立たせ、無表情か少しおどけたポーズにする
• 場面写真は狭い室内やタイル壁、ロッカーなど閉塞感のある場所を選ぶ
• 暗い面の背景には場面写真を強くぼかして暗く沈めたものを使う
• 絵画風の手描きイラストは 1 点だけ、アクセントとして入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを横に広げ、左に巨大タイトル、中央に写真、右に縦書きとクレジットを置く
• PC の人物紹介は、左に写真、右に本文の 2 カラムにする
• PC の予告編は 2 本を横に並べる
• PC のコメントは 2 カラムの石組みのように並べる
• PC は本文の幅を約 70% に絞り、左右に大きな余白を取る

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