いまだかつてない流体エフェクトの使い方に驚くこと間違いなし！ PLST のウェブサイトがすごい
丁寧に作り込まれた「質感」
今回ご紹介するのは、PLST というファーストリテイリングの展開しているブランドのウェブサイトです。
流体エフェクトを利用したウェブサイトは数あれど、こういう使い方で流体系のエフェクトを用いているのはかなり珍しいケースなんじゃないでしょうか。
波の動きとその色によって、見事に製品のコンセプトをビジュアルで表現しており、ウェブサイト全体の実装レベルの高さも相まって思わず驚きのため息が漏れること間違いなしの完成度となっています。
リンク：
WebGL 実装部分以外にも注目したい
今回のサイトは、パッと見た印象というか…… ウェブの制作側の視点から離れて、一般のエンドユーザーの目線で見てみるとすごくわかりやすいウェブサイトです。
なんというか、パーッと流れで見ていくことができてしまうというか、流れるようにコンテンツがストレスなく展開していきます。
素早すぎず、かといって遅すぎず、絶妙なテンポでコンテンツが遷移していくその様子はとても自然で、どこか有機的な感じさえしてきます。
やや彩度の低い背景に、明るいオレンジ色の流体が発生します。
カーソルを動かしていなくてもなにかしらの契機に応じて自動的に流れが起こるようになっていて、場面が横方向にスライドする際には、その変化に応じて背景もシンクロします。
背景だけでなく、テキストやボタンなどもかなり有機的な動きをするので、こう、無機質な、硬質なものがほとんどないような感じなんですよね。
だからなんとなく、流れるように自然と閲覧していくことができてしまうのだと思います。
言葉で説明するのが難しいのですが、流体が発生し背景が明るくなっている部分では、手前に描かれている人物のシルエットも変化します。
CG 用語でいうとリムライトみたいな感じで、ぼんやりと外側が明るく照らされたようになるんですよね。
サイト内のあらゆる要素が孤立することなくコンテンツと一体になっていて、そのうえ上手に連携しながらストーリーが組み立てられているからこそ、見ているほうの人間は思わず見入ってしまうのでしょうね。
冒頭にも少し書いたように、古今東西、WebGL で流体を用いたウェブサイトは枚挙に暇がないといいますか、それこそ無数に存在します。
しかし流体で熱の流れ、あるいはその空気感を演出しているケースというのはすごく稀有な例だと思います。
また、ウェブサイト上の要素がいずれもゆったりと優しく動くようにトーンが統一されていたり、サウンドをコンテンツの一部として盛り込んだり、ビジュアルの圧だけではない細部の作り込みが圧巻です。
ぜひチェックしてみてください。
