Micro-interaction

商品画像が縮みながら弧を描いてカートアイコンへ飛んでいきます。

[適用する場所]にカート追加フライ(Add to Cart Fly)のアニメーションを追加してください。フライトゥカート(fly to cart)、カート追加アニメーション(add-to-cart animation)とも呼ばれます。
追加ボタンを押すと、商品画像の小さなコピーが縮みながらなめらかで素早い弧を描いてカートアイコンへ飛び、カートは個数が更新されるときに小さく弾むようにしてください。
押すたびに一度だけ再生して元の商品カードは動かさず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は飛ぶ動きを省いて、カートの更新だけは行ってください。

チェックを入れると、ボックスの中にチェックマークが一筆ずつ描かれます。

[適用する場所]にチェックボックスチェックドロー(Checkbox Check Draw)のアニメーションを追加してください。アニメーションチェックボックス(animated checkbox)、チェックマークドロー(checkmark draw)とも呼ばれます。
チェックを入れるとボックスが色で塗られ、チェックマークが素早くなめらかな一筆で描かれるようにしてください。チェックを外すと同じように消えます。
チェック状態を持つ本物のチェックボックスのままにし、キーボードで操作でき、フォーカスリングが見えるようにしてください。

色とりどりの紙片がはじけ出て舞い落ち、成功を祝います。

[適用する場所]に紙吹雪(Confetti)のお祝い演出を追加してください。コンフェッティバースト(confetti burst)とも呼ばれます。
色とりどりの小さな紙片がボタンから素早くはじけ出て、くるくる回りながらふわりと舞い落ち、消えていくようにしてください。短く賑やかに。
ループさせず成功ごとに一度だけ発動し、ページのクリックを妨げないようにして、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は表示しないでください。

コピーアイコンがチェックマークに変わり、ラベルが一瞬「コピーしました」になります。

[適用する場所]にクリップボードコピーフィードバック(Copy-to-Clipboard Feedback)のアニメーションを追加してください。コピー済み表示(copied state)、コピーアイコンからチェックマーク(copy icon to checkmark)とも呼ばれます。
コピーボタンを押すと、コピーアイコンが素早く縮んで消え、代わりにチェックマークが描かれてラベルが「コピーしました」に変わり、少ししたらすべてなめらかに元に戻るようにしてください。
切り替え中もボタンのサイズを変えずに何もずれないようにし、コピー済みの状態をスクリーンリーダーに伝えてください。

ドラッグすると要素がポインターに追従し、範囲や軸を制限することもできます。

[適用する場所]にドラッグ(Drag)のインタラクションを追加してください。ドラッガブル(draggable)、ドラッグ制約(drag constraints)とも呼ばれます。
ドラッグ中は要素がポインターにそのまま追従し、許可された範囲の端で止まり、離すと小さく弾んで元の位置に戻るようにしてください。
マウスだけでなくタッチでも、下のページがスクロールせずに操作できるようにし、キーボードで動かす方法も用意してください。

フィールドにフォーカスが当たるか入力があると、プレースホルダーのラベルが上へ移動して小さくなります。

[適用する場所]にフローティングラベル(Floating Label)を追加してください。フロートラベル(float label)、アニメーションプレースホルダー(animated placeholder)とも呼ばれます。
フィールドにフォーカスが当たるか値が入ると、中にあるラベルがなめらかに素早く上へ移動しながら縮んでフィールドの上端に乗り、フィールドが空でフォーカスもないときだけ元に戻るようにしてください。
入力欄に関連付けた本物のラベルのままにし、フィールドの高さが変わらずフォームがずれないようにしてください。

クリックするとハートアイコンが色で満たされ、小さな粒子がはじけたり脈打ったりします。

[適用する場所]にいいね/ハートバースト(Like / Heart Burst)のアニメーションを追加してください。ハートアニメーション(heart animation)、お気に入りトグル(favorite toggle)とも呼ばれます。
いいねしたらハートが色で満たされて弾むようにポンと膨らみ、リングと小さな点が外へはじけて消えるようにしてください。全体に素早く遊び心のある動きで、いいねを外したときはハートが静かに空になるだけにしてください。
押下状態を持つ本物のトグルボタンにし、バーストはオンにしたときだけ再生してください。

要素をしばらく押し続けると、追加の操作や進行度の塗りが現れます。

[適用する場所]に長押し(Long Press)のインタラクションを追加してください。プレスアンドホールド(press and hold)、タッチアンドホールド(touch and hold)とも呼ばれます。
押している間は要素が少し沈み、進行度の塗りが一定のペースで横切るようにしてください。塗りが満ちたら弾むように戻ってメニューを開き、途中で離したらキャンセルして塗りをリセットしてください。
キーボードやスクリーンリーダーの利用者にも同じ操作へたどり着く別の手段を用意し、長押しでテキスト選択やブラウザ標準のコンテキストメニューが出ないようにしてください。

新しい通知が届くと、件数バッジがポンと現れて弾んだり脈打ったりします。

[適用する場所]に通知バッジバウンス(Notification Badge Bounce)のアニメーションを追加してください。バッジポップ(badge pop)、ピン(ping)とも呼ばれます。
新しい通知が届いたら、件数バッジが何もないところからポンと現れ、素早く弾むように数回跳ねて落ち着き、同時にやわらかいリングが一度だけ広がるようにしてください。
ループさせず新しい通知ごとに一度だけ再生し、新しい件数をスクリーンリーダーに読み上げさせてください。

パスワードの表示・非表示に合わせて、目のアイコンが開いた状態と斜線入りの状態で切り替わります。

[適用する場所]にパスワード表示切り替え(Password Reveal Toggle)を追加してください。表示/非表示パスワード(show/hide password)、目のアイコントグル(eye icon toggle)とも呼ばれます。
目を押すと斜線が素早く消え、伏せ字の点が実際の文字へクロスフェードし、もう一度押すと斜線が描き戻されて文字が隠れるようにしてください。なめらかで素早く、弾みは不要です。
文字がずれないよう入力欄の幅を一定に保ち、トグルはパスワードが表示中かどうかをラベルで伝える本物のボタンにしてください。

テキストがスクロールで画面に入ると、ポインターの矢印が単語の周りにハイライトの枠を描きます。

[適用する場所]にポインターハイライト(Pointer Highlight)の効果を追加してください。
テキストがスクロールで画面に入ったら、キーワードの周りに左から右へ枠が描かれ、小さなポインターの矢印がその角に沿って動くようにしてください。なめらかで一定の速さで、誰かが手で単語に印をつけているような感じです。
最初に画面に入ったときに一度だけ、テキストをずらさずに描き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成した枠をすぐに表示してください。

押している間は要素が少し縮み、離すと弾むように元に戻ります。

[適用する場所]にプレス(Press (Button Tap Scale))の効果を追加してください。タップフィードバック(tap feedback)、押下状態(press state)とも呼ばれます。
押している間は要素が少し縮んでわずかに暗くなり、離すと小さく弾みながら元のサイズに戻るようにしてください。素早く控えめに。
キーボードやタッチで押したときも同じ反応を見せ、周りのレイアウトがずれないようにしてください。

リストを下に引っ張るとスピナーが現れ、離すとコンテンツを再読み込みします。

[適用する場所]にプルトゥリフレッシュ(Pull to Refresh)のインタラクションを追加してください。スワイプトゥリフレッシュ(swipe to refresh)とも呼ばれます。
リストを一番上から下に引っ張ると、少し抵抗を感じさせながら指に追従し、引く量に合わせて回るスピナーが現れるようにしてください。離したらコンテンツの再読み込み中もスピナーが回り続け、終わったらリストがなめらかに上へ戻るようにしてください。
リストがすでに一番上までスクロールされているときだけ開始し、キーボードやスクリーンリーダーの利用者向けに通常の更新ボタンも用意してください。

クリックやタップした位置から円形の波が広がり、フェードアウトします。

[適用する場所]にリップル(Ripple)の効果を追加してください。マテリアルリップル(material ripple)、インクリップル(ink ripple)とも呼ばれます。
クリックやタップのたびに、押した位置からやわらかい円形の波が要素全体を覆うまで広がり、広がりながら薄れていくようにしてください。素早く軽やかに。
波は要素の形で切り抜き、素早く連続して押したときはそれぞれ別の波を出し、キーボードで押したときは中心から広げてください。

円とチェックマークが描かれ、操作が成功したことを伝えます。

[適用する場所]にサクセスチェックマーク(Success Checkmark)のアニメーションを追加してください。アニメーション付き成功チェック(animated success tick)とも呼ばれます。
円がなめらかな一筆で描かれ、続いて内側にチェックが描かれ、マーク全体が小さくやさしくポンと弾むようにしてください。落ち着いて確かな印象で。
操作が成功したときに一度だけ再生し、スクリーンリーダーが読み上げられるテキストメッセージを添え、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成したマークをすぐに表示してください。

リストの行を横にスワイプすると、削除やアーカイブなどの操作ボタンが現れます。

[適用する場所]にスワイプで削除(Swipe to Delete)のインタラクションを追加してください。スワイプアクション(swipe actions)、スワイプで表示(swipe to reveal)とも呼ばれます。
行を横にドラッグすると指にそのまま追従して動き、裏にあるアーカイブや削除などの操作ボタンが現れ、ボタンが全部見えたところで止まるようにしてください。離したら弾まずになめらかに所定の位置へ滑らせてください。
横にスワイプしている間も縦スクロールが効くようにし、スワイプしなくてもキーボードやスクリーンリーダーで同じ操作ができるようにしてください。

丸いつまみがトラック上をスライドし、オフとオンでトラックの色が変わります。

[適用する場所]にトグルスイッチ(Toggle Switch)のアニメーションを追加してください。スイッチ(switch)とも呼ばれます。
オン・オフを切り替えると、丸いつまみがトラックの反対側までなめらかにスライドし、同時にトラックの色が変わるようにしてください。素早くきびきびと、弾みは不要です。
キーボードでも操作できる本物のアクセシブルなスイッチ(checked状態を持つrole="switch")にしてください。