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

1. 01

   ヒーロー

   ノイズのかかった黒地の中央に、線画の吊りランプと光の円錐、その下でうつむく人影だけを置く。右上に縦組みの「クリエイター交流会 なごりおしい夜」、右下に縦組みの「イベントに申し込む」。

2. 02

   タイトル

   光の円錐を大きく広げた生成りの面に、壁に映る人影と極太の明朝体「なごりおしい夜」を置き、イベントの趣旨を和文と英文で添える。下端は黒へ溶けるグラデーション。

3. 03

   開催告知

   左にイベントのポスター、右に「2026.10.17 SAT 名古屋造形大学にて開催！」の大きな見出しと会場写真のサムネイル。続けて会場と開催内容の紹介文、申し込みリンク。

4. 04

   Information

   かすれた罫線で区切り、日時・会場・参加費・飲食などを番号付きの表組みで並べる。

5. 05

   Guest・Timetable

   ゲストを肩書き・名前・リンク・顔写真・紹介文の行で並べ、時刻と内容のタイムテーブルを同じ表組みで続ける。

6. 06

   Sponsors・Teaser

   協賛企業のリスト、ティザー映像のプレーヤーと物語風の文章、枠で囲んだ「イベントに申し込む」ボタン。

7. 07

   Archive・Organizer

   前回2025年のポスターと振り返りの文章を Archive として残し、主催者の紹介で締める。

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

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

検出された技術:STUDIOGoogle Fonts

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

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