夏に涼しげな波紋デザイン/jQuery Ripples

こんにちは。
WebデザイナーのTikoです。

連日、暑くて湿度も高い日が続いていますね。

こんな日々が続くと、デザインの中でも涼しさを感じたいと思うもの。

今日は、画面上で波紋が揺れるようなエフェクトを入れた、心身ともにクールダウンできそうなデザインを作ってみました。

マウスホバーで背景の画像が水面に触れたように揺らめきます。
クリックすると、波紋が生じるようになっています。

https://template-artist02.netlify.app/
⬆️こちらはデモサイトに飛びます。
（パソコン版のみの導入となります。ぜひお手持ちのパソコンにて見てみてくださいね。
*iPhoneでも動画確認できました（一部のiOSのみ）。ただし質感は粗くパソコンで表現される波紋とはテクスチャーが異なります）

マウスで実際に触れてみるととても気持ちが良いので、涼感を感じたい方はぜひ。
ストレス解消になるかも笑


使ったプラグインはjQuery Ripples。
導入方法はとても簡単で、jQuery Ripplesで調べるとたくさんチュートリアルも出てきますので、ぜひ実装してみてください。
⬇️こちらはGitHubのダウンロードサイト。

GitHub - sirxemic/jquery.ripples: Add a water ripple effect to your background using WebGL.

今年の夏はなかなか出かけられないので、画面上でも海や水を感じてもらいたい。質感で涼しさやみずみずしさを伝えられたらいいですよね。

ちなみに、涼しそうなデザインといえば、グラスモーフィズムなんかも良いですね。


デザインは視覚のみの表現だけれども、その中にいかに視覚以外の感覚を込められるか。
視覚以外のものを伝えられるか。

音、質感、温度感、香り、空気感、季節感、味覚、あるいは感情だったりを、そこに込めて伝えること。

それがデザインの難しさでもあり、面白さであり、楽しさでもあるのかなと感じる今日この頃です。

では、心地よいデザインとともにある、心地よい１日をお過ごしください。