とあるデザインスタジオのサイトが WebGL を利用したシンプルながらもカッコいい仕上がり
黒を基調にしたセンスあるデザイン
今回紹介するのはデザインスタジオの Kraftwerk のサイトです。
それほど大規模でもなく、けしてボリュームのあるコンテンツというわけではありませんが、サイト全体に統一感のあるハイセンスな雰囲気が満たされていて、なんともカッコいいです。
マウスのスクロールに応じてダイナミックに表情を変える背景にも注目です。
ときおりノイズのようなエフェクトが！
黒っぽい背景に、うっすらと浮かび上がるメッシュ。
さらに、マウスカーソルの位置に応じてぼんやりとライティングされる様子など、非常にカッコよく仕上がっています。
サイトを閲覧しているとときおりノイズが走り画面内が乱れるのですが、それもさりげない演出として雰囲気によくマッチしています。
若干見えにくいですが、画面の左側と下側にノイズが走っている様子。
サイト全体が、上から下までで五つのブロックに分かれています。
独特の外観を持つスクロールバーなどが表示されていますが、特にスクロールを乗っ取るような、変なスクリプトは書かれていない様子。
スクロールに連動して、メッセージの他、背景に浮かび上がるメッシュの形状が変化します。
目のような模様が浮かび上がっている様子が見て取れる。
この背景にあるメッシュは、カーソルが近づくと頂点が引っ張られるような感じで変形します。
色だけでなくメッシュの形状が変化するあたり、しっかり作りこまれている印象を受けます。
雷のマークのようなモデルは第四階層付近。
なにかのイベントやプロモーションではなく、恐らく普通のコーポレートサイトなんだと思うのですが、これだけしっかり主張が見えてくるサイトなら、依頼する側もその技術やセンスをしっかり把握したうえで検討できそうですよね。
日本でこういったサイトの運用がそのまま通用するとは必ずしも言えないとは思いますが、WebGL を用いてしっかり自社の持つ技術やポリシーを発信していくのは、非常に素晴らしい取り組みだと思います。
