とにかくオシャレでクールなデザインが目を引くクリエイティブ・スタジオ Synchronized のウェブサイト
デザインやインタラクションもお見事
今回ご紹介するのは、デジタル・クリエイティブ・スタジオ Synchronized のウェブサイトです。
一見した印象は、どちらかというと恐らく「WebGL バリバリに使ってますという感じでもないな……」と感じるひとが多いんじゃないでしょうか。
実際のところ、演出面も WebGL に一辺倒という感じではなく、かなりバランス良く様々なテクニックを組み合わせて実装されています。
リンク：
Synchronized | Digital Creative Studio
スルスルと滑らかな触感
今回のサイトでは、イントロの演出からいろいろな要素が動いたり、フェードインしたりと、かなり目を引く演出が多数盛り込まれています。
WebGL を使った 3D 的な表現があるわけではないのですが、かなり派手な演出がたくさん出てきます。
最近だとカーソルの位置にサークル模様を出して、そのサークル模様を動的に動かすことで印象を変化させているサイトとかよく見かけますが、今回のサイトの場合は軌跡をラインで表示することでちょっと変わった手触りに仕上げています。
黄緑色のラインが出ているのがわかるでしょうか。
このラインがあるおかげで、どこか好奇心を刺激されるような雰囲気がかなり強く演出されていますね。
さて、一方で肝心の WebGL はどこで使われているのかなんですが……
実は、かなり見えにくいのですがこのサイトの背景の黒い模様が、実は WebGL によって描かれているんですよね。静止画ではなくレンダリングされているものなので、マウスカーソルに対してインタラクティブに反応します。
また、圧巻なのは事例紹介のセクション。
ここではスクロール操作に応じて、事例の概要を記載したカード状のオブジェクトが歪むようになっていたり……
そこから詳細を見に行くときも、カードがアニメーションしながら画面全体に広がるような動きがあったり、その動きとノイズディストーションが組み合わされていたりとにかく手が込んでいます。
全体的な印象としてとにかくオシャレでクールな手触りが素晴らしいサイトとなっています。
単に「ユーザーの操作に応じて動いている」ということをもう１つ２つと突き詰めていき、その動きに意味をもたせつつかっこよさも担保するみたいな、すごい高尚なことが普通に行われていますね。
高い次元で様々な演出を上手に組み合わせた見事な事例だと思います。
ぜひチェックしてみてください。
