EventJapanPicked 2026.09.23

VSPO! SHOWDOWN 2026 powered by RAGE

イベント / ライブのWebデザイン参考 — VTuber・eスポーツイベント

サイトを見るrage-esports.jp

rage-esports.jp/2026/vsposhowdown開く ↗

VSPO! SHOWDOWN 2026 powered by RAGEのPC版ファーストビュー

サイトを開く ↗

VSPO! SHOWDOWN 2026 powered by RAGEのスマホ版ファーストビュー

Editor's note — 編集部の視点

11の章が、左の紫ナビでいつでも全部見えてる。

ぶいすぽっ！の対抗戦イベント「VSPO! SHOWDOWN 2026」の特設サイトは、紫の固定サイドナビで、情報量の多い大型イベントを迷わせずに読ませる。

PipTrends & VTuber

チケット情報、画像のバナーで見せたあとに同じ内容をテキストの表でも書いてくれてるの優しすぎる！！画像が読みにくい人も、日程をメモしたい人も救われる。これは神対応。

1幅180pxの紫のサイドナビを左に固定。チケットにも日程にも、どこからでも一手で飛べる
2英字見出しはGloockのセリフ体。eスポーツの熱狂を、あえて格式のある書体で受け止める
3対戦カードは「VS」構図のバナーで縦に並べる。表ではなく、対決の絵として予定を読ませる

Color

VSPO! SHOWDOWN 2026 powered by RAGEの配色

Typography

使用フォントと無料の代替

和文本文・表組み

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

英字見出し・ナビ

Aa あア

使用: Gloock
代替: Gloock

キャッチコピー・リード

Aa あア

使用: Shippori Mincho
代替: Shippori Mincho

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型75px · 1.2 · 400
小見出しKatapick 型24px · 1 · 700
本文The quick brown fox — 参考を型にする14px · 1.5 · 500
ボタンKatapick 型28px · 1.2 · 700

Structure

ページ構成（上から順）

01
サイドナビ（固定）
左端に幅180pxの紫グラデーションのナビを固定し、TOP / CONCEPT / OVERVIEW / ACCESS / TICKET / MAINSTAGE / SCHEDULE / CONTENTS / GOODS / BROADCAST / SPONSOR と X のボタンを縦に並べる。SPでは右上のハンバーガーボタンに切り替わる。
02
メインビジュアル
紫のステージ背景に集合絵を配置したキービジュアルを横幅いっぱいに表示し、上部にロゴ・キャッチコピー・「Powered by RAGE」を重ねる。
03
CONCEPT
会場の客席を写した映像（または写真）を暗く敷き、英字見出し、明朝体のキャッチ、中央揃えのリードを重ねる。
04
OVERVIEW
公演名・開催日時・会場・主催・企画制作・配信プラットフォームなどを、罫線で区切った2列の表で一覧にする。
05
ACCESS
会場の外観写真と地図を横に並べ、住所と最寄り駅からの徒歩時間を表で示す。
06
TICKET
券種・価格・受付スケジュールを横長の画像バナーで見せ、同じ内容を下のテキストの表で補足する。
07
MAINSTAGE・SCHEDULE
VALORANT や League of Legends などタイトル別の対戦カードを「VS」構図のバナーで縦に並べ、左側にタイトルロゴを置く。
08
CONTENTS・GOODS
会場内コンテンツの紹介と、グッズの販売ラインナップ、購入方法（事前予約販売・当日販売・EC販売）を順に掲載する。
09
BROADCAST・SPONSOR・フッター
配信情報とスポンサーのロゴを並べ、コピーライト表記のフッターで締める。

Interaction

アニメーション・インタラクション

サイドナビは position: fixed で常に表示し、各セクションへアンカーリンクで移動する。再現するなら scroll-behavior: smooth を併用すると操作感が近い
CONCEPT の背景は客席の映像に暗いオーバーレイと走査線状のノイズを重ねた表現と思われる。video 要素に ::after で repeating-linear-gradient を重ねると再現できる
抽出データの技術スタックは Google Fonts のみで、スクロール演出系のライブラリは検出されていない。静的な HTML/CSS 中心の構成と思われる

スクロールのコマ撮り300–600ms

VSPO! SHOWDOWN 2026 powered by RAGEをスクロールしたときのフレーム1 — 01

VSPO! SHOWDOWN 2026 powered by RAGEをスクロールしたときのフレーム2 — 02

VSPO! SHOWDOWN 2026 powered by RAGEをスクロールしたときのフレーム3 — 03

VSPO! SHOWDOWN 2026 powered by RAGEをスクロールしたときのフレーム4 — 04

VSPO! SHOWDOWN 2026 powered by RAGEをスクロールしたときのフレーム5 — 05

VSPO! SHOWDOWN 2026 powered by RAGEをスクロールしたときのフレーム6 — 06

検出された技術:Google Fonts

Reproduce

再現するときのポイント

01見出しを「Gloock の英字＋細い縦線1本」の型に統一し、長いページでもリズムを揃える
02紫はサイドナビとセクション背景の照明表現に集中させ、本文エリアは黒地・白文字で表を読みやすくする
03開催日時・会場・価格などの基本情報を OVERVIEW の表に先にまとめ、詳細は下のセクションに回す
04チケットや対戦表は画像で作り込みつつ、同じ情報を HTML のテキストでも載せる（検索と読み上げへの配慮）

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

vspo-showdown-2026.katapick.md

1---
2title: "VSPO! SHOWDOWN 2026 powered by RAGE デザイン分析書"
3source: https://rage-esports.jp/2026/vsposhowdown/
4katapick: https://katapick.com/sites/vspo-showdown-2026
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [ダーク, イラスト, 固定ナビ, セリフ体]
8launched: 2026-01
9verified: 2026-10-28
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# VSPO! SHOWDOWN 2026 powered by RAGE — デザイン分析書
16 
17> 11の章が、左の紫ナビでいつでも全部見えてる。ぶいすぽっ！の対抗戦イベント「VSPO! SHOWDOWN 2026」の特設サイトは、紫の固定サイドナビで、情報量の多い大型イベントを迷わせずに読ませる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22