深い青緑×生成りノートの洋画公式 LP

Teal Cinematic Romance Film LP

深い青緑の地に、場面写真を全幅で大きく並べた映画公式サイト型の LP。白地とクリーム色の地を交互に挟んでリズムを作る。キャスト紹介は方眼ノート紙・ポラロイド・クリップのコラージュにして、遊び心のある手作り感を出す。見出しは欧文セリフ体と小さな和文ルビ、波線の飾りを組み合わせている。

エンタメ・ゲーム・アプリ上品・高級クール・先進的親しみ・手作り感清潔・爽やかSPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地の色は青緑・白・クリームの3色を、セクションごとに切り替える
全幅の場面写真で地色の切り替えをまたぎ、つなぎ役にする
白地の本文と見出しは青緑の文字で組み、黒は使わない
赤は購入 CTA・公開日・数量限定バッジだけに使う
黄緑は外部の通販系のサブボタンだけに限る
キャストカードの文字は濃紺。罫線は淡い青にする

TYPOGRAPHY

書体

display作品ロゴ風の大見出し（欧文と和文を重ねる）欧文セリフ／ Playfair Display 500 ／ 44px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション英字見出し欧文セリフ／ Cormorant Garamond 500 ／ 16px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdリード見出し（2行の問いかけ）ゴシック／ Zen Kaku Gothic New 700 ／ 20px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-smキャスト役名（手書き感のある太ゴシック）ゴシック／ Dela Gothic One 400 ／ 20px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

body-mdあらすじ・紹介の本文ゴシック／ Noto Sans JP 500 ／ 10px ／行間 2.0

あなたの LP を、もっと伝わる形に。Aa 123

body-lgキャストの人物説明ゴシック／ Zen Kaku Gothic New 700 ／ 14px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

note和文ルビ・日付・クレジットゴシック／ Noto Sans JP 700 ／ 7px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

accent写真上の手書きサイン手書き・筆／ Caveat 400 ／ 14px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

セクション見出しは欧文セリフ体を中央に置き、下に波線の飾りと和文の小さなルビを添える
本文は小さめの文字で行間を広く取り、字間も少し空ける
リード見出しはダッシュと引用符を使った問いかけ調の2行にする
キャスト名は太字にし、縦線で区切って演者名を添える
公開日は赤の欧文セリフ体を斜体で大きく見せる

PAGE STRUCTURE

セクション構成

ファーストビュー作品の世界観と主要人物を見せる青緑の地に、人物写真を組み合わせたキービジュアル、ロゴ、公開日を赤で置く
購入導線チケットとグッズの購入へ誘導する白いチケットカードの下に、赤・黄緑・白枠の帯ボタンを縦に並べる
音楽プレーヤーサウンドトラックを試聴してもらう濃紺の角丸カードに曲のリストを入れる
新着情報最新の告知を伝える白地に、青緑の枠付きサムネイルのカードを横に並べる
イントロダクション作品の概要を伝える全幅写真の下に青緑の地を置き、白文字のリード見出しと本文、写真 2 枚を並べる
ストーリーあらすじを伝える白地に青緑の小さな文字で本文を組み、最後に全幅写真を置く
キャスト登場人物を紹介するクリーム地にノート紙とポラロイドのカードを傾けて縦に積む
スタッフ監督の経歴を紹介する青緑の地に写真 2 枚、肩書き、名前、白い本文を中央に寄せて置く
タイアップ・締めキャンペーンを告知し、作品名を印象づけるバナーを 2×2 で並べ、最後にロゴと公開日を大きく置く

COMPONENTS

部品

赤の購入帯ボタン button-primary左にアイコン、右に白い太字を置いた全幅の赤い帯
黄緑の通販帯ボタン button-secondary赤帯と同じ形で色だけ黄緑にしたもの
チケット販売カード ticket-card価格・枚数の入力・合計と赤ボタンをまとめた白カード
英字見出し＋波線 section-heading欧文セリフ体の英字見出し、市松風の波線、和文ルビを縦に重ねる
ノート紙のキャストカード cast-card方眼か罫線の紙に、クリップ留めのポラロイド・役名・説明文を載せる
ニュースカード news-card青緑の枠で囲んだサムネイルの下に、日付と青緑の見出しを置く。カードの間は縦線で区切る
数量限定の丸バッジ badge-limited赤い円に白文字の2行テキスト
タイアップバナー群 banner-grid白枠付きの横長バナーを 2×2 で並べる

守ること

地の色は青緑・白・クリームを交互に使う
見出しは英字のセリフ体と和文ルビをセットにする
場面写真は大きな横長で、ストーリーが伝わるものを選ぶ
キャスト欄だけはコラージュ風にして、遊びを集中させる
本文の文字は小さく、行間を広く取って上品に見せる

DON'T

避けること

赤を装飾に多用しない（CTA 専用にする）
写真に大きな角丸や丸抜きを使わない
黒い地のセクションを作らない
本文に太い大きな文字を使わない
ノート紙の質感をキャスト欄以外に広げない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 深い青緑×生成りノートの洋画公式 LP（Teal Cinematic Romance Film LP）

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

Overview

業種: エンタメ・ゲーム・アプリ／ 雰囲気: 上品・高級、クール・先進的、親しみ・手作り感、清潔・爽やか
キーワード: 深い青緑・シネマティック・ポラロイド・方眼ノート・欧文セリフ・都会的ロマンス
地の質感: 地はフラットな単色。キャスト欄だけに罫線・方眼の紙質感と影をつける
形: 写真は角丸なしの矩形。CTA は小さめの角丸の横長帯、カードはわずかに傾ける
温度感: クールな青緑を主にしつつ、クリーム色と写真の暖色で温かみを足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#0180AB`	メインの地色（深い青緑）	30%	画素の実測
`background`	`#FFFFFF`	白地セクション	12%	画素の実測
`background-alt`	`#FDFEE5`	キャスト欄のクリーム地	13%	画素の実測
`on-primary`	`#FFFFFE`	青緑の上の白文字	2%	画素の主要色に補正
`text`	`#112C3C`	カード内の濃紺文字	3%	画素の主要色に補正
`text-body`	`#0180A5`	白地のあらすじ本文（青緑文字）	1%	画素の主要色に補正
`cta`	`#E40213`	購入ボタンの赤	2%	画素の実測
`on-cta`	`#FFF1EF`	ボタン上の白文字	0%	画素の実測
`secondary`	`#94CA12`	サブ購入ボタンの黄緑	2%	画素の実測
`dark-section`	`#004377`	音楽プレーヤー枠の濃紺	2%	画素の実測
`surface`	`#FEFEFE`	チケット販売の白カード	2%	画素の実測
`tint-1`	`#E2F3FC`	方眼ノート紙の淡い青	5%	画素の実測
`accent-1`	`#D3202A`	公開日など強調の赤	0%	推定
`line`	`#0180AB`	ニュースカードの枠線	0%	画素の主要色に補正
`cta-accessible`	`#E10213`	AA を満たす補正値（計算）		計算
`secondary-accessible`	`#5A7A0B`	AA を満たす補正値（計算）		計算
`primary-accessible`	`#017EA8`	AA を満たす補正値（計算）		計算

地の色は青緑・白・クリームの3色を、セクションごとに切り替える
全幅の場面写真で地色の切り替えをまたぎ、つなぎ役にする
白地の本文と見出しは青緑の文字で組み、黒は使わない
赤は購入 CTA・公開日・数量限定バッジだけに使う
黄緑は外部の通販系のサブボタンだけに限る
キャストカードの文字は濃紺。罫線は淡い青にする
button-primary は文字 #FFF1EF × 背景 #E40213 のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E10213、4.52:1）を使う。
button-secondary は文字 #FFF1EF × 背景 #94CA12 のコントラスト比が 1.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#5A7A0B、4.52:1）を使う。
news-card は文字 #0180AB × 背景 #FFFFFF のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#017EA8、4.61:1）を使う。
badge-limited は文字 #FFF1EF × 背景 #E40213 のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E10213、4.52:1）を使う。
banner-grid は文字 #FFFFFE × 背景 #0180AB のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#017EA8、4.61:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	作品ロゴ風の大見出し（欧文と和文を重ねる）	欧文セリフ	Playfair Display	500	44px	1.1	0.05em
`headline-lg`	セクション英字見出し	欧文セリフ	Cormorant Garamond	500	16px	1.3	0.08em
`headline-md`	リード見出し（2行の問いかけ）	ゴシック	Zen Kaku Gothic New	700	20px	1.5	0.03em
`headline-sm`	キャスト役名（手書き感のある太ゴシック）	ゴシック	Dela Gothic One	400	20px	1.3	0.1em
`body-md`	あらすじ・紹介の本文	ゴシック	Noto Sans JP	500	10px	2.0	0.05em
`body-lg`	キャストの人物説明	ゴシック	Zen Kaku Gothic New	700	14px	1.6	0.02em
`note`	和文ルビ・日付・クレジット	ゴシック	Noto Sans JP	700	7px	1.4	0.1em
`accent`	写真上の手書きサイン	手書き・筆	Caveat	400	14px	1.2	0.05em

セクション見出しは欧文セリフ体を中央に置き、下に波線の飾りと和文の小さなルビを添える
本文は小さめの文字で行間を広く取り、字間も少し空ける
リード見出しはダッシュと引用符を使った問いかけ調の2行にする
キャスト名は太字にし、縦線で区切って演者名を添える
公開日は赤の欧文セリフ体を斜体で大きく見せる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。写真は 2 枚を横に並べることもある
本文ブロックの幅: 画面幅の約 92%
余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
場面写真は左右 8px の余白で、ほぼ全幅に置く
見出しはすべて中央揃え。本文は左揃えで 1 ブロックにまとめる
セクションの区切りに、写真ブロックを単独で挟む
キャストカードは縦に積み、少しずつ傾けて配置する
購入ボタンは全幅の帯を縦に 3 本並べる

Elevation & Depth

キャストカードには右下に柔らかいドロップシャドウをつける
ポラロイド写真に白い縁と薄い影をつけ、紙の上に置いたように見せる
それ以外の写真やボタンは影なしでフラットにする

Shapes

角丸: 小 2px ／中 6px ／大 10px。ボタンは角丸の長方形。
写真の切り抜き: 角丸なしの横長矩形。ポラロイドだけ白縁をつけて傾ける
セクション境界: 直線で地色を切り替え、全幅写真を区切りに使う
CTA 帯は角丸を小さく、細い白の内枠をつける
音楽プレーヤーとチケットのカードは角丸 6〜10px
カードを -3〜3 度傾けて手作り感を出す

Components

赤の購入帯ボタン（button-primary）: 左にアイコン、右に白い太字を置いた全幅の赤い帯
黄緑の通販帯ボタン（button-secondary）: 赤帯と同じ形で色だけ黄緑にしたもの
チケット販売カード（ticket-card）: 価格・枚数の入力・合計と赤ボタンをまとめた白カード
英字見出し＋波線（section-heading）: 欧文セリフ体の英字見出し、市松風の波線、和文ルビを縦に重ねる
ノート紙のキャストカード（cast-card）: 方眼か罫線の紙に、クリップ留めのポラロイド・役名・説明文を載せる
ニュースカード（news-card）: 青緑の枠で囲んだサムネイルの下に、日付と青緑の見出しを置く。カードの間は縦線で区切る
数量限定の丸バッジ（badge-limited）: 赤い円に白文字の2行テキスト
タイアップバナー群（banner-grid）: 白枠付きの横長バナーを 2×2 で並べる

Do's and Don'ts

Do - 地の色は青緑・白・クリームを交互に使う - 見出しは英字のセリフ体と和文ルビをセットにする - 場面写真は大きな横長で、ストーリーが伝わるものを選ぶ - キャスト欄だけはコラージュ風にして、遊びを集中させる - 本文の文字は小さく、行間を広く取って上品に見せる

Don't - 赤を装飾に多用しない（CTA 専用にする） - 写真に大きな角丸や丸抜きを使わない - 黒い地のセクションを作らない - 本文に太い大きな文字を使わない - ノート紙の質感をキャスト欄以外に広げない

Page Structure

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

ファーストビュー（作品の世界観と主要人物を見せる）: 青緑の地に、人物写真を組み合わせたキービジュアル、ロゴ、公開日を赤で置く
購入導線（チケットとグッズの購入へ誘導する）: 白いチケットカードの下に、赤・黄緑・白枠の帯ボタンを縦に並べる
音楽プレーヤー（サウンドトラックを試聴してもらう）: 濃紺の角丸カードに曲のリストを入れる
新着情報（最新の告知を伝える）: 白地に、青緑の枠付きサムネイルのカードを横に並べる
イントロダクション（作品の概要を伝える）: 全幅写真の下に青緑の地を置き、白文字のリード見出しと本文、写真 2 枚を並べる
ストーリー（あらすじを伝える）: 白地に青緑の小さな文字で本文を組み、最後に全幅写真を置く
キャスト（登場人物を紹介する）: クリーム地にノート紙とポラロイドのカードを傾けて縦に積む
スタッフ（監督の経歴を紹介する）: 青緑の地に写真 2 枚、肩書き、名前、白い本文を中央に寄せて置く
タイアップ・締め（キャンペーンを告知し、作品名を印象づける）: バナーを 2×2 で並べ、最後にロゴと公開日を大きく置く

Imagery

都会の街並みや室内のロケ写真。自然光で少し暖色寄りに撮る
人物はバストアップか全身で、物語の一場面に見えるもの
ポラロイドの白縁、クリップ、パスポートなどの小物でコラージュする
写真の上に白い手書きのサインを入れる
赤いハート型の風船など、赤い小物を差し色に使う
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC では上部にナビを置き、英字メニューの下に和文ルビを添える
PC のキービジュアルは横長に組み直す
PC の購入ボタンは 3 つを横一列に縮小する
ニュースとキャストは PC で 3 カラムに並べる
PC でも写真は全幅に近い横長のまま使う

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

---
version: alpha
name: Teal Cinematic Romance Film LP
description: 深い青緑の地に、場面写真を全幅で大きく並べた映画公式サイト型の LP。白地とクリーム色の地を交互に挟んでリズムを作る。キャスト紹介は方眼ノート紙・ポラロイド・クリップのコラージュにして、遊び心のある手作り感を出す。見出しは欧文セリフ体と小さな和文ルビ、波線の飾りを組み合わせている。
colors:
  primary: '#0180AB'
  background: '#FFFFFF'
  background-alt: '#FDFEE5'
  on-primary: '#FFFFFE'
  text: '#112C3C'
  text-body: '#0180A5'
  cta: '#E40213'
  on-cta: '#FFF1EF'
  secondary: '#94CA12'
  dark-section: '#004377'
  surface: '#FEFEFE'
  tint-1: '#E2F3FC'
  accent-1: '#D3202A'
  line: '#0180AB'
  cta-accessible: '#E10213'
  secondary-accessible: '#5A7A0B'
  primary-accessible: '#017EA8'
typography:
  display:
    fontFamily: Playfair Display
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Cormorant Garamond
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Dela Gothic One
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 7px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
  accent:
    fontFamily: Caveat
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 6px
  lg: 10px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    rounded: '{rounded.sm}'
    height: 48px
  button-secondary:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    rounded: '{rounded.sm}'
    height: 48px
  ticket-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 64px
  section-heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 40px
  cast-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    height: 340px
  news-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    height: 90px
  badge-limited:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 40px
  banner-grid:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.note}'
    height: 110px
---

# DESIGN.md — 深い青緑×生成りノートの洋画公式 LP（Teal Cinematic Romance Film LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 上品・高級、クール・先進的、親しみ・手作り感、清潔・爽やか
- **キーワード**: 深い青緑・シネマティック・ポラロイド・方眼ノート・欧文セリフ・都会的ロマンス
- **地の質感**: 地はフラットな単色。キャスト欄だけに罫線・方眼の紙質感と影をつける
- **形**: 写真は角丸なしの矩形。CTA は小さめの角丸の横長帯、カードはわずかに傾ける
- **温度感**: クールな青緑を主にしつつ、クリーム色と写真の暖色で温かみを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#0180AB` | メインの地色（深い青緑） | 30% | 画素の実測 |
| `background` | `#FFFFFF` | 白地セクション | 12% | 画素の実測 |
| `background-alt` | `#FDFEE5` | キャスト欄のクリーム地 | 13% | 画素の実測 |
| `on-primary` | `#FFFFFE` | 青緑の上の白文字 | 2% | 画素の主要色に補正 |
| `text` | `#112C3C` | カード内の濃紺文字 | 3% | 画素の主要色に補正 |
| `text-body` | `#0180A5` | 白地のあらすじ本文（青緑文字） | 1% | 画素の主要色に補正 |
| `cta` | `#E40213` | 購入ボタンの赤 | 2% | 画素の実測 |
| `on-cta` | `#FFF1EF` | ボタン上の白文字 | 0% | 画素の実測 |
| `secondary` | `#94CA12` | サブ購入ボタンの黄緑 | 2% | 画素の実測 |
| `dark-section` | `#004377` | 音楽プレーヤー枠の濃紺 | 2% | 画素の実測 |
| `surface` | `#FEFEFE` | チケット販売の白カード | 2% | 画素の実測 |
| `tint-1` | `#E2F3FC` | 方眼ノート紙の淡い青 | 5% | 画素の実測 |
| `accent-1` | `#D3202A` | 公開日など強調の赤 | 0% | 推定 |
| `line` | `#0180AB` | ニュースカードの枠線 | 0% | 画素の主要色に補正 |
| `cta-accessible` | `#E10213` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#5A7A0B` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#017EA8` | AA を満たす補正値（計算） |  | 計算 |

- 地の色は青緑・白・クリームの3色を、セクションごとに切り替える
- 全幅の場面写真で地色の切り替えをまたぎ、つなぎ役にする
- 白地の本文と見出しは青緑の文字で組み、黒は使わない
- 赤は購入 CTA・公開日・数量限定バッジだけに使う
- 黄緑は外部の通販系のサブボタンだけに限る
- キャストカードの文字は濃紺。罫線は淡い青にする
- `button-primary` は文字 `#FFF1EF` × 背景 `#E40213` のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E10213`、4.52:1）を使う。
- `button-secondary` は文字 `#FFF1EF` × 背景 `#94CA12` のコントラスト比が 1.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#5A7A0B`、4.52:1）を使う。
- `news-card` は文字 `#0180AB` × 背景 `#FFFFFF` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#017EA8`、4.61:1）を使う。
- `badge-limited` は文字 `#FFF1EF` × 背景 `#E40213` のコントラスト比が 4.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E10213`、4.52:1）を使う。
- `banner-grid` は文字 `#FFFFFE` × 背景 `#0180AB` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#017EA8`、4.61:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 作品ロゴ風の大見出し（欧文と和文を重ねる） | 欧文セリフ | Playfair Display | 500 | 44px | 1.1 | 0.05em |
| `headline-lg` | セクション英字見出し | 欧文セリフ | Cormorant Garamond | 500 | 16px | 1.3 | 0.08em |
| `headline-md` | リード見出し（2行の問いかけ） | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.03em |
| `headline-sm` | キャスト役名（手書き感のある太ゴシック） | ゴシック | Dela Gothic One | 400 | 20px | 1.3 | 0.1em |
| `body-md` | あらすじ・紹介の本文 | ゴシック | Noto Sans JP | 500 | 10px | 2.0 | 0.05em |
| `body-lg` | キャストの人物説明 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.6 | 0.02em |
| `note` | 和文ルビ・日付・クレジット | ゴシック | Noto Sans JP | 700 | 7px | 1.4 | 0.1em |
| `accent` | 写真上の手書きサイン | 手書き・筆 | Caveat | 400 | 14px | 1.2 | 0.05em |

- セクション見出しは欧文セリフ体を中央に置き、下に波線の飾りと和文の小さなルビを添える
- 本文は小さめの文字で行間を広く取り、字間も少し空ける
- リード見出しはダッシュと引用符を使った問いかけ調の2行にする
- キャスト名は太字にし、縦線で区切って演者名を添える
- 公開日は赤の欧文セリフ体を斜体で大きく見せる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真は 2 枚を横に並べることもある
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- 場面写真は左右 8px の余白で、ほぼ全幅に置く
- 見出しはすべて中央揃え。本文は左揃えで 1 ブロックにまとめる
- セクションの区切りに、写真ブロックを単独で挟む
- キャストカードは縦に積み、少しずつ傾けて配置する
- 購入ボタンは全幅の帯を縦に 3 本並べる

## Elevation & Depth

- キャストカードには右下に柔らかいドロップシャドウをつける
- ポラロイド写真に白い縁と薄い影をつけ、紙の上に置いたように見せる
- それ以外の写真やボタンは影なしでフラットにする

## Shapes

- **角丸**: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの横長矩形。ポラロイドだけ白縁をつけて傾ける
- **セクション境界**: 直線で地色を切り替え、全幅写真を区切りに使う
- CTA 帯は角丸を小さく、細い白の内枠をつける
- 音楽プレーヤーとチケットのカードは角丸 6〜10px
- カードを -3〜3 度傾けて手作り感を出す

## Components

- **赤の購入帯ボタン**（`button-primary`）: 左にアイコン、右に白い太字を置いた全幅の赤い帯
- **黄緑の通販帯ボタン**（`button-secondary`）: 赤帯と同じ形で色だけ黄緑にしたもの
- **チケット販売カード**（`ticket-card`）: 価格・枚数の入力・合計と赤ボタンをまとめた白カード
- **英字見出し＋波線**（`section-heading`）: 欧文セリフ体の英字見出し、市松風の波線、和文ルビを縦に重ねる
- **ノート紙のキャストカード**（`cast-card`）: 方眼か罫線の紙に、クリップ留めのポラロイド・役名・説明文を載せる
- **ニュースカード**（`news-card`）: 青緑の枠で囲んだサムネイルの下に、日付と青緑の見出しを置く。カードの間は縦線で区切る
- **数量限定の丸バッジ**（`badge-limited`）: 赤い円に白文字の2行テキスト
- **タイアップバナー群**（`banner-grid`）: 白枠付きの横長バナーを 2×2 で並べる

## Do's and Don'ts

**Do**
- 地の色は青緑・白・クリームを交互に使う
- 見出しは英字のセリフ体と和文ルビをセットにする
- 場面写真は大きな横長で、ストーリーが伝わるものを選ぶ
- キャスト欄だけはコラージュ風にして、遊びを集中させる
- 本文の文字は小さく、行間を広く取って上品に見せる

**Don't**
- 赤を装飾に多用しない（CTA 専用にする）
- 写真に大きな角丸や丸抜きを使わない
- 黒い地のセクションを作らない
- 本文に太い大きな文字を使わない
- ノート紙の質感をキャスト欄以外に広げない

## Page Structure

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

1. **ファーストビュー**（作品の世界観と主要人物を見せる）: 青緑の地に、人物写真を組み合わせたキービジュアル、ロゴ、公開日を赤で置く
2. **購入導線**（チケットとグッズの購入へ誘導する）: 白いチケットカードの下に、赤・黄緑・白枠の帯ボタンを縦に並べる
3. **音楽プレーヤー**（サウンドトラックを試聴してもらう）: 濃紺の角丸カードに曲のリストを入れる
4. **新着情報**（最新の告知を伝える）: 白地に、青緑の枠付きサムネイルのカードを横に並べる
5. **イントロダクション**（作品の概要を伝える）: 全幅写真の下に青緑の地を置き、白文字のリード見出しと本文、写真 2 枚を並べる
6. **ストーリー**（あらすじを伝える）: 白地に青緑の小さな文字で本文を組み、最後に全幅写真を置く
7. **キャスト**（登場人物を紹介する）: クリーム地にノート紙とポラロイドのカードを傾けて縦に積む
8. **スタッフ**（監督の経歴を紹介する）: 青緑の地に写真 2 枚、肩書き、名前、白い本文を中央に寄せて置く
9. **タイアップ・締め**（キャンペーンを告知し、作品名を印象づける）: バナーを 2×2 で並べ、最後にロゴと公開日を大きく置く

## Imagery

- 都会の街並みや室内のロケ写真。自然光で少し暖色寄りに撮る
- 人物はバストアップか全身で、物語の一場面に見えるもの
- ポラロイドの白縁、クリップ、パスポートなどの小物でコラージュする
- 写真の上に白い手書きのサインを入れる
- 赤いハート型の風船など、赤い小物を差し色に使う
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では上部にナビを置き、英字メニューの下に和文ルビを添える
- PC のキービジュアルは横長に組み直す
- PC の購入ボタンは 3 つを横一列に縮小する
- ニュースとキャストは PC で 3 カラムに並べる
- 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-63a93c6a`（元 LP の URL から採番）
- **元 LP**: https://happinet-phantom.com/materialists/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://happinet-phantom.com/materialists/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

エンタメ・ゲーム・アプリ漆黒×金装飾のゲーム周年記念 LPDark Gold Fantasy Anniversary Portal LP エンタメ・ゲーム・アプリ黒地×生成りカプセルのアイドルイベントLPBlack Stage Cream Capsule Idol Event LP エンタメ・ゲーム・アプリ黒×紫の巻物フレーム玩具コレクション LPDark Purple Fantasy Scroll Collectible LP エンタメ・ゲーム・アプリ漆黒と夜の街灯色のドキュメンタリー映画 LPNocturnal Urban Documentary Film LP エンタメ・ゲーム・アプリ黒地×金とオレンジの模型商品 LPDark Metallic Hobby Product LP エンタメ・ゲーム・アプリ桃ベージュ×空色のやさしいポイ活アプリ LPSoft Peach and Sky Blue Point App LP