ステッカーをバシバシ貼り付けろ！ポップで楽しい雰囲気満点の FunTech inc. のウェブサイト

doxas : 2024-07-12 11:59:12

グラフィックスの品質も高い

今回ご紹介するのは、ウェブから映像まで幅広く手掛けるクリエイティブ集団、FunTech inc. のウェブサイトです。

実は過去にも当サイトでは同社が制作されたウェブサイトを紹介したことがありました。今回は自社のサイトをリニューアルしたという形みたいですね。

WebGL を活用したインタラクティブで楽しい仕込みがなされており、見て楽しいだけでなく触って楽しいポップでかっこいいウェブサイトとなっています。

今回のウェブサイトは見どころというか、コンテンツが結構たくさん用意されています。

チームやメンバーの紹介、企業が掲げる哲学など、たっぷりと語られていてボリュームがあります。それらすべてをご紹介するわけにもいかないので……

今回は主にキービジュアル周辺の WebGL 実装部分にフォーカスしてみたいと思います。

トップページの冒頭部分に配置されたキービジュアルでは、黒い色をした柔らかなボールのようなオブジェクトが中心に配置されています。

このボールの表面には、あらかじめいくつかステッカーが貼られた状態になっていますが、ユーザーはクリック操作で自由にステッカーを追加することができます。

出てくるステッカーの種類自体はランダムなのかなと思いますが、貼る瞬間のアニメーションや黒いボールが変形する様子など、動きとしての実在感・本物感が見事に表現されています。

この黒いボール状のオブジェクトは、スクロール操作を行っても背景部分に残るようになっています。

動画が重なって手前に表示され、ボール状のオブジェクトが後ろに隠れるようなシーンがあったりもするのですが、徐々にコントラストが落ちていくような状態変化もすごく個性的に演出されていますね。

また、背景に配置されたボール状のオブジェクトが、うっすらとは見えるけど具体的にはどんな模様をしているのかわからないような、ちょっと違った質感で描かれたりする場面もあります。

さらには、一部のシーンではボールに貼られているステッカーがそのままサイト内に散りばめられている場面があります。これらのシーンでは、ステッカーを掴んでサイト内を自由に移動させたりすることもでき、ユーザーがインタラクティブ性をたっぷりと堪能できるようになっています。

キービジュアルに用いられているステッカーを貼付できるボールは、つるつるした表面に覆われた不思議な質感をしています。

またたくさんステッカーを貼ってよ～く観察してみるとわかるかと思いますが、少しホログラムっぽい感じの色合いが表現されていたり、ビジュアルに対する並々ならぬこだわりが感じられる一品となっています。