DESIGN.md — 濃紺×血赤の明朝サスペンス映画 LP（Dark Navy Crimson Psycho-Suspense Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、シンプル・ミニマル
• キーワード: 不穏・静寂・映画的・明朝・血赤・冷色
• 地の質感: フラットな濃紺の面。写真はくすんだ寒色にグレーディングし、黒へ溶けるグラデーションでつなぐ
• 形: 角丸なしの直角。四角の赤ボタンと 1px の白い枠線
• 温度感: 冷たく暗い。赤だけが警告のように熱を持つ

Colors

• 地はほぼ全面を濃紺（#171D29）にし、白地のセクションは作らない
• 赤はタイトル・役名・公開日帯・+ボタンだけに使い、広い面では使わない
• 本文は白一色。グレーは補足にだけ使う
• 写真は寒色寄りにくすませ、端は地色や黒へフェードさせる
• スタッフ欄だけは灰青の写真を背景に敷いて、セクションの切り替わりを見せる

Typography

• 和文は見出しも本文もすべて明朝体にそろえる
• 英字見出しはすべて大文字のセリフ体にし、字間を広く取って中央に置く
• 本文の行間は 2.0 前後と広めにして静かなリズムを作る
• 役名は赤の小さい文字、名前は白の大きい文字で、2 段に組む
• キャッチは改行を細かく入れて、短い行を積み重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。場面写真のギャラリーだけ 2 列
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 20px でそろえる
• セクションは英字見出し、キャッチ、本文、写真の順に置く
• キャストは写真の下に役名と名前を置き、縦に積む
• 場面写真のギャラリーは余白なしで画面幅いっぱいに敷き詰める
• キャストカードどうしの間は約 40px 空ける

Elevation & Depth

• 影は使わない。奥行きは写真の明暗とフェードだけで出す
• 写真の端は地色へなじませるグラデーションでつなぐ
• スタッフ欄は暗く落とした写真の背景に白線の枠を重ねる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの横長長方形（16:10 程度）。キャスト写真は右下に赤い + ボタンを重ねる
• セクション境界: 直線。写真の背景がある面へは境界をはっきり切り替える
• すべての要素を直角にする
• 枠線は 1px の細線にする
• +ボタンは約 36px の赤い正方形にする

Components

• 公開日帯（release-band）: ファーストビュー直下に置く横幅いっぱいの赤帯。日付の数字を大きくし、劇場名を白で並べる
• サブナビボタン（nav-button-outline）: 赤い枠線と赤い英字の四角ボタン。3 つ横に並べる
• 主ナビボタン（nav-button-filled）: 赤で塗った白文字の四角ボタン。上映館への導線に使う
• 告知バナー（promo-banner）: 黒地に明朝の文字と右側のサムネイルを置いた横長バナー。特典や関連商品の告知に使う
• 英字セクション見出し（section-title-en）: 中央に置く大文字のセリフ体。字間を広く取り、飾りは付けない
• キャストカード（cast-card）: 横長の写真の下に、赤い役名と白い名前を置く。写真の右下には + ボタンを重ねる
• +展開ボタン（plus-toggle）: 赤い正方形に白い + を置いたボタン。プロフィールを開くのに使う
• スタッフ枠（staff-box）: 白い細線の枠の中に、赤い担当名と白い名前を置く。右下に + ボタンを付ける
• ハンバーガーボタン（menu-button）: 右上に固定する赤い正方形。中に白い 3 本線を置く

Do's and Don'ts

Do - 地は濃紺で統一し、赤は要所だけに使う - 和文はすべて明朝体で組み、本文の行間を広く取る - 写真は寒色寄りで彩度の低い色調にそろえる - ボタン・枠・写真はすべて直角にする - 英字見出しは字間を広く取り、中央に置く

Don't - 角丸やピル型のボタンは使わない - 白や明るい色の地のセクションは入れない - ゴシック体や丸ゴシック体は混ぜない - 赤以外の強調色は足さない - ドロップシャドウや光沢のある装飾は付けない

Page Structure

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

1. ファーストビュー（作品の世界観と出演者を一目で伝える）: ポスター風の縦長写真を全面に敷く。煙や暗い人物写真の上に、赤い明朝で縦書きの名前を並べ、毛筆風のタイトルを大きく置く
2. 公開日帯（公開日と上映館を知らせる）: 画面幅いっぱいの赤帯に、白い文字で日付と劇場名を置く
3. ナビゲーション（予告・ニュース・上映館へ誘導する）: 赤い枠のボタン 2 つと、赤で塗ったボタン 1 つを横に並べる
4. 告知バナー（特典や関連商品を知らせる）: 黒いバナーを 2 枚縦に並べ、文字とサムネイルを左右に置く
5. 作品紹介（作品の評価と制作の背景を伝える）: 英字見出しの下に太字の小見出しと長めの本文を置き、最後に人物写真を地色へフェードさせる
6. あらすじ（物語の導入で興味を引く）: 赤い明朝のキャッチを 3 行ほど置き、その下に白い本文を続ける
7. 場面写真（映像の空気感を見せる）: 2 列×4 段の写真を余白なしで敷き詰める
8. キャスト（出演者を紹介する）: 横長写真、赤い役名、白い名前の組を縦に繰り返し、写真の右下に + ボタンを置く
9. スタッフ（制作陣を紹介する）: 灰青の海の写真を背景に敷き、集合写真の下に白線の枠を縦に並べる
10. フッター（余韻を残して締める）: 黒い闇の中に人物が浮かぶ写真を置き、下端に小さくコピーライトを入れる

Imagery

• 写真は青緑寄りでくすんだシネマ調にグレーディングし、黒を締める
• 人物は無表情か不安げな表情で、日常の場所に立つ姿を切り取る
• ファーストビューには煙やかすみを重ねて不穏さを出す
• タイトルは血のような赤の毛筆風ロゴにする
• 最後は暗闇に浮かぶ人物の半身を写した、ローキーの写真にする
• イラストやアイコンは使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではファーストビューを横長のキービジュアルにし、名前の縦書きとタイトルを左右に広げて配置する
• PC では本文の幅を約 60% に絞り、中央に置く
• 場面写真は PC で 4 列×2 段にする
• キャストは PC で 2 列のグリッドにする
• スタッフ枠は PC で 2 列と 3 列に横並びにする
• ナビボタンと告知バナーは PC で小さくし、中央に横並びにする

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