淡いグラデーションで魅せる印象的な絵作りが素晴らしいデジタルデザインスタジオ Dezea のウェブサイト
サウンドも含めて雰囲気が秀逸
今回ご紹介するのは、デジタルデザインスタジオ Dezea のウェブサイトです。
アワードなどの受賞歴もかなりあるようなので、知っている人も結構いらっしゃるかもしれませんね。すごく雰囲気の良い、洗練された印象のウェブサイトに仕上がっています。
流れるような流体風のエフェクトや BGM など、とても凝った作りになっています。
リンク：
Showcase / Dezea® - Designing Ideas™
思わずカーソルを動かしたくなる
今回のサイトでは、派手な 3D 表現などは使われていません。その代わり、サイト全体のトーンに合わせた流体のようなエフェクトが上手に組み込まれています。
サイトがロードされたあと、まず表示されるシーンでは画面全体にグリッチのようなわずかなディストーションが掛かるエフェクトを見ることができます。
画像だけを見ると背景の模様もリアルタイム CG のように感じるかもしれませんが、模様そのものは画像由来の静止画です。
背景の模様が微妙にガタガタと崩れているように見えるかと思いますが、これが意図的に加えられた効果です。
流れている BGM に連動したちょっとしたオーディオビジュアライゼーションになっていて、音に合わせてリアルタイムに変化します。
またこれは静止画ではわかりにくいと思うのですが、カーソルを動かすことで、その場所に波紋のような、ちょっとした流体風のエフェクトが発生するようになっています。
この流体エフェクトはすごく淡いトーンなので静止画だと全然風合いが伝わらないのですが……
サイト上でカーソルを動かしたときの印象は結構強くて、かなり見た目のインパクとしては大きいです。
また、THE STUDIO と書かれた About ページでは心臓の鼓動に合わせて流体と同じように淡いトーンの波紋が発生する箇所もあります。
ここでは流体効果だけでなく、小さなパーティクルが飛び散るようなエフェクトも同時に発生するのでより視覚効果が強くなっています。
全体的に落ち着いたトーンのカラーに、大胆かつなめらかなアニメーションが多く取り入れられており、サイト内のほとんどの要素がインタラクティブに変化しながら表示されたり消えたりします。
WebGL は演出効果としてはかなり積極的に取り入れられていますが、あくまでも補助的な効果という感じでそこまで前面には出てきません。
そのあたりのバランス感覚が素晴らしくて、とてもかっこいいです。
ぜひチェックしてみてください。
