EventJapanPicked 2026.09.25

ReGLOSS AR LIVE「X-ReCHORD」

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

サイトを見るx-rechord.hololivepro.com

x-rechord.hololivepro.com開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

開いた瞬間、ライブの客席にいる気分。

ホロライブのユニットReGLOSSのオンラインARライブ特設LP「X-ReCHORD」は、照明とトラスが並ぶステージを全面に描き、半券形の固定CTAでいつでもチケットに手が届く構成にした。

PipTrends & VTuber

締めのコピーが1文字ずつ浮かんでくるっぽいの、アンコール前のMCじゃん……！その下に集合絵とハッシュタグが待ってて、そのまま感想をポストしたくなる。エモすぎる！！

1FVはステージの絵の中央にロゴと日時を積む。開演を待つ客席の視点で、必要な情報を受け取れる
2半券形の「TICKET」と楕円の「WHAT IS AR LIVE?」を右下に常駐。購入も疑問の解消も一手で済む
3券種は紫のスポットライト円の中にチケット型カードで。価格と日時が、実物の券の手触りで伝わる

Color

ReGLOSS AR LIVE「X-ReCHORD」の配色

Typography

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

和文本文・ボタン

Aa あア

使用: Zen Kaku Gothic Antique
代替: Zen Kaku Gothic Antique

英字見出し・日時表記

Aa あア

使用: Outfit
代替: Outfit

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

特大見出しKatapick 型12px · 1 · 500
本文The quick brown fox — 参考を型にする10.5px · 1.71 · 300

Structure

ページ構成（上から順）

01
ヒーロー
ステージのイラストを全面に敷き、中央にロゴ「X-ReCHORD -ReGLOSS AR LIVE-」、2026.11.29（Sun.）@ONLINE、OPEN / START の時刻を配置。右上に MENU、右下に TICKET と WHAT IS AR LIVE? の固定ボタン。
02
リードコピー
青紫のグラデーション背景に、ライブのコンセプトを伝える4行の和文コピーを中央揃えで置き、下に小さく英文を添える。
03
POINT OF AR LIVE
括弧で囲んだ英字見出しの下に、(01)〜(03) の番号・横罫・色帯ラベルの組で3つの特徴を列挙。下部にユニットの集合絵キービジュアルを大きく配置する。
04
NEWS
ラベンダーの背景にピクセル状の矩形パーツを散らし、白抜きの大きな英字見出しでお知らせ一覧を置く。
05
MERCH
白い細枠のボックスに「Coming soon」を表示し、グッズ情報の公開予定を示す。
06
VIDEO
中央の動画サムネイルを大きく、左右の隣のスライドを見切らせたカルーセル。左右に矢印を配置する。
07
TICKET
X字に交差する斜線と「SCROLL DOWN」表記で区切ったあと、濃紺の背景に紫のスポットライト円を置き、配信視聴チケットと追加チケットをチケット型カード2枚で紹介する。
08
ステートメント・フッター
1文字ずつ現れる締めのコピーのあと、集合絵のキービジュアル、公式ハッシュタグのボタン、SNSシェアアイコンで終える。

Interaction

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

抽出データにある Lenis による慣性スクロールで、背景イラストやグラデーションの切り替わりを滑らかに見せている
締めのステートメントは1文字ずつ不透明度が上がる表示と思われる（キャプチャで文字が部分的に欠けて写っている）。文字を span に分割し、GSAP ScrollTrigger の stagger で順に表示すると再現できる
VIDEO のカルーセルは Swiper で、slidesPerView: 'auto' と centeredSlides を組み合わせて左右のスライドを見切らせる構成と思われる
MENU・TICKET・WHAT IS AR LIVE? の3つは position: fixed で常駐。チケット型ボタンは画像か clip-path で半券の形をつくる

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

ReGLOSS AR LIVE「X-ReCHORD」をスクロールしたときのフレーム1 — 01

ReGLOSS AR LIVE「X-ReCHORD」をスクロールしたときのフレーム2 — 02

ReGLOSS AR LIVE「X-ReCHORD」をスクロールしたときのフレーム3 — 03

ReGLOSS AR LIVE「X-ReCHORD」をスクロールしたときのフレーム4 — 04

ReGLOSS AR LIVE「X-ReCHORD」をスクロールしたときのフレーム5 — 05

ReGLOSS AR LIVE「X-ReCHORD」をスクロールしたときのフレーム6 — 06

検出された技術:LenisSwiperGoogle Fonts

Reproduce

再現するときのポイント

01背景は #1c215b の濃紺を基調に、セクションごとにラベンダーや青紫のグラデーション、ステージのイラストへ切り替える
02CTAを「チケット型」「楕円」と形で描き分け、固定配置で常に見せる
03英字見出しは Outfit の太字を大きく、和文は Zen Kaku Gothic Antique で行間を広めにとる
04特徴説明は「(01) の番号＋横罫＋色帯ラベル」の3点セットで型をつくる

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

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

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

regloss-x-rechord.katapick.md

1---
2title: "ReGLOSS AR LIVE「X-ReCHORD」 デザイン分析書"
3source: https://x-rechord.hololivepro.com/
4katapick: https://katapick.com/sites/regloss-x-rechord
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [ダーク, ネオン/グロー, イラスト, 固定CTA, スクロール演出]
8launched: 2026-09
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# ReGLOSS AR LIVE「X-ReCHORD」 — デザイン分析書
16 
17> 開いた瞬間、ライブの客席にいる気分。ホロライブのユニットReGLOSSのオンラインARライブ特設LP「X-ReCHORD」は、照明とトラスが並ぶステージを全面に描き、半券形の固定CTAでいつでもチケットに手が届く構成にした。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22