ノイズを利用したホバーエフェクトが面白い！ 手作りの家具・インテリアを制作している Waka Waka のウェブサイト
ノイズを活用したホバーエフェクト
今回ご紹介するのは、ロサンゼルスにあるインテリア製品のスタジオ、Waka Waka のウェブサイトです。
今回のサイトでは、全体のシックで落ち着いた雰囲気のデザインにぴったりマッチした、ノイズを利用したホバーエフェクトが実装されています。
私の環境のせいかもしれないのですが、ちょっとだけロードに時間が掛かる場合があるようなんですが、その分、非常に雰囲気の良いシーンづくりを堪能することができます。
リンク：
写真素材がまずなにより雰囲気満点
今回のサイトでは、ちょっとノスタルジックな雰囲気と言いますか……
どこかレトロで、かといって古臭いわけでもない、不思議な雰囲気でサイト内のデザインや配色が統一されています。画像素材がフィルム写真のような質感なので、そこがまたサイト全体の雰囲気の底上げになっているのかなと思います。
トップページからいきなり大きめの写真が掲載されているのですが、サイト内で見ることのできる多くの写真では、マウスカーソルをホバーさせることで、ノイズを使ったホバー演出を見ることができます。
これ、わかりますかね……
上の画像を見ると、まるで画像の一部が欠けてしまったかのように白抜きになっていると思うのですが、これは実際には、２枚の画像を同時に使いつつ、マウスカーソルがホバーしている位置にだけノイズによるマスクが掛かっており、裏にある画像が透けて見えている状態です。
このノイズ模様を利用したホバー演出には、トップ部分にある「後ろにある画像が姿を覗かせるもの」のパターンと、同じ画像を利用しているけれども「色の風合いだけを変化させる」パターンの２種類があります。
どちらも強烈すぎないほどよい外見上の変化を伴う演出で、サイトの風合いにぴったりです。
サイト内には、このスタジオの制作を手掛けている Shin Okuda さんの写真も掲載されています。
サイト上では Shin Okuda と記載されているのですが、いろいろ検索してみた感じだと奥田 慎一郎さんというお名前の方みたいですね……
ロサンゼルスでは結構有名なインテリア・デザイナーさんのようで、サイト内に掲載されている氏の作品の写真を見ても、どの作品もすごく個性的な感じです。
今回のサイトでは、あくまでも主役はインテリア作品の写真だと思います。
その良さを損なわない形で、しかし思わず目を引くような、ちょうどよいバランスの演出としてノイズを利用したホバー演出が使われているのだと思います。
飛び抜けた奇抜なデザインというわけではないのですが、圧倒的な納得感というか……演出も含めてすごくきれいにまとめられているサイトだなと思いました。私にデザインの素養がもう少しあればうまく言葉で表現できるのかもしれないのですが、すごくまとまってる気がするという説明しかできない……（語彙力）
ぜひチェックしてみてください。
