サイト全体に 3D 表現を盛り込みつつ情報も見やすく整理された株式会社Serverless Operations のウェブサイト

doxas : 2025-01-07 12:24:57

統一感の高いデザイン

今回ご紹介するのは株式会社Serverless Operations のウェブサイトです。

WebGL を大胆に取り入れつつも、それ一辺倒ではなくデザインのちからで情報を上手に整理したスマートさが特徴のウェブサイトで、すごくバランスの良さを感じるサイトとなっています。

テーマカラーや 3D 表現にしっかりと統一感があり、コーポレートサイトとしての完成度の高さを感じます。

今回のサイトは WebGL を使っていますが、それが主役という感じではありません。

印象的なキービジュアルでは大胆に WebGL による 3D 表現を行っていますが、他の場面ではたとえば動画埋め込みなども活用されています。

実現したいことに応じて、適切に技術が使い分けられている感じがあります。

ページトップのキービジュアル部分では、パーティクルがコンテンツの内容と連動しながら動き、迫力のある視覚効果を演出しています。

カーソルに応じた必要最小限のインタラクティブ性や、スクロールに応じた 3D シーン全体の変化も、きちんと文脈があってそれをやっている感じがありなんともかっこいいですね。

サイト内に置かれているその他のビジュアル要素も同じようなトーンで統一された素材で構成されていてまとまりがあります。

また、これは静止画ではまったくもって伝えることができないのですが、実際のサイト上ではあらゆるものが絶えずアニメーションしています。

文字が表示されるときもただパッとそれが出てくるということはむしろ稀で、アニメーションとともに心地よいスピード感で演出を伴ってそれが出現してくるようになっています。

自分なんかはインタラクティブ性やデザイン性についてあまりよくわかってないのですが、こういうのってたぶん視線の誘導というか、意図の導線とかにもたぶんなっているんじゃないかなと思うんですよね。

スクロールしていくたびに新鮮な驚きがあってすごくおもしろいです。

一見シンプルな 3D シーンのように見えて、実はいろんなことを考慮して作られている奥深さが感じられて、シンプルながらレベルの高い 3D 表現だと思います。

パーティクルは四角いシルエットですが、たぶんこれが丸い形をしたドットだったら全然印象が変わってくると思いますし、サイト内の構成要素を鑑みればここでは正方形のパーティクルがきっと正解ということなのでしょう。

コーポレートサイトとしての情報の提示を損ねることなく、上手に演出と組み合わせているのは本当に見事です。