シンプルなシェーダによる背景表現がスマートな雰囲気を演出する Rhumb Studio のウェブサイト
世界観がしっかりしてる
今回ご紹介するのは Rhumb Studio というクリエイティブスタジオのウェブサイトです。
About を見た印象では所属されているのはお一人で、Rhumb Studio というのは屋号（または社名）なのかなと想像しますが、手掛けられている事例も多くて実績は厚そうです。
デザインの方向性がかなりハッキリとしていて、見ていて納得感が強いなと感じます。
リンク：
Rhumb Studio — Design & development studio
背景全体でホバーエフェクト
今回のサイトの WebGL 実装は、大きく背景部分と、キービジュアルの 3D モデルの表現部分とに大別できます。
サイト内の至るところに無数に 3D 表現があるというよりは、トップページの冒頭のキービジュアル部分を印象的に演出しつつ、サイト全体の背景をインタラクティブに演出している、という感じですね。
透明なコンパスのようなオブジェクトは見た目も美しいです。
コンパスの絶妙に透明な感じが、すごくうまく演出されていますよね。
映り込みの感じとかは、いわゆるフォトリアルな感じともなんか微妙に違うのですが、質感はすごく高く感じます。
背景部分のグラデーションも絶えずゆっくりと変化していますが、ロードするたびに模様が変化したりはしないので、ノイズを使って実装しているというよりはハードコーディングされたなにかしらのロジックによって模様を描いているのだと思います。
背景部分のグラデーション模様、いわゆるシェーダを利用して描画しているのだと思いますが派手すぎない落ち着いたトーンがすごくいいかんじです。
また個人的におもしろいなと感じたのが、なにかしらのボタンなどのリンク的な要素にカーソルをホバーさせると、それに連動して背景が変化するんですよね。
一般に、ボタンなどにカーソルがホバーしたときは「ボタンそのものをホバーエフェクトで変化させる」ということが多いと思うので、背景全体が変化するというのは面白いなと感じました。
別に今回のサイトに限ったことというわけではないと思いますが、なにかしらの要素にホバーすると背景全体が変化する、というのがなんか個人的にはすごく印象的に目に映りました。
仮に、グラデーションの色が大きく変化しすぎたり、あるいは歪み方が派手に変化したりしてしまうと、ユーザーの意識が思い切り背景部分に持っていかれてしまうはずです。
その点、今回のサイトのホバー時の背景変化はほどよい感じで、それがすごく心地よく感じる理由なのかもしれません。
ぜひチェックしてみてください。
