Katapick

EventJapan

VSPO! SHOWDOWN 2026 powered by RAGE

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

出典: rage-esports.jp
VSPO! SHOWDOWN 2026 powered by RAGEのPC版ファーストビュー

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

Structure

ページ構成（上から順）

  1. 01

    サイドナビ（固定）

    左端に幅180pxの紫グラデーションのナビを固定し、TOP / CONCEPT / OVERVIEW / ACCESS / TICKET / MAINSTAGE / SCHEDULE / CONTENTS / GOODS / BROADCAST / SPONSOR と X のボタンを縦に並べる。SPでは右上のハンバーガーボタンに切り替わる。

  2. 02

    メインビジュアル

    紫のステージ背景に集合絵を配置したキービジュアルを横幅いっぱいに表示し、上部にロゴ・キャッチコピー・「Powered by RAGE」を重ねる。

  3. 03

    CONCEPT

    会場の客席を写した映像（または写真）を暗く敷き、英字見出し、明朝体のキャッチ、中央揃えのリードを重ねる。

  4. 04

    OVERVIEW

    公演名・開催日時・会場・主催・企画制作・配信プラットフォームなどを、罫線で区切った2列の表で一覧にする。

  5. 05

    ACCESS

    会場の外観写真と地図を横に並べ、住所と最寄り駅からの徒歩時間を表で示す。

  6. 06

    TICKET

    券種・価格・受付スケジュールを横長の画像バナーで見せ、同じ内容を下のテキストの表で補足する。

  7. 07

    MAINSTAGE・SCHEDULE

    VALORANT や League of Legends などタイトル別の対戦カードを「VS」構図のバナーで縦に並べ、左側にタイトルロゴを置く。

  8. 08

    CONTENTS・GOODS

    会場内コンテンツの紹介と、グッズの販売ラインナップ、購入方法（事前予約販売・当日販売・EC販売）を順に掲載する。

  9. 09

    BROADCAST・SPONSOR・フッター

    配信情報とスポンサーのロゴを並べ、コピーライト表記のフッターで締める。

Interaction

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

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

検出された技術:Google Fonts

Reproduce

再現するときのポイント

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

再現MDに含まれるもの

CSS変数化したカラートークン / Google Fonts 読み込みタグ / 全9セクションの仕様 / つまずきポイント / Claude Code・Cursor・v0 用の実装プロンプト / 仕上げチェックリスト

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-09-26
10difficulty: 2/5
11estimated_hours: 20
12generator: Katapick
13---
14 
15# VSPO! SHOWDOWN 2026 powered by RAGE — 再現用デザイン仕様書
16 
17> 11の章が、左の紫ナビでいつでも全部見えてる。ぶいすぽっ！の対抗戦イベント「VSPO! SHOWDOWN 2026」の特設サイトは、紫の固定サイドナビで、情報量の多い大型イベントを迷わせずに読ませる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ

VSPO! SHOWDOWN 2026 powered by RAGEについてよくある質問

VSPO! SHOWDOWN 2026のサイトで使われているフォントは？

英字見出しとナビに Gloock、キャッチコピーに Shippori Mincho、本文と表に Noto Sans JP が使われています。3書体とも Google Fonts で無料で使えます。

VTuber×eスポーツのイベントLPを作るには？

集合絵のキービジュアルで出演者の多さを伝え、開催概要・アクセス・チケット・対戦カード・スケジュール・グッズ・配信情報をセクションに分けて並べるのが基本です。項目が多いため、PCでは固定のサイドナビ、SPではハンバーガーメニューで各セクションへ飛べるようにします。

VSPO! SHOWDOWNのデザインはどんな業種の参考になる？

eスポーツ大会、ゲーム・配信者のオフラインイベント、フェスなど、出演者やタイムテーブル、チケット情報が多い大型イベントの告知サイトの参考になります。

VSPO! SHOWDOWN 2026 powered by RAGEに似た参考サイト

出典: Katapick編集部（2026年9月26日 確認）。掲載サイトのデザイン・文章・画像の権利は各権利者に帰属します。 AI・LLM 向けの要約は Markdown 版 を参照してください。