--- version: alpha name: Dark Cinematic Prestige Film LP description: 漆黒の地に焼けた橙のバナーと、生成りベージュの極太見出しを組み合わせた映画公式サイト型の LP。夕焼けのキービジュアル、横長の帯状バナーの連続、モノクロとカラーの場面写真で、重厚で歴史的な雰囲気を出している。 colors: background: '#000000' primary: '#EB6101' cta: '#EB6101' on-cta: '#FCFAF5' accent-1: '#FAE5B9' dark-section: '#4C1402' on-dark: '#F2F2F2' secondary: '#E9C98A' line: '#BDBDBD' surface: '#1F1E1D' accent-2: '#F08A2C' text-muted: '#91908D' primary-accessible: '#C25001' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Oswald fontSize: 18px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: Montserrat fontSize: 8px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.2em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 8px section: 80px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' banner-feature: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 46px banner-outline: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 50px section-title: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 36px button-more: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 14px news-card: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 110px ranking-badge: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 80px photo-strip: height: 60px staff-block: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 120px --- # DESIGN.md — 黒×橙×生成りの重厚な映画公式 LP（Dark Cinematic Prestige Film LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、上品・高級 - **キーワード**: 漆黒・焼けた橙・生成りの極太見出し・映画的・歴史・重厚 - **地の質感**: フラットな黒地。写真のフィルム調の粒子とコントラストで質感を出す - **形**: 角丸なしの長方形。バナー・写真・枠線ボタンはすべて直角 - **温度感**: 黒地で冷たく締め、橙と生成りで温かみと緊張感を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページ全体の地 | 55% | 画素の実測 | | `primary` | `#EB6101` | バナー面・作品ロゴ色 | 6% | 画素の実測 | | `cta` | `#EB6101` | 告知・映像バナーの面 | 2% | 画素の実測 | | `on-cta` | `#FCFAF5` | バナー上の白文字 | 1% | 画素の実測 | | `accent-1` | `#FAE5B9` | 大見出しの生成りベージュ | 3% | 画素の実測 | | `dark-section` | `#4C1402` | 時代背景セクションの赤茶の地 | 4% | 画素の実測 | | `on-dark` | `#F2F2F2` | 本文白文字 | 2% | 推定 | | `secondary` | `#E9C98A` | 見出し英字・役職ラベルの淡いゴールド | 0% | 推定 | | `line` | `#BDBDBD` | MORE ボタン・NEWS サムネ枠のグレー線 | 0% | 推定 | | `surface` | `#1F1E1D` | バナー左のサムネ黒面 | 2% | 画素の主要色に補正 | | `accent-2` | `#F08A2C` | ニュース日付・小見出しの橙文字 | 0% | 推定 | | `text-muted` | `#91908D` | 注記のグレー文字 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#C25001` | AA を満たす補正値（計算） | | 計算 | - 地は常に純黒。色面は橙バナーと赤茶セクションに限定する - 大見出しは生成りベージュ、時代背景セクションの見出しのみ橙にする - 本文は白で、黒地か赤茶地の上だけに置く - 橙は作品ロゴ・告知バナー・日付など、目を引かせたい所にだけ使う - 英字のセクション見出しは淡いゴールドで控えめにする - `banner-feature` は文字 `#FCFAF5` × 背景 `#EB6101` のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C25001`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 受賞訴求などの超大見出し | ゴシック | Dela Gothic One | 900 | 44px | 1.1 | 0.0em | | `headline-lg` | セクション内のキャッチ見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0.02em | | `headline-md` | バナー内の告知見出し | ゴシック | Noto Sans JP | 900 | 18px | 1.3 | 0.02em | | `accent` | 英字セクション見出し | 欧文サンセリフ | Oswald | 500 | 18px | 1.2 | 0.05em | | `headline-sm` | スタッフ名・ニュースタイトル | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.03em | | `body-md` | 解説の本文 | ゴシック | Noto Sans JP | 500 | 11px | 1.8 | 0.02em | | `note` | 英字見出し下の和文ルビ・注記 | ゴシック | Noto Sans JP | 500 | 8px | 1.4 | 0.1em | | `label-button` | もっと見るボタン | 欧文サンセリフ | Montserrat | 600 | 8px | 1.0 | 0.2em | - 見出しは超極太ゴシックで行間を詰めて塊に見せる - 英字の見出しの下に小さな和文ルビを中央揃えで添える - 本文は小さめの白文字・左揃えで、行間を広く取る - 数字や賞の回数は小さく縦組みにして見出しの頭に添える - 装飾は書体の太さと色だけで出す。影や縁取りは使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。人物一覧は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 80% - **余白**: セクション間 80px、基本単位 8px、カード内 8px（375px 幅換算） - 本文やバナーは左右に約 10% の余白を取る - 場面写真の帯は画面幅いっぱいに置き、セクションの区切りにする - 告知バナーは縦に 6px 前後の間隔で並べる - セクション見出しは中央揃え、本文は左揃えにする - 人物グリッドは写真どうしの間を 6px 程度にする ## Elevation & Depth - 影は使わずフラットにする - 奥行きは写真の明暗と黒地とのコントラストで出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 長方形。角丸なしで写真を裁ち落とす - **セクション境界**: 直線で区切る。幅いっぱいの写真帯と、色面の切り替えで境界を作る - すべての要素を直角にする - 枠線は 1〜2px の細い線にする - 斜めや波形の区切りは使わない ## Components - **サムネ付き告知バナー**（`banner-feature`）: 左 1/4 にサムネか黒面ラベル、右に橙面と白の極太文字を置いた横長の帯 - **橙枠の特集バナー**（`banner-outline`）: 黒地に橙の枠線。上段に字間を広げた英字、下段に和文の見出し - **英字＋ルビ見出し**（`section-title`）: 淡いゴールドの英字見出しの下に小さな和文を添える。中央揃え - **もっと見るボタン**（`button-more`）: 黒地にグレーの細枠、白い英字を字間広めで置いた横長ボタン - **ニュースカード**（`news-card`）: グレー枠で囲んだ黒サムネに作品ロゴを置き、下に橙の日付と白い太字タイトル - **ランキング実績**（`ranking-badge`）: 左にサービスのロゴ、右に明朝体で「第1位」を大きく。下に調査日の注記 - **場面写真の帯**（`photo-strip`）: 場面写真を横に並べたコラージュを画面幅いっぱいに置き、区切りにする - **スタッフ紹介**（`staff-block`）: 小さなゴールドの役職ラベル、白い太字の氏名、左揃えの経歴本文の 3 段構成 ## Do's and Don'ts **Do** - 地は純黒で通し、色面は橙と赤茶の 2 種に絞る - 大見出しは生成りベージュの超極太で 2〜3 行の塊にする - セクションの間に場面写真の帯を挟み、映画らしいリズムを作る - 告知は同じ形の横長バナーを縦に並べて整理する - モノクロ写真を交ぜて、時代と格調を表す **Don't** - 角丸・ピル型・ドロップシャドウを使わない - パステル色や明るい背景のセクションを入れない - 見出しに丸ゴシックや手書き風の書体を使わない - 橙を本文やベタ面に広げすぎない - アイコンやイラストで飾らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の格と公開日を一目で伝える）: 夕焼け色のキービジュアルの上に、受賞実績の極太白文字、縦書きのキャッチ、橙の作品ロゴ、日付を重ねる 2. **告知バナー群**（イベントや映像などへ誘導する）: サムネ付きの橙バナーを約 10 本、縦に積む 3. **特集・関連商品**（コメントや書籍などへ導く）: 橙枠の特集バナー 1 本と、写真付きの横長バナーを 2 本置く 4. **実績ランキング**（評価の高さを数字で示す）: ロゴと明朝体の「第1位」を 2 段に並べ、調査日の注記を添える 5. **ニュース**（最新情報を見せる）: 英字見出しの下に枠付きカードを 2 列並べ、もっと見るボタンを置く 6. **紹介文**（作品の概要と評価を伝える）: 幅いっぱいのモノクロ写真の後に、生成りの超大見出しと白い本文を置く 7. **ストーリー**（あらすじで興味を深める）: 写真帯の後に、生成りのキャッチ見出しと本文を置く 8. **時代背景**（作品の背景を解説する）: 赤茶の地にして、橙の見出しと白い本文を置き、写真帯で締める 9. **登場人物**（キャストを一覧で見せる）: 顔写真を 2 列×8 段のグリッドに並べる 10. **スタッフ**（制作陣の実績を伝える）: 大きな写真の下に、役職・氏名・経歴を中央見出し＋左揃え本文で繰り返す 11. **締めのロゴ**（作品名と公開日を印象に残す）: 黒地の中央に、橙の作品ロゴと白い日付を置く ## Imagery - 夕焼けや炎のような橙と茶の空を背景にした、人物ポスター風のキービジュアル - 粒子感のある高コントラストなモノクロの場面写真 - 温かみのある色調に抑えたカラーの人物クローズアップ - 撮影現場を写したドキュメンタリー風の写真 - 複数の場面写真を隙間なく並べた横長のコラージュ帯 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は最上部に黒い横並びのグローバルナビを固定する - PC では告知バナーが 3 枚並びのカルーセルになり、左右に矢印が付く - PC のニュースは 3 列、登場人物は 4 列にする - PC の大見出しは 1 行にまとめ、本文の幅を広げる - PC のスタッフ紹介は、主要な 1 名の下に 3 列のグリッドで並べる ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-78586813`（元 LP の URL から採番） - **元 LP**: https://www.oppenheimermovie.jp - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。