水が徐々に捌けていくような柔らかい演出がよいアクセントに！デザインスタジオ Stuuudio のウェブサイト

doxas : 2019-08-01 13:37:04

フォントも独特で不思議な世界観

今回ご紹介するのは Stuudio というクリエイティブ・デザインスタジオのウェブサイトです。

偏見や悪い意味で言うつもりはまったくありませんが、創業者の方が女性だからでしょうか……配色といいデザインといい、とても柔らかい印象に仕上がっています。

こういう雰囲気を作るのって少なくとも私なんかにはとても無理なので、単純に見ていてすごく引き込まれました。

今回のサイトでは、WebGL が使われている箇所は結構たくさんあるのですが、その演出はひとつのパターンに統一されています。

あくまでも、さりげなく演出に華を添える感じの、主張しすぎない WebGL の活用事例のひとつだと思います。

トップページで最初のローディングが完了した直後にもその演出を見ることができるのですが、まるで水溜りの水が捌けて引いていくような…… 水玉っぽい印象を受ける演出になっています。

当記事のトップ部分の画像と、この上の画像を見比べてみるとわかるかと思うのですが、背景部分がまだら模様のように浮き上がっているのがわかるかと思います。

アニメーションは比較的一瞬のことなので、じっくりと観察することが難しいのですが、こういう演出ってデザインの意図としてはどういう意味があるんでしょうね……

やっぱり、スクロール操作を行ったユーザーの意識を、写真に対して向けさせるのが狙いなのかな……

この上の画像も、演出の途中をキャプチャしたもので、左側にある男性の顔写真や、下から今まさにせり上がってきている写真の部分などに、背景の部分がマスクされている箇所が見えていますね。

このマスクの処理に対してのみ、WebGL が使われていて、一度はっきり画像が表示されたあとは一切インタラクティブなエフェクトは掛かりません。

こういう割り切りで WebGL を使うパターンって、WebGL 実装者としての自分の目線だと、逆にもっと盛りたくなるというか…… 実装するのに勇気が要りそうに思ってしまうのですが、演出の意図的にこれで必要十分ということなのでしょうね。

今回のサイトでは、劇的に珍しいとか派手だとか、そういった演出の用途としては WebGL は用いられていません。

あくまでも、デザイン的な意図や、ユーザーへ提示したいコンテキストに応じた演出の補助として、WebGL がうまく活用されていると思います。

こういったシンプルな演出を簡単にサイトに盛り込めるような、それこそ CSS 並に割り切った仕様で作られているライブラリとか、まあ探したらありそうな気もしますが、結構需要があるのかなと思ったりしました。