工場を模したような 3D 演出がスクロールに連動! 雰囲気満点の Turbulent のウェブサイト
細かいところまで作り込まれた 3D シーン
今回ご紹介するのは、カナダにあるクリエイティブ・スタジオ、Turbulent のウェブサイトです。
プロダクトデザインや VR コンテンツ事業などを行っている企業みたいなのですが、ウェブサイト上にも 3D のインタラクティブな演出が盛り込まれています。
まるでなにか新しいものを生み出す工場のような、独特な雰囲気がなんともかっこいいですね。
リンク:
スクロールに連動したスムーズな動きに注目
今回のサイトでは、WebGL 以外にも、CSS や SVG、さらには動画なども組み合わせて多彩なシーンが演出されています。
トップページに現れる工場のようなシーンは特に圧巻の仕上がりになっており、スクロールに連動してボールのような発光するオブジェクトが動く様子は本当に見事です。
細かく観察してみるといろいろな部分が同時に動いていて、その割に派手すぎず、どこかポップな印象もあり、サイトの雰囲気にマッチしていますね。
この上の画像でいうと発光するオブジェクトがいくつか映り込んでいると思うのですが、ページがロードされた直後はボールは1つしかないんですよね。
それがスクロールに連動するように、いろいろなところから登場しては転がっていったり落っこちていったり……
とにかくサクサクと動きます。
ライトの演出も丁寧に作られており、質感もバッチリです。
冒頭にも書きましたが、今回のサイトでは SVG や動画を使ってシーン上のビジュアルを整えているところもあります。
こういった「動画や SVG と、WebGL とのバランス」みたいなところは、意外と大切だったりしますよね。
私なんかはなんでも 3D だったら WebGL で演出しちゃったほうが早いなあとか安易に思ってしまったりするのですが、ユーザー体験を損ねないようにしっかりと工夫が凝らされているように思いました。
色使いも自然でとても見やすいです。
WebGL の実装という意味では、トップページ部分に表示される工場のような演出がとにかく渋くて可愛らしい、不思議な質感で面白いと感じました。
ゲームのワンシーンのような、独特な空気感を漂わせているのは、彼らが VR などのエンターテインメント寄りのコンテンツに長けた集団だからなのかもしれません。
とは言え、WebGL 以外の部分にも手抜きがあるわけではなく、デザインも技術も高いレベルでまとまっていると思います。
ぜひチェックしてみてください。