スマートウォッチ用のインターフェースデザインを WebGL で再現した TIKTOK！
スマートウォッチのスマートなインターフェース
今回ご紹介するのは、スマートウォッチ用のインターフェースを提供するアプリケーションのウェブサイトです。
このアプリの動作対象となるスマートウォッチは SAMSUNG の一部の製品に限られるようです。
そこで動作するアプリケーションであり、同時に盤面の役割も果たすインターフェースとしての顔も持ち合わせている、そんなアプリみたいですね。
私はスマートウォッチの類は一切身につけたことが無いのですが、洗練されたデザインが非常にかっこよいですね。
シンプルな雰囲気重視の WebGL 実装
今回のデモは、非常にシンプルな構成といいますか、ほとんどユーザー側で操作できる部分というのはありません。
マウスカーソルの位置に応じて若干 3D モデルの位置が動いたりはするのですが、かといって、ドラッグ操作でぐりぐり動かしたりすることもできないので、どちらかというとただ眺めるだけのコンテンツという感じですね。
製品の雰囲気を見事に再現している（と思われる）非常にかっこよい外見が特徴でしょうか。
時計の針に相当する部分が、盤面上に現れた円形のラインによって表現されるという近未来的なデザインになっています。
一番中心に近いところにあるグレーのサークルは、一秒で一周します。その外側にあるやや細めのラインが一分で一周、外側に行くに従って一時間で一周、一日で一周というようにラインの意味するところが変化するようです。
WebGL 版でも本物と同様にそのような動作が再現されている感じですね。
全体に暗い雰囲気なのでわかりにくいですが、時計の本体部分のボディもきちんとライトなどが当たり、立体的に表現されています。
サークル状のラインが一周するとひとつの単位時間が進みます。
また、画面の時計以外の部分で言うと、下のほうに見えている六角形の模様が描かれた床の部分も、波打つように常にアニメーションしています。
最近こういうサイバーな雰囲気の作品が多く見受けられるようになってきていて、この手の「光って波打つ床」はあまり珍しい表現ではなくなっています。
しかし、微妙な光を放ちながら、非常に滑らかに動く床面の表現はなかなかかっこいいですね。
画面の右上あたりにあるロゴマークにマウスカーソルをホバーさせると、このアプリケーションに関する簡単な説明を見ることもできます。
この説明が表示される状態の場合は、時計の盤面部分も、本来の時計のインターフェースではなくこのアプリケーションのロゴマークになるようです。
ほとんど操作が行えないので、ややボリューム不足というかアッサリとした印象のサイトです。
ただアプリケーションの雰囲気というかコンセプトが非常にわかりやすくシンプルなものなので、ある意味それに非常に添った形になっているのかなとも思います。
特に CG として珍しい技術を使っているという感じはありませんが、薄っすらと光る時計のボディのややマットな質感や、光る床面の表現などはシンプルながらかっこいいですね。
これくらいの規模感なら、three.js を使えば結構ササッと作れてしまうと思いますし、製品の魅力を伝えるという意味では必要十分といえるのかもしれません。
気になる方はチェックしてみてください。
