小さなアイコンのような 3D 描画にも手を抜かない丁寧な仕事が光る Explicit Promotions のウェブサイト

doxas : 2023-12-13 12:47:12

シンプルだからこそ丁寧に

今回ご紹介するのは Explicit Promotions というサービスのウェブサイトです。

このサービス、どうやらミュージシャンが自身の音楽作品をプロモーションすることを補助するサービスのようで、Spotify などの各種プラットフォーム上でのプロモーションをサポートしているみたいです。

実際にどんなふうにプロモーションするのかはあまり明示的に書かれていないのですが、ウェブサイトの作り込みはかなりしっかりとされていて、少なくともウェブサイトからはあまりいかがわしさみたいなものは感じません。

こういうサービス、いったいどれくらい需要があるんだろ……

今回のサイトでは、3D オブジェクトは結構いろいろな場面で使われていますが、それ自体がメインコンテンツというわけではありません。

彼らのビジネスはあくまでもプロモーション事業なので、そのサービスがいかに素晴らしい効果を生むか、あるいは生んだかということが重点的にアピールされています。

3D シーンは結構ポップというか淡い感じの色使いで、すごく優しいトーンです。

トップページの冒頭で表示される場面が、ある意味では、一番 3D オブジェクトの量が多いシーンかもしれません。

画面の上下左右にアイコン風の 3D オブジェクトが配置されており、中央にはサービスのインターフェースをそのまま 3D 化したようなプレート状のオブジェクトが置かれています。

カーソルの位置などに反応するインタラクティブ性を備えている他、時間の経過とともに色がスッと変化するように実装されているようです。

どの色も淡い感じで、落ち着いたトーンでそのあたりはしっかりと統一感を持ってカラーを選択している感じがします。

また、スクロールを続けていくとサービスの内容を説明するセクションなどが出てくるのですが、ここでも 3D のオブジェクトがアイコン的に使われています。

このように画面内に占める割合としては大きくなくても、存在感のあるかんじで WebGL がアイコンとして使われているのはなにげに結構珍しいような感じもします。

よく観察してみると陰影の風合いもきれいですし、虫眼鏡のレンズを通して後ろを覗き見るとそれが歪んでいたりしますし、結構芸が細かいです。

WebGL をアイコン的に使うという選択肢、実装のコストと見合わない場合があったり、あるいはそもそも 2D のアイコンのほうが適している場合が多かったりして、あまり手法として選択されない感じがします。

今回のサイトでは 3D モデルが果たしている役割や意義がしっかりと練られている感じがあり、すごく上手な実装例だなと個人的には感じました。

WebGL を使っていない部分でもかなり演出は多く盛り込まれていて、全体的にポップで楽しい雰囲気に仕上がっていると思います。