--- version: alpha name: Mecha Blueprint Gray Character Goods LP description: 回路図風の線画を敷いたライトグレーの地に、星空のような黒い斜め帯を交互に重ねた、アニメのキャラクターグッズLP。白帯ボックスの斜体見出し、角括弧で挟んだリード文、番号付きの黒い特長パネルで、メカっぽく硬派な世界観を出している。商品写真とアニメ絵を並べ、名台詞のパロディで遊び心も加えている。 colors: background: '#B4BABA' dark-section: '#010101' primary: '#1A1E1F' on-dark: '#FFFFFF' surface: '#FDFDFD' background-alt: '#838A93' line: '#0A0C0F' accent-1: '#C8221E' accent-2: '#2441AC' text-muted: '#939393' typography: display: fontFamily: M PLUS 1p fontSize: 22px fontWeight: 900 lineHeight: 1.3 headline-lg: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: M PLUS 1p fontSize: 20px fontWeight: 900 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 800 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em body-lg: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: Rajdhani fontSize: 16px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 400 lineHeight: 1.4 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 18px section: 48px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' title-band: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.display}' height: 32px bracket-lead: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-lg}' height: 80px section-heading: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 60px variant-label: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 36px feature-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 300px number-box: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 30px quote-copy: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 60px --- # DESIGN.md — メカ図面グレー×漆黒の斜め帯キャラグッズLP（Mecha Blueprint Gray Character Goods LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、力強い・インパクト、シンプル・ミニマル - **キーワード**: メカ図面・斜め帯・モノトーン・角括弧・斜体ゴシック・キャラクター - **地の質感**: グレー地に細い回路図風の線画パターン。黒帯には星屑のような粒子ノイズを入れる - **形**: 角丸なしの直線と斜めのカット。角括弧と細い罫線でパネルを組む - **温度感**: クールで無彩色。色味は商品写真の赤と青だけが担う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#B4BABA` | 回路図柄のライトグレー地 | 38% | 画素の実測 | | `dark-section` | `#010101` | 星空の黒帯・特長パネル | 30% | 画素の実測 | | `primary` | `#1A1E1F` | 見出し・本文の黒文字 | 3% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の白文字 | 3% | 推定 | | `surface` | `#FDFDFD` | 見出しの白帯ボックス | 1% | 画素の実測 | | `background-alt` | `#838A93` | 柄の濃いグレー線 | 4% | 画素の主要色に補正 | | `line` | `#0A0C0F` | 見出し下の細い黒罫線 | 0% | 画素の主要色に補正 | | `accent-1` | `#C8221E` | 商品の赤（写真内のアクセント） | 6% | 推定 | | `accent-2` | `#2441AC` | 商品の青（写真内のアクセント） | 5% | 画素の実測 | | `text-muted` | `#939393` | 英字サブ見出し・コピーライト | 0% | 画素の実測 | - 地はグレーと黒の2色だけ。斜めの帯で交互に切り替える - グレー地には黒文字、黒地には白文字だけを使う - 有彩色はUIに使わない。写真とイラストの中の赤と青に任せる - 見出しは白い帯の上に黒文字を載せ、グレー地から浮かせる - 罫線と角括弧は黒地なら白、グレー地なら黒にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の斜体見出し（白帯の上） | ゴシック | M PLUS 1p | 900 | 22px | 1.3 | 0.0em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 18px | 1.3 | 0.05em | | `headline-md` | バリエーション名ラベル（斜体） | ゴシック | M PLUS 1p | 900 | 20px | 1.2 | 0.0em | | `headline-sm` | 特長タイトル・台詞コピー（斜体白） | ゴシック | Noto Sans JP | 800 | 15px | 1.5 | 0.0em | | `body-md` | 説明文（中央揃え） | ゴシック | Noto Sans JP | 500 | 10px | 1.7 | 0.03em | | `body-lg` | 角括弧で挟んだリード文 | ゴシック | Noto Sans JP | 700 | 13px | 1.7 | 0.03em | | `accent` | 番号と英字サブ見出し | 欧文サンセリフ | Rajdhani | 700 | 16px | 1.1 | 0.1em | | `note` | コピーライト | ゴシック | Noto Sans JP | 400 | 7px | 1.4 | 0.0em | - 見出しは極太ゴシックを斜体にしてスピード感を出す - 本文は小さめの中央揃え。2行前後で短くまとめる - セクション見出しの下に、小さな英字のサブ見出しを字間を広めに添える - 番号は四角枠に入れた欧文の太字にして『>』を添える - 台詞風のコピーは白い斜体で、2行目を右にずらして置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。写真2枚を斜めにずらして重ねる箇所あり - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 18px（375px 幅換算） - セクションは斜めの帯（約10°）で区切る - 写真は左右に寄せて互い違いに置き、少しだけ重ねる - 特長パネルは左に黒地とテキスト、右に写真を並べ、写真の左端を黒にグラデーションで溶かす - 特長パネルの間はグレー地を約40px見せ、帯を区切る - キャラ絵は写真の横にはみ出させて重ねる ## Elevation & Depth - 影はほぼ使わず、色面の重なりで奥行きを出す - 写真パネルには、ごく薄い影を付ける程度にとどめる - キャラ絵は写真の上の前面に重ねる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 長方形の角切り。斜め帯の中で写真を交差させる - **セクション境界**: 斜めの直線カット（右上がり・左上がりを交互に） - 角丸は一切使わない - リード文と見出しは大きな角括弧で挟む - 番号は細い線の四角枠に入れる - 見出しの白帯は細長い長方形にする ## Components - **白帯の商品名見出し**（`title-band`）: 白い長方形に黒の斜体極太文字を載せる。小さめの作品名を上に重ねる - **角括弧リード**（`bracket-lead`）: 左右の端に大きな角括弧を置き、中央揃えの太字リードを挟む - **括弧付きセクション見出し**（`section-heading`）: 左右に角括弧、中央に見出しを置き、下に横罫線と英字サブ見出しを付ける - **バリエーションラベル**（`variant-label`）: 白いボックスに黒枠と斜体名を入れ、下に小さな『∨』を付ける - **番号付き特長パネル**（`feature-panel`）: 左が黒地で、番号枠・斜体タイトル・区切り線・本文を縦に並べる。右は写真 - **番号枠**（`number-box`）: 白い線の四角に2桁の数字を入れ、右に『>』を付ける - **台詞コピー**（`quote-copy`）: 黒い斜め帯の上に、白い斜体で2行を段違いに置く ## Do's and Don'ts **Do** - グレーと黒の斜め帯を交互に重ね、メカっぽい緊張感を保つ - 見出しは極太の斜体ゴシックで統一する - グレー地には回路図・基板風の線画パターンを敷く - 番号・括弧・罫線は細い線で精密に描く - 商品写真とキャラ絵を並べ、元ネタとの対応を見せる **Don't** - 角丸やピル型のボタンを使わない - パステル色やUI用の有彩色を足さない - 手書き風・丸ゴシックの書体を使わない - グラデーションは写真の端を溶かす用途に限り、多用しない - 長文の本文を置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（作品とキャラを示し、商品名を伝える）: 上にキャラ絵の黒い斜め帯、白帯の商品名を置き、グレー地の上に商品2種を並べる 2. **コンセプトリード**（商品の成り立ちを一文で伝える）: 星空の黒帯に、角括弧で挟んだ中央揃えの白文字を置く 3. **使用シーン**（持ち歩く様子や置いた様子を見せる）: 写真2枚を互い違いに重ね、間に短い中央揃えの説明文を入れる 4. **バリエーション紹介1**（1種目のデザインのこだわりを伝える）: ラベルと説明文の下に、黒い斜め帯・商品写真・全身キャラ絵・台詞コピーを置く 5. **バリエーション紹介2**（2種目のデザインのこだわりを伝える）: 1種目と同じ構成を繰り返す 6. **機能面の特長**（機能を4つの番号で示す）: 括弧付き見出しの下に、黒い特長パネルを4枚縦に積む 7. **エンドビジュアル**（余韻を残して締める）: 商品2種の引きの写真を黒へ溶かし、ロゴとコピーライトを置く ## Imagery - 商品は無機質な屋外（金属の壁・鉄の床）で、ローアングルから撮る - 使用シーンは、手で持つ・バッグに付けるなど生活の中で撮る - 物撮りは、自然光に近い柔らかい光で質感を見せる - キャラはアニメのセル画風の全身絵を切り抜いて重ねる - 背景装飾は回路図・基板風の細い線画と、星屑のノイズ - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCも約480pxの中央固定カラムで、SPと同じ構成をそのまま表示する - 左右の余白にはグレーの柄地を延長する - 文字サイズと画像の比率はSPと同じでよい - 広い画面に広げる場合は、特長パネルを横長にして写真の比率を上げる ## 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-30f98f2e`（元 LP の URL から採番） - **元 LP**: https://p-bandai.jp/item/item-1000253081/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/10 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。