インクや流体を想起させる柔らかなインタラクションが面白い! クリエイティブ・スタジオ 14islands のウェブサイト
とにかくなめらかで心地よい感触
今回ご紹介するのは、クリエイティブ・スタジオ 14islands のウェブサイトです。
デザインから制作、また 3D 開発の分野まで幅広く手掛けるスタジオで、とてもハイエンドで完成度の高い作品を多数輩出しています。
今回のサイトでもとてもレベルの高いインタラクティブな演出の数々を見ることができ、同時に公開されている Lab ページのほうには、技術的にも大いに興味をそそられる、たくさんの実験作品が公開されています。
リンク:
14islands | Creative design & development studio.
Lab ページも漏れなくチェックしてみよう
14islands の手掛けたサイトは、すでに当サイトでも WebGL 実装のウェブサイトとしていくつか紹介しています。
もちろん WebGL を使ったものだけでなく、彼らの事例はそのどれもがとても完成度の高い仕上がりになっていて、過去の事例を眺めているだけでも刺激的ですね。
一方で今回のサイトのほうにあらためて注目してみると、流体のような演出が多く登場するのですが……
動きがなめらかで柔らかく、とても気持ち触り心地になっています。
たとえば、この上の画像を見ると、左側の領域に黒いインクのような部分が描画されているのがわかると思います。
今回のサイトでは、マウスカーソルの位置にこういったインクのようなエフェクトが発生するようになっていたり、そもそも画像自体が流体のようにゆらゆらと動いたり、とにかくいろいろな反応を楽しむことができます。
ページをスクロールしていく際に、下から新しい画像が登場するような場面では画像そのものがふわふわと揺らいで動くのですが、こういったところも非常に丁寧に作り込まれています。
一度にすべてを紹介するのが難しいほどに、いろいろな演出がとにかくたくさん仕込まれていますので、それらを探してサイト内を徘徊しているだけでも本当に楽しいです。
About ページにはペンでラインを引くことができるような実装があったり、デザイン的なかっこよさだけでなく技術力の高さも随所で感じることができます。
特に、実験作や過去の事例を掲載している Lab のページには、いろいろな技術を活用したデモがたくさん並べられていますので、ぜひともチェックしておきたいところです。
水玉のようなエフェクトも自然な仕上がりでなんともオシャレ。
自分でも、全体的に褒めまくってしまっているのがなんだか恥ずかしいのですが、とにかく隅から隅までいろいろな実装がぎゅっと詰め込まれていて、本当に楽しいサイトですね。
デザインだけでなく、また技術だけでもなく、それらが高次元でまとめられた素晴らしい実装の数々には、技術者なら思わず感嘆の溜息が出てしまうのではないでしょうか。
ぜひチェックしてみてください。