ホバーエフェクトは「サイトの手触り」を決める
マウスカーソルを要素に重ねたときに起こる小さな変化、それがホバーエフェクトです。ボタンが少し浮き上がる、カードの影が濃くなる、画像がふわっと拡大する——どれも0.2秒前後の短い変化ですが、これがあるかないかでサイトの「手触り」は大きく変わります。
派手なアニメーションと違い、ホバーエフェクトは「触った側からの返事」です。クリックできることを伝え、操作が受け付けられたことを伝え、そして何より「このサイトは細部まで作り込まれている」という信頼感を静かに伝えてくれます。今回は定番パターンを、ボタン・カード・画像・リンクの4系統に分けて紹介します。どれもCSSのtransitionとtransformが中心なので、コピペしてすぐに試せます。
ボタンのホバー: 押したくなる質感をつくる
ボタンのホバーで最初に覚えたいのは、transition: all .2s ease;を土台にした基本形です。
.btn {
transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
たったこれだけで「浮き上がって押しやすくなった」感覚が生まれます。さらに上級のパターンとして、光の帯がボタンの上を斜めに走り抜ける「シャイン」演出があります。::beforeで斜めの白いグラデーション帯を作り、ホバー時にtranslateXで通過させるだけで、単色のボタンが一気に高級感を帯びます。
ポイントは、シャインの帯を通常時はoverflow:hiddenのボタン外に隠しておくことです。位置をleft:-60%のように画面外に置いておけば、ホバーの瞬間まで見えず、通過し終わったら自然に消えます。
カードのホバー: 奥行きと立体感を演出する
商品カードやブログカードでは、「傾き」と「影」の2つが定番です。マウスの位置に応じてカード全体をperspectiveとrotateX/rotateYで傾ける、いわゆるチルト(tilt)演出は、写真だけのカードに立体感を与えてくれます。
.card {
transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.card:hover {
box-shadow: 0 20px 40px rgba(0,0,0,.22);
}
JavaScriptでpointermoveイベントからカード内のカーソル座標を取得し、中心からのズレを角度に変換してstyle.transformに反映すれば、指先の動きにぴったり追従する高精度なチルトになります。角度は大きくしすぎず、最大でも8〜10度程度に抑えるのがコツです。傾けすぎると安っぽく見え、逆に酔ったような違和感も生まれます。
チルトと組み合わせて、カード内の見出しや価格だけをtranslateZでわずかに手前に浮かせると、奥行きがより強調されます。要素ごとに移動量を変える「視差(パララックス)」の考え方です。
画像のホバー: 見せ方ひとつで印象が変わる
画像のホバーで最も手軽なのはtransform: scale(1.06)によるズームです。ただし、そのまま画像にscaleをかけると枠からはみ出してレイアウトが崩れるため、親要素にoverflow:hiddenを必ずセットで使います。
.thumb { overflow: hidden; border-radius: 12px; }
.thumb img {
transition: transform .4s ease;
}
.thumb:hover img {
transform: scale(1.08);
}
ワンランク上げたい場合は、filter: grayscale(1)をデフォルトにしておき、ホバー時にgrayscale(0)へ戻す「色づく」演出もおすすめです。ギャラリーページでこれをやると、選ばれた1枚だけに色がつくような特別感が出ます。ECサイトでは、商品画像にマウスを乗せると別アングルの画像へフェードで切り替わる「差し替え型」も定番で、こちらは2枚の画像を重ねて配置し、ホバー時に上の画像のopacityを0にするだけで実装できます。
リンクのホバー: さりげない気配りが信頼感になる
リンクのホバーは、派手さよりも「気配り」が評価されるパーツです。定番の下線アニメーションは、background-imageを使ったグラデーションの下線をbackground-sizeで伸縮させる方法が扱いやすく、擬似要素を増やさずに済みます。
a {
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-position: left bottom;
background-repeat: no-repeat;
transition: background-size .25s ease;
}
a:hover { background-size: 100% 1px; }
ナビゲーションのように複数のリンクが並ぶ場所では、下線が左からではなく「マウスが乗った位置から」伸びるように見せると、より丁寧な印象になります。これはbackground-positionをリンクごとに動的に変える、あるいはひとつの下線要素をposition:absoluteで共有し、ホバーしたリンクの位置へアニメーションさせる実装で実現できます。
実装で失敗しないための3つのコツ
最後に、どのパターンにも共通する注意点をまとめます。
1つ目は、transitionの時間を長くしすぎないことです。ホバーは「即座の反応」が命なので、0.15〜0.3秒程度が基準になります。1秒近いtransitionにすると、操作にワンテンポ遅れているように感じられ、かえって使いにくくなります。
2つ目は、スマートフォンへの配慮です。タッチ操作にはホバー状態が存在しないため、@media (hover: hover)でホバー可能なデバイスにだけスタイルを絞り込むと、タップ後にエフェクトが残り続けるような不具合を防げます。
3つ目は、prefers-reduced-motionへの対応です。動きに敏感なユーザーのために、@media (prefers-reduced-motion: reduce)の中でtransitionを短くするか無効化しておくと安心です。
@media (prefers-reduced-motion: reduce) {
* { transition-duration: .01ms !important; }
}
まとめ
ホバーエフェクトは、ページ全体を作り替える大きな演出ではなく、指先が触れた場所だけに起こる小さな返事です。だからこそ、ボタン・カード・画像・リンクという細部の一つひとつに気を配ることが、サイト全体の完成度を底上げしてくれます。まずは今回紹介した基本形をひとつコピペして、自分のサイトの色やサイズに合わせて数値を調整するところから始めてみてください。