大海原を船が行く！ さまざまな海洋研究にかかわる OceanX のウェブサイトがおもしろい
劇的ではないが説得力がある
今回ご紹介するのは OceanX という団体のウェブサイトです。
公式サイトを見てみた感じ、いわゆるシンプルな環境保護団体というよりはもう少し広い視点を持っている組織のようで、海洋探検や研究活動・教育活動などを通じて自然も人間もより良い方向へ進んでいこう、みたいなカルチャーがあるようです。
そんな OceanX の 2025 年の活動を振り返る、というのが今回のサイトの趣旨みたいですね。
リンク：
鳥瞰視点は質感もおもしろい
今回のサイトでは、最初に表示されるタイトルページからすでに WebGL による 3D 表現が用いられています。
いわゆる地球を 3D で表示するよくあるビジュアルなのですが、よく観察してみると質感はかなり丁寧に作られている感じがします。
雲がゆっくりと流れていたり、彼らの活動がブルーの光のタワーで表現されたりしています。
トップページにあるボタンをクリックすると本編がスタートするのですが、その際のトランジションというかアニメーションもおもしろいですね。
地球の表示されていたシーンから、鳥瞰視点で船を見下ろしているシーンに一気に切り替わります。
この上のスクリーンショットはその瞬間を野暮とは思いつつキャプチャしたものですが、なかなか迫力のあるトランジション演出になっています。
鳥瞰視点のシーンに切り替わると、広い海の上に調査船でしょうか、船が波に揺れるシーンが現れます。
こちらのシーンはスクロール操作をすることで船が海の上を進んでいくようになっていて、船の周囲に立つさざなみもなかなかリアルに表現されています。
彼らの活動を振り返るような趣旨のウェブサイトなので、演出や 3D だけではなくそれぞれの活動についてもじっくり見たいなと個人的には感じました。
油断してると、船がスイスイ進んでいってしまって、コンテンツがどんどん流れていってしまいます。
これはけして否定的なことを書きたくて言うのではないのですが、結構あっという間に船が進んでいってしまうので、そのあたりはもう少しこう…… 演出や仕掛けを用意してユーザーにゆっくりと周回させるような、そんな工夫があってもよかったかもしれません。
WebGL 実装ではいろんな事例で水面や海面みたいなものが登場します。そういった水の表現って実装ごとにさまざまな表情がありますが、今回のケースはリアル系水面を目指しているタイプだと思います。
船の進む様子に合わせて波打つところなんか、本当にいい感じに作り込まれていますね。
ぜひチェックしてみてください。
