架空のスノーボード用品ブランドのページを印象的な WebGL 製エフェクトで構成した Frost のウェブサイト

doxas : 2024-09-26 12:34:12

自分の「好き」を存分に盛り込む

今回ご紹介するのは、Frost というタイトルがつけられた架空のスノーボード用品ブランドのウェブサイトです。

制作されたのは Kuoloon Chong さんという方のようで、デモサイトとして作ったものを公開している、という形なのかなと思います。

WebGL による表現を上手に盛り込んでサイトが構築されていて、ある種、WebGL による演出のお手本的な感じの実装になっています。

はじめにこんなことを書くのはどうかと思いつつ正直に言ってしまうのですが、今回のサイトに盛り込まれている WebGL の演出の多くは、個性的というよりは、よく見かけるタイプのものばかりです。

パーティクルを飛ばしてみたり、画像をディストーションさせてみたり……

WebGL では鉄板ネタとしてよく用いられる演出が多いんですよね。

ただ、それら１つ１つはすごく丁寧に作られており、すごく完成度が高いです。

トップページには、スクリーンショットではちょっと見えにくいと思いますが、パーティクルを用いた 3D 表現が行われています。

黒い背景の上に、グリーンのパーティクルが等間隔に並んでおり、それが風に揺れる布のように絶えずアニメーションしています。

風というよりは…… どちらかというと水面のような…… 波打ち方はそこまで特異な感じでもなく、サイン波などで動かしているのかな～という感じですね。これが変に流体みたいな感じになっていないあたりとかも、派手すぎないしよく見る感じなんですけど、でも野暮ったい印象にはならないように上手に調整されています。

その他、トップページにあるリンクでは、カーソルをホバーさせるとその位置に写真を貼り付けた Plane が現れ、カーソルの動きに応じてたわむように歪んだり……

下層ページにまで手を伸ばすと、画像が切り替わる際のトランジションに、ノイズを使ったディストーションエフェクトが掛けられていたりと、なにかと演出が凝っています。

けして、初めて見るような物珍しさがあるわけではないんですよね。

ただ、それぞれが丁寧に作られているので見ていてなんとも安心します。

冒頭にも少し書いたように、今回のサイトは演出が凝っている部分はありつつも、それらは比較的よく見かける、どちらかというと鉄板ネタな内容です。

ただし、どの演出を見ても付け焼き刃という感じではなく、それぞれ演出自体は丁寧に作られており、動きも安定しています。

ある意味、鉄板ネタの見本市のようでもあり、参考事例として見るのに適したお手本のような実装ということも言えるのではないでしょうか。