EventJapanPicked 2026.09.26

VOLTACTION 2nd LIVE “EVOLVE”

イベント / ライブのWebデザイン参考 — VTuber・ライブイベント

出典: nijisanji.jp

VOLTACTION 2nd LIVE “EVOLVE”のPC版ファーストビュー

VOLTACTION 2nd LIVE “EVOLVE”のスマホ版ファーストビュー

Editor's note — 編集部の視点

黒い画面に、4人の衣装の色だけが灯ってる。

にじさんじのユニットVOLTACTIONの2nd LIVE「EVOLVE」特設サイトは、黒地に細い英字と4人の色だけを置き、ライブとアルバムの情報を1本の暗いページにまとめている。

LeoMotion & Direction

KVの奥、光の扉へ歩いていく4人のシルエットがいるの！手前の4人と対になってて、まさに“進化”の前と後っぽい。ライブのオープニング映像みたいで、見つけた瞬間に鳥肌！

1左端の「CONTENTS」は白帯の目次を常に表示。長いページでも、チケットや注意事項へ一手で飛べる
2「CAST CAST CAST」と見出しを繰り返し、先頭だけ白く残りを沈める。章の入口が残響のように響く
3チケットは受付ごとにカードを分け、日時を等幅の数字で揃える。いつ何をすべきかを見比べられる

Color

VOLTACTION 2nd LIVE “EVOLVE”の配色

Typography

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

英字見出し・ナビ

Aa あア

使用: TT Travels Next
代替: Lexend Exa

和文・本文

Aa あア

使用: IBM Plex Sans JP
代替: IBM Plex Sans JP

日時

Aa あア

使用: DM Mono
代替: DM Mono

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

見出しKatapick 型120px · 1.8 · 300
小見出しKatapick 型18px · 1 · 400
本文The quick brown fox — 参考を型にする12px · 1.6 · 400
ボタンKatapick 型16px · 1.8 · 600
注釈The quick brown fox — 参考を型にする15px · 1.8 · 400

Structure

ページ構成（上から順）

01
キービジュアル
黒い枠の中に、舞台裏に立つ4人のキービジュアルと、奥の光へ向かう4人のシルエット。中央下に斜線で切った「EVOLVE」ロゴ、右下に「2027.1.24 PIA ARENA MM」。
02
CONTENTS ナビ
左下に TOP / ABOUT / CAST / TICKET / DISCOGRAPHY / ATTENTION を白帯のラベルで縦に並べ、スクロール中も固定表示。SPは右下の丸いメニューボタン。
03
ABOUT
「( Title )」「( Live Schedule )」「( Stage )」の小さなラベルに続けて、公演名・日時・会場を細い英字で大きく中央に積み、Access Info と Google Map のボタン。
04
CAST
「CAST」を横に繰り返す見出しの下に VOLTACTION のロゴ、公式サイトとSNSへの導線、4人の縦長ポートレートと名前・SNSアイコン。
05
TICKET
角丸の暗いパネルにS席・A席の料金と、シリアル先行・ファンクラブ先行・イープラス先行・一般販売を受付ごとのカードに分け、日時と申込ボタンを並べる。
06
DISCOGRAPHY
1st Full Album『EVOLVE』のジャケットと発売日、封入特典、商品概要・収録楽曲・先行リリースなどへのピル型アンカーナビ、3形態を比べる3列のカード。
07
店舗特典・イベント情報
商品展開の画像、動画、発売記念イベント情報、法人別オリジナル特典と More Shops を続ける。
08
ATTENTION・CONTACT
注意事項と問い合わせ先でページを締める。

Interaction

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

「CAST」「TICKET」などの繰り返し見出しは、横に流れるマーキーか、スクロールに合わせて横移動する演出と思われる。先頭の語だけ白、残りは不透明度を下げる
Lenis の慣性スクロールで、16,000px を超える長いページを滑らかに見せている
左の CONTENTS ナビは position: fixed で、各章へのアンカーリンクでジャンプする
動画一覧は Swiper によるカルーセルと思われる

スクロールのコマ撮りLenis · 200–3500ms

VOLTACTION 2nd LIVE “EVOLVE”をスクロールしたときのフレーム1 — 01

VOLTACTION 2nd LIVE “EVOLVE”をスクロールしたときのフレーム2 — 02

VOLTACTION 2nd LIVE “EVOLVE”をスクロールしたときのフレーム3 — 03

VOLTACTION 2nd LIVE “EVOLVE”をスクロールしたときのフレーム4 — 04

VOLTACTION 2nd LIVE “EVOLVE”をスクロールしたときのフレーム5 — 05

VOLTACTION 2nd LIVE “EVOLVE”をスクロールしたときのフレーム6 — 06

検出された技術:LenisSwiperGoogle FontsAdobe Fonts

Reproduce

再現するときのポイント

01背景は黒とチャコール #1b1c1d の2段階にし、チケット部分だけ角丸パネルで一段浮かせる
02英字は幅広で細いジオメトリック体、和文は IBM Plex Sans JP、日時は DM Mono と役割で3書体に分ける
03見出し語を横に繰り返し、先頭以外を暗くして章の入口を作る
04受付の種別ごとにカードを分け、受付開始・終了とエントリーボタンを同じ位置に揃える

再現MDに含まれるもの

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

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

voltaction-evolve.katapick.md

1---
2title: "VOLTACTION 2nd LIVE “EVOLVE” 再現用デザイン仕様書"
3source: https://www.nijisanji.jp/events/voltaction_evolve/
4katapick: https://katapick.com/sites/voltaction-evolve
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [ダーク, イラスト, 固定ナビ, マーキー, ロングページ]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# VOLTACTION 2nd LIVE “EVOLVE” — 再現用デザイン仕様書
17 
18> 黒い画面に、4人の衣装の色だけが灯ってる。にじさんじのユニットVOLTACTIONの2nd LIVE「EVOLVE」特設サイトは、黒地に細い英字と4人の色だけを置き、ライブとアルバムの情報を1本の暗いページにまとめている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22