Elementorでサイトを作っていて、「なんだか動きがなくて物足りない…」と感じていませんか？そんな時におすすめなのが「ホバー（Hover）アニメーション」です。ホバーとは、パソコンでボタンや画像の上にマウスカーソルを乗せた状態のこと。この瞬間にフワッと色が変化したり、上に浮き上がったりする動きをつけるだけで、サイトが一気にプロっぽく仕上がります。クリック率のアップにも直結する、簡単で効果的なテクニックを解説します！
ホバー設定の基本「色の変更」
まずは一番よく使われる、ボタンにマウスを乗せた時に色が反転する設定をやってみましょう。
- 動きをつけたいボタンウィジェットを選択し、左パネルの [ スタイル ] タブを開きます。
- ボタンの設定項目の中に、普通（通常）・マウスオーバー（ホバー）という2つのタブがあるので、「マウスオーバー」をクリックします。
- ここで、マウスを乗せた時のテキスト色や背景色を設定します。（例：通常時は青背景に白文字、ホバー時は白背景に青文字など）
- さらにトランジション期間の数値を「0.3」くらいに設定すると、パキッと切り替わるのではなくふわっと滑らかに色が変化するようになります。
動きをつける「ホバーアニメーション」
色だけでなく、要素そのものにアニメーションをつけることもできます。これも同じ画面から一瞬で設定可能です。
先ほどと同じ [ スタイル ] ＞ [ ホバー ] のタブ内にある、ホバーアニメーションのプルダウンを開いてみてください。Elementor には最初からたくさんの動きが用意されています。数ある中から好きなものを選択するだけで実装できます。コードを書いたり、何かをダウンロードする必要もありません。
⚫︎ よくあるアニメーション例
-
Grow（グロウ）： フワッと少しだけ大きくなります。一番王道で使いやすい動きです。
-
Float（フロート）： ふわりと上に浮き上がります。画像やカード型のレイアウトにぴったりです。
-
Shrink（シュリンク）： 逆に少し小さく（凹むように）なります。押し込んでいる感覚を出したい時に有効です。
スマホ表示での注意点
とても楽しいホバーアニメーションですが、一つだけ重要な注意点があります。それは、スマートフォンにはマウスカーソルが存在しないため、ホバーの動きは基本的に見えないということです。
スマホでは、ユーザーが画面をタップした（指で押した）瞬間に初めてホバー時のデザインが適用されます。そのため、マウスを乗せないと何のボタンか分からないような過度なデザイン変化はNGです。あくまでPCユーザーに向けた、クリックできるよ！という装飾として活用しましょう。
まとめ
- ホバー（Hover）とは、マウスカーソルを要素の上に乗せた状態のこと。
- [ スタイル ] ＞ [ ホバー ] タブから、色やアニメーションを設定できる。
- トランジション期間に数値を入れると、滑らかでプロっぽい動きになる。
- スマホではマウス操作がないため、ホバー効果に頼りすぎたデザインは避ける。
ボタンや画像がユーザーの動きに反応して生きたように動くと、サイトの操作性がグッと向上します。ぜひ色々なアニメーションを試して、お気に入りの動きを見つけてみてください！
