分断された文字がまるでチーズのように伸びる!? デザインスタジオ OVERSIZE STUDIO のウェブサイト

doxas : 2019-10-07 14:19:35

一見めちゃくちゃシンプルだが……

今回ご紹介するのは、OVERSIZE STUDIO というデジタルデザインスタジオのウェブサイトです。

こちらのサイト、もしかしたらベータ公開されているものかもしれず、リニューアルされたりすると見られなくなってしまうかもしれないのですが、現状ではトップページが置かれているだけの超シンプル構成です。

他のページや、リンク文字なども一切置かれていないので、かなりベータ公開感が強いのですがトップページに盛り込まれている演出があまりにも面白かったので、ご紹介しようと思います。

リンク:

OVERSIZE STUDIO

柔らかい物体が伸びるような質感を見事に再現

今回のサイトは、黒い背景に白い文字が横に流れるだけの超シンプルな構図です。

一応、画面の下の方に小さな文字でメールアドレスが(時折)表示されたりもするので、彼らに連絡を取る方法だけはこのサイト上から得られるわけですが……

それ以外の情報はほとんどありません。

一見、ただ文字がスクロールするだけのサイトなのかなと思ってしまうのですが、画面内をクリックしてやると、文字が切り離されて伸びるような、独特な演出を見ることができます。

静止画で見ると、まっすぐに UV を伸ばしているだけに見えるかなと思うのですが、ほんの少しだけ微妙にズレが生じるようになっていて、なんとも有機的というか……

粘りのある柔らかい物体を引き伸ばしたかのような、独特な粘性を感じるアニメーションになっています。

上段と下段で、同時に画面上に2つまでこの演出が出せるみたいなのですが、思わずいろんなところをクリックしたくなるような、不思議な質感です……

そして、今回のサイトにはもう一つ、外見が大きく変化するエフェクトが盛り込まれているのですが……

それが発動した瞬間をキャプチャしたのが、この上の画像ですね。

これは画面内をクリックしたままホールドしておくと、2~3秒後に発生します。

まるで異次元への扉を開いてしまったかのように、白と黒の世界が反転してしまいます。演出そのものの迫力もなかなかのもので見応えがありますね。

今回のサイトは本当にシンプルに徹していて……というかどちらかというとベータ公開なのかなと疑いたくなるような感じの構成なのですが、とは言え組み込まれている WebGL のエフェクトはすごく面白い特徴的なものになっています。

特に、まるでチーズのように文字が伸びるやつ……これとっても面白いですね。

単に UV を引き伸ばしただけではなく、上下に少しだけたわむような感じで動くのも、すごくリアリティがあって気持ちがいいです。

ぜひチェックしてみてください。

リンク:

OVERSIZE STUDIO

share

follow us in feedly

search

search

sponsor

social