余白を広く取った大胆なレイアウトとノイズを活用したインタラクションが面白い Vadim Tyurin さんのポートフォリオ

doxas : 2019-06-14 16:44:18

大きめのフォントや特殊な文字の配置が面白い

今回ご紹介するのは、モスクワで活動している Vadim Tyurin さんというデザイナーさんのウェブサイトです。

こちらのサイトでは、Vadim Tyurin さんが制作に関わった作品を主に画像を使って紹介しています。

非常に余白が広く取られた特徴的なデザインで、フォントも丸みのある独特なものを使っていますね。直線と曲線で作られる開放感のあるデザインになっています。

リンク:

Fav works

インタラクティブに画像が変化する

今回のサイトでは、ノイズを使ったトランジション演出が使われています。

これは想像ですが、今回のサイトはあまり JavaScript や WebGL に詳しいひとが実装したものではないのかなと思います。

なんというか……ちょっと言い方が悪く聞こえてしまうかもしれないですが、使われている演出を見るとそれをどこかから拾ってきて組み合わせたような、そういう印象を受けます。

画像のひとつひとつにトランジション演出が仕込まれているのですが、たぶん、画像の数だけ three.js のインスタンスを作ってますね…… そのあたり、たぶんちょっと不慣れな人が実装したのかなと思わせるところがあります。

トランジション演出そのものは、非常に軽快で心地よいアニメーションになっていて、マウスカーソルを画像の上にホバーさせると……

はい、こんな感じで画像が一瞬歪んだようになります。

そのままホバーし続けていると、徐々にエフェクトが収束していき、元の状態に戻ります。

ノイズを使って歪ませた状態を維持し続けるわけではなく、元の状態に自然と戻るようになっているというのはちょっとおもしろいです。

今回のサイトには、私が見た限りはこれ以外の WebGL の実装は無さそうに見えます。

しかし、今回のサイトの場合は全体的なデザインというか、構図といったらいいのでしょうか……

サイトの雰囲気に対してはこれくらいの演出でちょうどいいように感じます。

あまりしつこくインタラクティブな要素を詰め込むよりも、これくらいのシンプルな演出のほうがちょうどよいアクセントになっているなと思います。

冒頭に、ちょっと辛辣というか…… 見方によってはちょっと悪い印象を抱かれかねないようなことを書いてしまいましたが、すごく個人的なことを言うと、見よう見真似で WebGL が使える時代になっているというその事実のほうが、私にとってはちょっとうれしいと感じてしまいます。

人の表現を丸パクリするというか、コードやシェーダをそのまま盗用するというのはもちろん良くないことだと思います。

しかし、手軽に three.js や Pixi.js を使って誰もが表現をひとつ上のレベルに押し上げられるというのは、とても良いことだと思いますね。まあこれについては、議論すると熱い展開になりそうなので、一個人の意見として捉えてもらえたらと思いますが、こうやって WebGL が民主化していくというか、誰にとっても活用しやすいものになっていくのは、それはそれで正しい WebGL の進化の道程だと思います。

ただ、three.js のインスタンスを何回も初期化していたりするのはどう考えてもおかしいですし、そういうところはやはり、批難するのではなく正しい知識を布教する努力をすることで、解消していかなくてはいけないのかなと思いました。

ちょっと最近ではありがちな演出かもしれませんが、全体的なサイトの構成も含めて、よく工夫が凝らされていてバランスもとても見事だと思います。

ぜひチェックしてみてください。

リンク:

Fav works

share

follow us in feedly

search

search

sponsor

social