DESIGN.md — 水色と赤見出しの夏映画 LP（Sea Breeze Indie Film LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 清潔・爽やか、シンプル・ミニマル、やさしい・柔らかい
• キーワード: 夏の海・淡い水色・赤い見出し・全幅スチール・余白の多い本文・映画公式
• 地の質感: フラットな単色面。質感は写真で出し、装飾は付けない
• 形: 角丸のない長方形。カードとボタンも角を立てる
• 温度感: 涼しく明るい。赤の見出しだけ少し温度を足す

Colors

• 地はほぼ白の淡いグレーで、全体の 6 割以上を占める
• 水色はバナーの帯とコメントカードの面だけに使う
• 赤はセクション見出し・人名・コメントの署名に限る
• 本文は濃い墨色。真っ黒にはしない
• 写真の青と空色に合わせて寒色でまとめ、暖色を増やさない
• banner-band は文字 #E0141E × 背景 #96DEF6 のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B81019、4.5:1）を使う。

Typography

• セクション見出しは英語にし、赤い太字サンセリフで左寄せにする
• 日本語本文は 13px 前後で行間を広く取る
• 人名は「漢字｜ひらがな」の形で赤字にする
• コメントの署名は右寄せの赤い太字にする
• 装飾フォントは使わず、情緒は縦書き明朝の一行だけで出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。キャストは PC で 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• テキストのセクションの間に全幅の場面写真を挟む
• 本文ブロックは左寄せで中央に置く
• コメントカードは縦に並べ、間を 16px 空ける
• 見出しから本文までは 16〜24px

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは色面の差と写真だけで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。全幅か 2 分割で裁ち落とす
• セクション境界: 直線。写真と色の帯で切り替える
• 角丸は付けない
• 写真に枠線は付けない
• バナーは細い枠線の長方形にする

Components

• 英字セクション見出し（section-title）: 赤い太字の英語見出し。下線などの装飾は付けない
• コメントカード（comment-card）: 水色の面に本文を左寄せで置き、右下に赤字で署名を入れる
• 水色バナー帯（banner-band）: 全幅の水色帯の中央に、配信サービスなどの小さなバナーを置く
• キャストプロフィール（cast-card）: 横長の写真、赤い人名、小さな本文の順に縦に積む
• 受賞の月桂樹バッジ（award-badge）: 映画祭名を赤い細字の月桂樹で囲み、横に並べる
• 白い告知タイル（info-tile）: FV 下部に白い長方形を 3 つ並べ、ロゴやランキングを入れる
• リードコピー（lead-copy）: 深い青緑の太字 2 行。強調語は引用符で大きく見せる

Do's and Don'ts

Do - 写真は海・空・リゾートホテルの明るく抜けた場面を選ぶ - 見出しの赤は一つの色に統一する - 本文は短い段落に分け、十分な行間を取る - 水色カードを反復して軽いリズムを作る - FV は人物写真の上に、タイトル・キャスト・告知タイルを重ねる

Don't - 角丸・影・グラデーションのボタンを使わない - 赤を面で広く塗らない - 濃い背景色のセクションを増やさない - 販促系の太いバッジや吹き出しを入れない - 写真を小さなサムネイルで並べすぎない

Page Structure

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

1. ファーストビュー（作品の世界観とタイトル・受賞歴を一目で伝える）: 全面の海と人物の写真に、縦書きの明朝コピー、赤い欧文タイトル、月桂樹、キャスト名、白い告知タイルを重ねる
2. 告知バナー帯（配信や関連サービスへ誘導する）: 水色の全幅帯の中央に、赤枠の小さなバナーを置く
3. 場面写真（空気感を伝える）: 全幅の横長スチールを 1 枚置く
4. イントロダクション（作品の概要と評価を伝える）: 赤い英字見出し、青緑のリードコピー、小さな本文の順に並べる
5. 場面写真 2 分割（テキストの区切り）: 2 枚を左右に並べて全幅で裁ち落とす
6. あらすじ（物語を紹介する）: 英字見出しの下に本文を 1 段落置く
7. キャストプロフィール（出演者を紹介する）: 空と雲の写真を背景に見出しを置き、写真・赤い人名・本文のカードを 2 列で並べる
8. 監督プロフィール（作り手を紹介する）: キャストと同じ書式で、写真を省いてテキストだけにする
9. コメント（著名人や海外メディアの評価で信頼を得る）: 中央に赤い見出しを置き、水色カードを縦に十数枚並べて署名を赤字の右寄せにする
10. クレジット（公式情報を締めくくる）: 赤いタイトルロゴの下に、キャストとスタッフを小さな文字で中央揃えにする

Imagery

• 自然光で撮った明るい映画スチール。水色と白が多い色調にする
• 海辺、リゾートホテルの客室や廊下、カフェなど夏の旅の場面を使う
• 人物は引きの構図で、カメラを見ない自然な姿にする
• 空と雲の写真をセクション背景に使う
• イラストやアイコンは使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央のコンテンツ幅を約 600px にし、写真は全幅にする
• SP ではキャストを 1 列に並べる
• SP の FV は写真を縦長にトリミングし、タイトルを写真の下に置く
• 告知タイルは SP で縦に積むか横にスクロールさせる
• コメントカードは SP では左右の余白を 16px にする

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