パーティクルを使ってカラーコンタクトレンズの質感を見事に再現した PLAY/UP のウェブサイトがすごい
カラーバリエーションが直感的に伝わるデザイン
今回ご紹介するのは、ちょっと珍しい WebGL の事例です。
WebGL によって描かれるパーティクルが、カラーコンタクトレンズの質感を再現しているとても興味深い作品になっています。
カラーコンタクトを、パーティクルとその色による表現にまで抽象化したことで、実際には情報量が減っているはずなのにものすごく直感的に、また個性的な印象で、しっかりと質感が伝わってきます。
リンク:
種類も多く見応え十分
まずサイトが表示された直後、イントロ部分の演出では背景が黒になっています。
この状態では黒とのコントラストがキレイな、黄色系のパーティクルが画面内を漂っており、最初にサウンドのオン・オフを選択します。
その後、画面中央には動画を貼り付けた矩形部分が表示され、ここでコンセプトムービーを見ることができるようになっています。
上の画像は、そのコンセプトムービーの矩形が、徐々に膨らんで大きくなっていくその瞬間をキャプチャしたものなのですが……
周辺に漂っているパーティクルの効果もあり、シンプルなオブジェクトしか画面内には描かれていないのに不思議な奥行き感というか、立体感がありますね。
コンセプトムービーが再生されているときには、画面の下のほうに Enter と書かれたリンクが置かれているので、それをクリックしてやると次のシーンへと移動することができます。
こちらのシーンでは、各商品のカラーバリエーションが、パーティクルによって見事に再現されています。
今回のサイトでは、なんと 14 種類ものカラーバリエーションを見ることができるようになっているのですが、結構奇抜なカラーリングのものもあるんですね。
この各製品ごとのカラーバリエーションを閲覧できるシーンでは、スクロール操作などを行うことで次々とパターンを切り替えていくことができます。
一方で、切り替え操作を行わずにしばらく待っていると、徐々にパーティクルの配置が広がっていき、最終的に画面全体がパーティクルで覆われるほどになります。
すごく印象的な演出になっていると思います。
WebGL の実装では、フォトリアル系に寄せるか、抽象化して個性で攻めるか、そのサイトの性質やクライアントの要望に応じて、様々な工夫が必要になることが多いと思います。
今回のサイトでは、ややもすると「フォトリアル系でやりたくなる素材」であるコンタクトレンズというアイテムを、パーティクルのみで「抽象化」していて、結果的にそれがものすごくうまくいっているのが素晴らしいと思います。
サイトの制作はシフトブレインさんみたいですが、WebGL 実装だけでなくサイト全体の実装が丁寧でデザインも素晴らしく、さすがとしか言いようのない、見事なサイトになっていると思います。
ぜひチェックしてみてください。