個性的なトランジションエフェクトでテンポよくビジュアルを演出する 21 TSI のウェブサイト

doxas : 2025-04-11 12:06:53

技術を複合的に組み合わせて表現

今回ご紹介するのは 21 TSI という組織のウェブサイトです。

サイト内に書かれていることを見ると、どうやらスポーツ関係の研究開発などを行っている企業みたいです。

WebGL を演出の軸に据えつつも、DOM や CSS も駆使して非常に凝ったビジュアルを実現しています。

今回のサイトの WebGL 演出は、絶えず背景部分に配置された状態のままコンテンツが進行するようになっています。スクロールするのは手前に配置された HTML 要素のみで、canvas 要素は固定された状態になっている感じですね。

トップページの冒頭部分では、表示された直後は全体にブラーの掛かったような外見になっているのですが、スクロールしてやるとそれが徐々に鮮明になっていきます。

このあたりは CSS で表現しているのではないかなと思います。

CSS などを駆使して装飾や仕込みがされているテキストも多くて、表現が WebGL だけでなく複合的な技術の組み合わせになっていることがパッと見てすぐにわかります。

スクリーンショットではほとんどわからないと思いますが、ごくわずかに明度が変化する流体っぽいエフェクトも掛かっていて、手が込んでいますね。

スクロール操作を続けていくと、今度は画像が切り替わる際のトランジションエフェクトが発生します。

上の２枚の画像を見比べてみると、一見、普通にフェードインしてきているようにも見えるかもしれません。

実際に動いている様子はもっと複雑で、UV が背景によって歪むような、個性的なトランジションエフェクトになっています。

画像が普通にフェードインで切り替わるところと、トランジションエフェクトを伴って切り替わるところと複数のバリエーションがあり、演出に対するこだわりが感じられます。

今回のサイトとは直接関係のない文脈の話を書いてしまうのですが、最近は本当に…… 流体とかはもう当たり前のエフェクトという感じがしてウェブ上での演出という意味では時代が変わった感がすごいです。

今回のサイトの場合は流体はほとんどおまけという感じで、むしろ演出の肝はトランジションエフェクトのほうだと思います。

画像をパッと切り替えるだけなのか、フェードさせるのか、はたまた固有のトランジションエフェクトを伴うようにするのか。

自分はデザインは素人ですが、それでもこういったものを見てしまうと動的なデザインというものの難しさや奥深さに思いを馳せてしまいます。