持ち運びに特化した折りたたみ可能なカトラリーを WebGL で表現した Akinod のウェブサイト

doxas : 2023-11-27 13:55:04

3D であることの利点を生かした実装

今回ご紹介するのは、Akinod というカトラリーなどを製造・販売しているメーカーのウェブサイトです。

いわゆる十徳ナイフのような感じで折りたたむことができるようになっていたり、複数のカトラリーを重ねて１つにまとめることができたりと、携帯性を高めた製品がウリのようですね。

機能性を 3D 表現によって見事に説明していて、とてもわかりやすくなっています。

今回のサイトでは、おもに２つの製品が紹介されています。

１つは、ナイフとフォーク、そしてスプーンがすべてまとまってコンパクトに持ち運べるという商品。

こちらはカトラリーのそれぞれに付けられている凹凸がピッタリとはまることで、小さくまとまる仕組みになっているみたいです。

シーンには 3D モデルだけでなく、一部テキストなどの UI も描画されるようになっています。

UI の中には、ラジオボタンのように１つの選択肢を任意に活性化させるような機能があるものもあり、金属の材質を変化させることができたり、柄の部分の模様を変えることができたり、結構柔軟です。

個人的にちょっと驚いたのが、名入れのサービスがあるようで、それもこの 3D シーン上で再現できるようになっている点です。

このようなインターフェースを場面転換することなくシームレスに繋いで表現するのはなかなか丁寧な実装だと感じました。

また今回のサイトの特徴として、3D シーンに発生するアニメーションの表現が製品の特徴をすごくよく表しているということが言えると思います。

単に 3D 化して終わりというのではなく、ここが回転する、ここが重なって１つになる、といった製品の構造や特徴を表現するのに WebGL がこの上なく役立っていますね。

それらのアニメーションがなめらかに動く様子を見ながら、製品の使い道を想像する…… そんな使い方ができる実利的にも申し分ないウェブサイトだと思いました。

今回のサイトはポストエフェクト盛り盛りというわけでもなく、どちらかというと、王道的なシンプルなシェーディングで 3D モデルが描かれます。

あまり CG 的な演出には凝っていないわけですが、今回の場合はむしろそれが正解だなと感じます。

シンプルで機能的なインターフェースと、質感が最低限度しっかりと伝わる 3DCG のバランスが良く、触っていて心地よいウェブサイトだなと思いました。