--- version: alpha name: School Chalkboard Comedy Film LP description: 黒地のキービジュアルに金の題字と黄色の公開日を置き、その下を方眼紙・黒板・生成りグラデの地に切り替えて学園の空気を出す映画公式サイト型。金のピル型ラベルと紺の欧文見出しで情報を整理する。 colors: dark-section: '#020202' on-dark: '#FDFDFD' accent-1: '#FDF718' primary: '#AB9A4B' secondary: '#3F5E57' background: '#FFFFFF' background-alt: '#FFFEEB' tint-1: '#FAFAFC' accent-2: '#1E3A7A' text-body: '#333333' cta: '#E0161E' on-cta: '#FFFFFF' surface: '#FEFEFE' accent-3: '#D8283A' primary-accessible: '#827539' typography: display: fontFamily: Shippori Mincho fontSize: 90px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.2em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Montserrat fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.2em headline-sm: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Yomogi fontSize: 20px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em label-button: fontFamily: Playfair Display fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 400 lineHeight: 1.5 rounded: sm: 2px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 70px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px link-gold: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 30px pill-comment: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px news-box: backgroundColor: '{colors.surface}' typography: '{typography.headline-sm}' height: 100px paper-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 480px handwritten-label: typography: '{typography.accent}' height: 50px section-title-en: textColor: '{colors.accent-2}' typography: '{typography.headline-md}' height: 40px ticket-card: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px --- # DESIGN.md — 黒板緑×金の学園コメディ映画 LP（School Chalkboard Comedy Film LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、上品・高級 - **キーワード**: 映画公式サイト・黒板・方眼紙・金箔・学園コメディ・手書き - **地の質感**: 黒板のチョーク汚れ、方眼ノート、金箔グラデ、髪の毛のような繊維テクスチャ - **形**: 四角い写真を少し傾けて貼る、ピル型の金ラベル、白い紙カードに影 - **温度感**: 上部は黒で引き締め、中盤以降は生成りと金で暖かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `dark-section` | `#020202` | ファーストビュー・チケット帯の黒地 | 12% | 画素の実測 | | `on-dark` | `#FDFDFD` | 黒地上の白文字 | 2% | 画素の実測 | | `accent-1` | `#FDF718` | 公開日の黄色 | 0% | 画素の実測 | | `primary` | `#AB9A4B` | 金ラベル・人名の金色 | 2% | 画素の実測 | | `secondary` | `#3F5E57` | 黒板の深緑 | 8% | 推定 | | `background` | `#FFFFFF` | キャスト以降の白地 | 30% | 画素の実測 | | `background-alt` | `#FFFEEB` | 右端の生成りグラデ | 6% | 画素の実測 | | `tint-1` | `#FAFAFC` | 方眼紙の地 | 10% | 画素の実測 | | `accent-2` | `#1E3A7A` | 欧文見出し・紹介見出しの紺 | 0% | 推定 | | `text-body` | `#333333` | 本文の濃灰 | 5% | 推定 | | `cta` | `#E0161E` | チケット購入ボタンの赤 | 0% | 推定 | | `on-cta` | `#FFFFFF` | 購入ボタン上の白文字 | 0% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 白い紙カード | 5% | 画素の実測 | | `accent-3` | `#D8283A` | 手書き矢印の赤 | 0% | 推定 | | `primary-accessible` | `#827539` | AA を満たす補正値（計算） | | 計算 | - 上部の FV とチケット帯は黒で統一し、題字は白か金、公開日だけ黄色にする - イントロは方眼紙の地、ストーリーは黒板の深緑にして学園の空気を出す - キャスト以降は白地にし、右端だけ生成りのグラデを入れる - 人名・ラベル・題字の差し色は金一色にする - 欧文のセクション見出しは紺にする - 赤は購入ボタンと手書き矢印だけに使う - `pill-comment` は文字 `#FDFDFD` × 背景 `#AB9A4B` のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#827539`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 作品タイトル題字 | 明朝 | Shippori Mincho | 500 | 90px | 1.1 | 0.2em | | `headline-lg` | 公開日・FVのコピー | ゴシック | Noto Sans JP | 900 | 22px | 1.5 | 0.05em | | `headline-md` | STORY・CAST などの欧文見出し | 欧文サンセリフ | Montserrat | 400 | 26px | 1.2 | 0.2em | | `headline-sm` | キャスト・スタッフの人名 | 明朝 | Noto Serif JP | 600 | 22px | 1.3 | 0.05em | | `body-md` | プロフィール・あらすじ本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.0em | | `accent` | 手書きのセクションラベル | 手書き・筆 | Yomogi | 400 | 20px | 1.3 | 0.05em | | `label-button` | 金ラベル・SNSボタン文字 | 欧文セリフ | Playfair Display | 700 | 13px | 1.2 | 0.1em | | `note` | クレジット表記 | ゴシック | Noto Sans JP | 400 | 7px | 1.5 | 0.0em | - 題字は明朝を大きく字間を空けて置き、金の箔グラデにする - セクション見出しは欧文大文字で字間を広く取り、細めのウェイトにする - ストーリーの欧文見出しだけは黄色の手書き風にする - 人名は金の明朝にし、役職は小さく横に添える - 本文は12px前後のゴシックで行間を広めにする - イントロの見出しは紺の太ゴシックで2行にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は人物写真左・本文右の 2 カラム - **本文ブロックの幅**: 画面幅の約 80% - **余白**: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算） - 人物写真は幅約55%で中央に置き、下に名前・ラベル・本文を縦に積む - 場面写真は左右に互い違いにずらして重ねる - イントロ写真は少し傾けて貼り、本文カードを下に重ねる - リンクボタンは 2×2 のグリッドにする - フッター前に場面写真を 2×2 の全幅グリッドで並べる ## Elevation & Depth - 白い紙カードには柔らかいドロップシャドウを付ける - 傾けた写真にも薄い影を付けて貼り紙風にする - ボタンやラベルには影を付けず平面にする ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。人物は正方形に近い比率でバストアップ - **セクション境界**: 直線で地の色を切り替える（黒→方眼→黒板→白） - 金のCOMMENTラベルはピル型にする - 購入ボタンは角丸を小さめにした長方形 - 写真は角丸にせず、傾けるかずらして動きを出す ## Components - **チケット購入ボタン**（`button-primary`）: 赤地に白文字。白い購入カード内に置く - **金グラデのリンクボタン**（`link-gold`）: 金箔グラデの横長ボタン。左にアイコンと縦線、黒文字の欧文で、2×2に並べる - **コメントラベル**（`pill-comment`）: 金地に白の小さい欧文と別窓アイコン。人名の下に置く - **ニュース枠**（`news-box`）: 黒地の上に白い箱。上段に金のラベルと欧文、黒線で区切って下段に見出し - **紙カード**（`paper-card`）: 方眼紙の上に影付きの白いカード。紺の見出しと吹き出しアイコンを置く - **手書きラベルと矢印**（`handwritten-label`）: 黒の手書き文字の後ろから赤い曲線矢印をカードに向けて伸ばす - **欧文セクション見出し**（`section-title-en`）: 紺の大文字欧文を字間広めで中央に置く - **前売券購入カード**（`ticket-card`）: 黒地の上に角丸の白いカード。券種のセレクト、合計金額、赤いボタン、灰色のサブボタンを縦に並べる ## Do's and Don'ts **Do** - 地の色をセクションごとに黒・方眼・黒板・白と切り替える - 金は人名・題字・ラベルに絞って格を出す - 写真はずらしたり傾けたりして配置にリズムを出す - 手書き文字と矢印で遊びを足す **Don't** - 金・紺・黒板緑・黒以外の差し色を増やさない - 写真を角丸にしない - 赤を購入ボタン以外の面に広く使わない - 欧文見出しを太字にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品の世界観と公開日を伝える）: 全面写真を黒にグラデで溶かし、受賞の金バッジ・白い明朝の題字・黄色の公開日・白いコピー・クレジットを縦に並べる 2. **ニュース・リンク**（最新情報と外部リンクへ誘導する）: 黒地に白いニュース枠を置き、金グラデのボタンを 2×2 に並べる 3. **CTA（前売券）**（前売券を買ってもらう）: 黒地に白い購入カード、赤いボタン、関連書籍のバナー 4. **イントロダクション**（作品の概要を伝える）: 方眼紙の地に傾けたビジュアル写真を置き、手書きラベルと矢印、影付きの紙カードを重ねる 5. **ストーリー**（あらすじを伝える）: 黒板テクスチャの地に、黄色の手書き風欧文見出しと白文字の段落 6. **場面写真**（作品の雰囲気を見せる）: 4枚の写真を左右に互い違いにずらして縦に並べる 7. **キャスト**（出演者を紹介する）: 紺の欧文見出しの下に、人物写真・金の人名・コメントラベル・プロフィールの順で繰り返す 8. **スタッフ**（制作陣を紹介する）: キャストと同じ型にし、2人目以降は写真なしで人名と役職だけ 9. **フッター**（シェアと締め）: 全幅2×2の場面写真の後、髪の毛のテクスチャの上に金の題字とSNSアイコン ## Imagery - 人物は自然光で撮ったスチルを使い、教室や廊下の生活感を残す - キービジュアルは群衆が主人公を囲む俯瞰構図にする - 黒板・方眼紙・髪の毛などの実物テクスチャを地に使う - 金は箔のような光沢グラデで表現する - 手書きの文字・矢印・吹き出しを要所に置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の FV は横長の写真にし、題字・公開日・コピーを右寄せにする - PC ではニュースを1行にまとめ、リンクボタンは4つ横に並べる - PC の購入カードは横長1枚に再構成する - PC のイントロは写真を左に、カードを右下に重ねる - PC の場面写真は5枚を横1列に並べる - PC のキャストは写真左・本文右の 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-042d6a6d`（元 LP の URL から採番） - **元 LP**: https://kinpatsumovie.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。