アーティスティックにスプレーを走らせたような疾走感が心地よい株式会社RERISE のウェブサイト
どこかポップアートのよう
今回ご紹介するのは株式会社RERISE のウェブサイトです。
不動産関連事業を手掛ける企業のようで、国内にもいくつか拠点があるようです。
今回のウェブサイトはいわゆるコーポレートサイトという位置づけだと思うのですが、すごく先鋭的な感じで、情報を見やすく提示するだけにとどまらないかっこよく仕上がったウェブサイトとなっています。
リンク：
パフォーマンスにも配慮した作り
今回のサイトでは、WebGL を使ってインタラクティブな演出を行っています。
ストリートスタイルとでもいいましょうか、スプレーアートの作品のような感じで描かれるテキストがすごく個性的な雰囲気を作り出しています。
マウスカーソルの位置に応じてインタラクティブに変化することもあり、単なる動画素材などでは表現できない生き生きとした躍動感が生まれています。
青い色で描かれた文字の部分は、よく見るとその裏側に絶えず動き続ける大量のパーティクルがあることがわかります。
場面によって、このパーティクルの色が異なる場合があって、全然違った印象に見えるようになっていてなんともおもしろいですね。
勝手な想像ですが、配置されるフォントの色と上手に連動させつつバランスを取っているのかなと思います。黒い文字のときは、パーティクルが明るい色になる、みたいな感じですね。
文字とスプレーアート風の演出が立体的に交差するような場面もあり、本当にダイナミックでかっこいいです。
今回のサイトの演出は WebGL の実装としてはシングルパスではないという点で若干負荷が高いものに分類されるような気もしますが、更新頻度などを調整することで、負荷が高くなりすぎないようにしている感じがします。
WebGL の実装がおそらくですが複数あって、それも踏まえてバランスを取っているのかもしれませんね。
トップページの後半にはマスク処理っぽい演出が出てくる部分があるのですが、こちらもぜひ動いている様子を実際に見てみてもらいたいおもしろい演出となっています。
ストリートな雰囲気を上手にウェブサイトに落とし込んだ今回の事例は、見た目のかっこよさは当然として実装者目線で見ると作るの大変そうだな～ と感じる部分がたくさんありますね……
スプレーでなにかを描き出すように徐々に文字が浮き上がってくる演出とか、本当に作るの大変そうな感じがします。
これは完全に勝手な想像ですが、スプレーアートのような見せ方がどこか既存の枠組みを突き破って切り開いていく、そんな指向性や創造性みたいなものを連想させてくれるウェブサイトだなと感じました。
ぜひチェックしてみてください。