インタラクティブな画像処理的なアプローチが面白い Pixi.js を駆使した Gusto IDS のウェブサイト
老舗クリエイティブエージェンシー Gusto
今回ご紹介するのは、知っている人は知っている、老舗のクリエイティブ・エージェンシー Gusto のウェブサイトです。
彼らの名前を直接は知らなくても、たぶん、フロントエンドに関わっているのなら、アワードサイトなどで一度は彼らの仕事を見たことがあるんじゃないでしょうか。
今回のご紹介するのは彼らのホームとなるウェブサイトなのですが、Pixi.js を巧みに利用し、シェーダのエフェクト効果をふんだんに盛り込んだ見事な内容となっています。
まるで円グラフのような面白い Work 紹介
今回のサイトは最初ちょっとだけロードに時間が掛かるかなという感じがするのですが、動画などを結構たくさん使っているので、それでローディングが若干長めになっているのかなと思います。
一度ローディングが完了すれば、あとはインタラクティブにシーンが切り替わっていくようになり、動作は非常にスムーズになります。
最初にデフォルトで表示されるのは Work のページなのですが、彼らがこれまでに制作してきた様々な事例が掲載されています。
まるで円グラフのような、あるいはドーナツのような……ちょっと独特な形状のシーンには、隙間から動画が見えるような感じになっています。
低く、静かなトーンの BGM が流れており……ちょっと神秘的な感じの雰囲気です。
シーン内に置かれている様々なオブジェクトがマウスカーソルによってインタラクティブに反応するのですが、自然に放っておくだけでも、シーンには微妙な変化が起こるようになっています。
その最たる例が、この下の画像にあるような、砂が風に吹かれて引き伸ばされたような、独特なエフェクト。
このようなエフェクトがシーン全体に適用できることからも想像できるかと思いますが、このページ内の多くのものが WebGL によってレンダリングされたオブジェクトです。
この砂が引き伸ばされたようなエフェクトの他にも、若干ありきたりではありますが、グリッチエフェクトのようなものが使われていたりする部分もあります。
シーンが遷移する瞬間など、ちょっと目を凝らしてみると様々な変化が同時多発的に起こっていることがわかるのではないでしょうか。
サイト全体が、いろんな意味でエフェクト盛りだくさんな感じに設計されていて、About ページなんかもかなり雰囲気が見事です。
色調は暗い感じで統一されているのに、変に卑屈な印象がまったくしないのも、すごいと感じました。このあたりは、デザインが素晴らしいからなんだろうなって思うのですが、私自身がデザインに関しててんで駄目なので言葉でうまく説明できませんｗ
海外のアワード系サイトに掲載されているような、非常にモダンで、インタラクティブ性やアニメーション処理に優れたサイトを多く手掛けているスタジオだけあって、その本拠地も非常にレベルの高い仕上がりになっています。
私自身、WebGL の API を多少は理解しているつもりですが、だからといってそれが即そのまま優れた作品を生み出せることとイコールとはいきません。
また同様に、いくらデザインや、あるいは技術に特化していても、それらを「ウェブサイト」としての完成度の高さに結びつけていくことは、さらに高度な錬精術が必要なんじゃないかなって最近はよく感じています。
今回のサイトは、デザイン、インタラクティブ性、そしてグラフィックスの美しさなど、様々な点で均衡の取れたハイレベルなサイトだと感じました。
ぜひチェックしてみてください。
