DESIGN.md — 黒板緑×金の学園コメディ映画 LP（School Chalkboard Comedy Film LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、情報量多め・訴求型、上品・高級
• キーワード: 映画公式サイト・黒板・方眼紙・金箔・学園コメディ・手書き
• 地の質感: 黒板のチョーク汚れ、方眼ノート、金箔グラデ、髪の毛のような繊維テクスチャ
• 形: 四角い写真を少し傾けて貼る、ピル型の金ラベル、白い紙カードに影
• 温度感: 上部は黒で引き締め、中盤以降は生成りと金で暖かい

Colors

• 上部の FV とチケット帯は黒で統一し、題字は白か金、公開日だけ黄色にする
• イントロは方眼紙の地、ストーリーは黒板の深緑にして学園の空気を出す
• キャスト以降は白地にし、右端だけ生成りのグラデを入れる
• 人名・ラベル・題字の差し色は金一色にする
• 欧文のセクション見出しは紺にする
• 赤は購入ボタンと手書き矢印だけに使う
• pill-comment は文字 #FDFDFD × 背景 #AB9A4B のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#827539、4.53:1）を使う。

Typography

• 題字は明朝を大きく字間を空けて置き、金の箔グラデにする
• セクション見出しは欧文大文字で字間を広く取り、細めのウェイトにする
• ストーリーの欧文見出しだけは黄色の手書き風にする
• 人名は金の明朝にし、役職は小さく横に添える
• 本文は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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。