---
version: alpha
name: Mecha Sci-Fi Anime Official Site
description: 薄いグレーの方眼地と黒の極太英字見出しを組み合わせた、TVアニメ公式サイトの型。HUDやメカのUIを思わせる角欠けの枠、細い罫線、4色の小さな四角マークで先進感を出す。ストーリーだけは漆黒の面にレーダー模様を敷き、白文字の中央揃えで没入感を高める。
colors:
  background: '#FAFAFA'
  primary: '#000000'
  text: '#000000'
  dark-section: '#030303'
  on-dark: '#FDFDFD'
  surface: '#545454'
  text-muted: '#8F8F8F'
  line: '#CEC5C0'
  accent-1: '#D22423'
  accent-2: '#2F5FB0'
  accent-3: '#E69C0E'
  secondary: '#3FC8E8'
typography:
  display:
    fontFamily: Roboto
    fontSize: 52px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Dela Gothic One
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  label-button:
    fontFamily: Roboto
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.08em
  accent:
    fontFamily: Roboto
    fontSize: 72px
    fontWeight: 900
    lineHeight: 1.0
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 90px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-heading:
    textColor: '{colors.text}'
    typography: '{typography.display}'
    height: 70px
  button-more:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 48px
  news-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 120px
  video-frame:
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 260px
  credit-item:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 70px
  character-card:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 290px
  slider-arrow:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    height: 44px
  share-icon:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    height: 50px
---

# DESIGN.md — 白グリッド×漆黒のメカSFアニメ公式サイト（Mecha Sci-Fi Anime Official Site）

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

## Overview

- **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、力強い・インパクト、シンプル・ミニマル
- **キーワード**: HUD風フレーム・方眼グリッド地・極太英字見出し・白黒コントラスト・4色ドットマーク・斜めカット
- **地の質感**: ほぼ白のグレー地に、細い方眼と斜線の幾何学パターンを薄く敷く。ダーク面には同心円のレーダー線と走査線を重ねる。
- **形**: 角を斜めに欠いた八角形の枠、四隅のL字ブラケット、平行四辺形に切ったキャラクターカード。角丸は使わない。
- **温度感**: 寒色寄りで無機質。黒と白が主役で、色はキャラクターと4色マークにだけ入る。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FAFAFA` | 方眼パターンを敷くページの地 | 62% | 画素の実測 |
| `primary` | `#000000` | 見出し・ボタン・フッターの黒 | 10% | 画素の実測 |
| `text` | `#000000` | 英字見出しと人名の黒文字 | 3% | 画素の実測 |
| `dark-section` | `#030303` | ストーリーの漆黒の面 | 14% | 画素の実測 |
| `on-dark` | `#FDFDFD` | 黒地の上の白文字 | 2% | 画素の主要色に補正 |
| `surface` | `#545454` | ニュースカードの濃いグレー面 | 4% | 画素の実測 |
| `text-muted` | `#8F8F8F` | 役職・役名の小さなラベル | 0% | 画素の実測 |
| `line` | `#CEC5C0` | フレームの細い罫線・方眼線 | 2% | 画素の主要色に補正 |
| `accent-1` | `#D22423` | 見出し上4色マークの赤・キャラ地の赤 | 2% | 画素の実測 |
| `accent-2` | `#2F5FB0` | 4色マークの青・キャラ地の青 | 1% | 推定 |
| `accent-3` | `#E69C0E` | 4色マークの山吹色 | 0% | 画素の実測 |
| `secondary` | `#3FC8E8` | 選択中サムネ枠などのシアン | 0% | 推定 |

- 地はほぼ白のグレーにし、方眼と斜線を薄いグレーで敷く
- 見出し・ボタン・フッターは純黒にし、白黒の強いコントラストを主役にする
- 彩度の高い色は、キャラクタービジュアルと見出し上の4色マークにだけ使う
- ストーリーなど世界観を語る箇所は、黒い面＋白文字に反転させる
- ニュースカードは濃いグレーの面に白文字を置き、黒より一段軽く見せる
- 役職などのラベルは中間グレーにして、人名の黒を引き立てる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セクション名の極太英字見出し | 欧文サンセリフ | Roboto | 900 | 52px | 1 | -0.01em |
| `headline-lg` | イントロダクションの極太和文キャッチ | ゴシック | Dela Gothic One | 400 | 30px | 1.2 | 0em |
| `headline-md` | 放送日時・ストーリーの締め文 | ゴシック | Noto Sans JP | 900 | 20px | 1.5 | 0.03em |
| `headline-sm` | スタッフ・キャストの人名 | ゴシック | Noto Sans JP | 700 | 19px | 1.4 | 0.05em |
| `body-md` | 紹介文・ストーリー本文 | ゴシック | Noto Sans JP | 500 | 12px | 2 | 0.05em |
| `note` | 役職ラベル・日付・著作権表記 | ゴシック | Noto Sans JP | 700 | 10px | 1.5 | 0.03em |
| `label-button` | MOREボタン・フッターリンクの英字 | 欧文サンセリフ | Roboto | 700 | 13px | 1 | 0.08em |
| `accent` | 背景に置く白抜きアウトライン英字 | 欧文サンセリフ | Roboto | 900 | 72px | 1 | 0em |

- セクション見出しは英字の極太サンセリフを大きく置き、和文の見出しは添えない
- 見出しの上に、青・灰・山吹・赤の小さな四角を4つ並べる
- 長い英字見出しは単語の途中で2行に割り、ブロック状に見せる
- 人名は太字、役職は小さなグレー文字で上に置く
- ストーリー本文は中央揃えにし、行間を2.0前後と広く取る
- 背景に、同じ英字を細いアウトラインで大きくはみ出して置く
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。スタッフ・キャストは 2 カラムのグリッド
- **本文ブロックの幅**: 画面幅の約 84%
- **余白**: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
- キービジュアルは全幅で、ページ両端に細い縦罫線のフレームを通す
- 見出しは中央揃え。イントロダクションのみ左揃えにする
- 人名リストは左右2列で中央揃え、行間をたっぷり取る
- 写真は左右にずらして重ね、段差のある配置にする
- 黒いストーリー面は全幅にし、上下の端にゲージ風の細い線を入れる

## Elevation & Depth

- 影は使わず、罫線とブラケットで奥行きを出す
- ボタンの外側に1pxの白線を少し離して重ね、二重枠に見せる
- 写真同士を少し重ね、段差で階層を表す

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真は長方形のまま段差を付けて重ねる。キャラクターは平行四辺形に斜めカットする
- **セクション境界**: 直線で切り替え、境界に台形の切り欠きやゲージ線を添える
- 角丸は使わず、角は直角か45度カットにする
- カードは上下の辺の中央を一段へこませた、メカUI風の形にする
- 四隅にL字のブラケットを置き、照準のような枠にする
- スライダーの現在地は、四角の中に四角を入れたドットで示す

## Components

- **4色マーク付き英字見出し**（`section-heading`）: 小さな4色の四角を上に置き、極太英字を大きく組む
- **黒の矢印付きボタン**（`button-more`）: 黒い長方形に白の英字と右矢印。外側に細い枠とブラケットを付ける
- **メカUI風ニュースカード**（`news-card`）: 濃いグレーの角欠け面に日付と見出しを置き、上下に細い罫線とコード風の小さな文字を添える
- **照準付き動画枠**（`video-frame`）: 全幅の動画サムネに中央の照準アイコンと、上下のゲージ線を重ねる
- **役職＋人名の組**（`credit-item`）: グレーの小ラベルの下に太字の人名。キャストには黒い吹き出しアイコンを添える
- **斜めカットのキャラカード**（`character-card`）: キャラの色の面を平行四辺形に切り、全身を立たせて英字ルビと名前を左下に置く
- **黒の四角矢印**（`slider-arrow`）: 黒い正方形に白の細い矢印。白の細枠で囲む
- **フッターのSNS枠**（`share-icon`）: 黒地に白線の正方形で囲んだSNSアイコンを横に3つ並べる

## Do's and Don'ts

**Do**
- 見出しは極太の英字サンセリフで、画面幅いっぱいに近い大きさで組む
- 地には薄い方眼と斜線のパターンを必ず敷く
- 枠は角欠け・L字ブラケット・細罫線でメカUI風にする
- 色はビジュアルと4色マークだけに入れ、UIは白黒で通す
- 世界観を語る章は、黒地＋白文字の中央揃えにする

**Don't**
- 角丸やピル型のボタンを使わない
- パステル色や暖色のグラデーションを地に使わない
- ドロップシャドウで浮かせない
- 和文の丸ゴシックや手書き書体を使わない
- UIパーツにキャラクターの色を多用しない

## Page Structure

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

1. **ファーストビュー**（作品の世界観とキャラクターを一目で伝える）: メカと複数キャラを帯状に重ねた全幅ビジュアル。縦書きのキャッチを添え、下にロゴと放送日を極太で置く
2. **ビジュアル切替・バナー**（別ビジュアルと関連企画へ誘導する）: モノクロの小サムネを4つ並べ、選択中だけシアン枠のカラーにする。下にバナースライダーと四角ドット
3. **ニュース**（最新情報を伝える）: 左揃えの極太英字見出しに、角欠けのグレーカードを縦に並べ、黒のMOREボタンで締める
4. **動画**（PVを見せる）: 全幅の動画サムネに照準アイコンとゲージ線を重ね、下にスライダードット
5. **スタッフ**（制作陣を示す）: 中央の英字見出しの下に、役職ラベル＋人名を2カラムで並べる
6. **キャスト**（声優を示す）: スタッフと同じ型で、人名の右に吹き出しアイコンを付ける
7. **イントロダクション**（作品の概要と見どころを伝える）: 2行に割った左揃えの英字見出し、ずらして重ねた場面写真、極太和文キャッチ、本文の順
8. **ストーリー**（あらすじで没入させる）: 漆黒の全幅面にレーダー模様を敷き、白文字を中央揃えで組む。最後の一文は大きく
9. **キャラクター**（登場人物を紹介する）: 背景にアウトライン英字、平行四辺形カードの横スライダーと黒の四角矢印、MOREボタン
10. **フッター**（SNS共有と規約・権利表記）: 黒地の中央にロゴ、四角枠のSNSアイコン、縦線区切りのリンク、細線の上矢印

## Imagery

- アニメ調のキャラクターとメカを、青空の背景で帯状に区切って重ねる
- 場面写真は暗い背景に青く光るアイテムなど、コントラストの強いカットを選ぶ
- キャラクターは全身の立ち絵を単色の面に置き、背後に同じキャラの大きな顔を薄く重ねる
- 装飾はHUD風の照準、ゲージ、コード風の小さな文字、同心円のレーダー線を細線で描く
- 走査線のような横縞を動画枠やダーク面に薄く重ねる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCはキービジュアルを中央寄せにし、左上にビジュアル切替用の小サムネを縦に並べる
- PCのニュースは見出しを縦向きにして左に置き、カードを3列で横に並べる
- PCのスタッフ・キャストは4列または3列のグリッドにする
- PCのイントロダクションは、見出しと写真を左、キャッチと本文を右にした2カラムにする
- PCのキャラクターは見出しの右に矢印を置き、カードを3枚ほど同時に見せる
- PCのフッターはロゴとSNSを左、リンクと権利表記を右にした横並びにする

## 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-aa9fb7e5`（元 LP の URL から採番）
- **元 LP**: https://vertexforce.jp/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-25、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

:root {
  --color-background: #fafafa;
  --color-primary: #000000;
  --color-text: #000000;
  --color-dark-section: #030303;
  --color-on-dark: #fdfdfd;
  --color-surface: #545454;
  --color-text-muted: #8f8f8f;
  --color-line: #cec5c0;
  --color-accent-1: #d22423;
  --color-accent-2: #2f5fb0;
  --color-accent-3: #e69c0e;
  --color-secondary: #3fc8e8;
  --spacing-unit: 8px;
  --spacing-card: 24px;
  --spacing-section: 90px;
  --rounded-sm: 0px;
  --rounded-md: 0px;
  --rounded-lg: 0px;
  --rounded-full: 999px;
}

W3C のデザイントークンの形式（Design Tokens Format Module 2025.10）の JSON です。Figma のプラグインや Style Dictionary などで読み込めます。