--- version: alpha name: Noir Cinema Promo LP with Red Accent description: 映画公式サイト型の LP。ほぼ黒の地に全面写真と白いカードを交互に置く。赤は題字・役職ラベル・購入ボタンだけに使う。英字の太いゴシック見出しと、明朝の人名で硬派で映画らしい雰囲気を作る。 colors: background: '#161616' surface: '#FFFFFF' primary: '#D7141E' cta: '#E70012' on-cta: '#FEF3F4' on-dark: '#FAFDFC' text-body: '#161616' line: '#F8FAF6' background-alt: '#F4F4F4' text-muted: '#EAEAEA' accent-1: '#94CA11' accent-2: '#F07800' cta-accessible: '#E20012' accent-2-accessible: '#A65300' typography: display: fontFamily: Montserrat fontSize: 34px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Roboto Condensed fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Shippori Mincho fontSize: 17px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Roboto Condensed fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em accent: fontFamily: Noto Serif JP fontSize: 9px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 0px md: 6px lg: 28px full: 999px spacing: unit: 8px card: 30px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' hero-key-visual: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 580px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 38px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px button-pill-video: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px section-title-en: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 30px comment-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 340px event-banner: backgroundColor: '{colors.text-muted}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' height: 100px boxed-campaign: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 1100px video-slider: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 300px --- # DESIGN.md — 黒地×白カード×赤差し色の邦画公式 LP（Noir Cinema Promo LP with Red Accent） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的 - **キーワード**: 映画公式サイト・ノワール・黒地・白カード・赤の差し色・全面写真 - **地の質感**: フラットな黒地。かすれた題字、スモークのグレー地、粗い質感のバナーで映画のざらつきを出す - **形**: 角の立った四角が基本。白い細線の枠ボタンと直角の白カード。ピル型は動画ボタンだけ - **温度感**: 冷たく硬い。写真の暖色の夜景と赤い差し色で熱を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#161616` | ページの地（黒） | 45% | 画素の実測 | | `surface` | `#FFFFFF` | 解説・コメントの白カード | 25% | 画素の実測 | | `primary` | `#D7141E` | 題字の漢字・役職ラベルの赤 | 1% | 推定 | | `cta` | `#E70012` | 購入・動画ボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#FEF3F4` | 赤ボタン上の白文字 | 0% | 画素の実測 | | `on-dark` | `#FAFDFC` | 黒地の上の英字見出し・白文字 | 1% | 画素の実測 | | `text-body` | `#161616` | 白カード内の本文 | 3% | 画素の主要色に補正 | | `line` | `#F8FAF6` | 枠線ボタン・囲み枠の白い細線 | 0% | 画素の実測 | | `background-alt` | `#F4F4F4` | 音楽セクションのスモーク調グレー地 | 5% | 画素の実測 | | `text-muted` | `#EAEAEA` | サブボタンの薄いグレー面 | 0% | 画素の実測 | | `accent-1` | `#94CA11` | 外部販売ボタンの黄緑 | 0% | 画素の実測 | | `accent-2` | `#F07800` | イベント告知バナーのオレンジ文字 | 0% | 推定 | | `cta-accessible` | `#E20012` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#A65300` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ黒の #161616 で統一する。読ませる文章だけを白カードに載せる - 赤は題字の漢字・役職ラベル・購入ボタンに限り、1画面に1〜2か所までにする - 黒地の見出しとナビは白一色にする。グレーの段階は作らない - 写真の暖色（夜のネオン・室内灯）で画面の温度を作る。UI の色は増やさない - 外部チケットサービスのボタンだけ先方の指定色（赤・黄緑）を使ってよい - 音楽などの区切りに、スモーク調の明るいグレー地を1回だけ挟む - `button-primary` は文字 `#FEF3F4` × 背景 `#E70012` のコントラスト比が 4.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E20012`、4.56:1）を使う。 - `button-pill-video` は文字 `#FEF3F4` × 背景 `#E70012` のコントラスト比が 4.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E20012`、4.56:1）を使う。 - `event-banner` は文字 `#F07800` × 背景 `#EAEAEA` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#A65300`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 公開日などの大きな英数字 | 欧文サンセリフ | Montserrat | 700 | 34px | 1.1 | 0.02em | | `headline-lg` | セクションの英字見出し（全部大文字） | 欧文サンセリフ | Roboto Condensed | 700 | 20px | 1.2 | 0.08em | | `headline-md` | セクションのリード見出し（2〜3行、中央揃え） | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.02em | | `headline-sm` | コメントカードの人名・役名 | 明朝 | Shippori Mincho | 600 | 17px | 1.4 | 0.04em | | `body-md` | あらすじ・コメントの本文 | ゴシック | Zen Kaku Gothic New | 500 | 10px | 2 | 0.06em | | `note` | スタッフクレジット・注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.02em | | `label-button` | 枠線ボタン・CTA の文字 | 欧文サンセリフ | Roboto Condensed | 700 | 16px | 1.2 | 0.1em | | `accent` | 役名に添える小さな注記（／○○ 役） | 明朝 | Noto Serif JP | 500 | 9px | 1.4 | 0.02em | - セクション見出しは英字の大文字1語にして、中央に置く。和文の見出しは添えない - 人名には明朝を使う。本文は字間を広げたゴシックで書き分ける - 本文は小さめにして行間を 2.0 前後と広く取り、長文でも詰まって見えないようにする - 役職ラベル（主演・監督など）は人名の前に赤い明朝で小さく置く - キャッチコピーはダッシュで余韻を残す短文にし、黒地に白文字で置く - 題字の英字は、かすれた質感の極太体を写真の上に大きく重ねる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特典カードなどの一覧は 3 列グリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 30px（375px 幅換算） - 白カードは画面幅の約 92% にして、左右に黒い余白を細く残す - コメントカードは縦に並べ、間を約 20px あける - 全面写真は余白なしの画面幅いっぱいで、セクションの区切りに使う - 見出しの上下は約 40px あける - 購入まわりは白い細線の枠で囲んでまとめる - SNS アイコンは正方形の枠線ボタンを横に 3 つ並べる ## Elevation & Depth - 影は基本的に使わない。黒地と白カードの明暗差だけで階層を作る - 購入ウィジェットのカードだけ角丸をごく小さくし、影はほぼ付けない - 写真の上の文字は、写真側の暗さかグラデーションで読みやすくする ## Shapes - **角丸**: 小 0px ／ 中 6px ／ 大 28px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角のまま画面幅いっぱいに裁ち落とす。特典カードは縦長の長方形 - **セクション境界**: 直線で切り替える。黒地 → 全面写真 → 白地の順に、境界を描かず色面だけで区切る - 枠線ボタンは白の 1px 線で角は直角にする - 白カードは角丸なし - ピル型は動画・音楽への誘導ボタン1種だけに使う - スライダーの前後ボタンは正方形にする ## Components - **キービジュアル**（`hero-key-visual`）: 人物写真の帯を縦に重ね、かすれた英字題字を中央に縦に通す。縦書きのコピーと出演者名も重ねる - **枠線ボタン**（`button-outline`）: 黒地に白の細線枠と英字の大文字。ニュースや劇場情報などへ誘導する - **購入 CTA**（`button-primary`）: 赤い面に白文字を2段で入れた購入ボタン - **動画誘導ピルボタン**（`button-pill-video`）: 赤いピル型で、再生アイコンと短いテキストを並べる - **英字セクション見出し**（`section-title-en`）: 大文字の太い英字1語を中央に置く。装飾線は付けない - **コメントカード**（`comment-card`）: 白い角なしカード。赤い役職ラベル・明朝の人名・小さな役名注記を中央に置き、下に字間の広い本文を左揃えで続ける - **告知バナー**（`event-banner`）: ざらついたグレーの質感の地に、白縁取りの太い色文字で告知する。下に「詳しく」の小さなリンクを付ける - **前売券の囲み枠**（`boxed-campaign`）: 白い細線で囲み、中に購入ボタン・白帯のラベル・3 列の特典画像を入れる - **予告動画スライダー**（`video-slider`）: 16:9 のサムネイル、キャプション、ドットのページ送り、正方形の前後ボタンで構成する ## Do's and Don'ts **Do** - 地は黒で通し、長文だけを白カードで読ませる - 赤は数か所に絞って使い、効かせどころを作る - セクションの切り替えに全面写真を挟んで、映画の場面のような間を作る - 人名は明朝、見出しは英字ゴシックと、役割で書体を分ける - 本文は小さめにして、字間・行間を広く取る **Don't** - 角丸の大きいカードや柔らかい影を使わない - 赤の面を広く塗らない - パステル色やグラデーションのボタンを使わない - 見出しにアイコンやイラストの装飾を付けない - 黒地に灰色の小さい文字を置いて読みにくくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と出演陣を一目で伝える）: 人物写真を帯状に重ね、かすれた英字題字・縦書きコピー・出演者名を入れる 2. **コピーと公開日**（公開日を覚えてもらう）: 黒地に白の短いキャッチコピーと大きな英数字の日付を置く 3. **SNS・ナビ・告知**（関連情報への導線）: 正方形の SNS ボタン、枠線ボタン 2 つ、質感のある告知バナーを縦に並べる 4. **チケット購入**（前売券の購入）: 白い購入ウィジェット、赤の CTA、細線で囲んだ特典紹介（3 列グリッド）を置く 5. **予告動画**（映像で興味を引く）: 英字見出しの下に動画スライダーを置く 6. **作品紹介**（作品の背景と見どころを伝える）: 白カードに太字リード見出しと長文を入れ、最後に太字の一文で締める 7. **場面写真**（空気感で区切る）: 場面写真を 2 枚、画面幅いっぱいに横に並べる 8. **あらすじ**（物語の導入）: 白地に見出しと本文を置き、その下に人物写真を白からのグラデーションで溶け込ませる 9. **人物相関図**（登場人物の関係を示す）: 暗い写真地に顔写真と赤・オレンジのラベル、細線で関係を描く 10. **コメント**（出演者とスタッフの声）: 白カードを縦に連続で並べる。人名は明朝、役職ラベルは赤 11. **主題歌**（音楽への導線）: スモーク調のグレー地にアーティスト写真・名前・赤いピル型ボタンを置く 12. **クロージング**（作品情報とシェア）: 主演の写真に題字・日付・クレジットを重ね、円形のシェアボタンとコピーライトを置く ## Imagery - 夜の繁華街や室内灯の下で、暖色で低めの彩度の映画的な写真を使う - 人物は真顔か強い目線でアップにし、背景は浅い被写界深度でぼかす - 題字の英字はかすれて擦れた筆致の極太体にする - グレーの煙やスモークのテクスチャを区切りの地に使う - 顔の傷や刺青など硬派な要素をクローズアップで見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は上部に横並びの英字ナビを固定し、左端に SNS アイコンを置く - PC のキービジュアルは横長にし、左に主演、右に脇役の写真を格子状に並べる - PC の購入ウィジェットは横 1 行にまとめ、特典画像は 6 列に並べる - PC の白カードは幅を約 60% に狭め、中央に置く - PC の動画スライダーは 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-36f82853`（元 LP の URL から採番） - **元 LP**: https://www.culture-pub.jp/ryuji_movie/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-22、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。