DESIGN.md — 赤×深緑×橙のレトロ映画告知 LP（Retro Red Cinema Promo LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: レトロ、力強い・インパクト、情報量多め・訴求型、ポップ・元気
• キーワード: 朱赤ベタ・方眼テクスチャ・星付き英字見出し・丸抜き写真・写真入り巨大ロゴ文字・黒地の購入導線
• 地の質感: 深緑グレー地に細い方眼線を敷いた紙のような質感。赤面はフラットなベタ。
• 形: 四角いバナーとカードが基本。キャスト写真のみ橙枠の正円。セクション境界は細い橙ライン。
• 温度感: 高温。赤と橙で熱く、深緑で落ち着かせる対比。

Colors

• 地色は黒→深緑方眼→朱赤→深緑方眼→朱赤の順で交互に切り替える。
• 朱赤地の文字は白のみ。深緑地は白と橙の二色。
• 橙は星・英字見出し・写真の丸枠・セクション境界線に限定。
• 黄色と黄緑は告知・外部購入バナーのみの差し色。
• 購入ボタンは朱赤ベタに白文字で、白いウィジェット内に置く。

Typography

• セクション見出しは太い欧文大文字を橙の★2つで挟む。
• 英字の人物名は橙の太い欧文サンセリフで和名の下に添える。
• 赤地の長文は太めの明朝で読み物らしく組む。
• 本文は左揃え、見出しは中央揃え。
• 巨大英字は画面幅いっぱいに詰め、内部に写真を流し込む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ニュースは 2 列、キャストは 2 列の丸写真、場面写真は 2×2 グリッド。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 12px（375px 幅換算）
• キービジュアルとバナーは横幅いっぱいに置く。
• 本文ブロックの左右余白は約 24px。
• 見出しの上下余白は 40px 前後と広めにとる。
• 場面写真グリッドは隙間 2px ほどで敷き詰める。
• 購入ウィジェットは白い箱を中央に置き、下に横長バナーを縦に並べる。

Elevation & Depth

• 影はほぼ使わずフラットにする。
• ニュースカードは暗い面に細い枠線だけで背景と分ける。
• 立体感は丸写真の橙の太枠で出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: キャストは橙 3px 枠の正円。場面写真は四角で敷き詰め、帯写真は横長にトリミング。
• セクション境界: 直線の切り替え。境界に細い橙ラインを引く。
• ボタンは角丸 4px の長方形。
• カードは角丸 6px 程度。
• 斜めや波形の区切りは使わない。

Components

• チケット購入ウィジェット（ticket-widget）: 白箱に券種・枚数・合計金額を並べ、赤い購入ボタンとグレーのサブボタンを置く。
• 購入ボタン（button-primary）: 朱赤ベタに白の極太文字を 2 段組みにし、小さな白抜きバッジを添える。
• 外部購入バナー（banner-link）: 横長のロゴ付き帯。赤・黄緑・橙の色違いを縦に並べる。
• 星付き英字見出し（heading-star）: ★ 英字大文字 ★ を中央揃えにする。星は橙、文字は白。
• ニュースカード（news-card）: 暗い面に写真・橙の日付・白い太字タイトルを縦に並べる。
• キャスト丸写真（cast-circle）: 直径約 145px の正円写真を橙の太枠で囲み、2 列に並べる。
• 告知帯（announce-bar）: 黄色地を赤枠で囲み、黒の極太文字で速報を打ち出す。
• SNSアイコン列（sns-bar）: 暗いグレー地を 3 分割し、白いSNSアイコンを置く。区切りは橙の線。

Do's and Don'ts

Do - 赤地と方眼の深緑地を交互にして、セクションのリズムを作る。 - 見出しは必ず橙の★で挟む。 - 人物写真は橙枠の正円で統一する。 - 購入導線はファーストビュー直下の黒地にまとめる。 - 写真はフィルム調の暖色・粒状感でそろえる。

Don't - パステル色や淡いグラデーションを使わない。 - ピル型ボタンや大きな角丸を使わない。 - ドロップシャドウで浮かせない。 - 赤地に橙の本文を置かない。読みにくくなるため。 - 橙を広い面の塗りに使わない。

Page Structure

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

1. ヘッダー（メニューへの導線）: 黒の細い帯にハンバーガーアイコンを中央配置する。
2. ファーストビュー（作品の魅力と公開日を伝える）: 赤い背景に人物写真のポスターを全面に置く。受賞歴・評価バッジ・ロゴ・日付を重ねる。
3. SNS・告知（拡散と最新情報）: 3 分割のSNS帯、黄色の告知帯、キャンペーンバナーを順に並べる。
4. チケット購入（前売券の購入）: 黒地に白いウィジェットを置き、その下に色違いの横長バナーを 3 本並べる。
5. サウンドトラック（音楽で世界観を伝える）: 濃い赤の埋め込みプレイヤーを角丸で配置する。
6. ニュース（最新トピックの告知）: 方眼の深緑地に 2 列の暗いカードを並べる。
7. タイトルビジュアル（インパクトを出す）: 赤地に巨大な英字を置き、文字の中に場面写真を流し込む。
8. イントロダクション（作品の背景と評価を説明する）: 赤地に白い明朝の大見出しを置き、太字明朝の長文を続ける。
9. ストーリー（あらすじを伝える）: 横長の場面写真の下に★見出しを置き、白の太字ゴシック本文を続ける。
10. キャスト（出演者の紹介）: 方眼の深緑地に橙枠の丸写真を 2 列で並べる。
11. スタッフ（監督の紹介）: 肩書き・和名・橙の英字名を中央に置き、その下に略歴を左揃えで組む。
12. 場面写真ギャラリー（映像の雰囲気を見せる）: 2×2 の写真を隙間なく敷き詰める。
13. フッター（タイトルの再提示）: 朱赤ベタの中央に白いロゴを置く。

Imagery

• 写真は暖色寄りのフィルム調で、粒状感と少しくすんだ色にする。
• 人物は表情が大きく見える寄りのカットを使う。
• オレンジの卓球ボールのような小物を、ロゴやビジュアルに重ねるアイコンとして使う。
• 背景の方眼は 8px 程度の細い線で薄く描く。
• ロゴは白の極太カタカナを★と細い罫線で挟むポスター風にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はキービジュアルを横長に置き、右側にロゴ・日付・SNSを寄せる。
• PC は上部にテキストのグローバルナビを横並びで出す。
• 購入ウィジェットとバナーは PC で横一列に圧縮する。
• ニュースは PC で 3 列、キャストは 4 列にする。
• イントロ本文は PC で 2 段組みにし、ストーリーは写真の上に文字を重ねる。
• 場面写真は PC で 4 枚を横一列に並べる。

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