直線的なレイアウトとスピード感のあるインタラクションがクールな Non-Linear Studio のウェブサイト

doxas : 2024-08-22 12:29:14

個人的にはすごくすきです……

今回ご紹介するのは Non-Linear Studio というクリエイティブスタジオのウェブサイトです。

ウェブのアワード等でも受賞歴があるようなので、存在をすでに認知しているというひともいらっしゃるかもしれません。

今回のサイトのデザインは直線やグリッドを活用している部分が多いように感じられ、とてもエッジの効いたかっこいいビジュアルとなっています。

今回のサイトでは、ある意味、キービジュアルが一番ウェブサイト全体のトーンから逸脱しているような気がします。

あえてそうしているのだろうとは思うのですが、トップページでまず最初に表示されるキービジュアルは他の箇所とちょっと味付けが違っているように個人的には感じました。

立体的な表現もうまく取り入れつつ表現されているキービジュアルに対し、スクロールすることで閲覧できるその他のコンテンツは、あまり立体や曲線を想起させる部分がありません。

いったいどういう意図があって、こういうデザイン・ビジュアルになっているんですかね？

スクロールしていくと現れる事例の紹介セクションでは、画像がグリッドで区切られ、それぞれのグリッドごとに UV がずれたような、モザイク風の演出を見ることができます。

このグリッドを活用したモザイク風の演出は、ウェブサイト内のいたるところで見ることができ、統一感のある演出としてかなり存在感が強いです。

works のページにも同様の演出がありますし、各事例の詳細を記した下層ページでも、同じようにこのモザイク風演出が使われていますね。

WebGL で演出されている部分以外の、CSS や DOM によって構築されているレイアウト・スタイリングについても、すごく直線的で綺麗に整った状態で表示されます。

ほとんど曲線的な表現がありませんし、イージングの味付けもシュッとしていて爽快感があります。

やっぱり、トップページ冒頭のキービジュアルだけが際立って異なる味付けになっているような気がして、逆に印象に強く残りました。

デザインを構成する要素には、単純なスタイリング以外にも、色調や動きのトーン、そして時にはサウンドやインタラクティブ性など、さまざまな構成要素がありますよね。

今回のサイトは彼らの組織名である Non-Linear から想起する印象とはむしろ真逆の、線形でエッジの効いたデザインを中心としつつも、どこかにほんの少しのカオス性みたいな部分が感じられて、おもしろいバランス感だなと思いました。

WebGL の実装としてはあまり複雑なことはやっていなくて、意図的に絞ったバリエーションのなかで上手にサイトを演出しているなと感じます。