細部にまでトコトンこだわってオリジナルのポロシャツをデザインできる Lacoste の Draw It Yourself がすごい！

doxas : 2022-10-20 13:16:16

この世に１つだけのこだわったデザインを作成できる

今回ご紹介するのは、日本でもよく知られているメーカー Lacoste のスペシャルサイトで、オリジナルのポロシャツをデザインすることができる Draw It Yourself です。

こちらのサイト上では、自分だけのオリジナルのカラーリングを自由に選択できるだけでなく、実際にペンツールを使ってかなり細かい部分にまでこだわってデザインを調整することができるようになっています。

インターフェースも含め、かなりデザインと体験が高い水準で提供されています。

今回のサイトでは、ポロシャツのオリジナルデザインを作ることができるのですが……

変更できるのは基本的にカラーリングのみで、たとえば襟の形状だとか、全体の生地の種類だとか、そういった部分はあくまでも固定です。

おそらく今回のサイトのオリジナルのデザインを作成するという体験そのものにフォーカスしていて、デザインしたものをそのままオーダーメイドで発注したりはできないと思われます。

初期状態では、この上の画像にあるように白地にいくつかの模様がステッカーのように散りばめられたポロシャツのベースが登場します。

この状態で画面上をスワイプするようにドラッグ操作すれば、前面だけでなく横や後ろからも眺めることができる他、ステッカーのように配置されているロゴ部分をピンポイントでクリックしてやれば、そのロゴのカラーリングを変更できる UI にシーン全体が移行します。

このロゴの編集画面の完成度がエグくて、実際にペンを使って着色するような操作が可能になっています。

初期状態はいわゆるバケツツールのように、黒枠の内側全体を塗りつぶすようなペンが選択されていますが、自由にカーソルを使って線を描き込めるモードもあります。

いやこれほんとにすごいですね……

もちろん、原理はわかるというか…… どういうふうに実装すればよいかは想像がつきますが、こんなふうに 3D のペンが生き生きと動いたり、自然なカラーリングで着色できたりするのは普通に驚きます。

スクリーンショットでは伝えられないのですが、ペンを生地の上に置いた瞬間は若干線が細くなっていて、本当にペンで紙や布になにかを描いているような気持ちにさせられる生々しさというかリアリティがあります。

襟の部分やシャツ全体のカラーは画面の右側にあるメニューから変更可能ですので、こちらも併せてチョイスしつつ、自分だけのオリジナルデザインのポロシャツを作ってみましょう。

一瞬の演出なのでスクリーンショットをキャプチャすることを諦めたのですが、ロゴの部分をクリックして編集モードに移行する瞬間、シャツがグイッと引っ張られるような感じで変形する演出なんかも本当に見事で、とにかくレベルの高い WebGL 実装だと感じます。

こういうカスタマイザ系ってどうしても機械的なものが多かったり、変更できる箇所がかなり限定されているというのがほとんどで、こんなふうに自由にペンを走らせることができるというのは珍しいです。

3D 以外のインタラクションやトランジションも自然で心地よく、触っていて嫌味がない感じで全体のバランスもすごく上手に整えられています。