--- version: alpha name: Stylish Red Black Anniversary Game Portal LP description: 淡いブルーグレーの地に、黒と赤の斜めに傾いた帯やテキストテープ、筆で払ったような破片の装飾を重ねたゲームシリーズ周年サイト。極太イタリックの欧文見出しに小さなカタカナを添え、ニュース・グッズ・イベント・特集・作品紹介を縦に並べる。スピード感とシャープさで構成した見た目。 colors: primary: '#E40213' on-primary: '#FDF4F8' cta: '#E40113' on-cta: '#FCF7F8' background: '#BAC9D0' background-alt: '#E3E8EC' surface: '#E3E8EC' dark-section: '#000000' on-dark: '#F3F5F6' text: '#020308' accent-1: '#1E8FD8' accent-2: '#F5D200' accent-3: '#8E2A8C' text-muted: '#BAC9D0' text-muted-accessible: '#587582' typography: display: fontFamily: Archivo Black fontSize: 52px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.04em headline-lg: fontFamily: Archivo Black fontSize: 30px fontWeight: 900 lineHeight: 1.1 letterSpacing: -0.03em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Archivo Black fontSize: 15px fontWeight: 900 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.4 rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 36px button-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 36px section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 60px tape-divider: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 40px news-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 80px label-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 22px accordion-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 44px play-badge: backgroundColor: '{colors.on-primary}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 80px coming-soon: backgroundColor: '{colors.text-muted}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 160px --- # DESIGN.md — 赤×黒の斜めテープが走るゲーム周年記念 LP（Stylish Red Black Anniversary Game Portal LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 力強い・インパクト、クール・先進的、情報量多め・訴求型 - **キーワード**: 斜めテープ・極太イタリック・赤×黒・ブルーグレー地・破片装飾・スピード感 - **地の質感**: フラットな面に筆のかすれや割れた破片のシルエットを重ね、ラフで動きのある質感にする - **形**: 平行四辺形に切ったボタンとラベル、傾けた帯、尖った破片。角丸は使わない - **温度感**: クールな寒色グレーの地に、熱い赤を差して対比させる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E40213` | ブランド赤（テープ・ボタン・ラベル） | 7% | 画素の実測 | | `on-primary` | `#FDF4F8` | 赤い面の上の白文字 | 2% | 画素の実測 | | `cta` | `#E40113` | VIEW MORE ボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#FCF7F8` | ボタン上の文字 | 1% | 画素の実測 | | `background` | `#BAC9D0` | ページのブルーグレー地 | 30% | 画素の実測 | | `background-alt` | `#E3E8EC` | 明るい淡グレーの地 | 20% | 画素の実測 | | `surface` | `#E3E8EC` | ニュースや挨拶のカード面 | 6% | 画素の実測 | | `dark-section` | `#000000` | 黒い帯・バー・ヘッダー | 15% | 画素の実測 | | `on-dark` | `#F3F5F6` | 黒い面の上の白文字 | 2% | 画素の実測 | | `text` | `#020308` | 見出しと本文の黒文字 | 4% | 画素の主要色に補正 | | `accent-1` | `#1E8FD8` | シアン系の第2テープ（発売中） | 2% | 推定 | | `accent-2` | `#F5D200` | 黄色の破片装飾 | 0% | 推定 | | `accent-3` | `#8E2A8C` | 紫の破片装飾 | 0% | 推定 | | `text-muted` | `#BAC9D0` | COMING SOON の淡いグレー | 5% | 画素の実測 | | `text-muted-accessible` | `#587582` | AA を満たす補正値（計算） | | 計算 | - 地はブルーグレーと淡グレーを交互に使い、セクションの切り替わりを見せる - 赤は斜めテープ、ボタン、ラベルにだけ使い、広い面には塗らない - 黒は帯、全幅のアコーディオンバー、見出しの文字に使う - 黄・紫・シアン・オレンジは細い破片として散らす - テープの文字は白抜きの欧文を繰り返して入れる - 特集の作品紹介ブロックだけはシアンのテープで色を切り替える - `coming-soon` は文字 `#FDF4F8` × 背景 `#BAC9D0` のコントラスト比が 1.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#587582`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出しの欧文（極太イタリック） | 欧文サンセリフ | Archivo Black | 900 | 52px | 1.0 | -0.04em | | `headline-lg` | 小見出しの欧文（例: GOODS の下層） | 欧文サンセリフ | Archivo Black | 900 | 30px | 1.1 | -0.03em | | `headline-md` | 和文の見出し（挨拶など） | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.3 | 0.0em | | `headline-sm` | ニュースのタイトル（下線付き） | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.6 | 0.0em | | `accent` | 欧文見出しに添える小さなカタカナ | ゴシック | Noto Sans JP | 700 | 10px | 1.2 | 0.1em | | `label-button` | ボタンとテープの欧文 | 欧文サンセリフ | Archivo Black | 900 | 15px | 1.0 | 0.0em | | `note` | 日付・ラベル・キャプション | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.0em | - 欧文見出しは大文字で極太にし、斜体で字間を詰める - 欧文見出しの横か上に、小さなカタカナを添える - ボタンの文字も大文字の斜体にする - ニュースのタイトルは太字にして下線を引く - 日付の前に、色を変えた斜めの短い線を置く - 和文の本文は細めのゴシックで、両端揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。グッズ一覧は 2 カラム、イベントは横スライダー - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - コンテンツは左右に約 16px の余白をとる - セクションの間に、全幅で傾いた赤×黒のテープ帯を挟む - 見出しは左寄せにし、帯や破片の装飾と重ねる - スライダーの下に、平行四辺形のページ送りバーを並べる - 一覧の末尾には、全幅の黒いアコーディオンバーを置く ## Elevation & Depth - 影はほぼ使わない。黒い面をずらして重ね、立体感を出す - 写真の背面に黒い平行四辺形を少しずらして置く - カードは影なしのフラットな面にする ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 長方形のまま使い、角を斜めに切るか、黒い面を背後にずらして置く - **セクション境界**: 斜めに傾けた赤・黒のテキストテープと、筆で払った破片のシルエット - ボタンは平行四辺形にする - ラベルは赤い長方形にし、左に斜線を添える - 円形は再生ボタンだけに使う - カードの下辺を斜めに切ることがある ## Components - **斜めの赤ボタン**（`button-primary`）: 赤い平行四辺形に、白い極太イタリックの欧文を入れたボタン - **斜めの黒ボタン**（`button-dark`）: 黒い平行四辺形のボタン。右端にシアンの斜線を添える - **欧文見出し**（`section-heading`）: 極太イタリックの欧文に、小さなカタカナと色付きの破片を重ねた見出し - **テキストテープ帯**（`tape-divider`）: 傾けた赤い帯に、白い欧文を繰り返して入れる。黒い帯と重ねて使う - **ニュースカード**（`news-card`）: 淡いグレーの面に、色付き斜線を添えた日付と、下線付きの太字タイトルを入れる - **赤ラベル**（`label-tag`）: 画像の左上に載せる、赤い面に白文字のカテゴリラベル - **黒アコーディオンバー**（`accordion-bar`）: 全幅の黒い帯。左に赤い斜線、右に赤い下向き矢印を置く - **再生円バッジ**（`play-badge`）: 白い円の縁に文字を回し、中央に赤い矢印を置いた再生ボタン - **準備中プレースホルダ**（`coming-soon`）: グレーの面に、白い極太の斜体欧文と払いの線を入れる ## Do's and Don'ts **Do** - 見出し・ボタン・帯は、すべて同じ向きに傾ける - 赤と黒を主役にし、他の色は細い破片だけにとどめる - 欧文見出しは極太の斜体にし、カタカナを小さく添える - セクションの間には、必ず斜めのテープ帯を挟む - 画像の背後に黒い面をずらして置き、奥行きを出す **Don't** - 角丸やピル型のボタンは使わない - パステル調や暖色の柔らかい地色にしない - 影やグラデーションの多いリッチな UI にしない - 見出しを明朝や細字の書体にしない - 赤を広い背景面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（周年の世界観を一目で伝える）: 全幅のキャラクターイラストに大きな周年ロゴを重ね、上下を黒い破片と赤いテープで囲む 2. **バナースライダー**（注目の告知へ誘導する）: 横長バナーを横にスクロールさせ、下に平行四辺形のページ送りバーを置く 3. **ニュース**（最新情報を伝える）: 欧文見出しの下に淡いグレーのカードを縦に並べ、最後に赤い VIEW MORE ボタンを置く 4. **挨拶メッセージ**（周年の想いを伝える）: 淡いカードの中に、和文の極太見出しと本文を入れる 5. **グッズ**（記念商品を訴求する）: 大きな商品写真に赤ラベルと極太の英字を重ね、下に 2 カラムの商品グリッドと黒いアコーディオンバーを置く 6. **イベント**（開催中のイベントを伝える）: 白いカードの横スライダーにし、過去分は黒いバーで開閉させる 7. **特集・動画**（配信番組などへ誘導する）: 黒い枠に入れたサムネイルの中央に再生バッジを置き、準備中の枠を並べる 8. **作品紹介**（関連作品の購入へ誘導する）: シアンのテープ帯を挟み、ぼかした写真の背景に半透明のカードを載せる。カードには動画、本文、黒ボタンを入れる 9. **シリーズ年表への導線**（歴代作品へ誘導する）: 黒い帯で流れるテキストと、作品画像を横に並べた上に、赤いボタンを置く 10. **フッター**（SNS への導線と権利表記）: 白い地に黒い SNS ボタン、ロゴ、コピーライトを置く ## Imagery - アニメ調のキャラクターイラストを、輪郭の強い構図で使う - 商品写真は黒い背景で並べて撮り、紫がかった照明を当てる - 装飾には、割れたガラスや鳥の影のような黒いシルエットを使う - 赤・黄・紫・シアンの細長い破片を、斜めに散らす - 背景の写真はぼかし、半透明に重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は上部に横並びのテキストナビを置き、SP はハンバーガーメニューにする - PC のニュースは 2 カラムの 1 行リストにする - PC のグッズは 4 カラムのグリッドにし、大きな写真の上に見出しを重ねる - PC の特集は、左に動画、右に準備中の枠を並べた 2 カラムにする - PC の作品紹介は、左に動画、右に文章を置いた横並びにする - テープ帯や破片は、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-231fcaab`（元 LP の URL から採番） - **元 LP**: https://p-ch.jp/p30th/ - **解析に使った画像**: 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/）からご連絡ください。