雰囲気たっぷりの SF 的世界観に WebGL 実装による表現がマッチした Astral Frontier

doxas : 2025-03-12 12:25:59

ワークショップでの習作

今回ご紹介するのは Astral Frontier という SF 的な世界観を持ったウェブサイトです。

こちらのサイト、なにかゲームなどのプロモーションサイトなのかなと最初は思ったのですが、どうやら Awwwards が主催する教育プログラムの習作として作られたものみたいです。

かなり完成度が高くて、本当になにかの納品物であるかのような仕上がりです。

今回のサイトでは、WebGL を 2D 的なディストーションエフェクトとして使っている場面もあれば、3D 表現として使っている場面もあります。

ここではスクリーンショットは撮っていませんが、イントロのエフェクトはすごくかっこいいのでぜひ見てみてもらいたいですね。

効果音が同時に鳴るようになっており、すごく雰囲気がいいです。

イントロの演出が終わったと、画面をスクロールしていくと上のスクリーンショットにあるような惑星が中央に置かれたシーンが出てきます。

こちらのサイトは冒頭にも書いたようになにか具体的なプロジェクトや製品と紐づいているわけではないのですが、SF の世界観を独自に構想して組み立てられており、なかなかしっかりと作り込まれています。

各惑星の詳細設定なども詳しく見ることができます。

ここでは３つの惑星が紹介されており、それぞれの惑星ごとに固有のロゴマークが割り当てられています。

ロゴマークは画面下に並んでいますので、任意のロゴをクリックして選択することでビューを切り替えることができるようになっています。

また、これは静止画ではちょっと伝えるのが難しいのですが、画面内でカーソルを動かすとその部分にちょっとだけ影のようなエフェクトが発生するようになっていて、このエフェクトは今まであまり他で見たことがない面白い味付けだなと感じます。

ノイズの模様を一瞬だけ表示するような感じのエフェクトで、なんか独特な雰囲気があります。

Awwwards と言えば世界的にも名前を知られているアワードサイトですが、そのマスタークラスではこういうものを作るような取り組みなんかもされているんですね。

作例のレベルが高く、きっとすごく内容の充実したクラスなんだろうなと想像が働きます。

WebGL に注目してここでは紹介してきましたが、文字が画面上に出てくる際のアニメーションなど、静止画では伝わらない細かい部分の作り込みもかなりしっかりと行われた作例となっています。