Pixi.js を使って表現されたアートな独自の世界観がおもしろい Moooi のウェブサイト
どこまで意図したものなのか……
今回ご紹介するのは、デザイナーズインテリアなどを扱う Moooi のウェブサイトです。
家具やインテリア、アート作品などを扱う商社っぽい感じみたいですが、特に、個性的なデザインやアート性の強い作品を多く扱っているみたいです。
今回のサイトで紹介されている製品もかなり個性的・独創的なものが多く、公式サイトではデザイナーさんが紹介されていたり、そのデザインに込められた意図や思いも簡単に解説がされています。
リンク：
製品によってはカスタマイザが用意されていることも
今回のサイトは Pixi.js を使っているので、基本的にはすべて 2D 的なアプローチでグラフィックスが描かれます。
一見立体的に見えるところも、3D 的に処理しているというよりは、遠近感を感じられるようなインタラクションを用いていたり、適切にサイズを変更したりすることで奥行きを表現している形ですね。
冒頭のシーンでは、花びらが舞い散るような動きをしつつ地面に向かって落ちていくのですが……
スクロールに連動してシーンが変化するようになっていて、なおかつ、何も操作をしないで放置しておくと、勝手にスクロールがオートで進んでいくようになっています。
一人掛けのソファーというかチェアだと思うのですが、レーザーでカットされた 3,000 枚の花びらが装飾されたものだそうです……
スクロールに連動して動くとは言っても、ずっとスクロール操作し続けるのは（特にマウスを使っている場合には）大変なので、放置してオートでスクロールしていってくれるのは結構便利な感じもします。
2D のシェーダによるエフェクトが使われている部分もありますので、グラフィックスは結構凝った感じに仕上がっています。
一部、表現としてあえて表示を崩しているのかバグって崩れてしまっているのか判断が難しいところがあったりもするのですが…… 全体的に、すごく個性的で面白いビジュアルです。
また、スクロールの終着点まで到達すると、そこで各製品の詳細ページへのリンクが出てきます。
詳細ページ上では、その製品の細かいスペックが確認できたり、なんと 3D モデルデータが配布されていたりします（とは言えダウンロードするにはメールアドレスの登録が必要）。
面白いのは、製品によっては WebGL のカスタマイザが用意されていたりする点ですかね……
家具やインテリアはこういうのがあると選択の幅が広がって、ユーザー体験を向上させることができますよね。
サイトの雰囲気はいかにもアートな感じで、一見するとかなり尖った製品というか、一般人お断り的な感じのサイトなのかなと思ったのですが……
製品を紹介するページはどれも結構詳しく丁寧に製品について説明されていますし、先述のとおり 3D のオンラインカスタマイザみたいなものが用意されていたりもしますし、かなりユーザー体験に考慮した丁寧な販売体制になっているのが面白いなと感じました。
WebGL 的にはあまり変化球的なことはしていなくてオーソドックスな実装かなと思いますが、使われているイラストなども美しく、見ていて楽しいサイトとなっています。
ぜひチェックしてみてください。
