EventJapanPicked 2026.10.05

葛葉 One-Man Live "Bloody Alexandrite"

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

サイトを見るnijisanji.jp

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

葛葉 One-Man Live "Bloody Alexandrite"のPC版ファーストビュー

サイトを開く ↗

葛葉 One-Man Live "Bloody Alexandrite"のスマホ版ファーストビュー

Editor's note — 編集部の視点

ページが縦じゃなくて、横に進んでいく。

にじさんじ所属・葛葉のKアリーナ横浜公演「Bloody Alexandrite」の特設サイトは、各章を横一列に並べ、黒いダマスク柄と深紅で、館の回廊を歩くような順路を組んでいる。

PipTrends & VTuber

え、待って、Discographyまで横の回廊に並んでるの？初回限定盤A・Bと通常盤、全部ここで見比べられるのありがたすぎる！！オタクの財布が危ない、神。

1FVは左に赤い装飾枠のKV、右にロゴと公演情報。額装された絵と解説板のような2分割で見せる
2日付は細いセリフ体に赤から紫、橙へのグラデーション。数字そのものを宝石の色味で光らせる
3右下の「Scroll →」と右上の縦書き「Contents」。不慣れな横スクロールを2つの札で案内する

Color

葛葉 One-Man Live "Bloody Alexandrite"の配色

Typography

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

日付・会場名・英字見出し

Aa あア

使用: Gunter
代替: Bodoni Moda

和文本文・リスト

Aa あア

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

和文見出し・補足

Aa あア

使用: BIZ UDPMincho
代替: BIZ UDPMincho

英字の補助テキスト・フッター

Aa あア

使用: Hepta Slab
代替: Hepta Slab

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

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

Structure

ページ構成（上から順）

01
ファーストビュー
黒地に黒いダマスク柄を敷き、左半分に赤い装飾枠のキービジュアル、右半分にロゴ・「2026.10.12 (Mon)」・開場/開演時間・会場名を中央揃えで積む。右上に縦書きの「Contents」タブ、右下に「Scroll →」。
02
About (Invitation)
公演の案内文のセクション。ここから先は横方向に並んでおり、フルページキャプチャに写らないため抽出データの見出しのみで確認。
03
Cast / Guest
出演者とゲストの紹介セクション（見出しのみ確認）。
04
Ticket
チケット情報のセクション（見出しのみ確認）。
05
Live Viewing
ライブビューイングの案内。抽出データには申し込み時・鑑賞時の注意事項の見出しが別に存在し、モーダルなどで開く補足情報と思われる。
06
Discography
初回限定盤A・初回限定盤B・通常盤の3形態を紹介するセクション（見出しのみ確認）。
07
Goods / Fan Club
グッズとファンクラブの案内（見出しのみ確認）。
08
Attention / Contact
注意事項とお問い合わせで締める（見出しのみ確認）。

Interaction

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

ページの高さが900pxに固定され、各セクションが横に並ぶ横スクロール構成。抽出データにある Swiper を mousewheel 有効の横方向スライダーとして使っていると思われる。GSAP ScrollTrigger で縦スクロールを translateX に変換する方法でも再現できる
日付・会場名のグラデーション文字は linear-gradient を background-clip: text で文字に切り抜く CSS で再現できる
右上の「Contents」タブは writing-mode: vertical-rl の縦書きラベルで、クリックで目次を開く固定メニューと思われる
ダマスク柄はタイル状の背景画像を background-repeat で敷き、明度を背景色に近づけて質感だけを残している

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

葛葉 One-Man Live "Bloody Alexandrite"をスクロールしたときのフレーム1 — 01

検出された技術:Swiper

Reproduce

再現するときのポイント

01背景は純黒に同系色のダマスク柄を重ね、写真やイラスト以外のコントラストを抑える
02赤は #7a0002 前後の暗い深紅に限定し、罫線・枠・タブなどの細い要素に使う
03日付や会場名は細いディスプレイセリフ体を大きく使い、グラデーションで色の変化を出す
04横スクロールの場合も各セクションの高さを画面高に揃え、1画面1テーマで区切る

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

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

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

kuzuha-bloody-alexandrite.katapick.md

1---
2title: "葛葉 One-Man Live "Bloody Alexandrite" デザイン分析書"
3source: https://www.nijisanji.jp/events/kuzuha_bloodyalexandrite/
4katapick: https://katapick.com/sites/kuzuha-bloody-alexandrite
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [ダーク, 横スクロール, レッド基調, セリフ体, イラスト]
8launched: 2026-03
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# 葛葉 One-Man Live "Bloody Alexandrite" — デザイン分析書
16 
17> ページが縦じゃなくて、横に進んでいく。にじさんじ所属・葛葉のKアリーナ横浜公演「Bloody Alexandrite」の特設サイトは、各章を横一列に並べ、黒いダマスク柄と深紅で、館の回廊を歩くような順路を組んでいる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22