EventOverseas / USPicked 2026.09.26

hololive English 4th Concert -Serendipity-

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

出典: serendipity.hololivepro.com

hololive English 4th Concert -Serendipity-のPC版ファーストビュー

hololive English 4th Concert -Serendipity-のスマホ版ファーストビュー

Editor's note — 編集部の視点

ライブ告知を、斜体のセリフ体でしっとり組む。

hololive Englishの公演特設サイト「4th Concert -Serendipity-」は、斜体のセリフ体とライムグリーンを軸に、高揚を軽やかな余韻へ仕立て直している。

PipTrends & VTuber

え、待って、最後のPoemで短い英文が1行ずつ積まれていくの、エモすぎる！！ライブ前にこれ読んだら泣いちゃうって。締めまで推しからのラブレターっぽくて、神。

1Day1とDay2の日付を斜体セリフで大きく並べ、間に×印。2日間の公演が、一行の見出しとして読める
2右端のピンクのTicketバッジは常駐。どこまで読み進めても、買う入口が視界から消えない
3メンバーはカプセル型の立ち絵に、名前を弧に沿わせて配置。横一列に並べても名簿の堅さが出ない

Color

hololive English 4th Concert -Serendipity-の配色

Typography

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

本文・日時・ポエム（斜体を多用）

Aa あア

使用: Lora
代替: Lora

ナビ・ボタン・英字見出し

Aa あア

使用: Bigshot One
代替: Bigshot One

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

本文The quick brown fox — 参考を型にする68px · 1 · 500
ボタンKatapick 型26px · 1 · 500

Structure

ページ構成（上から順）

01
キービジュアル
パステルの虹色グラデーションに全メンバーの集合イラストを大きく置き、中央に「Serendipity」の手書き風ロゴ。左上に波形の白い枠に入ったロゴ、SPでは右上にライムの JP ボタンと Menu。
02
公演概要
Day1 / Day2 の日付を大きな斜体セリフで左右に並べ、中央に×印、下に会場名と開場・開演時刻を罫線と矢印で区切って載せる。
03
News
日付のラベルとタイトルを持つ横長の角丸行を縦に並べ、右端に丸い矢印アイコン、下に View More ボタン。
04
Merch
白い角丸フレームの中にグッズ告知画像を置き、View More ボタンへつなぐ。
05
Digital Message Board
斜体セリフの2行見出しと、企画の告知画像・View More ボタン。
06
Video
中央に大きな動画サムネイル、左右に前後のサムネイルを半分見せ、矢印とドットで切り替えるカルーセル。
07
Member
カプセル型に切り抜いたメンバーの立ち絵を6人前後ずつ横に並べ、名前を弧状に配置する。
08
Poem
ライムのグラデーション背景に、斜体セリフの短い英文を1行ずつ中央揃えで積み、最後の行を大きくする。
09
Share・フッター
ハッシュタグのピルボタンとSNSアイコン、関連ブランドのロゴを横に並べる。フルページキャプチャは9000pxで切れており、フッター下部は抽出データのセクション情報のみで確認。

Interaction

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

上部のライムのナビはフルページキャプチャの各所に写っており、スクロール後に position: fixed で固定されるナビと思われる
右端のピンクの「Ticket」バッジと黒い「Unit」タブも固定表示。バッジの縁の文字はゆっくり回転している可能性がある（CSS の rotate アニメーションで再現可能）
Video の前後サムネイルを見せるカルーセルは抽出データの Swiper によるもの（slidesPerView を 1.5 前後にし centeredSlides を有効にする）
Poem の各行は GSAP ScrollTrigger で1行ずつフェードインする演出と思われる。抽出データの Lottie は星などの装飾アニメーションに使われていると思われる

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

hololive English 4th Concert -Serendipity-をスクロールしたときのフレーム1 — 01

hololive English 4th Concert -Serendipity-をスクロールしたときのフレーム2 — 02

hololive English 4th Concert -Serendipity-をスクロールしたときのフレーム3 — 03

hololive English 4th Concert -Serendipity-をスクロールしたときのフレーム4 — 04

hololive English 4th Concert -Serendipity-をスクロールしたときのフレーム5 — 05

hololive English 4th Concert -Serendipity-をスクロールしたときのフレーム6 — 06

検出された技術:GSAPSwiperWordPressLottie

Reproduce

再現するときのポイント

01見出しは Lora などのセリフ体の斜体を大きく使い、ライム系の塗りと細い縁取りで軽さを出す
02色は白・ライム・黒を基本に、ピンクはチケット導線だけに使って目立たせる
03背景はライムからパステルへのグラデーションに、曲線のシェイプや星形の装飾を重ねる
04ナビ・チケット・Unit を固定要素にまとめ、どのセクションからでも主要導線に戻れるようにする

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

hololive-en-serendipity.katapick.md

1---
2title: "hololive English 4th Concert -Serendipity- 再現用デザイン仕様書"
3source: https://serendipity.hololivepro.com/
4katapick: https://katapick.com/sites/hololive-en-serendipity
5category: イベント / ライブ
6region: 海外 (US)
7tags: [イラスト, セリフ体, ビビッド, 固定ナビ, 固定CTA, カルーセル]
8launched: 2026-04
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# hololive English 4th Concert -Serendipity- — 再現用デザイン仕様書
17 
18> ライブ告知を、斜体のセリフ体でしっとり組む。hololive Englishの公演特設サイト「4th Concert -Serendipity-」は、斜体のセリフ体とライムグリーンを軸に、高揚を軽やかな余韻へ仕立て直している。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22