「リアルタイムスタジオ」を謳う redPlant のウェブサイトと WebGL カスタマイザデモ
3D のリアルタイム表現に特化
今回ご紹介するのはドイツにあるデザインスタジオのウェブサイトです。
彼らが掲げるのは「リアルタイムスタジオ」という特徴で、その名が示すとおり、3D によるインタラクティブ表現を中心にした事業を手掛けています。
たくさんの事例をすでに手掛けている企業なのですが、今回はその中からオンラインで色の変更が行えるタイプの、WebGL 製カスタマイザのデモをご紹介します。
インタフェース設計の参考に
今回の紹介するのはデモなので、実際に販売されている製品の EC サイトなどではありません。
ただしカラーリングのカスタマイザとしてはしっかり完成された状態になっていますので、そのままクライアントが自社サイトに導入するところまでを想像しやすいのではないかと思います。
デモとして用意されているものでは、大型のリュックサックのカスタマイザで、各部位ごとに細かく色を指定・変更できるようになっています。
かなり豊富なカラーが用意されていることがわかりますね。
この色の種類などは、実際に製品を作る企業側の生産ラインの問題になるとは思うのですが、それでも、このようにたくさんの種類を指定できるインターフェースも作れる、ということがわかりやすく示されています。
今回のデモで表示されているリュックサックは、各部位ごとに個別に色が指定できるようになっていて、それぞれ、3DCG の該当箇所をクリックすることで選択できるようになっています。
ただしそれだけだと、クリックできる箇所がどれくらいの詳細さで用意されているのかわかりにくいため、このデモではリストで一覧表示させ、そこからも選択できるように工夫されています。
一般的な 3D のインターフェースでは、該当箇所をハイライトして色を変えるなどの表現手法もありますが、今回のケースではリストを使うことで、選択可能部位がユーザーにわかりやすく示せるようになっているわけですね。
CG としてはシェーディングも非常に美しく表現されていますし、マウス操作による角度を変えての閲覧も可能で、基本的な部分はそつなくカバーされている印象。
また色が変化する際も、パッと瞬間的に切り替わるのではなく、じわーっと徐々に色が変化していくような感じになっていて好印象を得やすいと思います。
全体の雰囲気を一気に変化させるプリセットのようなものも導入できるようで、いろいろな製品でこのカスタマイザを利用できそうだなと感じさせる部分が多いです。
今回はリュックサックのカスタマイザを紹介しましたが、この企業が手掛けている案件はウェブに限らず様々なものがあります。
実際にそれらはサイトにたくさん掲載されているので、気になる方は見てみるのもいいと思います。比較的少人数のチームで成り立っている企業のようですが、それだけ小回りも利きやすいってことなんでしょうね。
リアルタイム性、という意味では、やはりウェブは最もその可能性を最大化できるフィールドだと思います。今回のようなデモを掲載することで、多くのクライアントに対する高い訴求効果が得られるだろうなと感じました。
記載されている文面を読む限りは、たぶん、このカスタマイザは企業の性格を説明するためのデモの意味も含んでいるのだと思います。この切り口も面白いなと思いました。
ぜひチェックしてみてください。
