DESIGN.md — 蛍光ピンク×黄色のポップな映画公式 LP（Pop Magenta Yellow Comedy Movie LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 蛍光マゼンタ・原色イエロー・インクのしぶき・コミック調・明朝の大見出し・ドット柄
• 地の質感: ドット・斜めストライプ・方眼の柄を地に敷き、インクのしぶきと紙吹雪を重ねたにぎやかな質感
• 形: 角丸カード、ピル型ボタン、太いオフセット影、斜めの帯
• 温度感: 暖色で高彩度。とても明るくにぎやか

Colors

• マゼンタとイエローを交互に地として使い、セクションごとに切り替える
• マゼンタ地では文字を白、白・淡ピンク地では文字をマゼンタにする
• 本文の文字色も黒ではなくマゼンタにして、ページ全体の色を揃える
• 黒はニュース帯や場面写真の帯など、締め役にだけ使う
• 3種類のカードは、ピンク・シアン・レッドのヘッダーで色分けする
• マゼンタは縦グラデーションで濃い紫寄りに落としていく
• page は文字 #EF208A × 背景 #FDFDFE のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#E0107B、4.56:1）を使う。
• band-copy は文字 #FFFFFF × 背景 #FF009A のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E30089、4.54:1）を使う。
• video-tab は文字 #FFFFFF × 背景 #FF009A のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E30089、4.54:1）を使う。
• song-card は文字 #FF009A × 背景 #FDFDFE のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E30089、4.57:1）を使う。
• comment-block は文字 #EF208A × 背景 #FDFDFE のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#E0107B、4.56:1）を使う。
• marker-heading は文字 #F60392 × 背景 #FDF201 のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CE037A、4.56:1）を使う。

Typography

• 英字の大見出しはマゼンタのセリフ体で大きく組む
• 勢いのある見出しは極太書体を斜めに傾け、黒フチや影を付ける
• 帯コピーは白の明朝を中央揃えにする
• 本文は中央揃えか左揃えにし、行間を広めにとる
• キーワードは黄色やピンクの色を変えて目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央の 1 カラムで、カードや画像はセンター配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは地色や柄を切り替えて区切る
• 本文の帯の間に、全幅の場面写真の帯をはさむ
• カードは縦に並べ、カードの間を 32px 前後あける
• コメント欄は大きな角丸の白枠に入れ、背景に大きな英字の透かしを敷く

Elevation & Depth

• カードの右下に、黄色系の濃い色でぼかさないオフセット影を付ける
• コメント枠はマゼンタの太い線で右と下だけを縁取る
• ボタンにはピンクの濃い下影を付けて立体感を出す
• ぼかした影は使わない

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。人物を斜めのコマ割りで並べるコラージュも使う
• セクション境界: 直線で区切り、インクのしぶきで境界をにじませる
• カードは角丸 12〜20px
• サブボタンは白またはピンクのピル型
• 吹き出しは白の楕円に手書き風の文字を入れる
• 警告テープ風の斜めの帯を装飾に使う

Components

• マゼンタ帯コピー（band-copy）: 全幅のマゼンタ帯に、白の明朝でキャッチを 1 行入れる
• ニュース帯（news-bar）: 黄色の地に黒の極太文字で「NEWS」と置き、日付と短文を並べる
• ピルボタン（pill-button）: 白地にマゼンタ文字と三角矢印を入れたピル型ボタン
• 動画切替タブ（video-tab）: ピンクの角丸ボタンを 4 列×2 段に並べる
• 色分けカード（song-card）: 色付きのヘッダーに英字ラベルを入れ、白い本体に写真・名前・曲名を中央揃えで置く
• 吹き出し（speech-bubble）: 白い楕円に手書き風の縦書き・横書きの短いセリフを入れる
• コメントブロック（comment-block）: 明朝の大きな名前の横に【役名】を添え、その下にマゼンタの本文を置く
• マーカー見出し（marker-heading）: 英字見出しの下に、黄色の太い斜めマーカーを引く

Do's and Don'ts

Do - マゼンタとイエローを大面積で使い切る - インクのしぶき・紙吹雪・ドットを惜しみなく重ねる - 英字の大見出しで各セクションの頭を示す - キャラクターやマスコットを画面端からはみ出させて配置する - 本文もマゼンタにして色の統一感を保つ

Don't - くすんだ色や中間色を主役にしない - 余白の多い静かなミニマル構成にしない - ぼかした柔らかい影を使わない - 本文を真っ黒の細い文字にしない - 見出しの書体を 1 種類だけに絞らない

Page Structure

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

1. ファーストビュー（作品の世界観と公開日を一目で伝える）: 人物写真のコラージュに巨大なロゴ文字、縦書きの大コピー、紙吹雪を重ね、右下に日付を置く
2. バナー列（関連企画へ誘導する）: 小さな横長バナーを 2〜3 個ずつ並べる
3. ニュース（最新の告知を出す）: 黄色帯に極太の見出しを置き、2 行のお知らせと黒い下線を付ける
4. 動画（予告編を見せる）: ピンクストライプの地に英字見出しとプレイヤーを置き、下にタブボタン群を並べる
5. イントロダクション（作品の概要を説明する）: 写真コラージュのあと、マゼンタのグラデ地に白のセリフ英字見出しと中央揃えの白文字を置く
6. ストーリー（あらすじを伝える）: マスコットと吹き出しを添え、群像写真と警告テープ風の帯で勢いを出す
7. 相関図（登場人物の関係を見せる）: 黄色地にインクのしぶきを散らし、極太の傾いた見出しと図解パネルを置く
8. テーマソング（楽曲を紹介する）: 黄色のドット地に、色分けしたカードを 3 枚縦に並べる
9. 原作紹介（原作へ誘導する）: マゼンタ帯の左に書影、右に白文字と白のピルボタン 2 つを置く
10. コメント（出演者・スタッフの声を伝える）: 大きな英字の透かしを敷いた地に白い角丸枠を置き、名前と本文を縦に並べる
11. クレジット・フッター（出演者と権利表記を示す）: マゼンタ文字のクレジットと公開日を中央に置き、マゼンタ帯のフッターで締める

Imagery

• 高彩度で明るい人物写真を使い、ポーズや表情は大げさにする
• 人物を斜めのコマ割りでコラージュする
• 金とピンクの紙吹雪、インクのしぶき、ハートを装飾に散らす
• コミック風の効果音文字や、警告テープ風の帯を重ねる
• 魔法使い風のマスコットを各所に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP 画像はないため、SP での組み方は推奨値として示す
• PC はコンテンツ幅を約 900px に固定し、左右に柄の地を見せる
• SP は全幅で組み、英字の大見出しは 36〜44px に縮める
• 動画タブは SP では 2 列に組み替える
• 原作紹介は SP では書影を上、文字を下に縦積みにする
• ファーストビューの縦書きコピーは、SP でも画像の中に収める

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