工具のナットを連想させる六角形をこれでもかと盛り込んだコンセプトがおもしろい三桂電機のウェブサイト
いろんなアイデアが盛り込まれている
今回ご紹介するのは、産業機械に関する事業を展開する企業、三桂電機のウェブサイトです。
富山県にある会社のようですが、産業機械の販売から修理までさまざまなサービスを展開しているみたいです。
今回のサイトでは産業機械を扱う企業らしい、六角ナットをイメージしたバリエーション豊かな演出を見ることができます。
リンク：
三桂電機（富山市八尾） | 産業機械の販売・修理・メンテナンスはお任せください
触り心地も心地よく
今回のサイトの WebGL 表現は、極端な話、おそらく CSS でも表現できるようなシンプルな立体表現です。
制作時にどういう背景があったのかまではわからないですが、CSS ですべてを実装した場合と WebGL で実装した場合では、表現力はもちろんパフォーマンスという意味でもやっぱりまだまだ差がありそうに思いますので、そのあたりの判断があって WebGL を使っているのかもしれません。
WebGL を使って立体的な構造を描いている部分以外にも、たくさんの回転するパーツが使われています。
静止画で見ても全然伝わらないと思うのですが……
スクロールなどのユーザーの操作にインタラクティブに反応するようになっていて、そのモーションの滑らかさや余韻の付け方も含めて、すごく丁寧なアニメーションになっています。
ナットをくるくると回していくような、気持ちの良いアニメーションですね。このアニメーションの質感はサイト全体でも統一感を持って扱われている感じがします。
コンテンツが上下に動くという意味でのスクロールがいったん止まり、スクロール操作をすることで逐一コンテンツに変化が現れるようなセクションもあります。
ここでもやはり、ナットが回転するようなアニメーションが使われています。
ナットが回転するなんてすごく画一的な動きというか、単純な動きに過ぎないはずなのに、いろんな見せ方があって本当にすごいなと思いました。
WebGL で実装された 3D シーンと、CSS で装飾された HTML の要素とが、見事に連動しながらひとつのウェブサイトとしての形ができています。
WebGL を勉強する過程で、だれもが一度はシンプルなボックスや円柱などを使って作品を作ってみると思うのですが、そういったシンプルな形状だけを用いた表現って実は結構難しいんですよね。
みんな同じようになってしまうというか……
ここまで個性を持たせてウェブに落とし込めるというのは本当にすごいです。
ぜひチェックしてみてください。
