# 葛葉 One-Man Live "Bloody Alexandrite"｜イベント / ライブのWebデザイン参考

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

- URL: https://www.nijisanji.jp/events/kuzuha_bloodyalexandrite/
- 解説ページ: https://katapick.com/sites/kuzuha-bloody-alexandrite
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: VTuberライブ（にじさんじ）
- テイスト: ダーク、横スクロール、レッド基調、セリフ体、イラスト
- 公開・リニューアル: 2026-03 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

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

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

## 配色
- #000000 Black（背景）
- #1f1b1b Dark Umber（セクション背景）
- #1b1c20 Charcoal Blue（セクション背景）
- #7a0002 Blood Red（アクセント / Contents タブ・罫線）
- #7c4885 Amethyst（日付グラデーションの中間色）
- #c7cab6 Pale Sage（テキスト / サーフェス）

## フォント
- 日付・会場名・英字見出し: Gunter（代替: Bodoni Moda）
- 和文本文・リスト: IBM Plex Sans JP（代替: IBM Plex Sans JP）
- 和文見出し・補足: BIZ UDPMincho（代替: BIZ UDPMincho）
- 英字の補助テキスト・フッター: Hepta Slab（代替: Hepta Slab）

## よくある質問
### 葛葉ワンマンライブ特設サイトのフォントは？
日付や英字見出しに Gunter、和文本文に IBM Plex Sans JP、見出しに BIZ UDPMincho、補助的な英字に Hepta Slab が使われています。Gunter 以外は Google Fonts で無料、Gunter の代わりには Bodoni Moda が近い印象です。

### 縦スクロールで横に進むページはどう作る？
Swiper を direction: horizontal と mousewheel オプションで全画面スライダーにするか、GSAP ScrollTrigger でコンテナを pin して縦のスクロール量を translateX に変換します。

### このサイトのデザインはどんな企画の参考になる？
ダークファンタジーやゴシックな世界観を持つアーティスト・ゲーム・舞台のライブ告知や特設サイトの参考になります。

### サイト内のイラストやロゴを参考資料として使ってもいい？
キャラクターのイラスト・ロゴの権利は ANYCOLOR 株式会社に帰属します。参考にするのは構成や配色にとどめ、モックアップではダミー画像に差し替えてください。

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