--- version: alpha name: Red and Black Diagonal Cinema Thriller LP description: 朱赤と漆黒を斜めに分割した不穏な映画公式サイトの型。セリフ体の欧文見出しと極太の明朝コピーを使い、ジグザグ柄やストライプ柄の地、丸く切り抜いた人物写真、場面写真のグリッドを交互に挟んで、作品の世界観をスクロールで見せる。 colors: primary: '#B73221' background: '#0C0D10' dark-section: '#0B0C10' secondary: '#800000' accent-1: '#C52E1D' accent-2: '#ECB93A' on-dark: '#F2F2F2' text-muted: '#B5A89B' surface: '#2B1916' line: '#4A4A4A' background-alt: '#FEFEFE' text: '#0C0D10' typography: display: fontFamily: Shippori Mincho B1 fontSize: 44px fontWeight: 800 lineHeight: 1.2 headline-lg: fontFamily: Playfair Display fontSize: 22px fontWeight: 700 lineHeight: 1.2 headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 900 lineHeight: 1.35 headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em accent: fontFamily: Playfair Display fontSize: 10px fontWeight: 700 lineHeight: 1.2 label-button: fontFamily: Playfair Display fontSize: 9px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.15em rounded: sm: 0px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' diagonal-split-hero: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 560px slanted-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 44px button-more: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 24px section-title: textColor: '{colors.text-muted}' typography: '{typography.headline-lg}' height: 40px red-copy-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 100px profile-circle: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 560px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.body-lg}' height: 80px news-card: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 200px --- # DESIGN.md — 赤×黒の斜め分割で見せる映画公式 LP（Red and Black Diagonal Cinema Thriller LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、レトロ - **キーワード**: 赤黒の斜め分割・不条理スリラー・セリフ欧文・極太明朝・ジグザグ柄・フィルム質感 - **地の質感**: 黒地に細いジグザグ線の柄、赤地に縦ストライプ柄を重ね、フィルムのようなざらつきを出す - **形**: 四角いブロックと斜めの境界が中心。人物写真だけ正円に切り抜く - **温度感**: 朱赤の熱さと黒の冷たさがせめぎ合う、高コントラストで不穏な空気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B73221` | ブランド朱赤（斜め分割・帯の面） | 14% | 画素の実測 | | `background` | `#0C0D10` | メインの漆黒の地 | 45% | 画素の主要色に補正 | | `dark-section` | `#0B0C10` | やや明るい黒（監督セクション地） | 8% | 画素の実測 | | `secondary` | `#800000` | 深紅（音楽プレイヤーカード） | 3% | 画素の実測 | | `accent-1` | `#C52E1D` | 見出しや人名の赤い文字 | 1% | 画素の主要色に補正 | | `accent-2` | `#ECB93A` | レビュー媒体名の山吹色 | 0% | 画素の実測 | | `on-dark` | `#F2F2F2` | 黒地の上の白い本文と見出し | 3% | 推定 | | `text-muted` | `#B5A89B` | 灰色の欧文見出しとすかし文字 | 1% | 画素の主要色に補正 | | `surface` | `#2B1916` | 黒ストライプのレビューカード | 4% | 画素の主要色に補正 | | `line` | `#4A4A4A` | 丸い写真の灰色の枠線 | 0% | 推定 | | `background-alt` | `#FEFEFE` | 白いボタンとバナーの地 | 1% | 画素の実測 | | `text` | `#0C0D10` | 白い地の上の黒い文字 | 0% | 画素の主要色に補正 | - 地は黒が基本。朱赤の面はファーストビュー、ニュース、主役の帯、レビューの節目にだけ使う - 赤と黒の切り替えは水平線にせず、斜めの対角線で分ける - 人名やセクションの欧文サブ見出しは朱赤の文字にする - レビューの媒体名など引用元の強調は山吹色に限る - 本文は黒地に白か薄い灰色。純白の面は小さなボタンやバナーに限る - 青や緑など寒色の差し色は使わない。写真の色味だけに任せる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 作品タイトルなどの極太明朝ロゴ風の大見出し | 明朝 | Shippori Mincho B1 | 800 | 44px | 1.2 | 0.0em | | `headline-lg` | セクション名の欧文見出し（ABOUT、CAST など） | 欧文セリフ | Playfair Display | 700 | 22px | 1.2 | 0.0em | | `headline-md` | 赤帯の上の煽りコピー | 明朝 | Noto Serif JP | 900 | 22px | 1.35 | 0.0em | | `headline-sm` | キャストや監督の人名（赤） | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em | | `body-md` | あらすじや人物紹介の本文 | ゴシック | Noto Sans JP | 400 | 12px | 2.0 | 0.02em | | `body-lg` | あらすじの導入文（太め） | ゴシック | Noto Sans JP | 700 | 14px | 1.9 | 0.02em | | `note` | 見出し下の小さな和文ラベルや役名 | ゴシック | Noto Sans JP | 400 | 8px | 1.4 | 0.05em | | `accent` | 人名の下に添える欧文表記（赤） | 欧文セリフ | Playfair Display | 700 | 10px | 1.2 | 0.0em | | `label-button` | MORE ボタンの欧文の文字 | 欧文セリフ | Playfair Display | 400 | 9px | 1.0 | 0.15em | - 見出しは欧文セリフの大文字を置き、下に小さな和文の訳を添える二段組にする - 煽りコピーは極太の明朝で、帯の中に中央揃えで置く - 本文はゴシックで行間を 2.0 前後と広く取る - 人名は和文ゴシックの赤、その下に欧文セリフを小さく添える - 背景に作品の欧文タイトルを巨大な灰色の文字として薄く敷く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。場面写真は 2 列のグリッド - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 本文ブロックは左右に約 9% の余白を取る - セクション名は常に中央揃えにする - テキストのセクションの間に、幅いっぱいの場面写真グリッドを挟む - 人物紹介は丸い写真、役名、人名、本文の順に縦に積む - レビューは同じ幅の横長カードを縦に並べる ## Elevation & Depth - 基本はフラットにし、影は使わない - レビューカードには黒い柔らかな影を薄く落とす - 奥行きは影ではなく、柄の地と写真の重なりで出す ## Shapes - **角丸**: 小 0px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は灰色の太い枠で囲んだ正円。場面写真は角を丸めない矩形で、隙間なく並べる - **セクション境界**: 赤と黒を斜めの対角線で分割するか、直線で切り替える - ボタンとバナーは角丸にしない四角にする - 角丸は音楽プレイヤーのような埋め込みカードだけに使う - キャッチ見出しは白い縁取りの付いた赤黒の斜めバナーにする ## Components - **斜め分割のファーストビュー**（`diagonal-split-hero`）: 朱赤と黒を対角に分けた地に人物写真を置き、極太明朝のタイトルと受賞の月桂冠バッジを重ねる - **斜めのキャッチバナー**（`slanted-banner`）: 白い枠付きの帯で、左が赤・右が黒。中央に白い明朝の短い見出しを置く - **MORE ボタン**（`button-more`）: 白地に黒い二重の線で囲み、中央に欧文セリフを字間広めで入れる - **欧文セクション見出し**（`section-title`）: 灰色か赤の欧文セリフの大文字に、和文の小さなラベルを添える。背後に巨大なすかし文字を敷く - **赤帯の煽りコピー**（`red-copy-band`）: 幅いっぱいの朱赤の帯に、2 段の明朝コピーを置く。上の段は黄色寄り、下の段は白 - **丸い人物プロフィール**（`profile-circle`）: 灰色の枠付きの正円写真の下に、役名、赤い人名、欧文名、本文を並べる - **レビューカード**（`review-card`）: 黒い縦ストライプの矩形に、白い短い評言と山吹色の媒体名を置く - **ニュースカード**（`news-card`）: 白枠付きのサムネイルの下に、太字の日付と見出しを置く。2 列で並べる ## Do's and Don'ts **Do** - 赤と黒の斜めの対角分割を、ページの冒頭と節目で繰り返す - 黒地にはジグザグの線の柄を、赤地には縦ストライプを敷き、質感を出す - 見出しは欧文セリフと和文の小さなラベルをセットにする - 場面写真のグリッドで、テキストのセクションを区切る - 人物写真は正円にし、灰色の枠で統一する **Don't** - パステルや明るい白い地のセクションを作らない - ボタンをピル型や丸みのある可愛い形にしない - 丸ゴシックや手書きの書体を使わない - 赤を細かいアイコンなどに多用して散らかさない - 写真を角丸のカードに入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と公開情報を一瞬で伝える）: 赤黒の斜め分割の上に人物 2 人を並べ、受賞の月桂冠、公開日、極太の明朝タイトルを重ねる 2. **キャッチバナーと音楽埋め込み**（評判の高さを示し、サウンドトラックへ誘導する）: 斜めのバナーの下に、深紅で角丸の音楽プレイヤーカードを置く 3. **特典告知とニュース**（最新情報と購入特典を知らせる）: 斜め分割の地に横長のバナー、2 列のニュースカード、MORE ボタンを並べる 4. **作品紹介**（あらすじとテーマを伝える）: 顔のアップ写真から黒地へ移る。巨大なすかしタイトルと欧文見出しを置き、白い本文を続ける 5. **訴求コピー帯**（主演と作品の核となる問いを強調する）: 赤い見出しのあとに、朱赤の帯の明朝 2 段コピーを置き、黒地の解説文へ続ける 6. **場面写真ギャラリー**（映像の雰囲気を見せ、区切りにする）: 2 列のグリッドで写真を隙間なく並べる 7. **キャスト**（出演者を紹介する）: ジグザグ柄の黒地に、丸い写真と赤い人名、プロフィールを縦に並べる 8. **監督**（作り手の経歴を示す）: 無地の黒地に、キャストと同じ丸い写真のプロフィール形式で置く 9. **レビュー**（海外メディアの評価で信頼を示す）: 朱赤のストライプ地に、黒いストライプのカードで評言と山吹色の媒体名を並べる 10. **フッター**（タイトルロゴで締める）: 黒地の中央に、赤い欧文ロゴと白い明朝タイトルを置く ## Imagery - 人物は無表情か不安げな顔を、正面から捉えたアップにする - 暖色の照明と粗い粒子の、16mm フィルムのような色味にする - 場面写真は赤や橙の照明やネオンを含むカットを選ぶ - 受賞歴は灰色の月桂冠のモチーフで示す - 背景は黒地に灰色の細いジグザグ線、赤地に暗い縦線を敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC のファーストビューは横長のキービジュアルにし、キャッチを左、音楽プレイヤーを右に浮かせる - PC のニュースは 3 列に広げる - PC のキャストは 2 列に並べ、丸い写真を小さくする - PC のレビューは 3 列×2 段のカードにする - PC の場面写真は横 1 列に 4〜5 枚並べる - 本文は PC でも中央寄せの狭い幅を保つ ## 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-23a7682c`（元 LP の URL から採番） - **元 LP**: https://happinet-phantom.com/different-man/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。