マウスの動き・ボタンを押したこと・送信が済んだことに返事をする動きを4種類の型に分け、AIへの指示文・試せる見本・コードを載せています。見本の下で量や時間を変えると、指示文とコードも同じものに変わります。
インタラクションの動きはどの型を選ぶか
インタラクションの動きは、読み手の操作に画面が返事をするための演出です。カーソルにつきそう2つの型はマウスのある画面だけの遊びで、押したことに返事をする2つの型は、指でもキーボードでも同じように返ってきます。遊びの型ほど、使う場所を絞ると上品に見えます。
| こんなとき | 向いている動き | 形の型（UIパターン集） |
|---|---|---|
| 作品集やブランドのサイトで、マウスの動きに遊びを付けたい | 丸がカーソルを追いかける（カーソルストーカー） | — |
| 写真の多いサイトのトップで、なぞると写真が次々に出る仕掛けを入れたい | 写真がカーソルの跡に並ぶ（イメージトレイル） | — |
| ボタンを押したことを、押した場所ですぐに返したい | 押した所から波紋が広がる（リップルエフェクト） | CTA |
| 申し込みや登録が済んだことを、特別な場面として祝いたい | 紙吹雪が舞う（紙吹雪エフェクト） | フォーム（送信完了型） |
どの型でも守ること
- カーソルにつきそう型は、マウスのある画面でだけ出す。
matchMedia('(hover: hover) and (pointer: fine)')が当てはまらないスマホやタブレットでは出しません。キーボードで操作する人にも見えないので、丸や写真に情報を載せず、飾りにとどめます。 - 常に出しておく飾りにしない。カーソルの型は作品集やブランドのサイトなど、遊びが似合う場面に絞ります。本物のカーソルは消さず、丸や写真は
pointer-events: noneにして操作の邪魔をしません。 - 返事は、押した場所で、押した瞬間に。波紋は
clickではなくpointerdownで始め、キーボードで押したときはボタンの真ん中から広げます。 - 紙吹雪は1回だけ、ここぞという時だけ。送信や登録が済んだあとに1回だけ出し、ボタンを押すたびには出しません。済んだことは「送りました」の文字（
role="status"）でも伝えます。 - 足した要素は、終わったら外し、数に上限を付ける。写真・波紋・紙片は動き終わったら DOM から外します。動きを控える設定では、カーソルの2型と紙吹雪は出さず、波紋は色の変化だけを残します（見本の「動きを控える設定で見る」で確かめられます）。
よくある質問 (FAQ)
カーソルにつきそう2つの型は出ず、押したことに返事をする2つの型は指でも動きます。スマホにはカーソルがなく、指でなぞるとページのスクロールと取り合いになるため、丸と写真は (hover: hover) and (pointer: fine) の画面でだけ出しています。波紋は指で押した位置から広がり、紙吹雪は送信が済んだときに同じように舞います。
消さないことをおすすめします。丸は少し遅れてついてくるので、本物のカーソルを消すと、押したい場所と丸の位置がずれて見え、押し間違いが起きます。動きを控える設定の人には丸が出ないので、カーソルを消していると何も見えなくなります。丸は飾りとして、本物のカーソルに添えるだけにします。
1回だけ舞わせるなら、ライブラリなしで足ります。ここのコードは、紙片の要素を作って Web Animations API（element.animate）で transform と opacity を動かし、全部が終わったら層ごと外しています。紙片は 30〜60枚くらいで十分お祝いらしく見えます。コードでは上限を 120枚にして、連打されても重ねて出さないようにしています。
出す条件と、片付け方です。「カーソルに丸をつけて」「紙吹雪を出して」だけだと、スマホでも出る作りや、要素が増え続ける作り、押すたびに紙吹雪が出る作りになりがちです。ここの指示文は、どの画面で出すか・何をきっかけに出すか・同時に出す数の上限・終わったら外すことを書き、Cursor Follower のような英語の一般名も添えています。