部分的に時空が歪むような独特なエフェクトがおもしろい The Variable のウェブサイト

doxas : 2024-06-26 12:18:20

余白を広く取ったシンプルデザインがかっこいい

今回ご紹介するのは、The Variable というエージェンシーのウェブサイトです。

ウェブサイト全体のデザインという意味でも余白をうまく利用したシンプルな構成ですし、3D や WebGL の表現という意味でも、空間を広く使った表現がうまく組み込まれていますね。

単なる平面的なウェブサイトとはちょっと違った、個性的なウェブサイトとなっています。

今回のサイトでは、トップページのロゴマークが表示されるシーンから、かなりシンプルで個性的な雰囲気がバッチリ演出されています。

自分自身はデザイナーではないのでわからないのですが、たぶん余白を広く取ったデザインって見た目以上にバランス取るのがむずかしいものなのではと想像します。

その点では、今回のサイトはすごくバランスよく感じますし、上手にまとまっているなと思います。

この上の画像を見ると、ロゴの一部がオレンジ色に変色しており……

さらに少し空間が歪んだような感じで変形しているのがわかるかと思います。

実際にサイトに行って見てもらうのがわかりやすいと思うのですが、カーソルの位置に対してのみ、時空が歪んだかのようなエフェクトが発生するようになっています。

テーマカラーのオレンジがなんとも映えますね。

このカーソル位置に発生するエフェクトは、その他のセクションでも同様に用いられており、見ようによってはワンパターンに感じる人もいるかもしれませんが、個人的にはそのようには感じません。

それはどうしてなのかな～と考えてみると、たぶんエフェクトの掛かり方は同じでも、それ以外の部分で異なる演出方法が用いられているからなのかなと思います。

カーソルの動きに応じて傾いたり、あるいはスクロール量に応じて姿勢が変化したり、見せ方にいろいろな工夫が凝らされていてバリエーションが豊かです。

3D 的な表現を考えるとき、空間的な広がりをどうウェブのデザインに落とし込むのか、ということって言葉で言う以上にむずかしい問題だと個人的には感じます。

文字と文字の間や、段落と段落の間に、いったいどのくらいの余白を設定するのが適切なのかにもいろいろ考慮しなければならないことがあるように、3D 表現における空間としての空白・隙間の取り方にも同じ難しさがあると思うんですよね。

その点で、今回のサイトの余白の取り方はウェブサイトを構成するその他の要素とのバランス感が見事に揃っていて、全体としてのまとまりがすごくよいなと感じました。