Blog スタッフブログ

こんにちは、Webデザイナーのそいです。

今年の秋はよく雨が降る気がします。雨水が地面に落ち、水たまりができて水面が揺らぐという光景をよく目にします。

今回はそんなシーンから、「水」が印象的なサイトデザインを調査＆ご紹介していきたいと思います。

ボタニスト

何度かデザインまとめで紹介してきた「ボタニスト」のオフィシャルサイトです。

キービジュアルは水の玉がゆらゆらと動いていてナチュラルでクリーンな印象です。

このサイトの中でも注目してもらいたいのは右上のメニューボタンを押したあとの画面です。

画面に切り替わる時に水面がゆらぐようなアニメーションが入ります。ぼよぼよと波紋が広がりメニュー画面に変わる様子がとても印象的でした。

ボタニスト | BOTANIST

Falmec

次はイタリアの高級レンジフードメーカー、ファルメック（Falmec）の「Water」コレクションのサイトです。

キービジュアルには水平アングルの水面の写真が大きく使われています。スタイリッシュな印象ですね。

画像ではとてもわかりにくいのですがマウスカーソルにそって水の波紋が発生するアニメーションが実装されています。どんどん広がる水の輪がおしゃれでとても心地が良いです。

メインコンテンツ部分もスクロールアニメーションが使われており気持ち良いサイトになっているのでぜひアクセスしてみてください。

Water by Falmec

オフアンドリラックス

次にOff & Relax（オフアンドリラックス）のというシャンプーのブランドサイトです。

写真と白が映えるスタイリッシュなサイトです。このサイトで注目してもらいたいのは画像のホバーエフェクトです。

スクリーンショットでは、右上の紫の画像にカーソルを重ねているのですが、少しボワッとしているのが見えるでしょうか。

このように、このサイトでは画像のホバーエフェクトが先ほどのサイトのように水のゆらぎが発生するようになっています。平面の画像が水のゆらぎにあわせて歪むので、不思議な気持ちにさせてくれます。

Off & Relax（オフアンドリラックス）オフィシャルサイト

エイトザタラソ ユー

最後に8 THE THALASSO u（エイトザタラソ ユー）のサイトを紹介します。

こういった「水」と「シャンプー」などのケア用品は相性が良さそうですね。深みのある青が綺麗なサイトです。

このサイトでは水のゆらぎをスクロールアニメーションで表現されています。

少しゆがんだ画像がスクロールと同時に真っすぐな四角になる動きがつけられています。

加えてフラッシュがつくように真っ白で露光した四角から画像が出現するといった二重効果がかけられており質感を感じます。パララックス効果やホバーアニメーション、スクロールアニメーションなどかけられることも多いのですが二重効果が珍しい印象でした。

まとめ

いかがでしょうか。今回は水のゆらぎに焦点を当てたサイトデザインを紹介しました。

動きで水を表現することで没入感がアップ、操作感が心地よくなる印象がありました。

ケア用品のサイトを作ったり、クリアな印象のサイトデザインを作るときにぜひ参考にしてみてください。

今回もご一読いただきありがとうございました。