独自の軽量 WebGL ライブラリを用いた実装で軽快動作！株式会社 ACSL のスペシャルサイト

doxas : 2021-12-17 13:40:20

スピード感や疾走感のある切れのある表現

今回ご紹介するのは、ドローン関連事業全般で様々な機器の開発・販売、サービス展開などを行っている株式会社 ACSL のスペシャルサイトです。

今回のサイトは特に、産業用のドローン「SOTEN-蒼天」のために作られた特設サイトみたいですね。

サイトの実装は、株式会社スタジオディテイルズが手掛けており、特に WebGL 実装については @ko_yelie さんが自作した kgl という軽量ライブラリを使って実装されているのだそうです。

軽快でキレのある、かっこいいウェブサイトに仕上がっています。

株式会社 ACSL さんというと、これまでにもスタジオディテイルズさんと組んで印象的なウェブサイトをたくさん公開しています。

時には必要に応じて WebGL を使った実装がされることもあり、今回のサイトでも WebGL の高速な動作を活用した、軽快なグラフィックスを見ることができます。

特に今回のサイトでは、three.js や Pixi.js といった既存の有名ライブラリではなく、独自の機能を限定した軽量なライブラリを使っているということで、ロードや実行がとても軽快な印象です。

ページが表示された直後、イントロの演出から結構派手な演出が目に飛び込んできます。

縦に素早く走る、たくさんの光のラインのような演出は WebGL を使ったものみたいです。文字が残像を残しながら浮かび上がってくる演出も雰囲気が見事にマッチしていてかっこいいですね。

これは完全に個人の感想になっちゃうのですが、ドローンが飛び上がる際の動きというか、その勢いやスピード感を想起させるような演出ですよね。

暗い背景にぼんやりと浮かび上がるドローンの機体がサイト上の演出とも相まってすごく迫力があります。

この光のラインのような演出は、どうやら WebGL のインスタンシング描画を用いて負荷を低減させているらしく、よく工夫されているなと思いました。

その他にも、スクロールに連動したコンテンツの見せ方も工夫が凝らされていて見ごたえがあります。

後半には、画像がスクロールの勢いに応じて慣性で歪んだように表現される場面もあり、イージングの付け方や演出が発生している時間の長さなどにも一本芯が通ったような統一感のある味付けがされていますね。

今回のサイトで利用されているオリジナルのライブラリは、作者の @ko_yelie さんによると「最低限の機能だけしかないので汎用性はありません」とのことですが……

自分たちが作りたいウェブサイトや実装内容に合わせて柔軟にライブラリをカスタムできる「技術・スキル」があるとするならば、無理に汎用性を求めずともその時々の状況に合わせて柔軟に最大限のパフォーマンスを発揮できるんだろうなと思いました。

ドローンが空に舞い上がる際の垂直に素早く上昇するようなイメージを、サイト全体のデザインや WebGL 演出を通じて想像させてくれる完成度の高いウェブサイトだと思います。