葛葉 One-Man Live "Bloody Alexandrite"

1. 01

   ファーストビュー

   黒地に黒いダマスク柄を敷き、左半分に赤い装飾枠のキービジュアル、右半分にロゴ・「2026.10.12 (Mon)」・開場/開演時間・会場名を中央揃えで積む。右上に縦書きの「Contents」タブ、右下に「Scroll →」。

2. 02

   About (Invitation)

   公演の案内文のセクション。ここから先は横方向に並んでおり、フルページキャプチャに写らないため抽出データの見出しのみで確認。

3. 03

   Cast / Guest

   出演者とゲストの紹介セクション（見出しのみ確認）。

4. 04

   Ticket

   チケット情報のセクション（見出しのみ確認）。

5. 05

   Live Viewing

   ライブビューイングの案内。抽出データには申し込み時・鑑賞時の注意事項の見出しが別に存在し、モーダルなどで開く補足情報と思われる。

6. 06

   Discography

   初回限定盤A・初回限定盤B・通常盤の3形態を紹介するセクション（見出しのみ確認）。

7. 07

   Goods / Fan Club

   グッズとファンクラブの案内（見出しのみ確認）。

8. 08

   Attention / Contact

   注意事項とお問い合わせで締める（見出しのみ確認）。

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

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

検出された技術:Swiper

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

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-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# 葛葉 One-Man Live "Bloody Alexandrite" — 再現用デザイン仕様書
17 
18> ページが縦じゃなくて、横に進んでいく。にじさんじ所属・葛葉のKアリーナ横浜公演「Bloody Alexandrite」の特設サイトは、各章を横一列に並べ、黒いダマスク柄と深紅で、館の回廊を歩くような順路を組んでいる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22