セキュアな環境でチャットや通話ができるサービス Gleec のティザーサイトは神秘的な雰囲気満点
様々な動きがシーンを演出
今回ご紹介するのは、いわゆるチャットツールとしてリリース間近? の Gleec というサービスのティザーサイトです。
この記事を執筆している時点では、まだサイトは公開されているもののアプリストアには本体がリリースされていない状況ですが、今回のサイトを見るとこのアプリがどのような点をアピールポイントに設定しているのかがわかります。
まるで宇宙空間のような洗練された雰囲気もそうなのですが、なにより動きが非常に滑らかで面白いのでご紹介します。
様々なシーン遷移に注目したい
今回のサイトは宇宙のような暗めの雰囲気のなかに、主に、シルエットやパーティクルなどを用いて様々なオブジェクトが描き出されます。
宇宙空間のような雰囲気こそ統一されているのですが、演出の仕方というか……アニメーション効果が様々用意されていて、それらを見ているだけでも結構参考になる点は多そうです。
まず、最初に表示されるページでは、スクロール操作で次のシーンに進んでいくことができるのですが、ここでおもむろに画面内をクリックしたままホールドすると、ナビゲーションページのようなものが出てきます。
このナビゲーションページに移る際の遷移演出が、非常にかっこいいですね。
これ若干暗いのでわかりにくいかなと思うんですけど……
ただでさえ黒っぽい雰囲気の空間なので、どうしても静止画ではわかりにくいのですが、マウスボタンをホールドした瞬間に、まるで異空間に転移するような感じで、画面の中心からもうひとつの空間のようなものがぐわーっと出てきます。
この演出はあまり見ないタイプのインタラクションで、非常にかっこいいですね。
また、スクロールして他のコンテンツを見ている際も、詳細ページに移動しようとすると背景が切り分けられたパネルのような感じになり、一気に色合いが反転したりして、目に楽しい演出が多いです。
さらに、パーティクルを使った演出も、実によくできてます。
ビデオを利用した通話機能を紹介するページでは、人のシルエットをパーティクルで表現したものが置かれています。点の大きさや立体的な位置をしっかり調整しているので、見事に 3D のホログラムが浮き出しているかのような雰囲気を実現できています。
About ページなんかにはパーティクルで表現された地球のモデルが置いてあったりもするので、いろいろとサイト内を探索してみるのもいいかもしれません。
今回はスマートフォン向けのアプリの、ティザーサイトというか告知サイトをご紹介しました。
この手のアプリって、正直今はかなり種類もありますし、独自性を打ち出しながらユーザーを増やしていくのってかなり難しいのではないかなと思います。
ただ今回のサイトを見る限りは、このサービスに独自の衣装をまとわせようという強い意図は感じますね。近未来的で、洗練された印象をしっかりとサイトで表現できていると感じました。
エンジニア目線では、その多彩な WebGL を利用した画面遷移などがとても参考になるかなと思います。
非常にシンプルではありますが、とてもかっこいいサイトです。
ぜひチェックしてみてください。