動画や画像をディザリングして表示するエフェクトが個性的でたのしい DASS のウェブサイト
コンセプトが明確でかっこいい
今回ご紹介するのは DASS という空間デザイン系のスタジオのウェブサイトです。
いわゆるイベントや展覧会など、オフラインで実施する空間演出を手掛ける企業のようですね。
ウェブサイトのほうはかなりシンプルにまとめられており、そこに WebGL の演出がほどよくいいアクセントになっています。
リンク：
Design and creation of exhibition stands | DASS exhibition booth
美しいディザ
今回のサイトでは、いわゆる 3DCG 的な意味での表現はほとんどありません。
あくまでも、画像と動画に対してエフェクトを適用するためだけに WebGL を使っているような感じですね。
たぶん Pixi.js を使っていて、そういう点でももう平面的な演出に割り切って WebGL を導入している感じなんだと思います。
ページが表示された直後、大きなロゴマークが大胆に配置されています。
ここでさっそくベイヤー配列を利用したようなディザリング処理が行われていて、ドットの密度を使って濃淡を表現した個性的なビジュアルを楽しむことができます。
カーソルを動かすと、その周辺だけ明度が下がるようなインタラクティブ性もあります。
サイト内のすべての画像が一律にこういった演出を施されているわけではなく、なにかしらの意図が存在する場合に限定してエフェクトを適用しているようです。
このあたりは、わたしはデザインの素人すぎてそうである場合とそうでない場合の違いがわからない部分もあるのですが……
事例の紹介など、しっかりと状況を伝えたい画像などには演出が掛かっていない感じがするので、そのあたりもきちんと計画したうえで作られているのでしょうね。
ディザリングはかなり古くからある手法ですし、どこかレトロな風合いというか、独特のビジュアルがおもしろい雰囲気を生み出します。
現代でもたまに狙ってこういった表現をしているウェブサイトを見かけますが、今回のサイトの場合は全体のデザインとの親和性、利用するシーンへの意味付けなども含めてとても完成度が高いなと感じました。
特にトップページのファーストビューはすごくいいですね。個人的にしびれました。
ぜひチェックしてみてください。
リンク：
Design and creation of exhibition stands | DASS exhibition booth
