---
version: alpha
name: Indie Film Blob-Frame Editorial LP
description: 白地にほぼ黒の文字を組んだ、雑誌のような映画公開 LP。差し色は蛍光ピンク 1 色に絞る。写真は手描き風の黒い線で囲んだ不定形（ブロブ形）に切り抜き、インディー映画らしいクセと軽さを出す。見出しは太いスラブセリフと明朝で組む。コメント欄だけは暗い場面写真の上に白文字を置き、トーンを切り替える。
colors:
  background: '#FFFFFF'
  primary: '#F7A3E6'
  accent-1: '#F07BD6'
  text: '#000000'
  text-body: '#323332'
  text-muted: '#787778'
  line: '#141715'
  surface: '#F6F4F5'
  background-alt: '#E6E7E7'
  dark-section: '#4A4543'
  on-dark: '#F8F7F8'
typography:
  display:
    fontFamily: Playfair Display
    fontSize: 56px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Roboto Slab
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Shippori Mincho
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.4
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 12px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.04em
  accent:
    fontFamily: Roboto Slab
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.5
  body-lg:
    fontFamily: Zen Maru Gothic
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  sm: 4px
  md: 6px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  blob-photo:
    height: 240px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    rounded: '{rounded.sm}'
    height: 66px
  speech-drop:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.full}'
    height: 160px
  section-title:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 32px
  person-block:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 80px
  info-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 370px
  theater-table:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    height: 80px
  comment-item:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-lg}'
    height: 160px
---

# DESIGN.md — 白地×蛍光ピンクの不定形フレーム映画 LP（Indie Film Blob-Frame Editorial LP）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: シンプル・ミニマル、クール・先進的、ポップ・元気、情報量多め・訴求型
- **キーワード**: 白地の雑誌風組版・蛍光ピンク一点差し・不定形ブロブ写真・スラブセリフ見出し・フィルム写真・暗転コメント欄
- **地の質感**: フラットな白地。写真はフィルム粒子がある自然光のスナップ。終盤だけぼかした暗い場面写真を全面に敷く。
- **形**: 写真は黒い 2px 線で縁取った有機的な曲線形。UI 部品は角丸の小さい四角か直線のみ。
- **温度感**: やや冷たいモノトーンに、ピンクでポップな体温を少し加える。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FFFFFF` | ページ全体の地色 | 62% | 画素の実測 |
| `primary` | `#F7A3E6` | ロゴの塗り・吹き出し・強調のピンク | 2% | 推定 |
| `accent-1` | `#F07BD6` | リード文と暗地上の人名のピンク文字 | 0% | 推定 |
| `text` | `#000000` | 見出し・ロゴ・人名の黒 | 4% | 画素の実測 |
| `text-body` | `#323332` | 本文グレー黒 | 8% | 画素の主要色に補正 |
| `text-muted` | `#787778` | 監督名など補足・表の見出し | 1% | 画素の実測 |
| `line` | `#141715` | ブロブ写真の縁取り・ボタン枠 | 0% | 画素の主要色に補正 |
| `surface` | `#F6F4F5` | 関連作品リストのボックス | 2% | 画素の実測 |
| `background-alt` | `#E6E7E7` | 表の罫線・区切りの薄グレー | 0% | 画素の主要色に補正 |
| `dark-section` | `#4A4543` | コメント欄の暗い背景（場面写真を暗くしたもの） | 14% | 画素の実測 |
| `on-dark` | `#F8F7F8` | 暗地上の本文白 | 3% | 画素の主要色に補正 |

- 地は白一色。色付きの面は関連リストの薄グレー箱とコメント欄の暗転だけにする。
- ピンクはロゴ・吹き出し・リード文・暗地上の人名だけに使う。本文には使わない。
- 見出しはほぼ黒、本文は濃いグレーにしてわずかに階層をつける。
- 写真の縁取りとボタン枠は同じ黒の線で揃える。
- コメント欄は暗い写真の上に黒の半透明を重ね、白文字とピンクの人名で組む。
- グラデーションや多色の装飾は使わない。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | タイトルロゴ風の欧文大見出し | 欧文セリフ | Playfair Display | 900 | 56px | 1 | -0.02em |
| `headline-lg` | 実績を打ち出す大きな明朝見出し | 明朝 | Shippori Mincho | 600 | 34px | 1.3 | -0.02em |
| `headline-md` | STORY などのセクション欧文見出し | 欧文セリフ | Roboto Slab | 700 | 22px | 1.2 | 0.02em |
| `headline-sm` | リードのサブ見出しと人名 | 明朝 | Shippori Mincho | 700 | 17px | 1.4 | 0em |
| `body-md` | 本文・プロフィール | ゴシック | Zen Kaku Gothic New | 400 | 12px | 2 | 0.04em |
| `accent` | 欧文の人名・役名・作品年表 | 欧文セリフ | Roboto Slab | 700 | 12px | 1.5 | 0em |
| `body-lg` | 縦書きキャッチと暗地上のコメント本文 | ゴシック | Zen Maru Gothic | 500 | 13px | 1.8 | 0.04em |
| `note` | 注釈・クレジット・表 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0em |

- セクション見出しは英字のスラブセリフ 1 語で、左揃えにする。
- 大きな見出しは明朝で詰め気味に組み、改行を意図的に入れる。
- 人名は 3 段で組む。和文ゴシック太字、欧文スラブセリフ、細線＋役名の順。
- 本文は小さめにし、行間を 2.0 前後と広くとって読ませる。
- ファーストビューのキャッチはルビ付きの縦書きにする。
- 見出しにはピンクを使わず、リード文 1 行だけピンクにする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC は写真とテキストを左右交互に並べる 2 カラム。
- **本文ブロックの幅**: 画面幅の約 94%
- **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
- 左右の余白は約 11px と狭くし、本文を広く使う。
- キャスト 1 人分は写真→名前ブロック→本文の順に縦に積む。
- 人物の間は 48px ほど空ける。
- スタッフは写真なしで、名前ブロックと本文だけを続けて並べる。
- 場面写真のブロブは横に並べ、画面外へはみ出させる。
- 劇場情報は罫線だけのシンプルな表にする。

## Elevation & Depth

- 影は使わない。完全にフラットにする。
- 奥行きは黒い線の縁取りと、写真の重なりで出す。
- コメント欄は背景写真をぼかし、暗くした上に文字を置く。

## Shapes

- **角丸**: 小 4px ／ 中 6px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 黒い 2px 線で縁取った不定形のブロブ形。監督だけは四角形のままにする。
- **セクション境界**: 直線で切り替える。区切り線は使わず、余白で分ける。
- ブロブは写真ごとに形を変え、手描きの揺らぎを出す。
- ボタンは角丸 4〜6px の細い黒枠の長方形にする。
- 吹き出しは涙型のピンク面に黒線をつけ、文字を斜めに置く。
- 情報ボックスは角丸 6px の薄グレー面で、枠線はつけない。

## Components

- **ブロブ写真フレーム**（`blob-photo`）: 黒線で縁取った不定形の写真。キャスト紹介と場面写真の帯に使う。
- **黒枠アンカーボタン**（`button-outline`）: 白地に細い黒枠のボタン。上段にピンクの小さなリード、下段に欧文セリフのラベルを置く。
- **ピンクの涙型吹き出し**（`speech-drop`）: ファーストビューの写真に重ねる。縦書きの短い独白を斜めに入れる。
- **欧文セクション見出し**（`section-title`）: スラブセリフ太字の英単語 1 語を左揃えで置く。装飾はつけない。
- **人物名ブロック**（`person-block`）: 和名・欧文名・短い線＋役名の 3 段で組む。
- **薄グレーのリストボックス**（`info-box`）: 関連作品の一覧を入れる。作品名は明朝太字、監督名は小さいグレー文字。
- **劇場一覧表**（`theater-table`）: 地域・劇場・電話・日付を並べ、横罫線だけで区切る小さな表。
- **暗地コメント**（`comment-item`）: ピンクの人名に小さな肩書きを添え、白文字の本文を続ける。

## Do's and Don'ts

**Do**
- 写真はブロブ形と黒線で切り抜いて統一する。
- ピンクは 1 画面に 1〜2 か所までにする。
- 見出しは欧文スラブセリフと和文明朝を組み合わせる。
- 本文は行間を広くとり、白地でゆったり読ませる。
- 評判を集めるセクションだけ暗転させ、空気を切り替える。

**Don't**
- 角丸カードや影で装飾しない。
- ピンク以外の差し色を足さない。
- 写真を普通の角丸四角で並べない。
- 大きな塗りの CTA ボタンで煽らない。
- 本文を太字やカラーで強調しすぎない。

## Page Structure

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

1. **ファーストビュー**（作品の世界観と公開日を伝える）: 人物写真に欧文ロゴを重ねる。縦書きのキャッチとピンクの吹き出しを置き、下に受賞ロゴ・公開日・SNS アイコンを中央に並べる。
2. **評判への導線**（コメント欄へ誘導する）: 黒枠のボタンを置く。上段にピンクのリード、下段に欧文ラベル。
3. **実績・イントロダクション**（話題性と作品の背景を伝える）: 大きな明朝で実績を出し、明朝のサブ見出し 2 本と長めの本文を続ける。最後に小さな注釈を添える。
4. **場面写真帯**（雰囲気を視覚で見せる）: ブロブ形の写真を 3 枚、横に重ねて画面外へはみ出させる。
5. **あらすじ**（物語の導入を伝える）: 欧文見出しと本文のみ。ルビを交える。
6. **予告編**（動画で興味を高める）: 幅いっぱいに動画を埋め込む。
7. **キャスト**（出演者を紹介する）: ブロブ写真・人物名ブロック・経歴本文を繰り返す。
8. **監督・スタッフ**（作り手を紹介する）: 監督は四角い写真とフィルモグラフィ、薄グレーのボックス。スタッフは文字だけで並べる。
9. **上映劇場**（観に行く場所を案内する）: 欧文見出しの下に罫線だけの表を置く。
10. **著名人コメント**（第三者の評価で後押しする）: 暗くした場面写真を全面に敷く。ピンクの人名と白い本文を並べ、イラスト寄稿も挟む。
11. **フッター**（権利表記と配給を示す）: 白地の中央に小さいロゴ、欧文セリフのクレジット、レーティング、配給ロゴを置く。

## Imagery

- 自然光で撮ったフィルム調の人物写真を使う。少しくすんだ色で、粒子感を残す。
- 人物は顔のアップか不機嫌な表情の全身にし、作り込まない生っぽさを出す。
- ロゴはピンクのぷっくりした立体風の書体を、黒の極太セリフに重ねる。
- モノクロのペン画漫画を、評判欄のアクセントに使える。
- 背景のぼかし写真は暗く沈め、文字の可読性を優先する。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はファーストビューで写真を左、ロゴと公開日を右に置く。縦書きのキャッチは写真の左端へ移す。
- PC のキャストは写真とテキストを左右交互に配置する。
- PC のスタッフは 2 カラムのグリッドにする。
- PC の本文の幅は約 65% に絞って中央に寄せる。
- コメント欄は PC でも全幅を暗転させ、1 カラムで組む。

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

:root {
  --color-background: #ffffff;
  --color-primary: #f7a3e6;
  --color-accent-1: #f07bd6;
  --color-text: #000000;
  --color-text-body: #323332;
  --color-text-muted: #787778;
  --color-line: #141715;
  --color-surface: #f6f4f5;
  --color-background-alt: #e6e7e7;
  --color-dark-section: #4a4543;
  --color-on-dark: #f8f7f8;
  --spacing-unit: 8px;
  --spacing-card: 16px;
  --spacing-section: 72px;
  --rounded-sm: 4px;
  --rounded-md: 6px;
  --rounded-lg: 0px;
  --rounded-full: 999px;
}

W3C のデザイントークンの形式（Design Tokens Format Module 2025.10）の JSON です。Figma のプラグインや Style Dictionary などで読み込めます。