カスタム可能な項目がめちゃくちゃ詳細……野球用のバッティンググローブの WebGL 製カスタマイザ

doxas : 2021-04-06 13:59:43

きっと自分好みの色柄を選択できる

今回ご紹介するのは、アメリカのベースボール製品メーカーのウェブサイトで、特に「バッティンググローブ」にフォーカスしたカスタマイザ実装です。

WebGL を利用したカスタマイザやコンフィギュレータはこれまでにもいろいろなタイプのものがたくさん存在していますが、今回のケースは特に「カスタムできる項目の詳細さ」がかなり素晴らしいのと、色を変更するインターフェースなどの直感的な使い勝手の良さが光ります。

ほんのちょっとの色の違いでもこだわりたい、そんな要望を満たしてくれそうななかなか完成度の高いカスタマイザ実装となっています。

今回のサイトは、ベースボール（要は野球）の人気が高いアメリカらしいウェブサイトだなと感じます。

スター選手が当社の製品を使っていますよ～！という宣伝文句などもそこかしこに見られ、種類も非常に豊富です。

そんななかで、既存のデザインやカラーリングに満足できないユーザーのためにカスタマイザが用意されているのだと思いますが、ベースとなる製品は３種類あり、そこに対してさらにオリジナルのカラーリングを適用することができるようです。

ご覧のように、カスタマイザは 3D でグローブが表示される画面上で行うのですが……

カスタム可能な部位の上にマウスカーソルを乗せてやると、その部分が白く光るようにゆっくりと点滅するのでとても直感的です。

また、ゆっくりと点滅しているホバーの状態から、さらにクリック１つ行うだけでパレットのようなインターフェースがポップアップしてくるので、色や柄の変更も非常に簡単です。

ほんとうに操作しやすくて、これならたとえば子供でも簡単に好みの色柄を設定できそうですね。

また今回のカスタマイザは非常に細かくいろんな部分をカスタムできるようになっています。

まあこれは実際にはカスタマイザというよりは、製造しているメーカー側の努力の結果なのだと思いますが、バンドの部分だけ色を変えたりできるというのはすごいなと思いました。

ここまで細かくいろいろ調整できるようになっているというのが、いかにもベースボール人気の高いアメリカらしいなと個人的には感じました。

いろんなこだわりのあるユーザーが多いのでしょうね。

WebGL を使ったコンフィギュレータやカスタマイザでは、リアリティのある質感の CG を使ったビジュアルと、それに連動したインターフェースの完成度が使いやすさに直結します。

3D シーンが描かれるとは言ってもそれはあくまでも 2D の世界であるウェブブラウザのスクリーン上に描かれるわけですから、ユーザーの操作に対してどのように反応するかも含めて GUI の使い勝手はとても大事です。

今回のサイトでは、マウスカーソルをホバーさせた際の挙動や、ポップアップしてくるインターフェースのわかりやすさなど、この手のカスタマイザとしてはお手本のような使い勝手を実現できていると思います。