WebGL を利用したミニゲームで「輪投げ」を楽しむことができる資生堂のスキンケアプロダクト WASO のウェブサイト

doxas : 2019-09-03 15:33:27

日本ではおなじみの遊びがテーマ

今回ご紹介するのは、日本人にはおなじみの化粧品メーカー、資生堂のウェブサイトです。

おそらく、今回のサイトは海外向けのサイトとして作られたものだと思うのですが、トップページには、この記事のトップ画像にもあるように「わなげ」の文字が大きく表示されます。

海外にも、輪投げってあるんですかね？

サイトのタイトルには Ring Toss とあるので、地域によっては普通に一般的な遊びとして存在するのかもしれませんね。

今回のサイトはミニゲームのコンテンツとして作られた特設サイトだと思うのですが、シンプルで可愛らしいデザインが印象的です。

パステルカラーっぽい感じの配色ですが、サイト上に現れる色は、どれも今回のサイトのメインテーマである WASO というスキンケア商品のカラーリングに揃えられているみたいです。

ミニゲームはいくつかのフェーズに分かれているのですが、いずれも画面の四隅に配置されたオブジェクトの部分を起点にして、輪投げを行ってスコアを集計するという仕組みです。

この上にある２枚の画像の内、上段の画像を見ると左上に配置されている人参のオブジェクトの周囲に、緑色のサークルが表示されているのがわかると思います。

このように、画面の中央を囲むように、四方になんらかのオブジェクトが配置されるようになっており、それぞれのオブジェクトの部分をクリックしたままホールドして引っ張るようにカーソルを動かすと、それで輪を投げる強さを調整できる仕組みです。

基本的に操作としては全然難しいこともなく、かなり直感的に操作できると思います。

ひとつのシーンごとに、投げることができる輪の数は３つまでに限定されているのですが、遠くのオブジェクトを狙ったほうがスコアが高くなるようになっていますね。

それぞれのシーンごとに、それに対応する製品があるという形になっており、シーン全体の色合いや配置されるオブジェクトが変化します。

輪投げの操作自体、こういってはなんですがかなりシンプルで簡単なので、誰でも楽しく、戸惑うこと無くゲームを楽しむことができるようになっていると思います。

物理演算を使っているようで、輪の動きもとてもリアルにできています。

資生堂は海外展開もしていたのですね。私はそんなことさえ知らなかったので、今回のサイトを見つけてとてもびっくりしました。

パステル調のとても優しい色使いと、とても簡単かつ直感的な操作感で、短時間にユーザーの興味をぐっと引きつけるような、そんなサイトになっていると思いました。

こういったゲームっぽいコンテンツは、シンプルなものであっても意外と細かい部分の調整が大変だったりするのですが、コンパクトにうまくまとめられていると思います。