EventJapanPicked 2026.09.26

なごりおしい夜 - クリエイター交流会

イベント / ライブのWebデザイン参考 — クリエイター交流イベント

出典: nagorioshi-yoru.studio.site

Editor's note — 編集部の視点

交流会の告知なのに、FVはランプと人影だけ。

名古屋のクリエイター交流会「なごりおしい夜」の公式サイトは、ざらついた黒地に吊りランプの光と人影だけを置き、日時や会場より先に“帰りたくない夜”の余韻を手渡してくる。

PipTrends & VTuber

え、待って、前回のポスターまで Archive にちゃんと残してあるの、推せる！！第二夜の告知なのに、一回目の夜もいっしょに見せてくれるから、初見でも「続いてる会なんだ」って安心できるやつ！

1ランプの光の円錐を大きく広げた生成りの面に、極太の明朝でタイトル。FVの光の中へ入っていくような導入になる
2情報・ゲスト・タイムテーブルは、かすれた罫線とラベルで区切った表組み。情緒のあとは、きちんと読ませる
3右端に縦組みの「イベントに申し込む」を常に置く。静かな画面でも、申し込みの入口を見失わない

Color

なごりおしい夜 - クリエイター交流会の配色

Typography

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

本文・表組み・縦組みのナビ

Aa あア

使用: リュウミン R-KO
代替: Shippori Mincho

強調・小見出し

Aa あア

使用: リュウミン M-KO
代替: Shippori Mincho

数字・英字の一部

Aa あア

使用: Poppins
代替: Poppins

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

本文The quick brown fox — 参考を型にする14px · 1.6 · 400

Structure

ページ構成（上から順）

01
ヒーロー
ノイズのかかった黒地の中央に、線画の吊りランプと光の円錐、その下でうつむく人影だけを置く。右上に縦組みの「クリエイター交流会なごりおしい夜」、右下に縦組みの「イベントに申し込む」。
02
タイトル
光の円錐を大きく広げた生成りの面に、壁に映る人影と極太の明朝体「なごりおしい夜」を置き、イベントの趣旨を和文と英文で添える。下端は黒へ溶けるグラデーション。
03
開催告知
左にイベントのポスター、右に「2026.10.17 SAT 名古屋造形大学にて開催！」の大きな見出しと会場写真のサムネイル。続けて会場と開催内容の紹介文、申し込みリンク。
04
Information
かすれた罫線で区切り、日時・会場・参加費・飲食などを番号付きの表組みで並べる。
05
Guest・Timetable
ゲストを肩書き・名前・リンク・顔写真・紹介文の行で並べ、時刻と内容のタイムテーブルを同じ表組みで続ける。
06
Sponsors・Teaser
協賛企業のリスト、ティザー映像のプレーヤーと物語風の文章、枠で囲んだ「イベントに申し込む」ボタン。
07
Archive・Organizer
前回2025年のポスターと振り返りの文章を Archive として残し、主催者の紹介で締める。

Interaction

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

FVのランプの光が、次のセクションで画面いっぱいの生成りの面に広がっている。スクロールに合わせて光の円錐を clip-path で拡大していく演出と思われ、GSAP ScrollTrigger や STUDIO のスクロールアニメーションで再現可能
右端の「クリエイター交流会なごりおしい夜」と「イベントに申し込む」は縦組みの固定表示。position: fixed と writing-mode: vertical-rl で実装できる
画面全体のざらついた質感はノイズテクスチャの重ね合わせ。半透明のノイズ画像を固定で全面に敷くと再現可能
ティザー映像はページ内の video プレーヤーで再生する

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

なごりおしい夜 - クリエイター交流会をスクロールしたときのフレーム1 — 01

なごりおしい夜 - クリエイター交流会をスクロールしたときのフレーム2 — 02

なごりおしい夜 - クリエイター交流会をスクロールしたときのフレーム3 — 03

なごりおしい夜 - クリエイター交流会をスクロールしたときのフレーム4 — 04

なごりおしい夜 - クリエイター交流会をスクロールしたときのフレーム5 — 05

なごりおしい夜 - クリエイター交流会をスクロールしたときのフレーム6 — 06

検出された技術:STUDIOGoogle Fonts

Reproduce

再現するときのポイント

01FVは線画のランプと人影だけにし、テキストは画面の端に縦組みで小さく置く
02背景は純黒ではなく #1c1e1f のチャコールにし、光・文字・罫線をすべて生成りの #e8e2d6 に揃える
03情報セクションは明朝体の表組みで統一し、かすれた罫線とラベルで区切る
04申し込み導線は縦組みの固定リンクにして、静かな画面を崩さずに常に見せる

再現MDに含まれるもの

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

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

nagorioshi-yoru.katapick.md

1---
2title: "なごりおしい夜 - クリエイター交流会 再現用デザイン仕様書"
3source: https://nagorioshi-yoru.studio.site/
4katapick: https://katapick.com/sites/nagorioshi-yoru
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [ダーク, イラスト, 縦書き, セリフ体, モノクロ, ロングページ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 22
13generator: Katapick
14---
15 
16# なごりおしい夜 - クリエイター交流会 — 再現用デザイン仕様書
17 
18> 交流会の告知なのに、FVはランプと人影だけ。名古屋のクリエイター交流会「なごりおしい夜」の公式サイトは、ざらついた黒地に吊りランプの光と人影だけを置き、日時や会場より先に“帰りたくない夜”の余韻を手渡してくる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22