DESIGN.md — 生成り紙と手描き線の邦画公式 LP（Warm Paper Handmade Indie Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ナチュラル
• キーワード: 生成り紙・手描き波線・黄色マーカー・ポラロイド写真・水色カード・ほっこり
• 地の質感: 細かい布目・和紙風の紙テクスチャを全面に敷く。マスキングテープ風の小さな貼り紙あり
• 形: 角丸カード、円形の人物写真、少し傾けた白フチ写真、手描きの線画イラスト
• 温度感: 暖かい。クリームと焦げ茶が基調で、水色と黄色がアクセント

Colors

• 地は常に生成りの紙テクスチャで、黒や濃色の背景セクションは作らない
• 見出しは黄色マーカー帯の上に焦げ茶文字で置く
• 人物紹介は白いパネル、コメントは水色カードと面の色で区別する
• 役名・肩書きはオレンジ、コメント人名は青と小さな色差で整理する
• 赤はチケット販売など外部バナー1点だけに使う
• 文字は純黒を避け焦げ茶で柔らかくする
• role-badge は文字 #FFFFF7 × 背景 #E9A04A のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AB6615、4.5:1）を使う。

Typography

• 全体を丸ゴシックで統一し、手描き感を出す
• 本文は字間を広く行間を2.0前後にして、ゆったり読ませる
• あらすじは中央揃え、長いイントロ本文は左揃え
• 見出しは小さく字間を広くし、下に手描きの波線を添える
• 公開日の数字だけ大きく太くし色を変える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物は 2〜3 列の円形グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの間に全幅の写真帯を挟んで場面を切り替える
• 見出しは中央。波線の下に黄色帯のリードを1〜2行重ねる
• キャストとスタッフは大きな角丸の白パネルに収める
• コメントは水色カードを縦に積み、間隔16px
• 主役2人は大きな円、脇役は小さな円で階層をつける

Elevation & Depth

• 影はほぼ使わず、面の色で差をつける
• ポラロイド風写真だけ白フチとごく薄い影を付ける
• カードは平面のまま角丸で柔らかく見せる

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 28px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は黄色フチの正円。場面写真は白フチで±5°傾けて重ねる。帯写真は全幅の長方形
• セクション境界: 直線の全幅写真帯。紙の地は区切り線なしで続ける
• カードとパネルは大きめ角丸
• 見出し帯は角丸なしの平たいマーカー
• 手描き線画の小物（家・ほうき・人物）を角に置く

Components

• 波線付き小見出し（heading-wave）: 字間の広い短いセクション名の下に、手描きの波線とループを添える
• 黄色マーカー見出し（marker-lead）: 1行ずつ黄色の帯を敷いた太字のリード。2行の場合は幅をずらして重ねる
• 公開日帯（release-date-band）: 黄色の横長帯に大きな日付数字と劇場名。両端にマスキングテープ風の装飾
• 鑑賞券バナー（ticket-banner）: 赤い長方形に白文字と白いロゴ枠。左上に斜めの小ラベル
• 予告編フレーム（trailer-frame）: 動画を黄色の太い枠で囲み、脇に手描き風の貼り紙イラストを置く
• 円形人物カード（person-circle）: 黄色フチの円写真、下に太字の名前とオレンジの小さな役名
• コメントカード（comment-card）: 水色の角丸カード。青の人名と小さな肩書き、その下に字間の広い本文
• 役割の丸バッジ（role-badge）: 主演・監督などを色付きの小さな円に白文字で入れ、名前を×でつなぐ
• 劇場情報の表（theater-table）: 白帯のヘッダーに縦線区切りで地域・劇場名・電話・公開日を並べる

Do's and Don'ts

Do - 紙テクスチャの生成り地を全セクションで続ける - 見出しは波線と黄色マーカー帯の組み合わせで統一する - 手描きの線画小物をセクションの角に少しだけ散らす - 場面写真は傾けたポラロイド風に重ね、日常感を出す - コメントは水色カードに揃え、同じ型でくり返す

Don't - 黒背景や強いグラデーションを使わない - 鋭い角の箱や太い影を使わない - 明朝や角ばったゴシックを見出しに使わない - 赤をボタンや見出しに多用しない - 本文を詰めて組まない

Page Structure

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

1. グローバルナビ（各セクションへの移動）: 生成り地に小さな太字メニューを横並び、右端にSNSの丸アイコン
2. ファーストビュー（作品の世界観と主演を一目で伝える）: 手描きタイトル、傾けたメイン写真、受賞ロゴの列、切り抜き人物と小物を散らすコラージュ
3. 公開日・チケット（公開日と購入導線を示す）: 黄色の日付帯の下に赤い鑑賞券バナーを置く
4. 予告編（動画で興味を引く）: 波線見出しの下に黄色枠の動画、脇に手描きの貼り紙
5. 場面写真帯（セクションの切り替え）: 全幅の横長場面写真
6. イントロダクション（作品の見どころと制作陣を紹介）: 役割バッジ×名前の並び、黄色マーカーの2行リード、中央本文、左に傾けた写真3枚と右に長文
7. 物語（あらすじを伝える）: マーカー見出しと中央揃え本文、下に傾けた場面写真を横に連ねる
8. キャスト（出演者を紹介）: 白い大角丸パネルに円形写真を2・3・4列のピラミッド配置
9. スタッフ（制作陣を紹介）: 白パネルに監督と主題歌を円写真で、その他は肩書き+名前の文字列
10. コメント（著名人の声で共感を集める）: 全幅写真帯の後、水色角丸カードを縦に多数積む
11. 劇場情報（上映館を案内）: 波線見出しと白帯ヘッダーの簡素な表
12. フッター（クレジットの表記）: 全幅の写真上に白い小さな文字でキャスト・スタッフ・コピーライト

Imagery

• 自然光でやわらかい、少し褪せたフィルム調の日常写真
• 古い家屋や食卓など、生活感のある場面を選ぶ
• 人物写真は笑顔中心で、正円に切り抜き黄色フチを付ける
• 鉛筆の手描き線画（家、ほうき、人の顔、湯気）を小さく添える
• マスキングテープ、貼り紙、ポラロイドの白フチで手作り感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約900px幅で、両端も紙テクスチャを敷く
• SPではナビをハンバーガーにし、FVのコラージュは縦に積む
• キャストの円はSPでは2列、主役のみ大きめ
• イントロの写真と本文の2カラムはSPでは写真を上に置いて縦に並べる
• コメントカードはSPでほぼ全幅、左右余白は約20px

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