ポップで可愛らしい雰囲気に目を疑うほどの技術力とセンスが融合！ Garden Eight のコーポレートサイト

doxas : 2022-02-15 13:37:41

これまでとは違った雰囲気も、これまた良い

今回ご紹介するのは、日本のウェブ制作の現場にいれば一度はその名前を聞いたことがあるででしょう、Garden Eight さんのコーポレートサイトです。

もともと WebGL を利用した事例やコーポレートサイトで同社のことは広く知られていると思うのですが、今回はコーポレートサイトをリニューアルするのに伴い、これまでとはちょっと違った雰囲気のテイストながら、やはり WebGL が演出の一部を構成しておりとても見応えのあるウェブサイトとなっています。

たぶん、WebGL 実装部分だけでなく、デザインや UX などもすごくよく考えられているのだと思うのですが、私はそのあたり素人なので WebGL 実装によりフォーカスして紹介していこうと思います。

今回のウェブサイトは全体的な雰囲気が非常にポップで、すごく親しみやすい雰囲気です。

登場するキャラクター（動物たち）は、以前のコーポレートサイトと共通している部分が多いのかなと想像するのですが、造形としては今回はトイっぽい感じというか…… ぬいぐるみなどのオモチャを連想させるような姿かたちをしていますね。

トップページでは 3D モデル自体に下地の色が付いていないようなマテリアルが適用されていて、ふわふわと柔らかそうな動きも相まって、なんだかマシュマロとかそういうものを想像するような表現です。

静止画では伝わえられないのですが、渦を巻くように動くアニメーションが心地よいです。

ウェブサイト内の各種コンテンツには、要所要所で WebGL を利用したビジュアルが組み合わされており、静止画で表現された部分がほとんどないんじゃないでしょうか。

WebGL でリアルタイムに描画されているからこそのインタラクティブ性やアニメーションが随所に見受けられ、これ言葉でどう表現するのが適切なのかわからないのですが…… なんか存在感があるんですよね。

うまく伝えるのがすごく難しいのですが、たとえば風景を写真で見ているのと、写真に写っている景色を実際に目にするのってやっぱり体験として違うもの（どちらが良いとか悪いではなく）だと思うのですよね。

今回のサイトのグラフィックスたちはみんなインタラクティブに反応してくれるので、静止画でグラフィックスを見ているのと感じ方が全然違っているような気がします。

CG 的な意味でも現実世界の物理現象に近い見せ方、たとえば床から照り返してくる光をしっかり考慮したライティングがされていたりするので、そういう意味でも現実っぽさというか存在感みたいなものが強調されていると思います。

また、これもキャプチャ画像では伝えられない部分になってしまうのですが、イージングの滑らかさや、DOM との連動をしっかり考慮したアニメーションなどもとても見事ですね。

3D 空間を描画するためのフレーム（枠）自体が揺らぐというか歪んだりもするので、2D 的な見せ方と 3D 的な見せ方が同時に存在しているのもほかではあまり見られない特徴だと思います。

WebGL を使っていて見た目が非常にリッチなので思わずそちらにばかり目が行ってしまうかもしれないですが、非常に細かい部分まで技術的にもしっかり追求されておりすごく完成度の高いウェブサイトだと思います。

ポストエフェクトを活用したりライティングを工夫したりすることで CG としての完成度も高められていて、本当に非の打ち所がありません。

私は WebGL 周りのすごさしかうまく解説することができないのですが、デザインや UI/UX の観点から見てもかなりレベルが高い実装だと想像します。

触っていて心地よく感じる部分って、なにか１つの要因で決まるものではなくて複数の要素によって構成される全体としての完成度に依るのだろうと思うのですが、まさにそれを体現している事例だなと思いました。