EventOverseas / USPicked 2026.09.26

NIJISANJI EN 5th ANNIVERSARY

イベント / ライブのWebデザイン参考 — VTuber事務所（海外ブランチ）

出典: nijisanji.jp

NIJISANJI EN 5th ANNIVERSARYのPC版ファーストビュー

NIJISANJI EN 5th ANNIVERSARYのスマホ版ファーストビュー

Editor's note — 編集部の視点

手書きメッセージのカードで、FVがぎっしり。

NIJISANJI ENの5周年特設サイトは、手書きメッセージ入りのタグ型カードをFVに敷き詰め、ファンへの感謝を物量で差し出している。

PipTrends & VTuber

え、待って、ロゴの「5」だけ多色なの気づいた？周年の数字だけこっそりカラフルとか、かわいすぎる！！あとCOMING SOONの「?」枠、続報待ちのワクワクが止まらない。

1画面幅いっぱいのロゴの下に、タグ型カードを4段びっしり。枚数の多さが、感謝の厚みに変わる
2カードは4色と、波形・ギザギザなど異なる輪郭。同じ形を並べないから、壁が単調にならない
3MESSAGE・CONTENTS・MERCHのパネルを左右交互に。番号と「NEXT」が、次の一歩を案内し続ける

Color

NIJISANJI EN 5th ANNIVERSARYの配色

Typography

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

セクション見出し・ボタン・ラベル

Aa あア

使用: Clash Display
代替: Space Grotesk

タグライン「All our thanks…」。画像またはSVGの可能性がある

Aa あア

使用: セリフ体（書体名は抽出データになし）
代替: Fraunces

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

見出しKatapick 型24px · 1.23 · 700

Structure

ページ構成（上から順）

01
ヒーロー
上端に画面幅いっぱいの「NIJISANJI EN 5TH ANNIV.」ロゴ（「5」だけ多色）。その下にタレント立ち絵と手書きメッセージを組み合わせたタグ型カードを4段に敷き詰め、下部に SCROLL、中央にセリフ体のタグライン、右に SHARE ボタン。
02
001 MESSAGE
オレンジのパネルが右側から背景に重なる。見出し「MESSAGE」を3段に重ねた表現の下に、(EN) と (JP) の2カラムで手書き風の代表メッセージ。下端に「NEXT 002 CONTENTS」。
03
002 CONTENTS
コーラルのパネルを左側に配置し、番号付きの企画を罫線区切りで並べる。サムネイル・タイトル・「WATCH HERE」のピルボタン、未公開枠は破線と「?」の COMING SOON。
04
003 MERCH
青紫のパネルを右側に配置し、左端をギザギザの輪郭にしている。グッズのサムネイルと「VIEW DETAILS」、COMING SOON 枠を並べる。
05
フッター
再びカードの壁とロゴに戻り、最下部に公式サイトへのリンク、コピーライト、タグライン、SHARE ボタンを1行で置く。

Interaction

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

フルページキャプチャでは各パネルの間にロゴとカードの壁が繰り返し写っており、背景を固定（position: fixed か sticky）し、その上をパネルがスクロールしていく構成と思われる
パネルの波形・ギザギザの輪郭は SVG の mask-image か clip-path: polygon() で再現できる
「MESSAGE」を3段に重ねた見出しは、同じテキストを複製して上下をはみ出させ overflow: hidden で切る。縦に流れるアニメーションが付いている可能性もある
右下の SHARE ボタンは常に表示される固定ボタン。navigator.share と X の投稿URLへのフォールバックで実装できる

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

NIJISANJI EN 5th ANNIVERSARYをスクロールしたときのフレーム1 — 01

NIJISANJI EN 5th ANNIVERSARYをスクロールしたときのフレーム2 — 02

NIJISANJI EN 5th ANNIVERSARYをスクロールしたときのフレーム3 — 03

NIJISANJI EN 5th ANNIVERSARYをスクロールしたときのフレーム4 — 04

NIJISANJI EN 5th ANNIVERSARYをスクロールしたときのフレーム5 — 05

NIJISANJI EN 5th ANNIVERSARYをスクロールしたときのフレーム6 — 06

検出された技術:Google Fonts

Reproduce

再現するときのポイント

01背景は淡いグレー #e6e6ed に細かなドット柄を敷き、カードの色を際立たせる
02カードとパネルの色はコーラル・オレンジ・青紫・グリーンの4色に限定し、テキストは濃紺 #2a2a34 だけにする
03カードの輪郭を波形・星形・ギザギザなど複数用意して、同じ色でも単調に見えないようにする
04パネルに「001」「NEXT 002」などの番号を入れ、左右交互に配置して読み進める順番を示す

再現MDに含まれるもの

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

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

nijisanji-en-5th-anniversary.katapick.md

1---
2title: "NIJISANJI EN 5th ANNIVERSARY 再現用デザイン仕様書"
3source: https://www.nijisanji.jp/events/en_5th_anniversary/
4katapick: https://katapick.com/sites/nijisanji-en-5th-anniversary
5category: イベント / ライブ
6region: 海外 (US)
7tags: [ビビッド, イラスト, 周年, 手書き文字, グリッド]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# NIJISANJI EN 5th ANNIVERSARY — 再現用デザイン仕様書
17 
18> 手書きメッセージのカードで、FVがぎっしり。NIJISANJI ENの5周年特設サイトは、手書きメッセージ入りのタグ型カードをFVに敷き詰め、ファンへの感謝を物量で差し出している。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22