サウンドの制御も含めた世界観の作り込みがエグい！ Dior の Mother's Day スペシャルサイト

doxas : 2023-06-09 13:29:25

イヤホン推奨のウェブサイト

今回ご紹介するのは、Dior（ディオール）のスペシャルサイトです。

サイトのタイトルに Mothers day とあるので、いわゆる母の日をテーマにした特設サイトだと思います。

日本でも母の日という概念はすでに一般に広く浸透していますが、ちょっと調べてみると、世界的に同じタイミングで実施されることが多いようですね。

そうするとこのサイトはもう跡地ということになるのかもしれません。もしかするとすぐに見ることができなくなってしまうかもしれないので、その点ご注意ください。

今回のサイトでは、WebGL を使って背景の幻想的なビジュアルが描画されたり、一部オブジェクトが 3D で描画されたりしています。

使われているイラスト素材もタロットカード風の美しいデザインで、とにかく丁寧にこの幻想的な世界観を作り込んでいるような印象を受けます。

背景部分はモヤが掛かったような感じで絶えずアニメーションしており、色彩としてはそこまで複雑ではありませんが、グラデーションが流れる様子が美しいです。

完全に想像ですが、複数のノイズを重ねて動かしているような感じですかね……

すごく複雑な動きと濃淡で、いかにもノイズを動かしてます的な感じがしないと言いますか、物理現象をそのまま想像してしまうような絶妙な自然さがあります。

カードやホイール部分が 3D で描かれるので、なんとなく遠巻きに眺めているだけでも立体感がすごく強調されているように感じるのではないでしょうか。

登場する各カードには、それぞれなにかしらのテーマが与えられており、クリックすることで下層ページへとシームレスに場面が転換します。

それぞれのテーマごとに実際に販売されている製品がセレクトされており、サイト全体の味付けと見事にマッチしている感じがします。

こういうのってたぶん製品が先にまずあって、それに合わせてデザインやインタラクションを考えるのだと思うのですが（たぶん）、すごくきれいに一体感のある感じでまとまっているなと個人的には感じました。

また、下層ページではスクロールしてページを読み進めるにつれて音響効果が変化するようになっていて、少しこもったような感じに BGM が変化するのがこれまたすごくいいですね。雰囲気作りが本当に上手です。

WebGL の立体的な表現としては結構シンプルな内容なのですが、とにかく背景のゆっくりと雲が流れるような雰囲気が素敵です。

母の日というと、日本ではピンク色をキーカラーとしてデザインされることが多いように思いますが、海外だとそうとは限らないというのが、今回のサイトを見るとすごくよくわかります。

WebGL を使って上品で繊細なイメージの絵作りをするのってたぶん想像よりかなり難しいと思うので、個人的にはこの雰囲気が作れているということ自体にすごく驚きました。また、サウンド周りもかなりこだわって作られており、ビジュアルだけでなく全体としての完成度も非常に高いと感じます。