DESIGN.md — 若葉色と藤紫の叙情的な映画公式 LP（Lyrical Forest Light Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 上品・高級、ナチュラル、やさしい・柔らかい
• キーワード: 木漏れ日・叙情・藤紫の明朝・筆記体見出し・余白・写真主導
• 地の質感: 白く霞ませた森の写真を背景に透かし、紙のような柔らかさを出す。コメント導線だけはくしゃっとした紙のテクスチャ。
• 形: 角丸はほぼ使わず、正方形の写真と直線で区切る。カード類だけ小さな角丸。
• 温度感: やや涼しく静か。若葉の緑と淡い紫で穏やかな温度感。

Colors

• 文字は黒ではなく藤紫を基本にし、静かな印象を保つ。
• 地は白・若葉色・森写真の白透かしを交互に使い、緑系で統一する。
• 感情の核となる一節だけ臙脂の赤で強調する。
• 黒はクレジット帯とコメント導線のみに使い、緊張感を作る。
• 購入ボタンの赤・黄緑は外部サービス色として購入ブロック内に閉じ込める。

Typography

• 日本語はすべて明朝で統一し、ゴシックは購入UIに限定する。
• 見出しは英字筆記体1語のみで、日本語の見出しは付けない。
• 詩的な文章は中央揃えで短く改行する。
• 長文本文は両端揃えで行間を約2倍にとる。
• 難読語にはルビを振る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、キャストは 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• ファーストビューは端まで全幅のポスター画像。
• 本文は左右約16pxの余白でほぼ全幅。
• セクション間は全幅の場面写真で区切る。
• 監督は中央に単独、キャストは2列の正方形グリッド。
• 購入ブロックは中央寄せのカードにまとめる。

Elevation & Depth

• 影はほぼ使わずフラット。
• 購入カードは細い灰の枠線のみで浮かせる。
• 背景の森写真は白く透かして文字の可読性を確保する。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 場面写真は全幅の横長、キャストは正方形で角丸なし
• セクション境界: 直線の切り替えと全幅写真の帯
• 写真は角丸にしない。
• ボタンは小さな角丸の長方形。
• キャスト写真の右下に紫の小さな＋の正方形を重ねる。

Components

• ポスター型ファーストビュー（hero-poster）: 木漏れ日の人物写真に縦書きの筆文字タイトルと受賞の月桂冠を重ねる。
• クレジット黒帯（credit-band）: 黒地に極小の白文字でスタッフ表記をまとめる。
• 紙テクスチャのリンクボタン（paper-link）: 黒地に置いたくしゃくしゃ紙の長方形に臙脂の明朝でコメントページへ誘導。
• チケット購入カード（ticket-card）: 枠線カード内に枚数選択・合計・赤い購入ボタン・灰のサブボタンを縦に並べる。
• 購入ボタン（button-primary）: 赤地に白文字の全幅長方形ボタン。
• 予告編切り替えタブ（trailer-tabs）: 動画下に2列の灰タブ、選択中は黒地白文字。
• 筆記体の英字見出し（script-heading）: 藤紫の英字筆記体1語を中央に置くだけの見出し。
• キャストカード（cast-card）: 正方形写真＋右下の紫＋アイコン、下に中央揃えの明朝太字の名前。

Do's and Don'ts

Do - 文字色は藤紫、地は白と若葉色で柔らかく保つ。 - 見出しは英字筆記体1語だけにし、文章で情緒を伝える。 - 場面写真を全幅で挟み、読み物に呼吸を入れる。 - 強調したい一節だけを臙脂にする。 - キャスト写真はすべて同じ正方形で揃える。

Don't - 太いゴシックや原色を本文まわりに使わない。 - 写真に角丸や影をつけない。 - 日本語の見出し帯や装飾ラベルを足さない。 - 購入UIの赤を他のセクションに広げない。 - 余白を詰めて情報を詰め込まない。

Page Structure

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

1. ファーストビュー（作品世界と受賞歴を一目で伝える）: 全幅の人物写真に縦書き筆文字タイトルと月桂冠の受賞表記。
2. キービジュアル（ポスター）（出演者と監督実績を示す）: 左に縦の顔写真列、縦書きコピー、場面写真のコラージュと出演者名の明朝表記。
3. クレジット・コメント導線（スタッフ表記とコメントページへの誘導）: 黒地に極小文字のクレジット、紙テクスチャのボタン2つ。
4. チケット購入（前売券・グッズ購入へ導く）: 白地に購入バナー3つと枠線の購入カード、SNS共有ボタン。
5. 予告編（動画で作品を体験させる）: 灰地に筆記体見出し、埋め込み動画と2列の切り替えタブ。
6. 作品紹介（テーマと制作背景を語る）: 全幅写真の後、中央揃えの詩的コピー、臙脂の強調文、両端揃えの長文。森写真を白く透かした地。
7. ストーリー（あらすじを伝える）: 全幅場面写真の後に筆記体見出しと本文、末尾に写真2〜3枚を横並び。
8. スタッフ・キャスト（監督と出演者を紹介する）: 若葉色の地に監督を中央単独、キャストを2列の正方形グリッドで。
9. ページトップ（先頭へ戻る）: 右下固定の黒い正方形に白い矢印。

Imagery

• 自然光・木漏れ日の中の人物を、やや露出高めで柔らかく撮る。
• 苔むした森や海など、生命を感じる自然の風景を挟む。
• 夜の室内は青紫の色かぶりで幻想的に。
• 背景用の葉の写真は白で70〜80%透かして使う。
• キャストはドキュメンタリー風の自然な場面写真を正方形トリミング。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを左にコラージュ、右にポスターの2分割にし、公開日を大きく添える。
• PC の購入ブロックは横並びのカード1枚に圧縮する。
• PC の詩的コピーは1行を長くし改行を減らす。
• PC のキャストは3列グリッド、端数は中央寄せ。
• PC の場面写真帯は3枚横並びにする。

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