ディストーションを活用して複雑な質感やグラデーションを表現した CRZ Studio のウェブサイト

doxas : 2026-02-20 12:05:38

いろんなかたちのディストーション

今回ご紹介するのは CRZ Studio というウェブサイトです。

About を見る感じ、複数人のメンバーを抱えるスタジオというよりは、どちらかというと個人事業の屋号みたいなかんじなのかもしれません。

ウェブサイトはデザインもどこか洗練された雰囲気で、WebGL を使った演出も控えめかつ効果的な使い方に終止している感じがします。

今回のサイトの WebGL 実装には、大きく２つあります。

１つは、ページがロードされる際のローディング演出やスタジオ名のアルファベットに対するディストーションの演出を行うためのもの。

そしてもう１つはサイトの背景に描かれるグラデーションの描画です。

この上のスクリーンショットはローディング中の様子をキャプチャしたものですが、文字が歪んで表示されているのがわかるでしょうか。

静止画ではちょっとわかりにくいと思いますが、まるで水面に波紋が広がるようにしてアニメーションする様子はなんとも独特な質感があっておもしろいです。

また、背景のグラデーション模様もちょっと個性的な感じで、こちらはインタラクティブ性は特に仕込まれていないようですが、サイト内をさりげなく彩ってくれています。

今回のサイトの背景部分のグラフィックスは、先にも書いたように特にインタラクティブ性はないように見えます。

別の言い方をすると、マウスカーソルを動かしたりスクロール操作を行ったりしても、特に背景のグラフィックスが反応する感じではないんですよね。にもかかわらず、それならなぜ動画ではなくリアルタイムに描画する WebGL という選択肢を選んだのでしょうか。

もちろん、その真意は実装者ご本人に確かめてみなければわかりませんが、個人的な印象としては、軽量なシェーダによるリアルタイムグラフィックスには、動画とは違ってロードする容量が極端に少なくて済むというメリットがあると思えます。

時間がどれだけ経過しても WebGL のグラフィックスなら問題が起こりにくいですし、そういう意味でもあえて動画ではなく WebGL を選択しているのかもしれません。

今回のサイトに限らないですが、動画を置くにせよ WebGL でなにかを描画するにせよ、動くなにかで演出をするということにはコストがかかります。

動画であれば、容量の大きさや解像度の低さなどが障壁になるのだと思いますが、WebGL でリアルタイムに描画するとなれば実質的にはそれを処理するコードだけなので容量という意味では負担はほとんどありません。

ただ一方で、WebGL でやるとなると描画負荷の問題、また表現の幅が実装者の腕次第になるといった問題は発生してきます。