DESIGN.md — 焦げ茶×金箔の映画公式サイト LP（Dark Cocoa Gold Cinematic Movie LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、力強い・インパクト
• キーワード: 焦げ茶の地・金箔グラデーション・ステージ照明・欧文セリフ見出し・金枠バナー・シネマティック
• 地の質感: 黒〜焦げ茶の地にうっすら紙のノイズと光のにじみ。金文字は上から下へ明るい金から暗い金のグラデーション。
• 形: バナーは角丸なしの長方形に細い金枠。円形バッジとピル型のナビボタンをアクセントにする。
• 温度感: 暖色寄りのダーク。琥珀色の照明で温かみを足す。

Colors

• 地は黒・焦げ茶・赤茶の 3 段階で、セクションごとに切り替えて区切る。
• 見出しと装飾はすべて金のグラデーション。平坦な黄色は使わない。
• 本文は生成り色。純白は購入カードとボタン文字だけに限る。
• 赤は購入 CTA だけに使う。ブランドの世界観から切り離した機能色として扱う。
• 紹介文のセクションだけ琥珀色の照明グラデーションの地にして、ページの山場をつくる。
• バナーの背景は茶・紺・銀など色を変え、どれも金の細枠で統一する。

Typography

• 章見出しは大文字の欧文セリフ体に金グラデーションをかけ、中央に置く。
• 本文は明朝体で行間を 2.0 前後と広めにとり、映画パンフレットのように見せる。
• コピーの強調は太い和文ゴシックに金グラデーションと細い影をつける。
• ロゴ風のタイトルは筆記体の金文字にし、細いカナを小さく添える。
• 購入まわりだけはゴシック体にして、機能的に読ませる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せで、バナーは 2 列に並べる。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは地の色を切り替えて区切り、上下に 50〜60px の余白をとる。
• 章見出しは各セクションの先頭中央に置き、下に 24px あける。
• バナーは横幅いっぱい（左右 12px）で縦に並べ、間を 16px あける。
• 動画・ギャラリーはカルーセルにして、左右に細い矢印を置く。
• 紹介文は人物写真の上に直接重ね、左右の余白を 24px 程度とる。

Elevation & Depth

• 影はほとんど使わない。奥行きは光のにじみとグラデーションで出す。
• 金文字には暗い色の 1〜2px のドロップシャドウをつけて浮かせる。
• 購入カードは平面の白で、薄いグレーの枠線だけをつける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は長方形のまま角丸なしで使う。人物は切り抜いて背景の暗さになじませる。
• セクション境界: 直線で地の色を切り替える。紹介セクションの境目だけはグラデーションで溶かす。
• バナーは角丸なしの長方形に、1〜2px の金のメタリック枠をつける。
• キャンペーンは円形のメダル型バッジにし、金の縁と赤い帯を入れる。
• ナビの THEATER ボタンとアイコンは細い白枠のピル型・円形にする。
• 購入ボタンは角丸 4px 程度の長方形にする。

Components

• キービジュアル（hero-key-visual）: スポットライトの当たる人物写真に、巨大な半透明コピー・金の筆記体タイトル・公開日を重ねる。
• 円形キャンペーンバッジ（badge-medal）: 金の縁取りがある円形メダル。中に告知文を入れ、下を赤い帯で締める。キービジュアル下部に重ねる。
• 欧文グローバルナビ（nav-text）: 白の欧文サンセリフで中央に並べる。その下にピル型のボタンと円形の SNS アイコンを置く。
• 金枠バナー（banner-gold-frame）: 茶・紺・銀の地に、金や白の明朝コピーと細い金枠。下段に「詳細はこちら」の帯を敷く。
• チケット購入カード（ticket-card）: 白いカードに価格・枚数セレクト・合計金額を並べ、その下に赤い購入ボタンとグレーのサブボタンを置く。
• 購入ボタン（button-primary）: 赤い面に白い太字を 2 段で入れ、上段にロゴ風の文字と白い小さなピルを入れる。
• 金の欧文章見出し（heading-section）: 大文字の欧文セリフ体に金グラデーションをかけ、中央に置く。装飾線は入れない。
• ニュース一覧（news-list）: 金色の日付と生成りのタイトル（1 行で省略）を細い線で区切って並べる。右下に VIEW ALL と矢印を置く。
• 動画・画像カルーセル（carousel）: 中央に 16:9 の画像を置き、左右に細い白矢印、下に丸いドットインジケーターを並べる。

Do's and Don'ts

Do - 地は黒〜焦げ茶にとどめ、金は文字と枠線に絞って使う。 - 写真はスポットライトや逆光で、暗部の多いものを選ぶ。 - 章見出しは欧文セリフ体の金文字で統一する。 - 長い本文は明朝体で行間を広くとる。 - 購入導線だけは白と赤ではっきり目立たせる。

Don't - 明るい白や淡い色を地に広く使わない。 - 金を単色の黄色で塗らない。 - バナーに大きな角丸や影をつけない。 - 赤を購入以外の装飾に使わない。 - ポップな丸ゴシックやイラストを混ぜない。

Page Structure

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

1. ファーストビュー（作品の世界観と公開日を伝える）: 全面の人物写真に、巨大な半透明コピー・金の筆記体タイトル・円形バッジを重ねる。
2. ナビゲーション（各章とSNSへ案内する）: 欧文ナビを中央に 2 行で並べ、ピル型ボタンと円形アイコンを添える。
3. キャンペーンバナー（旬の施策を告知する）: 金のメタリック文字を入れた横長バナー。
4. チケット購入（前売券を買ってもらう）: 黒地の上に白カードを置き、赤い CTA と 2 色のサブボタンを並べる。
5. 関連バナー群（関連施策・音楽・グッズへ送客する）: 色違いの金枠バナーを縦に 4 本並べる。
6. ニュース（最新情報を伝える）: 赤茶の地に、日付とタイトルを線で区切ったリストを置く。
7. 動画（予告映像を見せる）: 16:9 のサムネイルに再生ボタンを重ねたカルーセル。
8. 作品紹介（作品の価値を語る）: 琥珀色の照明の地に人物写真を置き、白い明朝本文と太字のコピーを重ねる。
9. あらすじ（物語を伝える）: 焦げ茶の地に長い明朝本文を置き、下に切り抜いた人物群を並べる。
10. ギャラリー（場面写真を見せる）: 矢印とドットのついたスライダー。
11. ポスター（上映形式ごとのビジュアルを見せる）: 縦長ポスターのカルーセル。
12. フッター（配給元を示す）: 焦げ茶の地に、ロゴを金・白で小さく並べる。

Imagery

• ステージのスポットライトや逆光を受ける人物写真。暗部を深くし、煙やフレアを入れる。
• 暖色の琥珀色グレーディングをかけ、黒の締まりを強くする。
• 人物は切り抜いて暗い地に溶け込ませる。
• 金箔のようなメタリック文字と、金の音符などの細い線画の装飾を添える。
• モノクロ＋金の高級感あるポスター調ビジュアルも使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルを横長に構図し、人物を右、タイトルを左中央に置く。
• PC はバナー群を 2 列のグリッドに並べる。
• PC の作品紹介は、本文を左、写真を中央、強調コピーを右に置く 3 分割にする。
• 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 行書くと起動時に読み込まれる。