エッジの利いたシンプルな 3D シーンがハイエンドな品質を想起させる Crosswire のウェブサイト

doxas : 2023-02-03 13:21:17

サイバーな世界を上手に表現

今回ご紹介するのは、Crosswire というネットワークのセキュリティ事業を手掛ける組織のウェブサイトです。

今回のサイトはどこかサイバー空間のようなものをイメージさせる雰囲気になっており、エッジの利いたアブストラクトなオブジェクトがたくさん登場します。

何とも言えないかっこよさがあり、また単純な見た目だけでなく、演出の仕方についてもセキュリティ企業にマッチした見せ方でかなり工夫を凝らしている感じがします。

今回のサイトはセキュリティ企業のウェブサイトということもあり、冒頭でも書いたようにサイバー空間のような世界観でビジュアルが作られています。

これは CG 的な部分ももちろんなのですが、DOM に対して CSS で当てられているスタイルについても、同様の傾向で揃えられている感じがします。

ページの冒頭では文字の部分にインタラクティブ性があり、カーソルが重なっている部分は透明な風合いになったりします。

結構芸が細かい感じです。

3D シーンとしてはすべて空間がつながっているように場面が描かれます。

スクロール操作を行うことでカメラが自動的に動いていくような感じです。

画面の端のほうが暗くなっていたり、同様に端のほうにいくほどブラーと色収差のような効果が強くなるようなポストエフェクトが掛かっているので、本当にデジタル空間をカメラ越しに見ているかのような臨場感があります。

カメラワークも緩急があり、かっこいいです。

また、スクロールを続けてページを読み進めていくと、途中からこの空間を自走している謎のオブジェクトが出てきます。

このオブジェクトの動きがまた実に生き生きとしていて、残像がしばらく残るように描かれる様子も、この手の世界観を描く場合にはよく見られるような、いかにもといった感じの演出ではあるのですがかっこいいですね。

セキュリティ企業のサービスを想起させるようなかっこいい演出がたくさん用意されていて、同じような風景が続くだけのコンテンツなのに変化を楽しみながら閲覧していくことができます。

めちゃくちゃシンプルな形状のオブジェクトがたくさん組み合わさって世界を構成していて、一見するとシンプルで簡素な構成要素だけの世界なのですが、質感含めてすごくキレイに丁寧に実装されています。

妙に美しく手の込んだ CG だな～と思ったのですがクレジットを見たらどうやら Unseen Studio が手掛けた事例みたいです。

最近本当にこのスタジオの WebGL 実装を見かける機会が増えました。またどれもレベルが高いビジュアルに、心地よいインタラクションが組み合わされたハイレベルな実装で本当に驚きます。