EventJapanPicked 2026.09.26

剣持刀也リアルソロライブ【虚空狂宴】

イベント / ライブのWebデザイン参考 — VTuberライブ（にじさんじ）

出典: nijisanji.jp

Editor's note — 編集部の視点

紫の稲妻とスポットライトで、FVからもう本番。

にじさんじ剣持刀也のリアルソロライブ「虚空狂宴」の特設サイトは、雷雲と筆文字ロゴのKVから黒いパネルへ情報を積み、開演前の緊張を最後まで切らさない。

LeoMotion & Direction

スクロールしても外側の雷雲と稲妻がずっと見えてて、パネルの縁も紫に光りっぱなし！暗転した会場で開演を待ってるあの時間そのもの！公演名に「こくうフェス」ってルビを振るのも、MCで呼ばれた瞬間みたいで鳥肌！

1かすれた筆文字の「虚空狂宴」と稲妻のKV。和の荒々しさと電撃を、一枚の中で同居させる
2ABOUTからCONTACTまで黒いパネルに収め、外側に雷雲を残す。長い案内でも会場の暗さが続く
3チケットは販売ごとに枠で区切り、受付期間とボタンを同じ位置に揃える。抽選の順番を迷わず追える

Color

剣持刀也リアルソロライブ【虚空狂宴】の配色

Typography

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

本文・見出し

Aa あア

使用: Zen Kaku Gothic New
代替: Zen Kaku Gothic New

英字ナビ・日付

Aa あア

使用: Shackleton Condensed
代替: Barlow Condensed

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

見出しKatapick 型14px · 1 · 400
本文The quick brown fox — 参考を型にする14px · 2 · 400
注釈The quick brown fox — 参考を型にする16px · 1.6 · 400

Structure

ページ構成（上から順）

01
グローバルナビ
上部中央に紫の枠で囲んだ英字ナビ（TOP〜CONTACT）を固定。SPではハンバーガーに集約。
02
KV
紫の雷雲を背景に、左に筆文字ロゴ「虚空狂宴」と「2026.10.11 Sun. K-Arena Yokohama」、右にスポットライトと稲妻に包まれた剣持刀也のイラスト。
03
ABOUT
黒いパネルに TITLE・SCHEDULE・STAGE のラベルを字間広めで置き、ルビ付きの公演名、日時、会場を中央揃えで並べる。
04
CAST・GUEST
立ち絵とプロフィール文、ゲスト3名の正方形アイコンと YouTube・X へのリンク。
05
TICKET
席種と料金、入場特典の画像に続き、ミニアルバムのシリアル先行から一般販売・見切れ席・リセールまでの受付を枠ごとに並べる。
06
LIVE VIEWING
料金と受付、入場特典、公開劇場リストや注意事項のアコーディオン、海外ライブビューイングの案内。
07
DISCOGRAPHY・GOODS
1st Mini Album「Augment」のジャケットと発売情報、グッズの一覧。
08
FAN CLUB〜CONTACT
FC特典、その他の案内、注意事項、問い合わせを同じ黒いパネルで続け、フッターで締める。

Interaction

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

ナビは上部に固定し、各セクションのIDへページ内リンクでジャンプする構成
黒いパネルの縁を紫に発光させている。box-shadow を色と広がりを変えて複数重ねると再現可能
「ABOUT」などの英字見出しは、インクがにじんだような質感。画像か、SVG の feTurbulence フィルターで再現可能
公開劇場リストや注意事項は開閉式のアコーディオンで、情報量の多さを抑えている。details / summary で実装できる

スクロールのコマ撮り200–2000ms

検出された技術:Google FontsAdobe Fonts

Reproduce

再現するときのポイント

01背景とパネルの黒を分け、パネルの縁だけを紫に光らせて情報面を浮かせる
02色は紫の濃淡に絞り、見出しをラベンダー、本文を白にして暗い画面でも読みやすくする
03チケットの受付は1枠1販売にし、受付期間とボタンの位置を揃える
04英字のナビと日付はコンデンス体、和文は Zen Kaku Gothic New と役割を分ける

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

kenmochi-kokuu-kyouen.katapick.md

1---
2title: "剣持刀也リアルソロライブ【虚空狂宴】 再現用デザイン仕様書"
3source: https://www.nijisanji.jp/events/kenmochi_fes/
4katapick: https://katapick.com/sites/kenmochi-kokuu-kyouen
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [ダーク, イラスト, ネオン/グロー, 固定ナビ, ロングページ]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 18
13generator: Katapick
14---
15 
16# 剣持刀也リアルソロライブ【虚空狂宴】 — 再現用デザイン仕様書
17 
18> 紫の稲妻とスポットライトで、FVからもう本番。にじさんじ剣持刀也のリアルソロライブ「虚空狂宴」の特設サイトは、雷雲と筆文字ロゴのKVから黒いパネルへ情報を積み、開演前の緊張を最後まで切らさない。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22

Pro の追加ファイル

動くHTMLひな形トークンと構成を反映済みPRO tokens.jsonFigma / Tokens StudioPRO Tailwind @themev4 にそのまま貼れるPRO

剣持刀也リアルソロライブ【虚空狂宴】についてよくある質問

剣持刀也リアルソロライブ【虚空狂宴】のサイトのフォントは？

本文と見出しに Zen Kaku Gothic New、英字のナビや日付に Shackleton Condensed（Adobe Fonts）が使われています。無料なら Zen Kaku Gothic New と Barlow Condensed の組み合わせで近い雰囲気になります。ロゴは画像と思われます。