# 不破湊 2nd LIVE “VORTEX”｜イベント / ライブのWebデザイン参考

> 真っ暗な画面で、日付と会場名だけが光ってる。不破湊の日本武道館公演「2nd LIVE “VORTEX”」の特設サイトは、黒紫の闇に告知情報を浮かべ、闇が深いほど一行一行がくっきり立ち上がる。

- URL: https://www.nijisanji.jp/events/fuwa_VORTEX/
- 解説ページ: https://katapick.com/sites/fuwa-vortex
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: VTuber・音楽ライブ
- テイスト: ダーク、ネオン/グロー、イラスト、固定ナビ、ロングページ
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-24 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

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

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

## 配色
- #0c0a0d Void Black（背景）
- #0f1325 Midnight Navy（セクション背景（DISCOGRAPHY））
- #ffffff White（テキスト）
- #bf69f4 Orchid（アクセント / ナビのアクティブ表示・枠線）
- #cef62e Lime（アクセント / 英字小見出し・日付）
- #312fae Indigo（ラベル・ハイライト背景）

## フォント
- 和文本文・チケット情報・ボタン: IBM Plex Sans JP（代替: IBM Plex Sans JP）
- 英字見出し・日付・目次ナビ: Pilot（代替: Italiana）
- 英字キャプション・小ラベル: General Sans（代替: Manrope）

## よくある質問
### 不破湊 “VORTEX” 特設サイトのフォントは？
和文の本文とチケット情報に IBM Plex Sans JP、英字見出し・日付・目次に Pilot と思われる幅広のディスプレイ書体、小さな英字ラベルに General Sans が使われています。無料で近づけるなら IBM Plex Sans JP に、見出しは Italiana、ラベルは Manrope を組み合わせるのがおすすめです。

### VTuberのライブLPを作るには？
ファーストビューでキービジュアルと公演日・会場を示し、アーティスト紹介、チケット（料金・先行抽選の日程・申込ボタン）、関連リリース、グッズ、注意事項の順に並べるのが基本です。情報量が多くなるため、固定の目次ナビと現在地のハイライトを用意すると迷いにくくなります。

### VORTEXのデザインはどんな業種の参考になる？
アーティストのワンマンライブやツアーの特設サイト、CDリリースと連動したキャンペーンページなど、チケットと商品情報を1ページにまとめる音楽・エンタメ系の告知サイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/fuwa-vortex からダウンロードできます。
出典: Katapick（https://katapick.com）