--- version: alpha name: Warm Greige Cinematic Film LP description: 生成りグレージュと墨色の面を交互に重ね、琥珀オレンジの細い欧文見出しと縦線で章を区切るミニシアター映画の公式サイト型。写真は彩度を抑えた映画のスチルで、静かで温かいドキュメンタリー調。 colors: primary: '#C87C12' background: '#D6D1BD' background-alt: '#E1E1D6' dark-section: '#3C3D38' secondary: '#1C1D22' surface: '#F9F9FA' text: '#4B4943' text-body: '#4B4943' text-muted: '#8A7F6E' on-dark: '#FEFFFF' tint-1: '#D5D1BC' cta: '#E3820F' on-cta: '#FEFBED' accent-1: '#BE6C5E' cta-accessible: '#AA610B' on-dark-accessible: '#006262' text-muted-accessible: '#7A7162' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 72px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Oswald fontSize: 40px fontWeight: 300 lineHeight: 1.1 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.08em accent: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 600 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Oswald fontSize: 10px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 6px lg: 8px 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.text}' typography: '{typography.headline-lg}' section-title: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 110px award-laurel: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 70px info-pill-band: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px campaign-banner: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 140px video-tabs: textColor: '{colors.primary}' typography: '{typography.label-button}' height: 40px cast-card: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 230px staff-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 900px comment-bracket: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 300px theater-table: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.note}' height: 200px button-outline: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 42px --- # DESIGN.md — グレージュ×琥珀色の映画公式 LP（Warm Greige Cinematic Film LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ナチュラル、上品・高級、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: 映画スチル・グレージュ・琥珀オレンジ・細身欧文見出し・縦線区切り・静かな余韻 - **地の質感**: マットな紙のようなグレージュ地。写真セクションは暗く落とした半透明オーバーレイ - **形**: ほぼ直角。カードと写真に小さな角丸、コメントは角括弧型の白線フレーム - **温度感**: 暖色寄りのニュートラル。暗部は墨色で落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C87C12` | セクション欧文見出し・日付・強調 | 2% | 画素の実測 | | `background` | `#D6D1BD` | FV・キャスト・フッター地のグレージュ | 22% | 画素の実測 | | `background-alt` | `#E1E1D6` | 予告編・劇場一覧の明るい生成り地 | 14% | 画素の実測 | | `dark-section` | `#3C3D38` | スタッフ・キャンペーン帯の墨色地 | 22% | 画素の実測 | | `secondary` | `#1C1D22` | コメント欄の黒地 | 10% | 画素の実測 | | `surface` | `#F9F9FA` | スタッフカード・表の白面 | 10% | 画素の実測 | | `text` | `#4B4943` | 見出し・キャスト名の濃いグレー | 3% | 画素の主要色に補正 | | `text-body` | `#4B4943` | 本文テキスト | 3% | 画素の主要色に補正 | | `text-muted` | `#8A7F6E` | 劇場名・欧文名の淡色 | 1% | 推定 | | `on-dark` | `#FEFFFF` | 暗部上の白文字 | 2% | 画素の主要色に補正 | | `tint-1` | `#D5D1BC` | スタッフ役職ラベル地 | 1% | 画素の実測 | | `cta` | `#E3820F` | キャンペーンバナー・告知帯 | 2% | 画素の実測 | | `on-cta` | `#FEFBED` | オレンジ面上の白文字 | 1% | 画素の実測 | | `accent-1` | `#BE6C5E` | 原作者名など補助強調のテラコッタ | 1% | 画素の実測 | | `cta-accessible` | `#AA610B` | AA を満たす補正値（計算） | | 計算 | | `on-dark-accessible` | `#006262` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#7A7162` | AA を満たす補正値（計算） | | 計算 | - グレージュ→生成り→墨色→黒を章ごとに切り替え、リズムを作る - 強調色は琥珀オレンジ 1 色に絞り、欧文見出し・日付・人物名・地区見出しに使う - 暗部の本文は白、明部の本文は濃いグレー（純黒は使わない） - 白面はカードと表だけに限定し、地は常に色味のあるニュートラル - 写真上の文字は黒の半透明オーバーレイで可読性を確保 - `info-pill-band` は文字 `#FEFBED` × 背景 `#E3820F` のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AA610B`、4.57:1）を使う。 - `campaign-banner` は文字 `#FEFBED` × 背景 `#E3820F` のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AA610B`、4.57:1）を使う。 - `cast-card` は文字 `#FEFFFF` × 背景 `#D6D1BD` のコントラスト比が 1.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-dark-accessible`（`#006262`、4.69:1）を使う。 - `theater-table` は文字 `#8A7F6E` × 背景 `#F9F9FA` のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#7A7162`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の作品タイトル（白抜き） | 丸ゴシック | M PLUS Rounded 1c | 500 | 72px | 1.2 | 0.1em | | `headline-lg` | 章見出しの欧文（細身・縦長） | 欧文サンセリフ | Oswald | 300 | 40px | 1.1 | 0.0em | | `headline-md` | FV のリード・紹介見出し | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.5 | 0.08em | | `headline-sm` | 人物名・地区見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.4 | 0.08em | | `body-md` | 紹介文・プロフィール本文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.9 | 0.08em | | `accent` | 著名人コメント本文（明朝） | 明朝 | Noto Serif JP | 600 | 13px | 1.9 | 0.03em | | `note` | 欧文名・出典・クレジット | 欧文サンセリフ | Oswald | 300 | 10px | 1.4 | 0.02em | | `label-button` | タブ・問い合わせボタン | ゴシック | Noto Sans JP | 500 | 14px | 1.4 | 0.05em | - 章見出しは英大文字の細身コンデンス書体＋直下に短い縦線 - 和文見出しは太ゴシックで字間をやや広く - 本文は字間 0.08em 前後でゆったり組む - 評論の引用は白の太いイタリック調ゴシック、コメントは明朝で語りの温度を出す - 人物名は和名→役者名→欧文名の 3 段で階層化 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、キャストは 2 カラムグリッド - **本文ブロックの幅**: 画面幅の約 93% - **余白**: セクション間 80px、基本単位 8px、カード内 30px（375px 幅換算） - 章見出し上下に大きな余白（60〜90px） - 写真は画面幅いっぱい、本文は左右 12px 程度の余白 - スタッフはラベル→白カード（写真・名前・本文）を縦積み - 劇場は地区見出し＋4 列の表 - コメントは左右に角括弧フレームを置き中に本文 ## Elevation & Depth - 影はほぼ使わずフラット - 奥行きは写真の暗いオーバーレイと地色の切替で表現 - 白カードも影なしで地との明度差のみ ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 横長の映画スチルを矩形切り抜き、キャストは小角丸 - **セクション境界**: 直線で地色を切り替える - ボタンは細い枠線の矩形 - コメント枠は上下が開いた角括弧型の白線 - 役職ラベルは角なしの帯 - FV 写真は 3 枚を細い間隔で縦積み ## Components - **欧文章見出し＋縦線**（`section-title`）: 細身の英大文字見出しの下に 1px 縦線を 50px 程度伸ばす - **月桂冠受賞バッジ**（`award-laurel`）: オレンジの月桂樹で受賞名を囲む。円形の評価バッジと並べる - **選定告知帯**（`info-pill-band`）: オレンジ地の角丸帯に白文字 1 行 - **キャンペーンバナー**（`campaign-banner`）: オレンジ面の告知と下部白帯の詳細リンク - **動画切替タブ**（`video-tabs`）: カメラアイコン＋文字の 2 タブ、選択中はオレンジ - **キャストカード**（`cast-card`）: 角丸写真の下に役名（白太字）・役者名・欧文名を中央揃え - **スタッフプロフィールカード**（`staff-card`）: グレージュの役職ラベル＋白カード。写真、オレンジ名、本文 - **コメント角括弧フレーム**（`comment-bracket`）: 黒地写真上に白線の角括弧。明朝本文と右寄せのオレンジ署名 - **劇場一覧表**（`theater-table`）: オレンジ縦線付きの地区見出し＋白地 4 列表 - **枠線ボタン**（`button-outline`）: 濃いグレーの 1px 枠、角丸小の問い合わせボタン ## Do's and Don'ts **Do** - 地色はグレージュ系と墨色で交互に切り替える - 強調はオレンジ 1 色に限定する - 写真は彩度を落とした自然光のスチルを使う - 章見出しは欧文細身＋縦線で統一する - 余白は大きく取り、静かな間を作る **Don't** - 純白の背景を全面に敷かない - ビビッドな青や緑を加えない - ドロップシャドウや立体ボタンを使わない - ピル型の大きな購入ボタンを乱発しない - 太い装飾フォントを見出しに混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の空気感と公開日を伝える）: スチル 3 枚を縦積み、下に白抜きの大タイトル、リード、受賞バッジ、大きなオレンジ日付と劇場名 2. **協賛ロゴ・購入導線**（信頼と前売り券への導線）: グレーのロゴ列、赤い前売り券バナー、SNS アイコン 3. **キャンペーン**（参加型施策の告知）: 墨色地にオレンジバナーと協賛ロゴ 4. **予告編**（動画で作品を体験させる）: 生成り地、2 タブ、全幅の動画埋め込み 5. **作品紹介**（背景と評価を伝える）: 淡い街並み写真の透かし地に全幅スチルと太字見出し＋本文を 2 組 6. **あらすじ**（物語の導入）: 暗い街並み写真に白文字本文 7. **キャスト**（登場人物の紹介）: グレージュ地に 2 カラムの写真カード 8. **スタッフ**（作り手の信頼性）: 墨色地にラベル＋白カードを縦積み 9. **海外評**（評価の短い引用）: 暗くした写真上に白の太い引用と出典を中央揃えで並べる 10. **著名人コメント**（共感と推薦）: 黒地写真上に角括弧フレームの明朝コメント 11. **場面写真**（余韻）: 2×2 の隙間なしグリッド 12. **劇場情報**（鑑賞行動への導線）: 地区ごとの見出しと白表、最後にオレンジ太字の告知 13. **フッター**（クレジットと問い合わせ）: グレージュ地に小さなクレジット、白抜きタイトル、枠線ボタン、TOP リンク ## Imagery - 自然光で撮った子どもや人物のドキュメンタリー調スチル - 彩度を抑え、温かい色かぶりのある映画的グレーディング - 背景用の街並みは薄く透かしてテクスチャ化 - 暗いセクションは写真に黒グラデーションをかけて文字を載せる - 小さな黄色い鳥のような手描きモチーフをアクセントに散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV がタイトル左・スチル中央・リード右の 3 分割 - PC の作品紹介は写真と本文の左右交互 2 カラム - キャストは SP 2 列→PC 4 列 - スタッフカードは PC で写真左・本文右の横並び - 劇場表と見出しは 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-2d06b675`（元 LP の URL から採番） - **元 LP**: https://culturallife.co.jp/bokuranoibasho/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。