EventJapanPicked 2026.09.26

NIJISANJI 8th Anniversary 特設サイト

イベント / ライブのWebデザイン参考 — VTuber事務所・周年キャンペーン / グッズ販売

出典: lp.shop.nijisanji.jp

NIJISANJI 8th Anniversary 特設サイトのPC版ファーストビュー

NIJISANJI 8th Anniversary 特設サイトのスマホ版ファーストビュー

Editor's note — 編集部の視点

PCで開いても、スマホ幅のまま読ませてくる。

にじさんじ8周年キャンペーンLPは、約400pxの中央列を左右の固定パネルで挟み、どの端末でも同じ読み心地を守っている。

PipTrends & VTuber

え、待って、商品スライダーが「1 / 32」って枚数まで出してくれるの親切すぎる！！サムネ列もあるから、推しのグッズだけ狙い撃ちできそう。ボタンにちょこんといるミニキャラも地味に神。

1中央列は約400px、左右にロゴと目次を固定。SP前提の設計を崩さず、PCの余白を額縁に変える
2目次は濃紺に金の二重枠と四隅の飾り。招待状のような佇まいが、周年の格を静かに上げる
3商品一覧はシリーズごとに金の放射線の帯で区切る。約5600pxの長さでも、いまどのシリーズかが分かる

Color

NIJISANJI 8th Anniversary 特設サイトの配色

Typography

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

英字見出し・目次・日付

Aa あア

使用: Hepta Slab
代替: Hepta Slab

和文の強調・リード

Aa あア

使用: BIZ UDPMincho
代替: BIZ UDPMincho

和文本文・注意書き

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

欧文本文

Aa あア

使用: Helvetica Neue
代替: Inter

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

見出しKatapick 型10px · 1.8 · 400
小見出しKatapick 型10px · 1.8 · 400
本文The quick brown fox — 参考を型にする10px · 1.6 · 400
ボタンKatapick 型12px · — · 800
注釈The quick brown fox — 参考を型にする10px · 1 · 700

Structure

ページ構成（上から順）

01
3カラムの固定フレーム
紙のような質感のクリーム地に、左に周年ロゴとSNSシェア、右に目次パネルと公式SNS・ストアロゴを固定。中央の約400px幅の列だけがスクロールする。SPでは中央列のみになり、下部に濃紺のメニューボタンを置く。
02
キービジュアル
中央列の最上部に描き下ろしの集合イラストを置き、左上にビジュアル名のラベル。PCとSPのキャプチャで異なるビジュアルが写っており、複数枚を切り替えていると思われる。下に周年ロゴ、キャンペーン開始日時、明朝体のリードを積む。
03
PICKUP
濃い紫の背景に、送料負担キャンペーンのバナーと期間、オフィシャルストア特典の画像を並べ、ミニキャラ付きの「対象商品はこちら」ボタンと注意書きを添える。
04
OFFICIAL LINE
公式マスコットキャラクターのLINEアカウント開設を告知し、緑の「LINE友だち登録」ボタンへ誘導する。
05
MOVIE
金の飾り罫で囲んだ見出しの下に、グッズ告知動画のサムネイルを2本縦に並べる。
06
商品一覧
濃紺の背景で、周年グッズ・コラボ・定番グッズなどシリーズごとに金の放射線の見出し帯を立て、サムネイル付きスライダーと一覧ボタンを繰り返す。高さは約5600px。
07
POPUP STORE・フッター
フルページキャプチャが9000pxで切れているため、以降は抽出データのセクション構成（Popup・Foot）のみ確認。目次の記載からポップアップストアの案内が入ると思われる。

Interaction

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

左右のパネルは position: fixed（または sticky）で固定し、中央列だけをスクロールさせる。max-width を約400pxにした中央列を margin: 0 auto で置くと再現しやすい
商品スライダーは抽出データにある Swiper で、メイン画像・「1 / 32」形式の枚数表示・左右矢印・サムネイル列を組み合わせている（Swiper の thumbs モジュールで実装可能）
右の目次は各セクションへのアンカーリンク。スムーススクロールは scroll-behavior: smooth で足りる
キービジュアルは複数枚を自動で切り替えていると思われる（PCとSPで写っている絵が異なるため）

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

NIJISANJI 8th Anniversary 特設サイトをスクロールしたときのフレーム1 — 01

NIJISANJI 8th Anniversary 特設サイトをスクロールしたときのフレーム2 — 02

NIJISANJI 8th Anniversary 特設サイトをスクロールしたときのフレーム3 — 03

NIJISANJI 8th Anniversary 特設サイトをスクロールしたときのフレーム4 — 04

NIJISANJI 8th Anniversary 特設サイトをスクロールしたときのフレーム5 — 05

NIJISANJI 8th Anniversary 特設サイトをスクロールしたときのフレーム6 — 06

検出された技術:Swiper

Reproduce

再現するときのポイント

01PCでもスマホ幅の1カラムを中央に置き、左右を固定のロゴと目次で埋める3列構成にする
02紙の質感のクリーム地と、濃紺＋アンティークゴールドの飾り枠で“記念品”らしい格式を出す
03見出しの英字はスラブセリフ、和文のリードは明朝体にして、周年ロゴの鋭さと対比させる
04商品シリーズごとに同じ型（見出し帯→スライダー→一覧ボタン）を繰り返し、長いページでも迷わせない

再現MDに含まれるもの

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

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

nijisanji-8th-anniversary.katapick.md

1---
2title: "NIJISANJI 8th Anniversary 特設サイト 再現用デザイン仕様書"
3source: https://lp.shop.nijisanji.jp/nijisanji_8th_Anniversary/
4katapick: https://katapick.com/sites/nijisanji-8th-anniversary
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [周年, イラスト, 固定ナビ, カルーセル, セリフ体, ロングページ]
8launched: 2026-02
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# NIJISANJI 8th Anniversary 特設サイト — 再現用デザイン仕様書
17 
18> PCで開いても、スマホ幅のまま読ませてくる。にじさんじ8周年キャンペーンLPは、約400pxの中央列を左右の固定パネルで挟み、どの端末でも同じ読み心地を守っている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22