JUNNI
トップページ全体をひとつの canvas に描く、国内スタジオの中でも最もWebGLに振り切った構成。
- サイトURL
- https://junni.co.jp/
- クレジット
- JUNNI Inc.（株式会社ジュニ）
- 使用技術
- WebGLThree.jsGLSLAR / XR
「自由に、ユニークに。」を掲げる東京のクリエイティブエージェンシー JUNNI（株式会社ジュニ）。バーチャルギャラリー、ブラウザベースのAR/XR、ライブ配信プラットフォーム、NFTやWebサービス、イベント・入退場システムまで、デジタルとフィジカルをまたぐ制作をしています。
トップページは <canvas id="canvas"> ひとつに描画されており、DOMコンポーネントに3Dのアクセントを足すのではなく、ヒーロー表現そのものがWebGLシーンになっています。ホームページ内には Awwwards、The FWA、CSS Design Awards、The Webby Awards、CSS Winner、CSSREEL、Design Awards Asia の受賞ロゴが並びます。
【参考になるポイント】
・キャンバス1枚で完結する構成は、Garden Eight のDOMミラー方式との比較材料として分かりやすい。同じ「WebGL主体の国内スタジオサイト」でも設計思想が正反対
・約785KBのエントリーバンドルに gl_FragColor が36、ShaderMaterial が16、WebGLRenderer は1。単一シーンに多数のカスタムマテリアルを載せて一括合成している
・ブラウザAR/XRやバーチャルギャラリーが実際の事業領域なので、サイトのWebGLがそのままサービスのデモとして機能している
・受賞ロゴがサードパーティのリストではなくホームページのマークアップ内に置かれており、実績の見せ方としても参考になる