こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトのデザインにおいて、ユーザーが思わず「触ってみたくなる」ボタンは、CVR（コンバージョン率）を大きく左右する重要な要素です。
今回は、マウスをボタンにホバーすると、まるでインクが染み込むように広がるアニメーションを実装する方法をご紹介します。
このエフェクトは、ただの色変化やシャドウとは一味違い、ユーザーの視覚的な体験を刺激します。
例えば、フォーム送信ボタンや購入ボタンなど、サイトの重要なCTA（Call To Action）に取り入れることで、クリック体験をより印象的に演出できます。
マウスの位置に応じて広がるインクアニメーション
シンプルなホバーアニメーションです。
ボタン内に疑似要素を作り、マウスホバー時に円が広がることで「インクが染み込む」ような演出を作ります。
マウスの位置からインクが広がる演出を加えるて、より直感的でインタラクティブなボタンになります。
JavaScriptを少し追加するだけで、クリックやホバーした位置から円が広がる表現が可能です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
この手法を使えば、ボタンのどこにカーソルを合わせても、ユーザーの操作に応じて反応する動きを実現できます。
よりダイナミックで、サイト全体のUXを向上させることが可能です。
応用アイデア
- CTAボタンやフォーム送信ボタンに導入して、クリック体験を楽しくする
- インクの色や透明度をサイトのテーマカラーに合わせて調整
- ホバーだけでなく、クリックでも広がるようにアニメーションを設定
- 複数ボタンで異なる広がり方や速度を設定して個性を演出
まとめ
インクが染み込むように広がるボタンアニメーションは、ユーザー体験を向上させる魅力的な演出です。CSSだけでシンプルに実装でき、JavaScriptを追加すれば、クリック位置に応じて広がるインタラクティブな表現も可能です。Webサイトに取り入れて、印象的なボタンデザインを作ってみましょう。
satokotadesignキャンペーン実施中！
