--- version: alpha name: Noir Mincho Cinema Thriller LP description: 黒地に明朝体を細く置き、マゼンタのボタンとくすんだ金の飾り罫で緊張感と格調を出す、映画公式サイト型の LP。写真を大きく使い、余白多めで静かに見せる。 colors: background: '#000000' primary: '#D22D8B' cta: '#D22D8B' on-cta: '#FFFFFF' text: '#E0DBD5' secondary: '#AFA694' text-muted: '#7F7D78' line: '#AFA694' background-alt: '#ACA48F' surface: '#20201D' tint-1: '#9D9583' dark-section: '#242424' on-dark: '#FEFEFE' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Playfair Display fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.06em accent: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em label-button: fontFamily: Playfair Display fontSize: 11px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.1em note: fontFamily: Noto Serif JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 24px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px frame-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' height: 2000px banner-stack: backgroundColor: '{colors.on-dark}' textColor: '{colors.text}' height: 80px news-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 60px staff-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 840px name-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' height: 24px share-icons: backgroundColor: '{colors.on-dark}' textColor: '{colors.dark-section}' rounded: '{rounded.full}' height: 48px --- # DESIGN.md — 漆黒×マゼンタ×金の明朝体映画 LP（Noir Mincho Cinema Thriller LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、力強い・インパクト - **キーワード**: 漆黒・明朝体・マゼンタ差し色・金の飾り罫・シネマティック・静謐な緊張感 - **地の質感**: ほぼ単色の黒い面に、ローキーな写真をそのまま置く。光沢や柄はなし - **形**: 直線と矩形が中心。角丸はほぼなし。細い二重罫の額縁で囲む - **温度感**: 冷たく張りつめた印象。くすんだ金とベージュで少しだけ温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページ全体の地色 | 55% | 画素の実測 | | `primary` | `#D22D8B` | ブランドを代表するマゼンタ（ボタン・タイトル装飾） | 2% | 画素の実測 | | `cta` | `#D22D8B` | 劇場情報など主 CTA ボタンの塗り | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の文字 | 0% | 推定 | | `text` | `#E0DBD5` | 見出し・本文の白文字 | 3% | 画素の主要色に補正 | | `secondary` | `#AFA694` | リード見出しのくすんだ金 | 1% | 画素の主要色に補正 | | `text-muted` | `#7F7D78` | 英字名などの補助文字 | 0% | 画素の実測 | | `line` | `#AFA694` | 額縁・飾り罫の金線 | 0% | 画素の主要色に補正 | | `background-alt` | `#ACA48F` | スタッフセクションのベージュ地 | 7% | 画素の実測 | | `surface` | `#20201D` | ベージュ地の上に置く黒カード | 5% | 画素の主要色に補正 | | `tint-1` | `#9D9583` | 監督名の帯ラベル | 0% | 画素の実測 | | `dark-section` | `#242424` | クレジット・シェアのフッター地 | 3% | 画素の実測 | | `on-dark` | `#FEFEFE` | シェア用の白丸アイコン | 0% | 画素の実測 | - 地はほぼ純黒。終盤のスタッフ紹介だけベージュ地に切り替えて変化をつける - マゼンタは CTA ボタンとタイトル周りの英字装飾だけに使う - セクション見出しの下の飾り罫と額縁はくすんだ金で描く - 本文は白より少し温かいオフホワイトにする - リード見出しは金色にして本文の白と分ける - フッターは黒より少し明るい炭色にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の作品タイトル | 明朝 | Shippori Mincho | 800 | 36px | 1.2 | 0.02em | | `headline-lg` | 英字のセクション見出し | 欧文セリフ | Playfair Display | 400 | 24px | 1.2 | 0.08em | | `headline-md` | 金色のリード見出し | 明朝 | Shippori Mincho | 600 | 22px | 1.6 | 0.05em | | `headline-sm` | キャスト名・監督名 | 明朝 | Noto Serif JP | 500 | 17px | 1.4 | 0.08em | | `body-md` | あらすじ・解説本文 | 明朝 | Noto Serif JP | 500 | 12px | 2.0 | 0.06em | | `accent` | 縦書きキャッチと引用コピー | 明朝 | Shippori Mincho | 500 | 14px | 1.6 | 0.15em | | `label-button` | ボタン内の英字ラベル | 欧文セリフ | Playfair Display | 600 | 11px | 1.2 | 0.1em | | `note` | クレジット・日付 | 欧文セリフ | Noto Serif JP | 400 | 8px | 1.5 | 0.02em | - 和文はすべて明朝体で統一し、ゴシック体は使わない - セクション見出しは英字の大文字セリフを中央に置き、下に飾り罫を添える - FV のコピーは縦書きで、画面の上端に並べる - 本文は行間 2.0 前後、字間は少し広めにする - キャスト名は和文名の下に英字名を muted 色で添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ギャラリーは大小 2 枚組の交互配置 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 見出しは中央揃え、本文は左揃えにする - 写真ギャラリーは幅違いの 2 枚を左右で入れ替えながら積む - キャスト一覧は二重罫の額縁の中に、縦長ポートレートを 1 人ずつ並べる - メイン写真は画面幅いっぱいに置いてセクションを区切る - CTA ボタンは横幅 80% ほどで縦に並べる ## Elevation & Depth - 影は使わず、フラットに見せる - 奥行きは黒地とローキー写真の明暗差だけで出す - 額縁は細い金の二重線で浮かせて見せる ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。ポートレートは縦長 3:4 で細い枠線を付ける - **セクション境界**: 直線で地色を切り替える。全幅写真を区切りに挟む - ボタンも写真も角はほぼ直角にする - 丸はシェアアイコンとニュースの矢印だけに使う - 飾り罫は点線と唐草模様を組み合わせた細いものにする ## Components - **マゼンタ CTA ボタン**（`button-primary`）: 英字と和文の 2 段ラベルを載せた矩形ボタン - **線ボタン**（`button-outline`）: 黒地に白の細い枠線を引き、小さな英字で詳細を開くボタン - **英字見出し＋飾り罫**（`section-heading`）: 大文字セリフの英字の下に、点線と唐草の金の罫を中央に置く - **二重罫の額縁**（`frame-box`）: キャストを金の細い二重線で囲む枠 - **販売バナー群**（`banner-stack`）: 白地や画像のバナーを縦に積む。前売券や購入先への導線 - **ニュース行**（`news-row`）: 日付と見出しを左に、マゼンタの丸矢印を右に置き、下に区切り線を引く - **スタッフカード**（`staff-card`）: ベージュ地の上に黒いカードを置き、写真・帯ラベル・略歴を縦に並べる - **帯ラベル**（`name-label`）: 役職と名前を載せたベージュの帯 - **シェアアイコン**（`share-icons`）: 白い丸に黒の SNS アイコンを 3 つ並べる ## Do's and Don'ts **Do** - 地は黒で通し、終盤だけベージュに切り替える - 和文は明朝体、見出しは英字のセリフ体にする - マゼンタはボタンとタイトル装飾だけに絞る - 写真はローキーで彩度を抑えたものを大きく使う - 余白を広めに取って静かに見せる **Don't** - ゴシック体や丸ゴシックを使わない - 角丸のピル型ボタンや影を付けない - マゼンタを広い面や本文に使わない - 明るいパステル色やグラデーション背景を入れない - 見出しを太字ゴシックで大きく主張させない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と公開日を伝える）: 全幅のキービジュアル。縦書きコピー、マゼンタの大きな英字、白い明朝タイトルを重ねる 2. **クレジット・CTA**（公式 SNS と劇場情報へ誘導する）: 小さなクレジットの下に、マゼンタの矩形ボタンを縦に 2 つ並べる 3. **販売バナー**（前売券やグッズの購入へ導く）: 幅 80% のバナーを 4 枚、縦に積む 4. **ニュース**（最新情報を知らせる）: 英字見出しと一覧へのリンク、日付付きの行、区切り線 5. **予告動画**（映像で興味を引く）: 埋め込み動画の下に、マゼンタの小さなキャプションを添える 6. **イントロダクション**（作品の見どころを伝える）: 全幅写真、英字見出しと飾り罫、金色の中央揃えリード、左揃えの長い本文 7. **場面写真ギャラリー**（作品の雰囲気を見せる）: 大小の写真を 2 枚組で交互に積む 8. **ストーリー**（あらすじを紹介する）: 英字見出しと飾り罫の下に、明朝体の本文を置く 9. **キャスト**（出演者を紹介する）: 二重罫の額縁の中に、縦長ポートレート・和英の名前・線ボタンを順に並べる 10. **スタッフ**（監督の経歴を紹介する）: ベージュ地の上に黒カードを置き、写真・帯ラベル・略歴を並べる 11. **フッター・シェア**（権利表記と拡散導線）: 炭色の地に極小のクレジットを置き、英字見出しと白丸の SNS アイコンを並べる ## Imagery - 写真は暗めの室内照明で撮った、低彩度・ローキーのシネマティックなスチル - 人物は緊張した表情を寄りで撮り、背景は暗く落とす - ポートレートは紫がかった暗い背景で、正面から撮った顔のアップ - 装飾は細い金の唐草飾り罫と二重額縁だけにする - イラストやアイコン装飾は使わない - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はグローバルナビの英字メニューを上端の中央に置く - PC のキャストは額縁の中で 4 列横並びにし、背景に暗い場面写真を敷く - PC の販売バナーは 4 枚を横 1 列に並べる - PC のギャラリーは 3 列のモザイクにする - PC のスタッフカードは写真左・本文右の 2 カラムにする - 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-0392cb24`（元 LP の URL から採番） - **元 LP**: https://michitaritakazoku.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。