まるで映像作品のように滑らかで自然な動きが目を引く WebGL 実装がすごい！ 名古屋エステイト社のウェブサイト
滑らかアニメーションはもはや職人技
今回ご紹介するのは、国内の WebGL 事例で、名古屋にある不動産の総合コンサルタント企業、名古屋エステイト社のウェブサイトです。
制作は当サイトでもおなじみの株式会社スタジオディテイルズさん。WebGL の実装は、WebGL スクールで講師としてお招きしたこともあるフリーランスの池田亮さんとのこと。
今回のサイトもさすがの完成度で、WebGL の実装はもちろんのこと、フロントエンドの実装全体が驚くほど緻密に組み上げられていて、本当にすごいですね……
なかなかお目にかかれない、非常にレベルの高いサイトになっていると思います。
アニメーションの多彩さに思わず見惚れる
今回のサイトでは、名古屋エステイト社さんをイメージしたシンボルキャラクター「エス男」が登場します。
この記事のトップ画像にもある、メガネを掛けた男性のキャラクターですね。
サイト全体の道案内役として、このエス男を中心に様々なページや演出が盛り込まれています。企業の様々な面を自然な画面遷移で楽しく閲覧することができるようになっており、ボリュームも結構ありますね。
シーンが変化する際には、なにかしらのアニメーションが働くようになっており、WebGL で実装されているものもあれば、DOM を操作することで実現しているものもあります。
一見すると、それらの違いがまったくわからないほど自然に組み上げられていて、ほんとにすごいです。
この上の画像のように、思いっきり 3D 的に描画されている場面については、たぶん WebGL なのでは？ というのが想像しやすいと思うのですが、実際にはトップ部分の大半のグラフィックスは WebGL だと思います。
流れる雲と町並みのシルエットを背に、エス男が軽く両手を広げて立っている冒頭のシーン。一見動画のようにも見えると思いますが、ここは WebGL で描かれていて、マウスカーソルの位置に対してのインタラクションなども見受けられます。
今回のサイトは WebGL を使っていないところもグリグリ動くので、WebGL 実装経験が無いと、これどこからが WebGL でどこからが DOM だか、たぶんわからないですねｗ（褒めてる）
足跡がカーソルを追従する面白い演出も。
とにかくアニメーション処理がたくさん用意されていることも素晴らしいのですが……
その演出のひとつひとつがアニメーションする際の、その動きにもぜひ注目したいところです。
特にイージングがどのように見た人の印象に作用するのかは、このサイトをじっくり観察するとかなり勉強になると思います。
カードのような形のオブジェクトが、飛散し、収束し、姿を変えて別のシーンへとつながっていく様子は本当に圧巻です。静止画ではどうしてもこの魅力は伝えられないので、ぜひ実際にサイトに行って、ご覧になってみていただければと思いますね。
大小のカードのような形状が織りなす多彩なアニメーションが心地よい。
当サイトではそのサイトの性質上、どうしても WebGL に寄せた解説や紹介になってしまうのですが、今回のサイトの場合は WebGL を WebGL だと思わせないような、サイト全体の構成からデザインまで全てがハイレベルにまとめられている、そんな印象を受けました。
WebGL を使い倒している開発者でも無い限り、一見してどこからどこまでが WebGL の実装なのか、たぶんわからないんじゃないかな……
実際に WebGL を利用したサイトを作る際は、どこまでを WebGL で処理するかが結構難しいポイントになると思いますが、ここまで完全に一体になっているのは、本当にすごいです。
ぜひチェックしてみてください。
