WebGL によるポップな 3D 表現とインタラクティブ性が光る JR東日本の新卒採用サイト
プリレンダリングとリアルタイム
今回ご紹介するのは、JR東日本が公開している新卒採用向けのウェブサイトです。
今回のサイト上にはプリレンダリングされた CG の動画もたくさん素材として使われているのですが、その一部がインタラクティブな WebGL 実装として再現されています。
新卒採用サイトらしい初々しさと爽快な雰囲気がいい感じです。
リンク：
3D シーンの作り込みがすごい
今回のサイトは、トップページにたくさんのカード状のアイテムが並べられ、事業の内容や組織の特徴が一覧性高く閲覧できるようになっています。
無限にスクロールできるようになっているみたいで、すごい不思議な構造をしていますね……
各種カードの部分はカーソルがホバーされるとフォーカスが当たっていることがわかりやすくなるように外見が変化します。
車両や、あるいはなにかの施設など、カード状のオブジェクトにはそれを象徴する動画素材が割り当てられていますが、カードをさらにクリックすると下層ページへと遷移します。
全てではないですが、下層ページではもともとカードに割り当てられていたシーンが WebGL で再現されるようになっており様々な 3D シーンを見ることができます。
シーンをスワイプするようにドラッグ操作してやれば、ある程度は視線を動かすこともできます。
現れる 3D シーンがどれも凝っていてすごいですね……
ただ静物をポンと置いただけになっているものはほとんどなくて、なにかしらのアニメーションやモーションを伴うようになっています。
流れ星がさっと空を横切ったり、ドローンがふわふわと浮遊していたり、3D 的な表現であることのメリットを最大限活かしたような表現がてんこ盛りという感じで本当にすごいです。
プリレンダリングの 3D 表現と比較すると、質感という意味では一歩及ばない感じはどうしてもあると思いますが、これだけバリエーション豊富な 3D シーンが盛り込まれているというのは驚きです。
WebGL でリアルタイムに描画しているからこそのインタラクティブ性と、単なる平面的な映像ではなし得なかった空間的広がりのある表現は、まさに WebGL ならではの体験だと思います。
全体的にすごくスマートに実装された、レベルの高いウェブサイトだなと感じました。
ぜひチェックしてみてください。
