グリッチノイズとインタラクティブな表現が面白いクリエイティブスタジオのウェブサイト
黒を基調にしたクールなデザイン
今回ご紹介するのは、とあるデジタルクリエイティブスタジオのウェブサイトです。
このサイトはカラーリングを黒系に統一したシンプルな構成ですが、背景で WebGL のデモを動かしているためか、意外に迫力のある外見になっています。
ちょっと尖ったような、そんな雰囲気を演出するためでしょうか。随所にノイズをうまく利用した演出が施されており、なかなかかっこいいです。
ノイズを利用した表現がクール
今回のサイトは、WebGL を使っている部分以外のところも結構しっかり作ってあって、アニメーションしながら表示される画像の動きとかもいい感じです。
本記事では、WebGL の実装部分にフォーカスして紹介しますが、サイト全体を通じての完成度が高いですね。
パッと見た印象から、どうしても WebGL のデモのほうに目が言ってしまうのですが、細かい所までしっかり気を配って作られており、たとえばメニューを表示させた際に、Work や About など、リンクになっている文字の上にカーソルを持っていくと、ノイズを使って文字がビリビリと揺れる様子などを見ることができます。
WebGL のデモはワイヤーフレームを中心にした表現になっていて、マウスカーソルの位置に応じたインタラクションが常に働いています。
カーソルのある位置には、ライトが当たったようにほんの少しだけ明るい色が当たるようになっており、暗闇の中にぼんやりと浮かび上がってくるような、不思議な質感になっています。
また、静止画ではお伝えできないのですが、時折激しくグリッチノイズが走るようになっていて、デジタルでノイジーな感じの印象に仕上がっています。
みんなほんとグリッチノイズ好きよね。
静止画ではわかりにくいが、ノイズがバリバリ走る。
全体の色が暗いので、キャプチャした画像だと何が映っているのかちょっとわかりにくいですね。
実際にサイトに行ってみてもらえばわかると思いますが、ワイヤーフレームで表示されている 3D モデルは、常にマウスカーソルの位置に応じて微妙に頂点が動いたりするので、インタラクティブな表現としても面白いと思います。
また場面に応じて、目の形のモデルになったり、手の形のモデルになったり、あるいはこのスタジオのロゴの形になったりと、形状の変化もインタラクションを考慮したものになっています。
それぞれのページに合わせて、テーマごとにモデルの形を変えているのでしょうね。
スタジオの名称に「Kraft」とありますが、要はこれは「craft」のことを指しているのだと思います。
クラフトとは「技術」などの意味を持つだけでなく、人の手で作った「工芸品」などの意味もある言葉です。デジタルなものづくりであっても、そこに「手作りの良さや素晴らしさ」を追求していくのが彼らのスタンスなのかなと思います。※知ったかぶりです
WebGL を使った表現も、徐々に一般的なものになってきつつありますが、その弊害か結構似たような外見のデモやサイトが多くなってきました。
グリッチノイズなんかはその典型かなと思いますが、今後、どういった形でウェブ上の表現が進化していくのか、個人的にはとても楽しみです。
よくあるパターンではあるのですが、ノイズの乗せ方とかはとても上手です。サイト全体の完成度も高く、WebGL 抜きでも、一度見ておいて損はないかなという感じがします。
ぜひチェックしてみてください。
