DESIGN.md — グレージュ×琥珀色の映画公式 LP（Warm Greige Cinematic Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ナチュラル、上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 映画スチル・グレージュ・琥珀オレンジ・細身欧文見出し・縦線区切り・静かな余韻
• 地の質感: マットな紙のようなグレージュ地。写真セクションは暗く落とした半透明オーバーレイ
• 形: ほぼ直角。カードと写真に小さな角丸、コメントは角括弧型の白線フレーム
• 温度感: 暖色寄りのニュートラル。暗部は墨色で落ち着かせる

Colors

• グレージュ→生成り→墨色→黒を章ごとに切り替え、リズムを作る
• 強調色は琥珀オレンジ 1 色に絞り、欧文見出し・日付・人物名・地区見出しに使う
• 暗部の本文は白、明部の本文は濃いグレー（純黒は使わない）
• 白面はカードと表だけに限定し、地は常に色味のあるニュートラル
• 写真上の文字は黒の半透明オーバーレイで可読性を確保
• info-pill-band は文字 #FEFBED × 背景 #E3820F のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AA610B、4.57:1）を使う。
• campaign-banner は文字 #FEFBED × 背景 #E3820F のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AA610B、4.57:1）を使う。
• cast-card は文字 #FEFFFF × 背景 #D6D1BD のコントラスト比が 1.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-dark-accessible（#006262、4.69:1）を使う。
• theater-table は文字 #8A7F6E × 背景 #F9F9FA のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#7A7162、4.57:1）を使う。

Typography

• 章見出しは英大文字の細身コンデンス書体＋直下に短い縦線
• 和文見出しは太ゴシックで字間をやや広く
• 本文は字間 0.08em 前後でゆったり組む
• 評論の引用は白の太いイタリック調ゴシック、コメントは明朝で語りの温度を出す
• 人物名は和名→役者名→欧文名の 3 段で階層化
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、キャストは 2 カラムグリッド
• 本文ブロックの幅: 画面幅の約 93%
• 余白: セクション間 80px、基本単位 8px、カード内 30px（375px 幅換算）
• 章見出し上下に大きな余白（60〜90px）
• 写真は画面幅いっぱい、本文は左右 12px 程度の余白
• スタッフはラベル→白カード（写真・名前・本文）を縦積み
• 劇場は地区見出し＋4 列の表
• コメントは左右に角括弧フレームを置き中に本文

Elevation & Depth

• 影はほぼ使わずフラット
• 奥行きは写真の暗いオーバーレイと地色の切替で表現
• 白カードも影なしで地との明度差のみ

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 横長の映画スチルを矩形切り抜き、キャストは小角丸
• セクション境界: 直線で地色を切り替える
• ボタンは細い枠線の矩形
• コメント枠は上下が開いた角括弧型の白線
• 役職ラベルは角なしの帯
• FV 写真は 3 枚を細い間隔で縦積み

Components

• 欧文章見出し＋縦線（section-title）: 細身の英大文字見出しの下に 1px 縦線を 50px 程度伸ばす
• 月桂冠受賞バッジ（award-laurel）: オレンジの月桂樹で受賞名を囲む。円形の評価バッジと並べる
• 選定告知帯（info-pill-band）: オレンジ地の角丸帯に白文字 1 行
• キャンペーンバナー（campaign-banner）: オレンジ面の告知と下部白帯の詳細リンク
• 動画切替タブ（video-tabs）: カメラアイコン＋文字の 2 タブ、選択中はオレンジ
• キャストカード（cast-card）: 角丸写真の下に役名（白太字）・役者名・欧文名を中央揃え
• スタッフプロフィールカード（staff-card）: グレージュの役職ラベル＋白カード。写真、オレンジ名、本文
• コメント角括弧フレーム（comment-bracket）: 黒地写真上に白線の角括弧。明朝本文と右寄せのオレンジ署名
• 劇場一覧表（theater-table）: オレンジ縦線付きの地区見出し＋白地 4 列表
• 枠線ボタン（button-outline）: 濃いグレーの 1px 枠、角丸小の問い合わせボタン

Do's and Don'ts

Do - 地色はグレージュ系と墨色で交互に切り替える - 強調はオレンジ 1 色に限定する - 写真は彩度を落とした自然光のスチルを使う - 章見出しは欧文細身＋縦線で統一する - 余白は大きく取り、静かな間を作る

Don't - 純白の背景を全面に敷かない - ビビッドな青や緑を加えない - ドロップシャドウや立体ボタンを使わない - ピル型の大きな購入ボタンを乱発しない - 太い装飾フォントを見出しに混ぜない

Page Structure

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

1. ファーストビュー（作品の空気感と公開日を伝える）: スチル 3 枚を縦積み、下に白抜きの大タイトル、リード、受賞バッジ、大きなオレンジ日付と劇場名
2. 協賛ロゴ・購入導線（信頼と前売り券への導線）: グレーのロゴ列、赤い前売り券バナー、SNS アイコン
3. キャンペーン（参加型施策の告知）: 墨色地にオレンジバナーと協賛ロゴ
4. 予告編（動画で作品を体験させる）: 生成り地、2 タブ、全幅の動画埋め込み
5. 作品紹介（背景と評価を伝える）: 淡い街並み写真の透かし地に全幅スチルと太字見出し＋本文を 2 組
6. あらすじ（物語の導入）: 暗い街並み写真に白文字本文
7. キャスト（登場人物の紹介）: グレージュ地に 2 カラムの写真カード
8. スタッフ（作り手の信頼性）: 墨色地にラベル＋白カードを縦積み
9. 海外評（評価の短い引用）: 暗くした写真上に白の太い引用と出典を中央揃えで並べる
10. 著名人コメント（共感と推薦）: 黒地写真上に角括弧フレームの明朝コメント
11. 場面写真（余韻）: 2×2 の隙間なしグリッド
12. 劇場情報（鑑賞行動への導線）: 地区ごとの見出しと白表、最後にオレンジ太字の告知
13. フッター（クレジットと問い合わせ）: グレージュ地に小さなクレジット、白抜きタイトル、枠線ボタン、TOP リンク

Imagery

• 自然光で撮った子どもや人物のドキュメンタリー調スチル
• 彩度を抑え、温かい色かぶりのある映画的グレーディング
• 背景用の街並みは薄く透かしてテクスチャ化
• 暗いセクションは写真に黒グラデーションをかけて文字を載せる
• 小さな黄色い鳥のような手描きモチーフをアクセントに散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV がタイトル左・スチル中央・リード右の 3 分割
• PC の作品紹介は写真と本文の左右交互 2 カラム
• キャストは SP 2 列→PC 4 列
• スタッフカードは PC で写真左・本文右の横並び
• 劇場表と見出しは 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 行書くと起動時に読み込まれる。