← Selected WorksCase 06 / 06
VTuber プロジェクトの公式サイト｜Web デザイン・実装
ぼんきゅっばん 公式サイト
クリエイター特化型 VTuber プロジェクト「ぼんきゅっばん」の公式サイト。キャッチコピー『微かな声から、確かな時代へ』を、スクロールで夜から昼へ移る空とホロカードで表現した。
- Period
- 2026.09公開準備中
- Role
- Web デザイン / 設計 / 実装 / 3DCG・GLSL 演出
- Team
- Web 担当（デザイン・実装）
Overview
企画書の「つくる人と表現する人の境界をなくす」というコンセプトと、キャッチコピーを演出の軸にしました。背景の WebGL では「声のオーブ」がヒーローでは小さく脈打ち、ロードマップでステップが進むごとに大きく明るく育っていきます。
タレントを前に出し、大きく見せる文字は英字に任せて和文は読みやすさを優先する、という配信系の公式サイトの作法にならっています。
What I did
- 01
夜から昼へ移る空
ロードマップをピン留めスクロールにし、ステップが進むごとに背景の空が「夜の微かな声 → 夜明け → 確かな時代（昼）」へ移ります。マウスの軌跡は流体のように空をゆがめます。
- 02
奥行きのあるホロカード
タレントの紹介は、影・厚み・枠・箔・キャラクター・ツヤを別々の奥行きに置いたカード。キャラクターは背景と逆向きにずれる視差で浮き、切り替えのたびにグリッチで入れ替わります。
- 03
読み込みの作り込み
フォント・ロゴ・立ち絵のデコードとシェーダーのコンパイルを幕の裏で済ませてから幕を上げ、初回の再生でカクつかないようにしました。
- 04
スマホの最適化
スマホではメンバー一覧を横スワイプにするなどスクロール量を減らし、390 幅でページ全体を約 13,700px から約 11,000px に縮めました。
Facts
- 構成
- 1 ページ・8 セクション
- スマホのページ長
- 約 13,700px → 約 11,000px（390 幅）
Stack
React · Three.js（React Three Fiber） · GLSL · GSAP ScrollTrigger · Lenis · Cloudflare Workers
Figures
