ロシアの LEXUS ブランドのウェブサイトがかっこよすぎる！ Pixi.js を利用した 2D 表現の極致！
BGM からインタラクションまで全てが極まってる！
今回ご紹介するのは、当サイトでは珍しいロシアのウェブサイトです。
ロシアの LEXUS LC のサイトなんですが、日本でもこのクオリティのまま出してくれないかなと思うほどの、ものすごい完成度のサイトになっています。
実装には Pixi.js が利用されており、3D というよりは、どちらかというと平面的な表現が多めです。しかし、そのかっこよさは 2D とか 3D とか、そういう次元で語り尽くせない奥深いものになっています。
WebGL 実装部分以外にも要注目なウェブサイト
今回のサイトはトヨタの高級車ブランドである LEXUS の特設サイトです。
高級車のブランドイメージに合わせてサイトが作られていることもあり、非常に高級感や洗練されたかっこよさを強調した演出が多く使われています。
サイト内の多くのパーツは、美しくイージングするアニメーションでグリグリと動きますし、マウスカーソルがホバーした際の効果音、大人の男性が持つ渋さを表現しているかのような BGM など、様々な効果が相乗的にサイト全体を盛り上げています。
そしてこのサイトの演出で非常に面白いのが、マウスカーソルの動きに連動する「歪んだレンズのような演出」です。
下にある２枚の画像、背景の赤いラインの傾きに合わせて微妙に車体が歪んで映っているのですが、静止画でうまく伝わるでしょうか……
これ、どうしても写真ではわかりにくいと思うので、ぜひ本来の動きを実際にサイトに行って見てみてほしいところです。
この波打つラインのような部分に合わせて、一部分だけが拡大したように歪む演出がとてもかっこよくて、他ではあまり見たことのない、独特な雰囲気を作っています。
この下の画像だと、背景の「０１」と書かれた部分が少しズレているので、より効果がわかりやすいかもしれません。
その他のサイト内に掲載されている多くの部品が、WebGL とは無関係なものであっても非常に丁寧に作ってあります。
というか、あえて WebGL らしさを強調するようなことはされていなくて、あくまでもサイト全体の質感を底上げしていくなかで、必要に応じて Pixi.js を使ったのではないかと感じさせるものがあります。
動画などはマウスカーソルをホバーしただけで自動的に再生されるようになっていたりもしますし、スクロールしながらサイトを上から下まで見ていく間に、一切ビジュアルが動かない、見た目が静止する瞬間はほとんど皆無です。
次から次に押し寄せるレクサスブランドの強烈な個性に、打ちのめされるような気分になりますね……
世界でもトップクラスの高級車ブランドとして、もはや揺るがない地位を築いたレクサス。
そんな最上級のブランドのサイトだけあって、そこに込められたこだわりは半端ではないですね。なんというか、ツッコミどころが見つからない……そんな完全無欠さを感じさせるサイトになっています。
WebGL の実装としては先に書いたように Pixi.js が使われており、二次元的な処理に特化した Pixi.js の性質を最大限に利用していると言っていいと思います。
これだけ完成度の高いサイトはなかなかお目にかかれないよな……と思わず言いたくなるような、そんなサイトだと思いました。
ぜひチェックしてみてください。
