DESIGN.md — 夜の暗色×水色アクセントの映画公式 LP（Cinematic Night Blue Film Promotion LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、レトロ、情報量多め・訴求型
• キーワード: 映画ポスター・夜の街・明朝見出し・水色アクセント・細い欧文見出し・昭和レトロ
• 地の質感: 写真主体。暗部は粒子感のある夜景写真を暗く沈めて背景にし、白地部分は余白の多いフラットな面。
• 形: 四角い写真と細い線の枠が基本。主要ボタンだけピル型、キャストボタンは角丸なしの帯。
• 温度感: 白と水色の涼しさ、夜景の暗さが中心。差し色の金色やネオンで少し温かみを足す。

Colors

• 前半の情報ブロックは白地、後半の作品紹介は暗い夜景写真の地。中間は淡い青灰色でつなぐ。
• アクセントは水色の 1 色だけ。ボタン、欧文見出し、役名、細い枠線に統一して使う。
• 暗い地の上の本文は白、リード文は淡い水色にする。
• 赤は外部チケットの購入ボタンにだけ使う。オレンジや緑も外部の特典バナーの中だけにとどめる。
• 白地の長文はグレー文字にして軽く見せる。
• button-pill-primary は文字 #FFFFFF × 背景 #1EB9EF のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0C7EA5、4.62:1）を使う。
• button-profile-bar は文字 #FFFFFF × 背景 #1EB9EF のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0C7EA5、4.62:1）を使う。
• button-ticket-cta は文字 #FDFCFC × 背景 #E91411 のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E71411、4.55:1）を使う。
• info-box-outline は文字 #1EB9EF × 背景 #FEFEFE のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0C7EA5、4.58:1）を使う。
• sns-circle は文字 #FFFFFF × 背景 #1EB9EF のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0C7EA5、4.62:1）を使う。

Typography

• 見出しは細い欧文の大文字と小さな和文を 2 段で組み、中央に揃える。
• 和文の見出しと人名は明朝体にして、映画らしい格調を出す。
• 長い本文は小さめのゴシック体にし、行間を広く取る。
• ボタンの文字は欧文の大文字に「+」を添える。
• 太い文字やポップな書体は使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物カードは 2 カラム、スタッフは 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面の端から端まで裁ち落とし、テキストブロックは左右に約 6% の余白を取る。
• 情報系のボックスは水色の 1px の枠で囲み、中央に揃える。
• 人物カードは正方形の写真、名前、役名、帯ボタンの順に縦に積む。
• 人物カード同士は縦に約 50px 空け、暗い地の上でゆったり並べる。
• 場面写真の帯を細く挟んでセクションを区切る。

Elevation & Depth

• 影はほとんど使わず、フラットな面で構成する。
• チケット購入ウィジェットだけ、薄いグレーの枠とごく弱い影を付ける。
• 奥行きは暗い写真の上に文字を重ねて出す。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 人物は正方形、場面写真は横長の矩形、メインビジュアルは縦長の全幅
• セクション境界: 直線で切り替える。間に場面写真の横帯を挟む
• セクションへの誘導ボタン（劇場情報・コメントなど）は幅の広いピル型にする。
• 人物カードの下のボタンは角丸なしの水色の帯にする。
• SNS アイコンは円形にする。シェア欄では水色の線だけの円にする。
• 枠線は 1px の細線に統一する。

Components

• 水色のピル型ナビボタン（button-pill-primary）: 全幅に近い水色のピル。欧文の大文字と小さな和文を 2 段に組む
• プロフィールの帯ボタン（button-profile-bar）: 人物写真と同じ幅の水色の帯。欧文の大文字と「+」を入れる
• チケット購入ボタン（button-ticket-cta）: 赤い面に白文字の購入ボタン。購入ウィジェットの中に置く
• 2 段のセクション見出し（section-heading）: 細い欧文の大文字の下に、小さな和文の明朝を添えて中央に揃える
• 水色の線のお知らせ枠（info-box-outline）: 白地を水色の 1px の枠で囲み、中に水色の明朝テキストを入れる。下端は淡い水色の帯にする
• 人物カード（cast-card）: 正方形の写真、白い明朝の名前、水色の役名、帯ボタンを縦に並べる
• SNS の円形アイコン（sns-circle）: 水色の塗りの円に白アイコン。シェア欄は線だけの円にする
• スライダーの矢印とドット（slider-dots）: 細い矢印と水色の小さなドットで、予告編や紹介文を切り替える

Do's and Don'ts

Do - 暗いセクションでは、夜の街の写真を暗く沈めて背景に敷く。 - アクセントは水色だけに絞る。 - 見出しは細い欧文と小さな明朝の 2 段で組む。 - 人物写真はすべて同じ正方形の比率にそろえる。 - 白地の情報エリアには余白を多めに取り、細い線で整理する。

Don't - 太いゴシック体やポップな装飾見出しは使わない。 - ボタンに強い影やグラデーションを付けない。 - 水色以外の色をブランドのアクセントとして増やさない。 - 暗いセクションに白い地のカードを置かない。 - 人物写真を円形に切り抜かない。

Page Structure

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

1. ファーストビュー（作品の世界観とタイトル、公開状況を示す）: 全幅の集合写真に、細い欧文の大きなロゴと白い明朝のタイトルを重ね、公開状況を金色で入れる
2. クレジットと注記（出演者・スタッフの表記と作品の注意書きを載せる）: 白地に水色の小さな明朝を中央に揃えて並べ、注記は黒文字で 4 行にする
3. お知らせと SNS（重要なお知らせへの導線と公式 SNS）: 水色の線の枠を 2 つ縦に並べ、その下に円形の SNS アイコンとピル型のコメントボタンを置く
4. 受賞バナーとニュース（評価の実績と最新情報を伝える）: 横長のバナーを 2 枚並べ、細い枠のニュース一覧とピル型の「もっと見る」ボタンを置く
5. 劇場・チケット（チケット購入へ誘導する）: 水色のピル見出しの下に購入ウィジェットを置き、特典を水色の枠で囲む
6. 予告編（動画で興味を引く）: 淡い青灰色の地に、動画サムネイルのカルーセルとドットを置く
7. イントロダクション（作品の背景と企画意図を伝える）: 暗い夜景写真に白い明朝の大きなコピーを重ね、水色のリード文と白い本文を続ける
8. あらすじ（物語の概要を伝える）: 場面写真の帯の下に、白地にグレーの小さな本文を段落ごとに置く
9. 場面写真（作品の雰囲気を見せる）: 全幅の大きな写真 1 枚と、小さな写真 3 枚の帯を組み合わせる
10. キャスト（出演者を紹介する）: 暗い夜景の地に、2 カラムの人物カードと水色の帯ボタンを並べる
11. スタッフ（制作陣を紹介する）: 役職を水色、名前を白い明朝にして 1 カラムで並べ、帯ボタンを付ける
12. シェア（SNS での拡散を促す）: 明るい青空の場面写真の下に、淡い青灰色の地と線だけの円形アイコン 3 つを置く

Imagery

• 1960 年代風の衣装と美術のシネマティックな写真を使う。彩度はやや抑え、青みを強めに。
• 夜の繁華街のネオンや看板を暗くぼかし、背景のテクスチャにする。
• 人物写真は胸から上を正方形に収め、背景は色の付いた室内や緑にする。
• ラストには青空と布が舞う明るい場面写真を置き、暗い流れからの解放感を出す。
• イラストは使わず、写真と細い線だけで装飾する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せの固定幅で、写真やビジュアルは全幅にする。
• PC ではキャストを 4 カラム、スタッフを 3 カラムに広げる。
• PC ではお知らせ枠 2 つや受賞バナー、チケットのウィジェットを横並びにする。
• PC の予告編は 2 本を横並びで見せる。
• 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 行書くと起動時に読み込まれる。