DESIGN.md — ラベンダー×コーラルの恋愛映画公式 LP（Pastel Lavender and Coral Romantic Movie LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、情報量多め・訴求型
• キーワード: ボケ光・パステルグラデーション・都会の夕景・エモーショナル・ポラロイド風写真・ピル型ボタン
• 地の質感: 写真のボケ光とキラキラ星柄が重なる、柔らかく光の多い質感
• 形: ピル型ボタンと角ばった白カード。写真は白フチ付きで少し傾けて散らす
• 温度感: 暖色寄り。ラベンダーからコーラル、ピーチへと上から順に暖かくなる

Colors

• 上から順に、ラベンダー（お知らせ・リンク）→白（予告編）→コーラル（作品紹介）→ピーチ（キャスト・スタッフ）と地色を切り替える
• ボタン・リンク・欧文見出しはピンクレッド1色に揃える
• 人物ごとにアクセント色（ピンク・青・緑・紫）を決め、名前とプロフィールボタンを同じ色にする
• コーラル地の上の本文は白にし、キーワードだけを黄色で強調する
• 地色の境目は写真のボケ光や空のグラデーションでなじませる
• button-primary は文字 #FFFFFE × 背景 #E84560 のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E42545、4.51:1）を使う。
• button-more は文字 #FFFFFE × 背景 #E84560 のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E42545、4.51:1）を使う。
• button-profile は文字 #FFFFFE × 背景 #13AE69 のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#0F8751、4.56:1）を使う。
• carousel-trailer は文字 #E84560 × 背景 #FFFFFE のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E42545、4.51:1）を使う。

Typography

• セクション見出しは細い欧文の単語1つで中央に置き、装飾はつけない
• 人物名は『日本語名＋ローマ字』の2段にし、同じ色で中央揃えにする
• セリフ引用は前後に引用符をつけ、人物色で中央揃えにする
• 本文は小さめにして中央揃えにする。SP は左揃えでもよい
• 写真の上のコピーは太いゴシックに白フチや影をつけて読みやすくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。脇役は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• バナーと白カードは画面幅の約90%で中央に置く
• セクションごとに地色を全幅で切り替える
• 人物カードは写真→役名→名前→ボタン→セリフ→小さなイラストの順に縦に積む
• 写真ギャラリーは白フチの写真を左右にずらして重ねる
• ファーストビューは全幅のキービジュアルに、受賞歴の月桂樹マークを2×2で並べる

Elevation & Depth

• 白カードは影なしのフラットにし、地色との差だけで区切る
• ポラロイド風写真には薄い影と白フチをつけ、少し傾ける
• バナーは影なし。細い枠線のみ

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物写真は縦長の長方形で角丸なし。ギャラリー写真は白フチ付きで傾ける
• セクション境界: 直線、またはボケ光や空のグラデーションでなじませる
• 主ボタン・SNSボタンは完全なピル型
• プロフィールボタンは角丸なしの小さな長方形にし、右端に＋をつける
• カードとバナーは角丸なし

Components

• 劇場・SNS用ピル型ボタン（button-primary）: 幅いっぱいのピル型。アイコン＋欧文ラベルを中央に置く
• もっと見る小ボタン（button-more）: 幅の狭いピル型ボタン
• プロフィールボタン（button-profile）: 人物色で塗った長方形。右端に＋をつける
• SNS・ニュースの白カード（card-info）: ラベンダー地に置く白い箱。欧文見出し、ボタンまたはニュース一覧を入れる
• ニュース行（news-item）: タイトルと日付の2行を、ピンクの下線で区切る
• 受賞歴の月桂樹マーク（award-laurel）: 白い月桂樹の線画で、受賞名を2〜3行で挟む
• キャンペーンバナー（banner-campaign）: ボケ写真や帯ラベルを使った横長バナーを縦に積む
• 手描き風の吹き出し（speech-bubble）: 白い線の楕円の中に、人物の性格を短く書く
• 予告編スライダー（carousel-trailer）: 動画サムネイルの左右にピンクの矢印、下にドットを置く

Do's and Don'ts

Do - 地色はパステル（ラベンダー・コーラル・ピーチ）だけにして、柔らかさを保つ - 人物ごとのテーマ色を名前・ボタン・セリフで揃える - 写真のボケ光やグラデーションでセクションの境目をなじませる - ボタンはピンクレッドのピル型に揃える - 人物ブロックの間に手描き風の小さなイラストを挟む

Don't - 黒や濃紺のベタ面を広く使わない - 見出しに太い欧文や下線などの重い装飾をつけない - カードに強い影や大きな角丸をつけない - 1人の人物に複数のアクセント色を混ぜない - 本文を大きくしすぎて写真の存在感を消さない

Page Structure

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

1. ファーストビュー（作品の世界観と受賞歴を一目で伝える）: 全幅のキービジュアルに、ロゴ・縦書きのコピー・紫の丸バッジ・月桂樹の受賞歴を重ねる
2. 場面写真の帯（作品の雰囲気を補う）: 場面写真を3枚、横に隙間なく並べる
3. お知らせ・バナー群（上映中の告知・評価・キャンペーンへ誘導する）: ラベンダーの星柄地に、ランキングカードとバナーを縦に積む
4. 劇場・SNS・ニュース（行動への導線をまとめる）: ピル型の劇場ボタンと、白カード2つ（SNSボタン3つ、ニュース一覧）
5. 予告編（動画で興味を高める）: 白地に欧文見出しと動画スライダーを置く
6. キャッチビジュアル（関係性のテーマを訴求する）: 写真の上にピンクの大見出しを置き、吹き出し2つと縦書きコピーを添える
7. 作品紹介（概要とキャストの豪華さを伝える）: コーラル地に白い本文。白フチの場面写真を傾けて3枚散らす
8. あらすじ（物語を紹介する）: コーラル地に、黄色で強調した小見出しと本文を置き、下端をボケ光で終える
9. キャスト（出演者を紹介する）: 空のグラデーションからピーチ地へつなぐ。主役は大きな写真とセリフ、脇役は2カラムのグリッド
10. スタッフ・原作（監督と原作者の想いを伝える）: 紫をテーマ色にした人物カードと書影、コメントの引用を置く
11. シェア・クレジット（拡散と権利表記）: 夜景のボケ写真と場面写真の帯のあと、白地にSNSアイコンとクレジットを置く

Imagery

• 都会の夕景や夜景を、柔らかい逆光とボケ光で撮る
• 人物は自然光の中で、ナチュラルな表情を縦長に切り抜く
• 場面写真は白フチのポラロイド風にして傾ける
• 手描き水彩風の小物イラスト（靴・ノートなど）を区切りに使う
• 背景にキラキラした星柄や、空のグラデーションを重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルを横長にし、バッジ類を画像の四隅に散らす
• PC の SNS とニュースのカードは横に2列で並べる
• PC の予告編は3枚を同時に見せるスライダーにする
• PC のキャストは写真とテキストを左右交互に並べ、脇役を3〜4列にする
• ギャラリー写真は 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 行書くと起動時に読み込まれる。