未来の都市構想を Pixi.js を使って 2.5D で表現した美しいウェブサイト Future Living
ハイクオリティなビジュアルがすごい
今回ご紹介するのは、フランスで制作されたウェブサイトで、未来の都市構想をイラスト風の 2.5D で表現したデモが配信されています。
実装には Pixi.js が使われているようで、その美しいビジュアルには思わず息を呑みますね。非常に透明感のある表現が素晴らしいです。
このウェブサイトがなんのために作られたものなのか今ひとつわからないのですが、映画かなにかの企画なのかな。かなりボリュームのあるサイトなので、時間のあるときにじっくりとご覧いただくことをおすすめします。
インタラクションにも優れた高い完成度
今回のサイトは、統一感のあるそのビジュアルがなんといっても素晴らしいのですが、それ以上に、総勢 20 種類にも及ぶ、多彩な都市のコンセプトがとても興味深い内容になっています。
サイトに訪れた最初のページでは、クリックすることでちょっとしたストーリーのようなものが展開します。
最初は平坦で、簡素な建物しか無かった島の上に、徐々に建物や道路が詰め込まれていきます。
公害や環境汚染などのキーワードと共に、最終的には退廃的な風景になってしまいます。
そしてここから、アンケートのような感じで、いくつかのコンセプト型都市が登場してきますので、そのモデルに賛同できるのかどうかをクリックして選択していきます。
それぞれの都市のモデルには、なにかしらの意図やメリットなどが設けられていて、とても多彩な顔ぶれ。
全部で 20 種類あるので、そのひとつひとつを眺めているだけでも本当に楽しいですね。
それぞれの都市の景観のなかには、必ず何かしらのインタラクションが仕込まれているのもポイントで、マウスカーソルを滑らせるように重ねてやると、効果音とともに都市のどこかの部分が反応します。
都市のなかには、実在する国や、街などをヒントにしたものもあります。
さすがに全ての都市モデルに対して、コンセプトになった実在の都市が充てがわれているわけではありませんが、画面の右側にアイコンが出てくる都市については、その詳細を見ることができます。
たとえば、日本の京都をヒントにした都市のモデルもあり、こちらは京都の古民家などが持つ、自然と一体となった人々の生活をモチーフにしているようです。
なんだかちょっとこじつけな感じもしつつ、それでもこんなふうに日本の文化が海外のサイトでも引用されているというのは面白いですね。
今回のサイトは、投票形式になっているコンテンツでもあるので、恐らくこの結果が何かしらの映像作品とかに利用されるものなのかなと思います。
ちょっとそのあたりの詳細なところは、私の読解力ではいまいちわからなかったのですが、なんにしても、これだけの力作を見ることができたのは幸運だなと感じました。
Pixi.js は 2D 表現を主体にしつつも、WebGL の高速な描画によって高い表現力が得られるライブラリですが、3D と違ってこれまでのウェブに既にあったロジックや感性がそのまま利用できるケースが多く、そういう意味でハイエンドなサイトの制作に使われていることが多いような気がします。
3D 表現とはまた違った味があり、しかもインタラクティブなシーンの変化は、驚くほどの迫力やリアリティを感じさせてくれます。
非常に完成度の高いサイトになっていると思いますので、ぜひチェックしてみてください。
