DESIGN.md — 赤×黒の斜めテープが走るゲーム周年記念 LP（Stylish Red Black Anniversary Game Portal LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 斜めテープ・極太イタリック・赤×黒・ブルーグレー地・破片装飾・スピード感
• 地の質感: フラットな面に筆のかすれや割れた破片のシルエットを重ね、ラフで動きのある質感にする
• 形: 平行四辺形に切ったボタンとラベル、傾けた帯、尖った破片。角丸は使わない
• 温度感: クールな寒色グレーの地に、熱い赤を差して対比させる

Colors

• 地はブルーグレーと淡グレーを交互に使い、セクションの切り替わりを見せる
• 赤は斜めテープ、ボタン、ラベルにだけ使い、広い面には塗らない
• 黒は帯、全幅のアコーディオンバー、見出しの文字に使う
• 黄・紫・シアン・オレンジは細い破片として散らす
• テープの文字は白抜きの欧文を繰り返して入れる
• 特集の作品紹介ブロックだけはシアンのテープで色を切り替える
• coming-soon は文字 #FDF4F8 × 背景 #BAC9D0 のコントラスト比が 1.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#587582、4.55:1）を使う。

Typography

• 欧文見出しは大文字で極太にし、斜体で字間を詰める
• 欧文見出しの横か上に、小さなカタカナを添える
• ボタンの文字も大文字の斜体にする
• ニュースのタイトルは太字にして下線を引く
• 日付の前に、色を変えた斜めの短い線を置く
• 和文の本文は細めのゴシックで、両端揃えにする
• 書体は画像からの推定で、フォント名は近い印象の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。