EventJapanPicked 2026.09.24

不破湊 2nd LIVE “VORTEX”

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

サイトを見るnijisanji.jp

www.nijisanji.jp/events/fuwa_VORTEX開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

真っ暗な画面で、日付と会場名だけが光ってる。

不破湊の日本武道館公演「2nd LIVE “VORTEX”」の特設サイトは、黒紫の闇に告知情報を浮かべ、闇が深いほど一行一行がくっきり立ち上がる。

IrisColor & Brand

DISCOGRAPHYに入ると、背景が黒からほんのり紺に変わるのがすき。夜ふけの空が、少しずつ明け方に近づいていくみたい。曲の話になったとたん、空気がやわらぐ感じがいいな。

1「2027.3.3」を幅広のPilotで大きく組み、紫の光彩を重ねる。数字そのものが公演の看板になる
2左端のCONTENTSは閲覧中の項目に紫を敷く。チケットからグッズまで続く長い道のりでも現在地を失わない
3英字の小見出しと日付だけにライムを差す。紫に沈む画面の中で、拾うべき情報へ目を導く

Color

不破湊 2nd LIVE “VORTEX”の配色

Typography

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

和文本文・チケット情報・ボタン

Aa あア

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

英字見出し・日付・目次ナビ

Aa あア

使用: Pilot
代替: Italiana

英字キャプション・小ラベル

Aa あア

使用: General Sans
代替: Manrope

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

見出しKatapick 型24px · 1.8 · 700
小見出しKatapick 型60px · 1 · 400
本文The quick brown fox — 参考を型にする10px · 1.8 · 400
ボタンKatapick 型16px · 1.8 · 400
注釈The quick brown fox — 参考を型にする10px · 1 · 400

Structure

ページ構成（上から順）

01
ファーストビュー
立ち絵のキービジュアルを中央に大きく配置し、左右に紫の煙状グラフィック。左下に ABOUT〜CONTACT の英字目次、上部の両端に公演名・日付とサイトURLを小さく置く。
02
公演概要
VORTEX ロゴの下に SCHEDULE「2027.3.3」と OPEN / START の時刻、STAGE「日本武道館」を中央揃えで積み、Access Info と Google Map の2ボタンを並べる。
03
Artist
ライム色の英字「Artist」、装飾フレームで囲んだ立ち絵、縦書きの名前を横に並べ、プロフィール文と YouTube / X のアイコンを添える。
04
TICKET
大きな英字見出しと和文ラベルの下に、紫の細枠ボックスでチケット料金と入場特典を表示。続く Ticket Entry では先行抽選ごとの受付期間と申込ボタンを縦に並べ、左側に抽選種別のピル型タブを置く。
05
DISCOGRAPHY
新シングルのジャケットとリリース日、3形態の比較カード（価格・収録内容・予約ボタン）、TrackList、Digital Release、Videos を濃紺の背景で続ける。
06
Release Event・Store Information
抽出データの見出し構成から、リリースイベントと店舗別の購入特典の案内が続く（フルページキャプチャの範囲外）。
07
GOODS・ATTENTION・CONTACT
ライブグッズ、注意事項、問い合わせ先で締める（見出し構成より。キャプチャの範囲外）。

Interaction

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

左固定の CONTENTS ナビは、スクロール位置に応じてアクティブ項目が切り替わる。IntersectionObserver で表示中のセクションを判定してクラスを付け替えると再現できる
日付や会場名の発光は、紫系の text-shadow を複数重ねる方法で再現できる。ページ全体の慣性スクロールは抽出データにある Lenis
Ticket Entry 左側のピル型タブも閲覧中の抽選種別をハイライトしており、position: sticky で追従させていると思われる
左右の紫の煙状グラフィックは背景に固定されていると思われる（静止画からは動画か画像かは判別できない）

スクロールのコマ撮りLenis · 300–32000ms

不破湊 2nd LIVE “VORTEX”をスクロールしたときのフレーム1 — 01

不破湊 2nd LIVE “VORTEX”をスクロールしたときのフレーム2 — 02

不破湊 2nd LIVE “VORTEX”をスクロールしたときのフレーム3 — 03

不破湊 2nd LIVE “VORTEX”をスクロールしたときのフレーム4 — 04

不破湊 2nd LIVE “VORTEX”をスクロールしたときのフレーム5 — 05

不破湊 2nd LIVE “VORTEX”をスクロールしたときのフレーム6 — 06

検出された技術:LenisSwiperGoogle Fonts

Reproduce

再現するときのポイント

01背景をほぼ黒の #0c0a0d と濃紺の #0f1325 の2段階に分け、ライブ情報とリリース情報の切り替わりを示す
02アクセントはライム #cef62e と紫 #bf69f4 に絞り、ライムは英字の小見出し・日付、紫はナビ・枠線・ラベルと役割を分ける
03英字は幅広のディスプレイ書体、情報部分は IBM Plex Sans JP の2層構成にして、装飾と可読性を両立させる
04抽選スケジュールなど情報量の多いブロックは、紫の細罫の枠と日付の色分けで整理する

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

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

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

fuwa-vortex.katapick.md

1---
2title: "不破湊 2nd LIVE “VORTEX” デザイン分析書"
3source: https://www.nijisanji.jp/events/fuwa_VORTEX/
4katapick: https://katapick.com/sites/fuwa-vortex
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [ダーク, ネオン/グロー, イラスト, 固定ナビ, ロングページ]
8launched: 2026-09
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# 不破湊 2nd LIVE “VORTEX” — デザイン分析書
16 
17> 真っ暗な画面で、日付と会場名だけが光ってる。不破湊の日本武道館公演「2nd LIVE “VORTEX”」の特設サイトは、黒紫の闇に告知情報を浮かべ、闇が深いほど一行一行がくっきり立ち上がる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22

Pro の追加ファイル

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

不破湊 2nd LIVE “VORTEX”についてよくある質問

不破湊 “VORTEX” 特設サイトのフォントは？

和文の本文とチケット情報に IBM Plex Sans JP、英字見出し・日付・目次に Pilot と思われる幅広のディスプレイ書体、小さな英字ラベルに General Sans が使われています。無料で近づけるなら IBM Plex Sans JP に、見出しは Italiana、ラベルは Manrope を組み合わせるのがおすすめです。