DESIGN.md — 黄×赤×緑のポップな邦画コメディ公式LP（Bold Yellow Red Green Comedy Movie LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: 原色ブロック・極太欧文見出し・ちぎり紙カード・すごろくマップ・免許証パロディ・切り抜き写真
• 地の質感: ベタ塗りの原色面が基本。黄色地には細い白の方眼グリッドを重ね、生成りの紙カードは手で破ったような不規則な輪郭にする。
• 形: 斜めに傾いた多角形のカード、八角形や三角形の標識バッジ、角丸の免許証カード、角丸の黒いボタン。
• 温度感: 明るく暑苦しいほどの熱量。コミカルで賑やか。

Colors

• セクションごとに黄→赤→緑→黄→赤→黄と地色をはっきり切り替える。
• 長い本文は必ず生成りのちぎり紙カードに載せ、原色の上に直接置かない。
• 見出しは墨色で統一する。リード文と役職ラベルだけ朱赤にする。
• 黒ボタンの文字は黄色にして、ブランド色を反転させる。
• 緑のマップ内の吹き出しは白・紺・赤枠白を混ぜてリズムを出す。
• 中間色やグラデーションは使わず、ベタ塗りの原色だけで構成する。
• button-tab-active は文字 #FFF1E6 × 背景 #FE3901 のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D32F01、4.54:1）を使う。
• button-tab は文字 #F13307 × 背景 #FEFEFE のコントラスト比が 3.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#E02F06、4.55:1）を使う。

Typography

• セクション見出しは極太の英字大文字1行と、その下に小さな和文を中央揃えで置く。
• 本文は行間2.0でゆったり組み、左揃えにする。
• キャッチコピーは縦書き・斜め配置にし、白フチ付きの極太文字で写真に重ねる。
• 役名と俳優名はスラッシュでつなぎ、ふりがなを小さく上に添える。
• カード内の小見出しは英字の太ゴシック大文字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ボタン群のみ 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション見出しの上下は60px前後空ける。
• ちぎり紙カードは画面端から12px程度だけ内側に置き、ほぼ全幅にする。
• キャストは免許証カード→名前→COMMENTボタンの順で縦に繰り返す。
• すごろくマップは黄色の曲がりくねった道を背景に置き、コマを左右交互に並べる。
• セクション境界には木や標識などの小さなイラストを置く。

Elevation & Depth

• 影はほぼ使わずフラットにする。
• 免許証カードはごく薄い影と白フチで紙らしさを出す。
• 切り抜き写真には白い太フチを付け、ステッカー風にする。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は背景を切り抜き、白フチを付けて斜めに配置。キャストは証明写真風の四角。
• セクション境界: 直線で色を切り替えるほか、ちぎり紙風のギザギザ輪郭を使う。
• 本文カードは四隅を少しずらした不規則な多角形にする。
• マップの吹き出しは雲形・八角形・三角標識形を使う。
• ボタンは小さな角丸の長方形にする。
• 道路標識の矢印など交通モチーフを装飾に使う。

Components

• 黒地黄文字ボタン（button-comment）: キャストやスタッフの下に置き、コメントを展開する。
• 選択中の予告タブ（button-tab-active）: 赤地に白文字。予告動画を切り替える。
• 非選択の予告タブ（button-tab）: 白地に赤文字。
• 英字＋和文の見出し（section-title）: 極太英字の下に小さな和文を置き、中央揃えにする。
• ちぎり紙本文カード（torn-paper-card）: 不規則な多角形の生成りカードに長文を入れる。
• 免許証風キャストカード（license-card）: 免許証の枠を模した表に役柄・ひとこと・星評価・顔写真を入れる。
• NEWS帯（news-bar）: 左に黒地黄文字のラベル、右にベージュ地で日付・赤タグ・見出しを置く。
• すごろく吹き出し（map-bubble）: 雲形・八角形・紺の箱などでストーリーのコマを短文で説明する。
• 予告動画枠（video-frame）: キービジュアルに赤い再生ボタン、右上に黄色のラベルを置く。

Do's and Don'ts

Do - 黄・赤・緑の原色ベタ面でセクションをはっきり分ける。 - 長文は生成りのちぎり紙カードに入れて読みやすくする。 - 見出しは極太英字と小さな和文の2段で統一する。 - 人物は切り抜きに白フチを付け、斜めに置いて動きを出す。 - 身近な書類や標識をパロディにした部品で遊び心を足す。

Don't - くすんだ色やパステル、グラデーションを主役にしない。 - 細い明朝体や上品すぎる書体を使わない。 - 原色地の上に長い本文を直接載せない。 - 大きな角丸やピル型ボタンにしない。 - 整然としすぎたグリッドで遊び要素をなくさない。

Page Structure

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

1. ヘッダー（メニューとSNSへの導線）: 黄地に左のハンバーガーメニュー、右に黒丸のSNSアイコン。
2. ファーストビュー（作品の世界観とタイトル・公開日を伝える）: 全幅のキービジュアルに黄黒のロゴと白い公開日を重ね、縦書きのコピーを添える。
3. お知らせ帯（最新ニュースを告知する）: 黒ラベルとベージュ帯の横並び。
4. 予告動画（映像で作品を訴求する）: 黄地に動画枠、その下に2列のタブボタン、さらに前売券のバナー。
5. 作品紹介（作品の魅力を伝える）: 赤地の上部に場面写真のコラージュ、下に白いちぎり紙カードで赤いリードと本文。
6. キャッチビジュアル（主人公のキャラを強く印象づける）: 赤地に極太の白フチ文字を斜めに置き、切り抜き人物を大きく見せる。
7. すごろくあらすじ（物語の流れを楽しく見せる）: 緑地に黄色の道を描き、コマ・吹き出し・切り抜き写真・イラストを散りばめる。
8. ストーリー（あらすじを文章で伝える）: 緑地の上に生成りのちぎり紙カード。
9. キャスト（出演者を紹介する）: 方眼入りの黄地に免許証風カード、名前、黒いCOMMENTボタンを縦に並べる。
10. スタッフ（制作陣を紹介する）: 赤地にちぎり紙カードを並べ、赤の役職・大きな名前・英字の小見出しと本文を入れる。
11. 主題歌（主題歌を紹介する）: 方眼入りの黄地に免許証風カード、曲名、COMMENTボタン。
12. クロージングビジュアル・フッター（公開日を再告知して締める）: 夕景の写真にクレジットと公開日を重ね、黒帯にコピーライト。

Imagery

• 人物写真は背景を切り抜き、白い太フチのステッカー風にして傾けて置く。
• 誇張したポーズや表情の写真でコメディ感を出す。
• 木・雲・山・標識・車・バイクなどは、フラットで単純なイラストにする。
• 公的な書類の書式をパロディにし、星評価や記号を入れる。
• キービジュアルは渦巻き背景やドラマチックな夕景など、映画らしいトーンにする。
• 爆発形・集中線・マイクなどの漫画的な小物を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは上部に横並びのテキストナビを常時表示する。
• PCのファーストビューは左にビジュアル、右の黄地にロゴ・公開日・購入バナーを置く2分割。
• PCのキャストは主演1枚を中央に置き、残りを2列グリッドにする。
• PCのスタッフは監督のカードを全幅にし、その他を2列にする。
• PCのすごろくマップは横に広げ、コマを横方向にも分散させる。
• 本文カードの幅はPCで約75%にし、文字を小さめにして行数を抑える。

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