それはまるで WebGL で表現されたピタゴラスイッチ！シンボリックな造形が面白い株式会社テックフラッグのウェブサイト

doxas : 2023-02-24 13:04:01

これ考えたひと天才か……

今回ご紹介するのは、ゲームやソフトウェアの自動化や効率化を行うソリューションを提供する、株式会社テックフラッグのウェブサイトです。

自動化や効率化、という同社の手掛ける事業内容にピッタリとマッチしたウェブサイト上の表現が随所にあり、どこか抽象的でありながらも事業内容をわかりやすくビジュアルに落とし込んだデザインとなっています。

このサイトの導線から全体像まで、こういう形で表現・デザインしたということにまず驚きますし、それを実装した実装者の手腕にもびっくりです。

今回のサイトでは、WebGL を使っていることがいい意味で一見しただけではわからないかもしれません。

画像や、あるいは SVG などで実装するのが王道のように思えるような部分が今回のサイト上では WebGL で実装されているんですよね。

動作はさくさくと軽快ですし、アニメーションの付け方も本当にうまくて思わず見入ってしまいます。

どうやらこれらの一連のアニメーションする各パーツは、Lottie と WebGL を組み合わせて利用することによって動かしているみたいですね。

Lottie についてはここでは詳しく触れないですが、わかりやすく言えば、After Effects で作ったモーションをウェブで利用できる形に変換してくれるツールのようなものです。

通常はアニメーション付きの SVG にするという利用方法がほとんどだと思いますが、今回はこれを WebGL で制御することによってフラグメントシェーダで質感を変化させているみたいです。

今回のケースでは、まるでピタゴラスイッチのように連動して動いている各種オブジェクトが、フラグメントシェーダでノイズを加えた形でカラーリングされているようです。

こういったシンプルなシェイプの集合を、WebGL のスクリプトで手書きで全部制御するというのはむちゃくちゃな工数が掛かってしまうので、ツールと組み合わせつつも表現の質には妥協しない、というのがこの事例のおもしろいところだと思います。

画像が画面に現れる際の独特なエフェクトの掛かったトランジションもすごくかっこいいですし、あらゆる面で完成度の高い実装だと感じました。

各種ギミックは実は社名である「TechFlag」の形をしているんですよね…… このあたりのアイデアもすごいです。

WebGL をこういう感じで使っているのは、世界的に見てもまだまだ珍しい事例だと思いますし、なによりこれらのたくさんのアイデアをこうして１つの形にまとめているということに個人的には驚いてしまいます。

Lottie 使えば複雑なモーションもウェブで表現できるだろうとか、オブジェクトを組み合わせて社名の形にしてみようとか、１つ１つのアイデアはそこまで奇抜ではないと思うんですよね。

でもそれらのアイデアがこうやって完璧な状態で組み合わされ、それぞれの意味を最大化させつつ１つのウェブサイトがこうして公開されているということの奇跡に本当にびっくりしてしまいました。