DESIGN.md — 深緑青×山吹色の社会派映画公式 LP（Teal and Saffron Documentary Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 信頼・誠実、力強い・インパクト、情報量多め・訴求型
• キーワード: 社会派映画・ティール×山吹・全幅スチル・英字見出し+カナ・受賞の月桂冠
• 地の質感: ほぼフラットな単色の面。ティールと山吹の面には細かい方眼グリッドをうっすら重ねる
• 形: 直角が基本。囲み枠だけ細い線で角丸にする
• 温度感: やや涼しい地の色に、暖色の山吹がアクセントとして入る

Colors

• ページの土台はティール。スタッフ欄など長文のエリアはすべてティールの地にする
• セクションごとに地の色を変える（青灰→黒→山吹→ティール）。章が変わったことを色で知らせる
• 山吹色は「青灰やティールの地の上の見出し文字」か「キャストのセクション全面」だけに使う
• 受賞歴は紺の地に金色の文字と月桂冠で格を出す
• 購入ボタンの赤は外部チケットのパーツにだけ使う
• 最後のロゴのブロックだけ白地にして、山吹色のロゴを置く
• button-primary は文字 #FEF7F5 × 背景 #E61E0F のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E11D0F、4.52:1）を使う。

Typography

• セクション見出しは「太い英字の大見出し」と「小さなカナ読み」の2段にして中央に揃える
• 本文は左揃えで、行間を広め（1.7以上）にとる
• 推薦コメントは明朝を右揃えにして写真の上に置く
• 人名は中央揃え。上に小さな役職ラベルを置く
• 長体気味の英字見出しには字間を少しだけ足す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ニュースは 2 列
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの上下に60〜70pxの余白をとる
• 本文の幅は左右に約35pxの余白を残す
• 全幅のスチル写真をセクションの間に挟む
• 写真を2枚並べる帯は、隙間なく左右に分ける
• スタッフは区切り線のあと、余白を挟んで縦に並べる

Elevation & Depth

• 影は基本的に使わない
• 外部チケットのパーツだけ白いカードにして浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形のまま切り抜く。全幅か本文幅に合わせる
• セクション境界: 地の色を直線で切り替える。斜めや波形は使わない
• 補足の囲みは細い線の枠にし、角丸は12px程度にする
• 枠の上辺の中央に見出しをかぶせ、線を途切れさせる
• ボタンの角丸は小さめ（4px前後）にする

Components

• 英字＋カナの章見出し（section-title）: 太い英字の大見出しの下に小さなカナ読みを置き、中央に揃える
• 線囲みの補足ボックス（outline-box）: 細い線の角丸枠。上辺に山吹色の見出しをかぶせ、中にイラストと山吹色の本文を入れる
• 受賞の月桂冠リスト（award-laurel）: 紺の地に、金色の月桂冠で囲んだ映画祭名を中央揃えで並べる
• 写真に重ねる推薦コメント（quote-photo）: 暗い全幅写真の右側に、明朝の白文字コメントと発言者名を重ねる
• チケット購入パーツ（ticket-widget）: 方眼の入ったティールの地に白いカードを置き、価格・枚数・赤い購入ボタンを入れる
• 購入ボタン（button-primary）: 赤い地に白文字の2行ボタン
• ニュースカード（news-card）: 濃いグレーの地に角丸の写真を置き、下に日付と見出しを白文字で入れる。2列で並べる
• スタッフのプロフィール（staff-profile）: 役職ラベル・大きい人名・小さい経歴の順に縦に積む

Do's and Don'ts

Do - 地の色はセクションごとに大胆に切り替える - ティールと山吹の地には薄い方眼グリッドを重ねる - 章の間に全幅のスチル写真を挟み、映画らしい間を作る - 暗い地の上の文字は白、強調は山吹色にする - 受賞実績は月桂冠と金色で権威を見せる

Don't - パステル調の色やグラデーションのボタンを使わない - 丸ゴシックやポップな書体を使わない - カードに影を多用しない - 山吹色を本文の地に広く使いすぎない（使うのはキャストの1セクションだけ） - 写真に角丸や円形の切り抜きをしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（作品の世界観・公開日・受賞歴を一目で伝える）: 全面にキービジュアル。山吹色の斜めの帯に、斜めに傾けた英字タイトル。公開日は丸いバッジにし、縦書きのコピーを添える
2. 推薦コメントのバナー（著名人のコメントへ誘導する）: ティールの帯に白い大きな見出しを置いたバナー
3. SNSとチケット（前売券の購入を促す）: グレーの帯にSNSアイコン。方眼の入ったティールの地に、白い購入カードと外部リンクのバナーを置く
4. ニュース（最新情報を伝える）: 濃いグレーの地に、写真付きのカードを2列で並べる
5. 推薦コメント（第三者の評価で信頼を高める）: 人物のアップ写真に明朝の白文字を重ねる
6. 受賞歴（国際的な評価を示す）: 紺の地に月桂冠付きの映画祭名を中央揃えで縦に並べる
7. イントロダクション（作品の背景を伝える）: 青灰の地に、山吹色のリード文と白い本文。下に線囲みの解説ボックスを置く
8. ストーリー（あらすじを伝える）: 全幅の風景写真のあと、黒い地に中央見出しと白い本文。最後に写真を2枚並べる
9. キャスト（主演の紹介）: 方眼の入った山吹色の地に、本文幅の写真・白い名前・短い紹介文
10. スタッフと監督の言葉（作り手の思いと経歴を伝える）: ティールの地に監督の写真とプロフィール。山吹色の英字見出しの下に長文を続け、区切り線のあとスタッフを縦に並べる
11. クレジット（作品情報をまとめて締める）: 白地に山吹色の大きなロゴを置き、小さな文字のクレジットを中央揃えで並べる

Imagery

• 自然光で撮ったドキュメンタリー調のスチル。子どもの表情や旅の場面を使う
• 夕暮れの海・船・難民キャンプなど、彩度を少し落とした映画的なカラーグレーディング
• 黄色い服など、山吹色と呼応する色を写真の中に入れる
• 推薦コメントの背景は、ボケを効かせた暗めの人物写真
• 補足には人物シルエットの切り抜きイラストを小さく添える
• 受賞の表示には金色の月桂冠の線画を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではファーストビューを横長の全面ビジュアルにし、タイトルを左上に斜めに置く
• PCでは右上にハンバーガーメニューとSNSアイコンを縦に並べる
• PCではニュースを3列にする
• PCではスタッフ一覧を2列のグリッドにする
• PCではチケットパーツを横に並べてコンパクトにする
• PCの本文幅は800px前後に抑え、中央に置く

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 行書くと起動時に読み込まれる。