DESIGN.md — 霧の青緑と紫筆記体の映画公式 LP（Surreal Misty Cinematic Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 上品・高級、クール・先進的、ラグジュアリー・ダーク
• キーワード: 映画ポスター・霧のグラデーション・紫の筆記体・明朝の本文・シュール・余白多め
• 地の質感: 霧や雲のような青灰色グラデーションの上に、写真を溶け込ませた映画的な質感
• 形: 角丸なしの長方形写真と細い白枠のラベル。直線的で装飾は少ない
• 温度感: やや冷たい青緑灰が基調。写真の朱色やピンクが温度差をつくる

Colors

• 地の色は「黒→白→霧の青灰→淡い青白」の順に切り替え、写真の帯でつなぐ
• 英字の見出しは紫からピンクのグラデーションで描いた筆記体だけにする
• 強いピンクは縦書きのキャッチコピーに限って使う
• 霧の上の本文は白、明るい地の上の本文は黒にする
• 彩度の高い朱色は写真やモチーフに任せ、UI には使わない

Typography

• 和文はすべて明朝系にそろえ、太めのウェイトで読みやすくする
• 英字見出しは筆記体を 1 語だけ置き、和文の見出しを添えない
• 導入文は中央揃えにし、本文は両端揃えで字下げする
• 造語にはルビ風の小さな英字を上に添える
• 写真上の文字には薄い影をつけて可読性を確保する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅または左右 12px の余白で配置
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 予告編の動画サムネイルは 16:9 で縦に並べ、間を約 28px あける
• イントロと物語は霧の背景上で中央揃えの導入文から始める
• 場面写真はずらしながら重ね、ギャラリー風に配置する
• キャストは写真→役名→俳優名→略歴の順で繰り返し、間に細線を入れる

Elevation & Depth

• 影はほぼ使わず、平面の写真を重ねて奥行きを出す
• セクションの境界は霧のグラデーションで溶かす
• 写真上の文字には柔らかいドロップシャドウをかける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。人物は 1:1 に近い比率、動画は 16:9
• セクション境界: 直線で切り替えるか、霧のグラデーションでなじませる
• 角丸は使わない
• ラベルは白い細枠の長方形にする
• 再生ボタンは白い細線の円の中に三角を置く

Components

• 黒いヘッダー（header-bar）: 左に SNS アイコンの丸、右にハンバーガーメニューを置いた細い黒帯
• 筆記体の見出し（script-heading）: 紫からピンクのグラデーションで描いた英字筆記体を中央に置く
• 予告編サムネイル（video-thumb）: 16:9 の場面写真の上に白線の再生ボタンと白枠ラベルを重ね、下に小さなキャプションを付ける
• 白枠ラベル（frame-label）: 写真の隅に置く、白い細枠で囲んだ明朝の短いラベル
• 縦書きキャッチ（vertical-catch）: 写真の右端に、ピンクの明朝体で縦書きのコピーを置く
• 写真上の引用（quote-overlay）: 全幅写真に白文字のレビューを重ね、ダッシュの後に出典を書く
• キャストプロフィール（cast-profile）: 大きな人物写真、中央揃えの役名・和名・欧文名、両端揃えの略歴を縦に並べる
• コメントカード（comment-card）: 黒地の上に場面写真を薄く敷いたタイルを置き、白文字のコメントとピンクの名前を載せる

Do's and Don'ts

Do - 和文はすべて明朝体にそろえる - セクションは筆記体の英字見出し 1 つで始める - 写真を大きく使い、霧のグラデーションでつなぐ - モチーフのイラスト（鳥など）を余白にアクセントとして置く - 本文は字下げした両端揃えで、行間を広くとる

Don't - 角丸や影の強いカードを使わない - 原色のボタンやポップな配色を UI に持ち込まない - 丸ゴシックやポップな書体を使わない - 見出しに太いゴシックの和文を使わない - 背景を単色のまま長く続けず、写真やグラデーションを挟む

Page Structure

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

1. ファーストビュー（作品の世界観と公開状況を一目で伝える）: 全面ポスターに明朝のタイトル、筆記体の英字、公開告知、黒地のクレジットを重ねる
2. 予告編（動画で興味を引く）: 白地に筆記体の見出しを置き、16:9 のサムネイルを縦に 4 本並べる
3. イントロダクション（作品の概要と見どころを紹介する）: 全幅の場面写真から霧の青灰へ溶かし、白文字の導入文と本文を置く。右端に縦書きのピンクのキャッチを添える
4. ストーリー（あらすじを伝える）: 全幅写真の左にセリフを並べ、続けて霧の地に本文と、ずらして重ねた場面写真を置く
5. レビュー引用（第三者の評価で信頼を高める）: 全幅写真の上に白文字の短評と出典を重ねる
6. キャスト・監督（出演者と監督を紹介する）: 淡い青白の地に人物写真、名前、略歴を繰り返し、間を細線で区切る
7. コメント（著名人の推薦で後押しする）: 黒地の上にイラストや写真入りのコメントタイルをグリッドで並べる（PC で確認）
8. フッター（クレジットと共有導線を置く）: 場面写真の帯、クレジット、タイトルロゴ、SNS シェアボタンを中央に並べる

Imagery

• 青緑の霧と草原のような、彩度を落とした幻想的な風景写真を使う
• 朱色やオレンジの鳥など、シュールなモチーフを大胆に配置する
• 人物写真は自然光のシネマ調で、ピンクや黄色の室内色を活かす
• 切り抜いたモチーフのイラストを余白に小さく置く
• 雲や霧のテクスチャで写真と地の色をなじませる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では上部に黒いグローバルナビを横並びで置き、ファーストビュー左に丸いキャンペーンバッジを縦に並べる
• PC では FV 直下にチケット購入枠とプレゼント告知の帯を追加する
• PC の予告編は中央 約 47% 幅で縦に並べる
• PC のキャストは左に写真、右にテキストの 2 カラムにする
• PC のコメントは黒地に 3 列のタイルグリッドで並べる
• PC の場面写真は横に 3 枚並べる

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