--- version: alpha name: Yellow and Black Bold Mincho Film LP description: 鮮やかな黄色と黒を交互に敷き、太い明朝体の縦組みタイトルとモノクロ寄りの場面写真で、社会派映画らしい緊張感を出すスタイル。上映館一覧は白地のテーブルに黄色の見出し行を付けて情報を整理する。 colors: primary: '#FEE600' secondary: '#F5D602' dark-section: '#000000' on-dark: '#FFFFFF' accent-1: '#FEE600' background: '#FAFAFA' surface: '#F5F5F5' text: '#000000' background-alt: '#FDFDFD' line: '#555555' accent-2: '#0B0300' text-muted: '#534539' typography: display: fontFamily: Shippori Mincho B1 fontSize: 56px fontWeight: 800 lineHeight: 1.0 headline-lg: fontFamily: Shippori Mincho B1 fontSize: 24px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Space Mono fontSize: 28px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.3em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 12px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-vertical-title: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.display}' height: 460px dark-lead-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 120px cast-card: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 200px role-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 16px comment-block: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 140px region-tab: backgroundColor: '{colors.accent-2}' textColor: '{colors.accent-1}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px theater-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 32px share-buttons: textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px --- # DESIGN.md — 黄×黒の太明朝で組む邦画公式サイト LP（Yellow and Black Bold Mincho Film LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、レトロ、情報量多め・訴求型 - **キーワード**: 黄×黒の強いコントラスト・太明朝の縦組み・昭和の手配書風・場面写真の帯・情報テーブル - **地の質感**: 黒地に薄い擦れ・煙のテクスチャ。劇場情報は白い大理石・紙のようなムラのある地。 - **形**: 角丸なしの直線基調。写真は白い太枠付きの正方形。地域タブだけピル型。 - **温度感**: 黄色が熱く、黒と灰色が冷たく引き締める。全体に硬派で骨太。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FEE600` | キービジュアル・スタッフ欄の黄色地 | 12% | 画素の実測 | | `secondary` | `#F5D602` | 登場人物セクションの濃い黄色地 | 13% | 画素の実測 | | `dark-section` | `#000000` | あらすじ導入・コメント欄の黒地 | 22% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の本文・見出し文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#FEE600` | 黒地見出しの強調語の黄色文字 | 1% | 画素の主要色に補正 | | `background` | `#FAFAFA` | 劇場情報・あらすじの明るい灰白地 | 20% | 画素の実測 | | `surface` | `#F5F5F5` | 上映館テーブルを載せる白いパネル | 6% | 画素の実測 | | `text` | `#000000` | 明るい地上の見出し・本文の黒文字 | 3% | 画素の主要色に補正 | | `background-alt` | `#FDFDFD` | テーブル偶数行の生成り色 | 2% | 画素の実測 | | `line` | `#555555` | テーブル行の区切り線 | 1% | 推定 | | `accent-2` | `#0B0300` | 役名ラベル・地域タブの黒い帯 | 1% | 画素の実測 | | `text-muted` | `#534539` | テクスチャ黒地の灰色の煙 | 4% | 画素の主要色に補正 | - 地色は黄→黒→灰白→黄→黒→灰白の順に、セクションごとに大きく切り替える。 - 黄色地の文字は黒だけにし、他の色は加えない。 - 黒地の大見出しは白を基本に、キーワード1行だけ黄色にする。 - 上映館テーブルは見出し行を黄色、本文行を白と生成りの交互にする。 - ラベルやタブは黒地に白か黄の文字にする。 - 写真の色はそのまま使い、UI に中間色は増やさない。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦組みの作品タイトル（鉤括弧付き） | 明朝 | Shippori Mincho B1 | 800 | 56px | 1.0 | 0.0em | | `headline-lg` | 黒地の導入大見出し（3行） | 明朝 | Shippori Mincho B1 | 800 | 24px | 1.4 | 0.02em | | `headline-md` | 公開日・キャスト名の太字 | 明朝 | Noto Serif JP | 900 | 20px | 1.3 | 0.0em | | `headline-sm` | セクション名・人物名・地方名 | 明朝 | Noto Serif JP | 700 | 16px | 1.4 | 0.05em | | `body-md` | あらすじ・プロフィール・コメント本文 | 明朝 | Noto Serif JP | 400 | 13px | 1.8 | 0.02em | | `note` | 役名ラベル・読み仮名・表のセル | 明朝 | Noto Serif JP | 400 | 11px | 1.5 | 0.0em | | `accent` | キービジュアルの英字タイトル（字間を広く） | 欧文サンセリフ | Space Mono | 700 | 28px | 1.2 | 0.3em | - 和文はすべて明朝体で統一し、ゴシックは使わない。 - タイトルとコピーは縦組みにして、昭和の映画ポスターのような雰囲気を出す。 - 大見出しは極太の明朝で、1行を短く区切る。 - 本文は小さめの明朝で、行間 1.8 で読みやすくする。 - 人物名の後ろには、読み仮名を小さく括弧書きで添える。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。登場人物は 2 列のグリッド（主演だけ 1 列で中央）。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算） - セクション見出しは小さめの明朝で中央に置き、上下に余白をとる。 - 場面写真の帯は画面幅いっぱいに置き、余白なしで並べる。 - 本文ブロックは左揃えにし、左右に 5% の余白をとる。 - コメントは引用ごとに右寄せの署名と短い横線で区切る。 - 上映館の表は地域・劇場・公開日・備考の 4 列にする。 ## Elevation & Depth - 影はほぼ使わず、平面のまま色面で区切る。 - 人物写真は白い太枠（4px 程度）で浮いて見せる。 - 劇場情報は、テクスチャ地の上に白パネルを重ねて一段上げる。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。 - **写真の切り抜き**: 人物は正方形に白枠付きで切り抜く。場面写真は横長の矩形で、全幅に並べる。 - **セクション境界**: 直線で色面を切り替える。斜めや波形の区切りは使わない。 - カード・表・写真は角丸なしにする。 - ピル型は地域タブと SNS ボタンだけに限る。 - 装飾線は細い黒の直線だけにする。 ## Components - **縦組みタイトル付きキービジュアル**（`hero-vertical-title`）: 黄色地に人物写真を右に配置し、極太明朝の縦組みタイトルと公開日、出演者名の羅列、字間の広い英字タイトルを重ねる。 - **黒地の導入大見出し**（`dark-lead-heading`）: テクスチャの黒地に白の極太明朝を3行で置き、中央の1行だけ黄色にする。 - **人物カード**（`cast-card`）: 白枠の正方形写真の下に黒帯の役名ラベルを付け、その下に太字の名前と読み仮名を置く。 - **役名ラベル**（`role-label`）: 小さな黒い帯に白文字で役名を入れ、写真と名前の間に置く。 - **コメント引用**（`comment-block`）: 黒地に白の本文を数行置き、右寄せの太字で署名と肩書きを添え、短い横線で区切る。 - **地域タブ**（`region-tab`）: 黒いピル型のボタンに黄色の文字を入れ、横並びで折り返す。 - **上映館テーブル**（`theater-table`）: 黄色の見出し行の下に、白と生成りを交互にした行を並べる。行は細い線で区切り、劇場名には下線を付ける。 - **SNS シェアボタン列**（`share-buttons`）: 丸い黒アイコンと、各 SNS 色の小さなピルを中央に並べる。 ## Do's and Don'ts **Do** - 黄色と黒の面を、セクション単位で大きく交互に使う。 - 見出しも本文も明朝体で統一する。 - 人物写真は同じサイズの正方形に揃え、白枠を付ける。 - 場面写真は全幅の帯にして、物語の空気を差し込む。 - 情報量の多い一覧は、表組みで整理する。 **Don't** - 角丸カードや柔らかいパステル色は使わない。 - ゴシック体の大見出しは使わない。 - 黄色地に黄色系や灰色の文字を載せない。 - 影やグラデーションのボタンで装飾しすぎない。 - 写真をイラストや丸型の切り抜きに置き換えない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品名・公開日・出演者を一目で伝える）: 黄色地に右側の人物写真、縦組みの極太タイトル、受賞バッジ、出演者名の羅列を置く。 2. **SNS 埋め込み・作品データ**（最新情報とクレジットを示す）: 黒地に SNS の埋め込み枠と、小さな黄色文字のクレジット一覧を並べる。 3. **場面写真の帯**（作品の世界観を見せる）: モノクロ寄りの写真と手配書風の画像を、全幅に並べる。 4. **作品の導入**（テーマと背景を語る）: テクスチャの黒地に、3行の大見出しと長文の白い本文、人物の切り抜き写真を置く。 5. **あらすじ**（物語の概要を伝える）: 全幅のカラー場面写真の下に、白地で中央の見出しと本文を置き、さらに写真の帯を続ける。 6. **スタッフ**（制作陣の経歴を紹介する）: 黄色地に、役職・太字の名前・プロフィール文を縦に積む。 7. **登場人物**（キャストと役柄を紹介する）: 濃い黄色地に主演を1人大きく置き、その下に3列（SP では2列）の人物カードを並べる。 8. **コメント**（著名人の推薦で信頼を補強する）: 黒地に引用文と右寄せの署名を、横線で区切って縦に並べる。 9. **劇場情報**（上映館を探せるようにする）: 灰白のテクスチャ地に白パネルを置き、地域タブと地方別の表を並べる。 10. **フッター**（作品名の再提示と共有を促す）: 黒地にタイトルロゴと SNS ボタン、右端にモノクロの人物写真を置く。 ## Imagery - 人物は眼鏡やうつむき気味の表情を、ややローキーで撮った実写にする。 - 場面写真は昭和の街・新聞・薄暗い室内などのモノクロ・低彩度を基調にし、カラーは温かい室内灯の場面に絞る。 - 手配書や古い掲示物風の画像を差し込み、時代感を出す。 - 黒地には、煙や擦れのような粗いテクスチャを敷く。 - 劇場情報の地は、白い大理石や紙のムラのある質感にする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は本文幅を約 70% に絞って中央に置くため、SP では 90% に広げる。 - 登場人物は PC の 3 列から SP の 2 列に変える。 - キービジュアルの縦組みタイトルは、SP でも縦組みを保ち写真に重ねる。 - 上映館の表は、SP では備考列を小さくするか、横スクロールにする。 - 場面写真の帯は、SP では 2 枚ずつに折り返す。 ## 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-cef7f45a`（元 LP の URL から採番） - **元 LP**: https://kirishimadesu.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。