素材の魅力を損なわないデザイン・インタラクションが秀逸! NY に工房を構える Matthew Fisher のウェブサイト
アートとしての石材インテリア
今回ご紹介するのは、ニューヨークに工房を構えている Matthew Fisher さんのウェブサイトです。
実際にサイト上からも購入することができるアート作品が、サイト内にも多く紹介されています。大理石に見られるような石材独特の模様を上手に使ったアート作品のようなオブジェですね。
ニューヨークにアトリエがあるくらいなので、アートやインテリア界隈では有名な方なんでしょうか……
作品はどこか古代ギリシャなどの歴史的な世界観を感じさせるテイストのように私は感じました。
リンク:
Matthew Fisher / Art Objects ©2021
イージングの溜め
今回のサイトでは、インタラクティブ性のある要素がとても多く実装されていて、ユーザーのアクションに応じた様々な演出を見ることができます。
そのうちのいくつかが WebGL を使って表現されているわけですが……
最初に登場するのが、トップページに配置された画像に対する、マウスカーソル位置への小さなホバーエフェクトです。
静止画ではほとんどわからないと思いますが…… 実際に動く様子を見ると、ほんの少し違和感を感じるような、さりげないディストーションが掛かってます。
石の模様がなんとも美しいですよね。
余白を大きく取ったレイアウトで、写真を通じて作品の魅力が十分に伝わるよう工夫されていると思います。
さらにスクロールを続けていくと、作品が横に並んだような場面が出てきますが、ここではカーソルをホバーさせたときに画像全体が弾むような感じで動きます。
弾むというか、波紋が広がるような感じ、とでも言ったらいいですかね……
なかなか迫力のある演出です。
さらにこの場面では、この上のキャプチャ画像にちょうど写り込んでいるのですが、カーソルの位置に表示されるサムネイル部分が、カーソルの動きに応じて変形する演出も使われていますね。
このあたりはほんとに静止画で見せられてもよくわからないと思いますので、ぜひ実際に動く様子を確認してみてください。
また、紹介されているオブジェは購入することができるものもあり、サイト上で詳細を確認できるようになっています。
この販売ページではちょっとわかりにくいのですが GALLERY と書かれているあたりに BACK と NEXT の文字があり、そこを押すことで写真が入れ替わる演出を見ることができます。なかなか面白い見せ方なので、触ってみることをおすすめします。
2240 USD !!
石をきれいなフォルムに切り出すというのは、かつては人間の彫刻技術による職人技だったのでしょうが、現代ではどういう手法によって行われるのでしょうね……
ニューヨークにアトリエを構え、高級インテリアとしても通用する存在感のあるアート作品を生み出し続けるというのは、ものすごく大変なことのように素人ながら想像してしまいます。
ウェブの実装として見たときには、やや溜めの強いイージングが使われていて、インタラクションにも個性が感じられる仕上がりです。あまりスイスイ・サラサラと軽く動くよりは、こういう重厚な感じのアニメーションのほうが今回のサイトのテーマにはマッチしているような気がしました。
ぜひチェックしてみてください。