気持ちいいHover Animationの作り方【UIフィードバックの基本】

1.Hover Animationとは？

Hover Animationとは、
マウスカーソルが要素の上に乗ったときに発生するアニメーションです。

ボタンやカードUIなどでよく使われます。

例えば次のような効果があります。

• 少し浮き上がる
• 色が変わる
• 影が強くなる
• 拡大する

これによりユーザーは

「ここはクリックできるUIだ」

と直感的に理解できます。

つまり Hover Animation は
UIフィードバックの重要な要素です。

クリック時のアニメーションについては
Button Press Animationの記事で解説しています。

2.Hover Animationの基本

一番シンプルなHover Animationは
scaleアニメーションです。

.button {
  transform: scale(1);
  transition: transform 0.2s ease;
}

.button:hover {
  transform: scale(1.05);
}

ポイントは3つです。

① transformを使う

transform: scale()

これはGPU処理になるため
パフォーマンスが良いです。

② transitionを設定する

transition: transform 0.2s ease;

これが無いと
アニメーションが滑らかになりません。

③ 過剰に大きくしない

Hoverでは

1.02〜1.06

くらいが自然です。

大きすぎるとUIが壊れます。

3.Hover + Shadow

もう少しUIらしいHoverにする場合は
shadowを追加します。

.card {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

これにより

浮き上がるUI

になります。

4.Hover Animationのベストプラクティス

Hover Animationには
いくつかの基本ルールがあります。

① transformを使う

NG

width
height
left
top

OK

transform
opacity

② durationは短め

HoverはUIレスポンスなので

150ms〜250ms

くらいがベストです。

③ easingを使う

おすすめ

ease
ease-out
cubic-bezier()

滑らかな動きについては
easingの解説記事も参考にしてください。

→ #03 easing / cubic-bezier

5.Hover Animationまとめ

Hover Animationは

UIの気持ちよさを作る基本要素

です。

ポイントは3つです。

• transformを使う
• 200ms前後にする
• 小さく動かす

これだけで
UIの体験が大きく変わります。

6.実験：Hover Animation Playground

Hoverしたときに
ボタンが浮き上がるUIを作ってみましょう。

動きを観察してみてください。

• scale
• translate
• shadow

の組み合わせで
UIがどう変わるかを確認できます。

観察ポイント

Hover Animationは 
UIフィードバックの最初のレイヤーです。

カーソルが触れたときに 
UIが少し反応することで、

ユーザーは 
「この要素は操作できる」と理解します。

さらに Press Animation を組み合わせると 
UIはより自然で気持ちよい操作感になります。

このような小さなフィードバックの積み重ねが 
UIの完成度を大きく高めます。