DESIGN.md — 黒×草緑×空色のピクセル調映画 LP（Pixel Block Adventure Movie LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: ピクセル・ブロック・草緑・空色・黒地・冒険
• 地の質感: フラットな色面にピクセルのモザイク模様と写真を重ねる。文字には太いフチ取りとドロップシャドウを付ける。
• 形: 角が四角いブロックとギザギザの段差を基本にする。キャラクターの枠は六角形。
• 温度感: 明るく賑やか。黒地で引き締める。

Colors

• 地色は黒 → 草緑 → 空色 → 緑 → 空色 → 黒の順に、帯ごとに切り替える。
• 黒地の英字見出しは空色、緑地の英字見出しは白か濃緑にする。
• 購入ボタンだけ赤を使い、他の色と競わせない。
• 立体見出しは黄緑の面に濃緑のフチ、または黄色と白で重ねる。
• 空色の帯の本文は白文字に青いフチを付けて読ませる。
• pixel-button は文字 #FCF9F8 × 背景 #6CBE32 のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4A8122、4.5:1）を使う。
• pickup-card は文字 #019740 × 背景 #FEFEFE のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#01883A、4.54:1）を使う。
• more-button は文字 #FCF9F8 × 背景 #019740 のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#01883A、4.54:1）を使う。
• hex-badge は文字 #FCF9F8 × 背景 #88CAF5 のコントラスト比が 1.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1077BB、4.58:1）を使う。

Typography

• 英字見出しは左右を小さな四角ドット「▪■」で挟む。
• 英字見出しの直下に小さな和訳を置く。
• 大見出しには太いフチ取りと下方向の厚みを付け、ブロックのように見せる。
• 子ども向けに、物語本文にはルビを振る。
• 本文は中央揃えで、1 行を短く切る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。動画とピックアップは 2 カラムのグリッド。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• セクション同士は上下 60〜100px 空ける。
• カードの 2 カラムは間隔 12px、左右の余白 14px。
• ニュースはサムネを左、日付と本文を右に置く横並びのリスト。
• キャストは役名を右揃え、点線をはさみ、声優名を左揃えにした 2 列。
• MORE ボタンは各リストの下中央に置く。

Elevation & Depth

• 影はほぼ使わず、色面の重なりで階層を作る。
• 立体文字だけは厚みのある段差状の影を付ける。
• チケットのカードは白い面で黒地から浮かせる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いサムネに細い枠線を付ける。キャラ写真は六角形で切り抜く。
• セクション境界: ピクセルの段差（凸凹）で切り替える。
• ボタンは角を 1 ドット欠いたピクセル枠にする。
• MORE ボタンは丸に近いピクセルの塊。
• カードの下端はピクセルのギザギザで写真と白帯を区切る。
• ページネーションは六角形のドット。

Components

• ピクセル枠ボタン（pixel-button）: 緑の面に黄緑の段差枠を付ける。右端に三角の再生アイコンを置く。
• チケット購入ボタン（button-cta）: 白いカードの中に置く赤い横長ボタン。
• ドット付き英字見出し（section-heading）: 英字の大見出しを四角ドットで挟み、下に和訳を添える。
• 動画サムネカード（video-card）: 16:9 のサムネに、左上のラベル帯と中央の再生アイコンを重ねる。
• 特集カード（pickup-card）: 写真の下に白帯を敷き、媒体ロゴと緑の「特集」ラベルを置く。
• MORE ボタン（more-button）: 緑のピクセル塊の中に白抜きの英字を置く。
• キャラクタースライダー（character-slider）: 六角形の写真の下に、名前と説明を載せた黒パネルを重ねる。左右に矢印を置く。
• 六角形バッジ（hex-badge）: 空色の六角形に白文字で速報を載せる。

Do's and Don'ts

Do - 帯の境目は必ずピクセルの段差にする。 - 英字見出しと和訳を必ずセットで置く。 - 大見出しは厚みのある立体文字にする。 - ドット・四角・六角形のモチーフで統一する。 - 黒地と明るい地を交互に置いて、セクションの切り替わりを明確にする。

Don't - 大きな角丸やピル型のボタンを多用しない。 - 細い明朝や繊細な書体を使わない。 - 赤を購入以外の場所に使わない。 - 柔らかい曲線のセクション区切りにしない。 - グラデーションの影を強くかけない。

Page Structure

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

1. ファーストビュー（作品の世界観とロゴを一目で伝える。）: 全面にキービジュアルを敷き、上部にキャッチ、下部にロゴと上映形式、右に六角形バッジを置く。
2. 参加型キャンペーン導線（撮影や投稿への参加を促す。）: 黒地にピクセル枠の緑と空色の大ボタンを縦に並べ、キャラのイラストを添える。
3. 公式 SNS ボタン（フォローへ誘導する。）: 緑のピクセル塊の中にアイコンを置く。
4. ムービー（予告編を見せる。）: タブを 3 つ並べ、その下に 2 カラムの動画グリッドを置く。
5. チケット購入（鑑賞券の販売につなげる。）: 黒地の中央に、枚数選択と赤ボタンを持つ白カードを置く。
6. ピックアップ（特集記事やキャンペーンを紹介する。）: 草緑のモザイク地に 2 カラムの特集カードを並べ、最後に MORE ボタンを置く。
7. イントロダクション（物語のあらすじを伝える。）: 空の背景に黄色・緑の立体キャッチを置き、ルビ付きの白フチ本文を中央揃えで続ける。
8. 場面写真帯（本編の雰囲気を見せる。）: 緑の段差の間に、場面写真を横長に並べる。
9. キャラクター（登場人物を紹介する。）: 六角形の写真と黒パネルのスライダーにし、下に六角形のドットを並べる。
10. キャスト一覧（吹替キャストを示す。）: 空と木の背景に、役名と名前を点線で結んだリストを置く。
11. ニュース（最新情報を伝える。）: 黒地にサムネ付きの横並びリストを点線で区切り、最後に MORE ボタンを置く。
12. フッター（公式アカウントと規約へ誘導する。）: SNS アイコン、シェアボタン、ロゴ、リンクを中央揃えで並べる。

Imagery

• 四角いブロックでできた風景や生き物を 3DCG 風に描く。
• 青空と白い雲、ボクセル状の木を背景に使う。
• 緑の濃淡の正方形を敷き詰めたモザイク地を作る。
• 人物は鮮やかな衣装で表情を強め、六角形に切り抜く。
• ドット絵風の小さなキャラをボタンの角に添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文を中央 900px 前後に収め、背景は全幅に敷く。
• PC の動画とピックアップは 4 カラムにする。
• PC ではキャンペーンのボタンを、ファーストビュー左側の浮遊バナーにまとめる。
• PC のチケットウィジェットは横長の 1 行レイアウトにする。
• 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 行書くと起動時に読み込まれる。