それぞれ個性の異なる演出を上手に組み合わせて構築された Studio Lumio のウェブサイト

doxas : 2025-12-24 12:01:14

多様ではあるけどチグハグではない

今回ご紹介するのは Studio Lumio というスタジオのウェブサイトです。

サイト内を見る限りでは二人のメンバー、開発者とデザイナーによるスタジオなのかなと思いますが、WebGL を駆使したインタラクティブ性の高い制作をたくさんされているスタジオみたいです。

ウェブサイトは宇宙を連想させる広大な空間を背景に、多様な演出が試みられています。

今回のサイトには、WebGL を用いた演出がいくつかあります。

わたしはよく、記事のなかで演出に一貫性がありますね～みたいなことを書いてしまいがちな気がするんですが、今回のサイトの演出って一見すると結構方向性が異なるものが多い印象を受けます。

たとえばトップページ部分では文字が歪むような演出があるのですが、こういう感じでディストーションさせるのは結構珍しい気がします。

静止画で見てもちょっとわかりにくいかもしれないですが、カーソルの位置に向かって周辺の空間が引きずり込まれるような感じで、開発者的な言葉で表現するなら UV が収縮しているような感じでしょうか。

一方、各事例を紹介する works のページやその下層ページでは、ブロック状に区切られた空間に対して RGB シフトの効果が発生するような、全然違った演出が盛り込まれているんですよね。

こういうエフェクトを複数種類使うような実装って純粋な作業量としては結構大変だと思うので、すごく素朴な言い方になってしまいますが手間が掛かってるなと感じます。

さらには Labs のページでは流体エフェクトなども見られます。

こういうふうに毛色の違う演出をセクションごとに固有に割り当てていくのって、実装する手間が掛かるというのもそうですが全体的に統一感を失いやすいというデメリットがあると思うんですよね。

ただ今回のサイトの場合、全体に共通する質感としての RGB シフトという効果があって、技術の種類としては全然異なることをやっているのに、演出の方向性というか根底にある部分にはなんとなく統一された部分があって、それが良い方向で働いているのかなという感じはします。

わたしはデザインについては本当に素人なので、本職がデザイナーの方々から見ると「いやいや RGB シフトが共通していたってチグハグに感じるよ」ということはあるのかもしれません。

個人的には、サイト全体のデザインと演出の方向性にはそんなに乖離はないんじゃないかなと思うのですが、どうなんでしょうね……

開発者目線では、こんなにいろいろ盛り込んでてすごいなって普通に思ってしまいますが、それぞれの演出を単体で見たときにはいずれも丁寧に実装してある感じがあって、レベルが高いなと思いました。