イベントの公式サイト｜来場案内・電子チケット・技術スタッフ向けページ

DHU Summer Fes 2026 公式サイト

学生主催のライブイベント DHU Summer Fes 2026 の公式サイト。来場者向けの案内に加えて、事前の来場登録、電子チケット（LIVE PASS）、会場のチェックイン、技術スタッフ向けのブリーフィングまでを一つのサイトで受け持った。

Overview

トップは来場者向けの案内です。ポスターのような一枚目に出演ユニットと日程を置き、その下にタイムテーブル、アクセス、注意事項、電子チケットへの入口を並べました。ポスターの背景の光の筋は、GLSL のシェーダーでリアルタイムに描いています。

当日に向けては、事前の来場登録、スマートフォンで見せる電子チケット、入口のチェックインまでを用意し、受付で実際に使いました。照明・映像・音響のスタッフに向けては、会場を 3D で再現した Tech Brief のページを別に作っています。

01
LIVE PASS（電子チケット）
チケットは 3D で描き、スマートフォンを傾けると角度に合わせて動きます。いま演奏中の出演者や次の出演者はタイムテーブルから自動で出し、開演までや次回までのカウントダウンも表示します。入口のコードを読むとチェックインになり、日ごとの来場を記録します。
02
来場登録はスプレッドシートが正本
登録フォームの内容は Google スプレッドシートに書き込み、運営はいつもの表で名簿を扱えるようにしました。検索用にはサイト側のデータベース（D1）に写しを持ち、行の削除や修正も 5 分ごとに同期します。
03
Tech Brief（技術スタッフ向け）
トラス、照明、卓を置いた会場を 3D で組み、スクロールに合わせてカメラが会場を巡ります。照明・映像・音響・ステージと電源の各所に印を付け、器具の数や配置、DMX のユニバースや制御の方法までをその場で読めるようにしました。準備から撤収までの段取りと運営スタッフの紹介もここにまとめています。

Next.js · React Three Fiber · GLSL · GSAP · Lenis · Cloudflare Workers · Cloudflare D1 · Google Apps Script