NIJISANJI EN 5th ANNIVERSARY

1. 01

   ヒーロー

   上端に画面幅いっぱいの「NIJISANJI EN 5TH ANNIV.」ロゴ（「5」だけ多色）。その下にタレント立ち絵と手書きメッセージを組み合わせたタグ型カードを4段に敷き詰め、下部に SCROLL、中央にセリフ体のタグライン、右に SHARE ボタン。

2. 02

   001 MESSAGE

   オレンジのパネルが右側から背景に重なる。見出し「MESSAGE」を3段に重ねた表現の下に、(EN) と (JP) の2カラムで手書き風の代表メッセージ。下端に「NEXT 002 CONTENTS」。

3. 03

   002 CONTENTS

   コーラルのパネルを左側に配置し、番号付きの企画を罫線区切りで並べる。サムネイル・タイトル・「WATCH HERE」のピルボタン、未公開枠は破線と「?」の COMING SOON。

4. 04

   003 MERCH

   青紫のパネルを右側に配置し、左端をギザギザの輪郭にしている。グッズのサムネイルと「VIEW DETAILS」、COMING SOON 枠を並べる。

5. 05

   フッター

   再びカードの壁とロゴに戻り、最下部に公式サイトへのリンク、コピーライト、タグライン、SHARE ボタンを1行で置く。

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

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

検出された技術:Google Fonts

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

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-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# NIJISANJI EN 5th ANNIVERSARY — デザイン分析書
16 
17> 手書きメッセージのカードで、FVがぎっしり。NIJISANJI ENの5周年特設サイトは、手書きメッセージ入りのタグ型カードをFVに敷き詰め、ファンへの感謝を物量で差し出している。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22