--- version: alpha name: Dark Cinematic Epic Movie LP description: 黒地に戦火の写真を全面で見せる映画公式サイトの型。タイトルはくすんだ鋼青、公開日と強調は朱赤。紹介文は大きな明朝のコピーと白い太字ゴシックの本文で組む。前売券購入ブロックとニュースのスライダーを挟み、最後は鋼青のフッターで閉じる。 colors: background: '#000001' background-alt: '#030303' primary: '#3E5A75' dark-section: '#385774' accent-1: '#CB363A' cta: '#E40112' on-cta: '#F3F4F1' secondary: '#94CA12' text: '#E9E9E9' text-muted: '#A4A4A4' line: '#4A4A4A' surface: '#FEFDFD' background-accessible: '#C8C8FF' cta-accessible: '#E10112' typography: display: fontFamily: Shippori Mincho fontSize: 96px fontWeight: 500 lineHeight: 1.0 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 500 lineHeight: 1.4 headline-sm: fontFamily: Montserrat fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 22px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 4px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-outline-button: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' height: 36px ticket-widget: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 230px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 42px section-title-lined: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 40px news-card: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 230px button-ghost: textColor: '{colors.primary}' typography: '{typography.note}' height: 34px title-lockup: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 150px footer-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.text}' typography: '{typography.note}' height: 190px --- # DESIGN.md — 漆黒×鋼青×朱赤の叙事詩映画 LP（Dark Cinematic Epic Movie LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的 - **キーワード**: 漆黒・戦火・叙事詩・シネマティック・鋼青・朱赤 - **地の質感**: 黒地にごく細い斜めストライプが入る。写真は暗く、炎のオレンジが光源になる - **形**: 角丸なしの四角が基本。細い枠線のボタンと水平線で見出しを挟む - **温度感**: 冷たい黒と青が基調で、写真の炎と赤文字で熱をさす ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000001` | ページ地の黒 | 55% | 画素の実測 | | `background-alt` | `#030303` | ストライプ地の濃い墨色 | 12% | 画素の実測 | | `primary` | `#3E5A75` | タイトルロゴとボタン枠の鋼青 | 3% | 画素の実測 | | `dark-section` | `#385774` | フッターの鋼青面 | 6% | 画素の実測 | | `accent-1` | `#CB363A` | 公開日・コピーの朱赤 | 2% | 画素の実測 | | `cta` | `#E40112` | 購入ボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#F3F4F1` | 購入ボタン上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#94CA12` | 通販ボタンのライムグリーン | 1% | 画素の実測 | | `text` | `#E9E9E9` | 見出しと本文の白 | 3% | 画素の実測 | | `text-muted` | `#A4A4A4` | ニュース本文の淡いグレー | 0% | 画素の実測 | | `line` | `#4A4A4A` | 見出し横の細い線 | 0% | 推定 | | `surface` | `#FEFDFD` | チケット枠の白面 | 2% | 画素の実測 | | `background-accessible` | `#C8C8FF` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#E10112` | AA を満たす補正値（計算） | | 計算 | - 地は黒で固定し、写真の暗部と境目なくつなげる - 作品タイトルと枠線は鋼青、公開日と短いコピーだけを朱赤にする - 本文は白の太字ゴシック。補足はグレーに落とす - 購入導線は販売サービスの色（赤・白・緑）をそのまま使い、作品の配色とは切り分ける - フッターだけを鋼青の面にしてページを締める - `nav-outline-button` は文字 `#3E5A75` × 背景 `#000001` のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#C8C8FF`、4.5:1）を使う。 - `button-primary` は文字 `#F3F4F1` × 背景 `#E40112` のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E10112`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真上に重ねる一言の巨大コピー | 明朝 | Shippori Mincho | 500 | 96px | 1.0 | 0.0em | | `headline-lg` | 作品タイトルのロゴ風文字 | ゴシック | Zen Kaku Gothic New | 900 | 32px | 1.2 | 0.08em | | `headline-md` | 紹介文の大見出しのコピー | 明朝 | Noto Serif JP | 500 | 24px | 1.4 | 0.0em | | `headline-sm` | 英字のセクション見出し | 欧文サンセリフ | Montserrat | 700 | 15px | 1.2 | 0.1em | | `body-md` | 紹介文の本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.7 | 0.02em | | `accent` | 公開日の数字 | 欧文サンセリフ | Montserrat | 800 | 22px | 1.1 | 0.08em | | `note` | 日付、英字の小見出し下の日本語、フッター | ゴシック | Noto Sans JP | 500 | 9px | 1.5 | 0.05em | | `label-button` | 枠線ナビボタンの文字 | ゴシック | Zen Kaku Gothic New | 900 | 17px | 1.2 | 0.05em | - 感情に訴えるコピーは明朝、説明はゴシックの太字、と役割で書体を分ける - 英字見出しは大文字にして字間を広く取り、下に小さな日本語の読みを添える - 作品タイトルは和文の太字の下に字間の広い英字を重ねる - 巨大コピーは朱赤の明朝で写真の上に重ね、人物の顔は避けて配置する - 本文は白の太字で、黒地でも負けない濃さにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ナビボタンだけ 3 等分 - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - キービジュアルは全幅・縦長で、タイトルと日付を下部に置く - 紹介文は左揃えのブロックで、写真の下端の暗がりから始める - 購入ブロックは中央寄せで幅を狭め、ボタンを縦に積む - ニュースは画像カードを 1 枚ずつ見せるスライダーにし、左右に矢印を置く ## Elevation & Depth - 影は使わず、写真の明暗とグラデーションで奥行きを出す - 写真の下端は黒へのグラデーションで溶かす - カードは影の代わりに赤や鋼青の 1px 枠で浮かせる ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の矩形。下端は黒へフェードさせる - **セクション境界**: 直線で切り替える。写真セクションは上は直線、下はグラデーションで黒へ溶かす - ボタンは角丸なしの矩形で、細い枠線をつける - 見出しは左右の細い水平線で挟む - 装飾的な曲線やアイコンは使わない ## Components - **枠線ナビボタン**（`nav-outline-button`）: 予告編・劇場情報・公式SNSへの導線を3つ横に並べる。黒地に鋼青の枠線と文字 - **前売券購入ウィジェット**（`ticket-widget`）: 黒い枠の中に、価格・枚数の選択欄・合計金額・赤い購入ボタン・グレーのサブボタンを縦に並べる - **販売サービスの購入バナー**（`button-primary`）: 全幅に近い矩形のバナーボタンを白・緑・赤の3色で縦に積む - **線つき英字見出し**（`section-title-lined`）: 白の英字大文字の下に小さな日本語を添え、左右に細いグレーの線を引く - **ニュースカード**（`news-card`）: 赤い細枠で囲んだ写真に赤い帯のタイトルを重ね、下に赤の日付とグレーの本文を置く - **一覧へのゴーストボタン**（`button-ghost`）: 鋼青の1px枠と小さな鋼青の文字で作る横長のボタン - **作品タイトルのまとまり**（`title-lockup`）: 監督名の小見出し、和文タイトル、英字タイトル、朱赤の公開日を中央に積む - **鋼青フッター**（`footer-bar`）: 規約リンク、ロゴ、コピーライトを白の小さな文字で中央に縦に並べる ## Do's and Don'ts **Do** - 写真は暗く、コントラストを強くし、光源を一点に絞る - 朱赤は公開日と巨大コピーなど 1 画面に 1 か所だけ使う - 出演者名はキービジュアル上部に小さく横一列で並べる - 英字見出しは字間を広く取り、日本語の読みを添える - 黒地を広く残し、要素を詰め込みすぎない **Don't** - 白や明るい地のセクションを挟まない - 角丸やピル型のボタン、ドロップシャドウを使わない - 原色の青や緑を作品側の装飾に使わない - ポップな手書き文字やイラストを入れない - 巨大コピーを人物の顔に重ねない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観とタイトル・公開日を一瞬で伝える）: 全幅の縦長キービジュアル。上に出演者名、下にタイトル、英字タイトル、朱赤の日付を置く 2. **ナビゲーション**（予告編・劇場・SNSへ誘導する）: 鋼青の枠線ボタンを3つ横に並べる 3. **前売券購入**（チケット購入につなげる）: 埋め込みの購入ウィジェットの下に、販売サービスのバナーボタンを3つ縦に積む 4. **ニュース**（最新情報を伝える）: 線つき英字見出しの下に画像カードのスライダーを置き、最後に一覧へのゴーストボタン 5. **イントロダクション**（物語の魅力を情緒的に訴える）: 全幅の場面写真に朱赤の巨大明朝コピーを重ね、黒へフェードした下に明朝の見出しと白い太字の本文を置く 6. **タイトル再掲**（作品名と公開日を記憶に残す）: 黒地の中央に鋼青のタイトルと朱赤の日付を置く 7. **フッター**（規約と権利表記）: 鋼青の面に白の小さな文字を中央に並べる ## Imagery - 炎・火の粉・煙の中に人物や巨大な造形物を置いた、低い位置から見上げる構図 - 全体を暗く、ティール寄りにグレーディングし、オレンジの光をアクセントにする - 場面写真は寒色で彩度を落とし、霧がかった遠景を入れる - 写真の下端は黒へのグラデーションでつなぎ、上に文字を載せる - イラストやアイコンは使わず、写真と文字だけで構成する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はキービジュアルを横長にし、人物を右、タイトルのまとまりとナビを左に置く - PC の購入ウィジェットは横長にし、購入バナーは3つを横一列に並べる - PC のニュースはカードを3枚横に並べるスライダーにする - PC のイントロダクションは本文を中央揃えにし、巨大コピーを画面右側に大きく置く - PC は右上に MENU ボタンを固定し、フッターは横一行の帯にまとめる ## 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-69998f6c`（元 LP の URL から採番） - **元 LP**: https://odyssey-film.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。