--- version: alpha name: Pixel Block Adventure Movie LP description: 黒地と草緑・空色の帯を交互に重ねた、ブロックゲームを思わせる映画公式サイトの LP。セクションの境目はギザギザのピクセル段差で区切る。見出しは英字の太字に小さなカナ訳を添える。太いフチ取りの立体文字とピクセル枠のボタンで、にぎやかな冒険感を出す。 colors: background: '#000000' primary: '#6CBE32' secondary: '#019740' accent-1: '#88CAF5' background-alt: '#C6E9EF' dark-section: '#010101' accent-2: '#68BF23' accent-3: '#E2EF32' cta: '#E5141B' on-cta: '#FCF9F8' surface: '#FEFEFE' text: '#02060A' on-dark: '#FFFFFF' line: '#9A9A9A' primary-accessible: '#4A8122' secondary-accessible: '#01883A' accent-1-accessible: '#1077BB' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.15 headline-lg: fontFamily: Montserrat fontSize: 36px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.08em headline-md: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 900 lineHeight: 1.9 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 label-button: fontFamily: Dela Gothic One fontSize: 20px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.03em note: fontFamily: Montserrat fontSize: 9px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 12px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' pixel-button: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 60px button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px section-heading: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 70px video-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 150px pickup-card: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 215px more-button: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px character-slider: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 470px hex-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 80px --- # DESIGN.md — 黒×草緑×空色のピクセル調映画 LP（Pixel Block Adventure Movie LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: ピクセル・ブロック・草緑・空色・黒地・冒険 - **地の質感**: フラットな色面にピクセルのモザイク模様と写真を重ねる。文字には太いフチ取りとドロップシャドウを付ける。 - **形**: 角が四角いブロックとギザギザの段差を基本にする。キャラクターの枠は六角形。 - **温度感**: 明るく賑やか。黒地で引き締める。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | 動画・ニュースの黒地 | | 画素の実測 | | `primary` | `#6CBE32` | ピックアップ帯などの草緑 | | 画素の実測 | | `secondary` | `#019740` | ブランドの濃緑（ボタン・見出し） | | 画素の実測 | | `accent-1` | `#88CAF5` | 黒地の英字見出しに使う空色 | | 画素の実測 | | `background-alt` | `#C6E9EF` | 空色の帯 | | 画素の実測 | | `dark-section` | `#010101` | 緑地の上に置くキャラ説明の黒パネル | | 画素の実測 | | `accent-2` | `#68BF23` | 立体見出しや日付に使う黄緑 | | 画素の主要色に補正 | | `accent-3` | `#E2EF32` | 強調見出しの黄色 | | 画素の実測 | | `cta` | `#E5141B` | チケット購入ボタンの赤 | | 推定 | | `on-cta` | `#FCF9F8` | ボタン上の白文字 | | 画素の実測 | | `surface` | `#FEFEFE` | チケットウィジェットの白カード | | 画素の実測 | | `text` | `#02060A` | 空色の帯の上の黒文字 | | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地の上の白い本文 | | 推定 | | `line` | `#9A9A9A` | ニュースの点線区切り | | 推定 | | `primary-accessible` | `#4A8122` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#01883A` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#1077BB` | AA を満たす補正値（計算） | | 計算 | - 地色は黒 → 草緑 → 空色 → 緑 → 空色 → 黒の順に、帯ごとに切り替える。 - 黒地の英字見出しは空色、緑地の英字見出しは白か濃緑にする。 - 購入ボタンだけ赤を使い、他の色と競わせない。 - 立体見出しは黄緑の面に濃緑のフチ、または黄色と白で重ねる。 - 空色の帯の本文は白文字に青いフチを付けて読ませる。 - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 物語紹介の巨大な立体キャッチ | 装飾・ディスプレイ | Dela Gothic One | 900 | 52px | 1.15 | 0.0em | | `headline-lg` | 英字のセクション見出し | 欧文サンセリフ | Montserrat | 900 | 36px | 1.1 | 0.08em | | `headline-md` | フチ取りした和文見出し・キャラ名 | ゴシック | Dela Gothic One | 900 | 28px | 1.3 | 0.02em | | `headline-sm` | 英字見出しの下に添えるカナ訳・タブ名 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.3 | 0.05em | | `body-lg` | ルビ付きの物語本文（中央揃え） | ゴシック | Zen Kaku Gothic New | 900 | 15px | 1.9 | 0.02em | | `body-md` | ニュース・カードのキャプション | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em | | `label-button` | ピクセル枠ボタンの文字 | ゴシック | Dela Gothic One | 900 | 20px | 1.2 | 0.03em | | `note` | 日付・コピーライト | 欧文サンセリフ | Montserrat | 700 | 9px | 1.4 | 0.02em | - 英字見出しは左右を小さな四角ドット「▪■」で挟む。 - 英字見出しの直下に小さな和訳を置く。 - 大見出しには太いフチ取りと下方向の厚みを付け、ブロックのように見せる。 - 子ども向けに、物語本文にはルビを振る。 - 本文は中央揃えで、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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-e7ef52ab`（元 LP の URL から採番） - **元 LP**: https://wwws.warnerbros.co.jp/minecraft-movie/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。