通り過ぎるその瞬間に発生するエフェクトが味わい深い 株式会社Moty のウェブサイト
あまり見たことがない演出
今回ご紹介するのは、スペースデザインなどの事業を展開する、株式会社Moty のウェブサイトです。
社名の Moty にある y のシルエットを上手に活用した演出がキービジュアルに盛り込まれており、そのなかで WebGL を使った演出を見ることができます。
あまり見たことがない質感を実現していて興味深いです。
リンク：
線形な動きとそうでない動き
今回のサイトでは、キービジュアル部分と、特定のセクションの背景部分に WebGL が使われていそうです。
キービジュアル部分という言い方が正しいかちょっと怪しいのですが、トップページの冒頭部分で最初に表示されるシーンでは WebGL の演出によって独特な質感が実現されています。
これ言葉で説明するのがちょっと難しいのですが、なにか透明な物体を通して風景を見たときのような独特のディストーションが発生します。
この上のスクリーンショットで言うと、画面の右側あたりに色が滲んでズレている部分があるのがわかるでしょうか。
動いている様子はもっと滑らかで、違った雰囲気に見えるかもしれません。
この色のにじみ方、よくある感じの RGB ディストーションとは異なりすごく個性的な質感を持っており、ズームブラーと RGB シフトを組み合わせたようなかんじになっています。
コードまで見ているわけではないので完全に個人的な勘で書いてしまいますが、ディストーションしている部分以外のラインも、全部 WebGL で描画しているんですかね？
斜めに傾いた短冊状のラインは、微妙にグラデーションが変化するようになっていたり、エッジの部分がぼやけていたり、実は結構表情が違うんですよね。
よく観察してみると単純そうで実は奥深い、そんな演出だなと感じました。
WebGL で演出するうえで、あまり他で見たことがない質感に挑戦するのってなかなか大変なことだと思います。
単純にアイデアをひねり出す大変さというのもありますが、その生み出した演出が果たしてウェブサイトの意図や表現したいことにマッチするのかという問題もありますよね。
今回のサイトの演出ってどういう文脈やプロセスを経て誕生したのでしょうね…… すごく気になります。
まるでガラスを通して世界を見ているような個性的な演出で、サイトのタイトルにもあるとおり「もっとよくする」ということを追求する、まだ見ぬ世界を探求する気持ちが想起される、そんな演出だなと思いました。
ぜひチェックしてみてください。
