---
version: alpha
name: Teal and Saffron Documentary Film LP
description: 深いティールと山吹色の2色を軸にした映画の公式サイト。セクションごとに地の色を切り替える（ティール、くすんだ青灰、黒、紺、山吹）。英字の大見出しの下に小さなカナ読みを添えて章を区切り、映画のスチル写真を全幅で挟んでリズムを作る。
colors:
  primary: '#02757C'
  accent-1: '#F5AB03'
  secondary: '#65859C'
  dark-section: '#010101'
  background-alt: '#151332'
  surface: '#222222'
  background: '#FDFDFD'
  on-dark: '#FFFFFF'
  marker: '#ECAF26'
  cta: '#E61E0F'
  on-cta: '#FEF7F5'
  text: '#030304'
  line: '#357C7C'
  cta-accessible: '#E11D0F'
typography:
  display:
    fontFamily: Roboto Condensed
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
  accent:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.15em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.45
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.75
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.02em
  body-lg:
    fontFamily: Shippori Mincho
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-title:
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 50px
  outline-box:
    textColor: '{colors.accent-1}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 500px
  award-laurel:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 400px
  quote-photo:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-lg}'
    height: 260px
  ticket-widget:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 290px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    rounded: '{rounded.sm}'
    height: 46px
  news-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 200px
  staff-profile:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 220px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#02757C` | ブランドの主色（ティールの地） | 34% | 画素の実測 |
| `accent-1` | `#F5AB03` | 山吹色の強調（キャストの地・見出し文字） | 8% | 画素の実測 |
| `secondary` | `#65859C` | イントロの青灰の地 | 11% | 画素の実測 |
| `dark-section` | `#010101` | ストーリーの黒い地 | 7% | 画素の実測 |
| `background-alt` | `#151332` | 受賞歴の紺の地 | 5% | 画素の実測 |
| `surface` | `#222222` | ニュースとSNSの帯（濃いグレー） | 6% | 画素の実測 |
| `background` | `#FDFDFD` | フッターのクレジットの地 | 8% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 暗い地の上の本文と見出し | 3% | 画素の主要色に補正 |
| `marker` | `#ECAF26` | 受賞・月桂冠の金色 | 1% | 画素の主要色に補正 |
| `cta` | `#E61E0F` | チケット購入ボタン（赤） | 0% | 画素の実測 |
| `on-cta` | `#FEF7F5` | 購入ボタン上の文字 | 0% | 画素の実測 |
| `text` | `#030304` | 白い地の上のクレジット文字 | 1% | 画素の主要色に補正 |
| `line` | `#357C7C` | 区切り線と囲み枠の線 | 0% | 画素の主要色に補正 |
| `cta-accessible` | `#E11D0F` | AA を満たす補正値（計算） |  | 計算 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクションの英字見出し | 欧文サンセリフ | Roboto Condensed | 700 | 26px | 1.2 | 0.04em |
| `accent` | 英字見出しの下に添える小さなカナ読み | ゴシック | Noto Sans JP | 500 | 10px | 1.4 | 0.15em |
| `headline-lg` | イントロのリード文（山吹色、3行） | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.45 | 0.02em |
| `headline-md` | 人名・役名 | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.3 | 0.05em |
| `headline-sm` | 人名の上に置く役職ラベル | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.05em |
| `body-md` | あらすじ・紹介文・監督の言葉 | ゴシック | Zen Kaku Gothic New | 500 | 12px | 1.75 | 0.04em |
| `note` | スタッフの経歴・クレジット | ゴシック | Noto Sans JP | 500 | 9px | 1.7 | 0.02em |
| `body-lg` | 写真に重ねる推薦コメント（明朝） | 明朝 | Shippori Mincho | 700 | 15px | 1.6 | 0.05em |

- セクション見出しは「太い英字の大見出し」と「小さなカナ読み」の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

```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-5dfa701a`（元 LP の URL から採番）
- **元 LP**: https://www.lostland-movie.com/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。