カード・写真・ボタン・メニューの文字に、マウスを重ねたときの動きを6種類の型に分け、AIへの指示文・マウスで試せる見本・コードを載せています。見本の下で量や時間を変えると、指示文とコードも同じものに変わります。
ホバーの動きはどの型を選ぶか
ホバーの動きは、マウスを重ねたところが押せるものだと、押す前に伝えるための演出です。動きの量は小さく、時間は短くするほど、上品に見えます。形の型（カードや写真をどう並べるか）は UIパターン集にあり、ここでは動き方だけを扱います。
| こんなとき | 向いている動き | 形の型（UIパターン集） |
|---|---|---|
| 一覧のカードが押せるものだと、触る前に伝えたい | カードがふわっと浮く（ホバーリフト） | お知らせ（カード型） |
| 施工例や作品の写真を、並びを崩さずに目立たせたい | 枠の中で画像が少し大きくなる（ホバーズーム） | ギャラリー（グリッド型） |
| 申し込みのボタンに、触る前の手ごたえを付けたい | ボタンがカーソルに吸い寄せられる（マグネティックボタン） | CTA |
| 作品や商品を、手に取ったような奥行きで見せたい | カードがカーソルの向きに傾く（3Dチルト） | ギャラリー・お知らせ（カード型） |
| ページで1つだけのボタンに、さりげなく目を留めてほしい | 光の帯がすっと横切る（シャインエフェクト） | CTA（セクション末尾型） |
| メニューの文字で、どこを指しているかを示したい | 下線が左から伸びる（アンダーラインアニメーション） | ヘッダー（横並び型） |
どの型でも守ること
- マウスがある画面でだけ動かす。
:hoverの指定は@media (hover: hover)の中に書きます。指で触る画面では、タップしたあとに浮いたまま・大きいまま残ることがあるためです。 - キーボードで選んだときも同じように知らせる。
:focus-visibleにも同じ見た目を書きます。マウスを使わない人にも、どこを選んでいるかが伝わります。 - 動きは小さく、短くする。浮くのは数px、大きくするのは 1.08倍くらい、傾きは 10度まで、時間は 0.2〜0.4秒が目安です（光の帯だけは 0.6〜0.8秒）。
- 動かすのは transform と opacity だけ。影は濃い影を別の層に描いて opacity で出し入れし、吸い寄せ・傾きは requestAnimationFrame で1フレームに1回だけ書き換えます。
- 動きを控える設定の人には、色や影の変化だけを残す。
@media (prefers-reduced-motion: reduce)で動きを外しても、押せることは色や影で伝わります。見本の「動きを控える設定で見る」で確かめられます。
よくある質問 (FAQ)
ここのコードでは、スマホでは動きません。指で触る画面では、タップすると :hover の状態になり、別の場所を触るまで浮いたまま残ることがあります。そのため :hover の指定を @media (hover: hover) の中に書き、マウスがある画面でだけ動かしています。スマホで押した手ごたえを付けたいときは、部品の動きの「ボタンが押し込まれる」のような :active の動きを使います。
box-shadow を動かすと、動いている間ずっと影を描き直すからです。カードが多い一覧では、かくつく原因になります。濃い影を描いた層を ::after に重ねておき、その opacity だけを変えると、ブラウザは描き直さずに重ね方を変えるだけで済みます。
マウスの動きのイベントは、画面の描き直しより多く届くことがあるからです。届くたびに書き換えると、1フレームに何度も計算が走ります。イベントでは位置を覚えるだけにして、requestAnimationFrame の中で1回だけ CSS 変数を書き換えると、描き直しの回数に合わせて動きます。
動きの量と、マウスを使わない人への配慮です。「ホバーでふわっと」だけだと、大きく動きすぎる作りや、スマホで浮いたまま残る作り、キーボードでは何も起きない作りになりがちです。ここの指示文は、量（px・倍率・角度）と時間、@media (hover: hover)・:focus-visible の扱いを書き、Hover Lift のような英語の一般名も添えています。