自由に靴の素材を組み合わせ！ カスタマイズ可能な WebGL 製オンライン注文システムがすごい！
女性用シューズのオンラインカスタマイザ
今回ご紹介するのは、Made in Me という欧州の企業が展開している、オンラインで自由にカスタムしながら注文できる WebGL 製のカスタマイザです。
WebGL はブラウザで実行できる三次元表現として、今回のサイトのようなオンラインのカスタマイザに使われるケースも多いですが、ここまで完成度の高いものは、ちょっとめずらしいですね。
非常に豊富な素材の中から自由に組み合わせて、そのまま注文まで行えるのはとても素晴らしいです。
素材はかなりの種類がある
今回のサイトは、まず最初に靴のタイプを選択した後、カスタマイザが表示されるという仕組みになっています。
最初に選ぶことができるシューズのタイプも相当たくさんの種類があり、これを見ているだけでも女性の足元に対するこだわりや、それに応えようとする企業努力がうかがえます。
男性目線で見てしまうと、ぶっちゃけこれ同じじゃねえか……と感じるものもあったりしますが、それは多分気のせいです。
非常に豊富な選択肢の中からベースとなる形状を選択すると、そのあとさらに画面が遷移して、カスタマイザが起動します。
海外のサーバだからなのか、全体的にちょっとロードには時間が掛かるようですね。
しかしカスタマイザはシンプルながらとても直感的なインターフェースになっていて、あまりデジタルやウェブに強くない女性でも扱いやすいのではないでしょうか。
最初は一見すると無機質な、ベージュの下地の部分だけが見えていますが、左側に並んでいるタイル状のマテリアル一覧を見ると、これで色を変化させられるのかな？ ということがすぐにわかりますね。
画像ではちょっと見にくいと思いますが、靴の全体はおおよそ四つくらいの区画に分かれていて、左側にある部位を表すアイコンか、もしくはビューア部分のパーツを直接クリックするかの、いずれかの操作を行うことで、その部分にフォーカスした状態にすることができます。
フォーカスされたパーツの部分は、一瞬うっすらとグレアがかかったような演出が出るので、こういった演出もとてもわかりやすいですね。
選択できるマテリアルにもかなりの種類があって、これならうつろいやすい乙女心というやつにも、ぴったりくる選択肢があるのではないでしょうか。
単なる布地のものだけでなく、革製のものやエナメル質な光沢のあるマテリアルなども選択できます。
あまりフォトリアルなレンダリングではないので、実物とはもしかすると若干印象は違うのかもしれませんが、光沢のあるマテリアルはスペキュラハイライトが強めに掛かるなどするので、ビューア内でモデルをぐりぐり動かしてみると、質感がどのような感じなのかわかりやすくなっています。
商品をオンラインでカスタムするタイプのサイトでは、今回のような WebGL 製のカスタマイザを実装することによって、よりわかりやすく商品を見せることができますね。
サイトで選択した材質をそのまま使って注文までできるというのは、実に素晴らしい仕組みだなと思います。
加えて、今回のサイトはカスタマイザとしては非常に豊富な選択肢があり、インターフェースもシンプルでわかりやすく、とても完成度が高いと感じました。
似たようなサイトを構築する際には、参考にしたいデザインだと思います。
ぜひチェックしてみてください。
