まるで音波を示す波形のようなエフェクトが個性的な雰囲気を見事に演出！株式会社ハローのウェブサイト

doxas : 2023-10-23 12:23:57

ほどよいランダム性が心地よい

今回ご紹介するのは、AI 関連サービスなどのプロダクトを多く手掛けている株式会社ハローのコーポレートサイトです。

AI を使ったサービスはたくさん登場していますが、まだまだ黎明期という段階のように個人的には感じます。そういった領域に積極的にコミットしているというのは単純にすごいことだと思います。

今回のサイトでは、音波の波形のような…… 実際にはちょっと違うのですが、すごくインタラクティブでかっこいいエフェクトが実装されています。

今回のサイトは、すごくメリハリがきいているといいますか、コントラストが高いといいますか、すごくシンプルに強いメッセージ性を感じるデザインで仕上げられています。

WebGL の実装も、その全体的なテイストにマッチするように調整されている感じがあり、色彩はほとんどなくてモノクロに近い表現です。

しかし、実際には多彩な動きの変化が起こることもあり、すごく表情豊かな演出となっています。

トップページの冒頭部分は、キービジュアルのような感じで大きめのフォントサイズでメッセージが横にスクロールしています。

そのメッセージ部分が、まるでなにかの波形のような感じで大きく歪みます。

この歪むエフェクト、静止画で見るとあまり手触りみたいなものが伝わらないかもしれないのですが、あまりトゲトゲしたような印象ではなくて、むしろすごく有機的でなめらかな感触を持っています。

たぶん、イージングというか、余韻の調整がすごくうまく機能しているんだと思います。

この上の２枚の画像を見ると、１枚めはすごく大きな歪みがあるのに対して、２枚めのほうはかろうじて文字が読み取れるくらいの歪みになっているのがわかると思います。

ここで示した例のように、今回のサイトでは使われているエフェクト自体は同じものなのですが、そこにさまざまな表情がうまく盛り込まれています。

波形が発生してから落ち着くまでのパターンや、それが発生する契機など、ユーザーになにを伝えたいのかによって見事に調整されているように感じました。

ときには背景部分に文字が配置されるようなケースもあります。

波打たせるとか、ノイズっぽい歪みとか、こういうのってある意味 WebGL の得意領域だと思うので、これまでにも無数に実装例があり、結構個性を出すのって難しいタイプの表現のような気がします。

今回のサイトは静止画でその外見だけを見てしまうと、いかにもよくありそうな演出の一種に見えるかもしれません。

ただ途中でも書いたように、かなり個性的な味付けのモーションが付与されているおかげもあって、すごく不思議で印象に残る演出になっているのではないかなと思います。