Success Checkmark (サクセスチェックマーク)
別名 Animated success tick
円とチェックマークが描かれ、操作が成功したことを伝えます。
使いどころ
フォーム送信、決済完了
バリエーション
- SVG stroke draw
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にサクセスチェックマーク(Success Checkmark)のアニメーションを追加してください。アニメーション付き成功チェック(animated success tick)とも呼ばれます。
円がなめらかな一筆で描かれ、続いて内側にチェックが描かれ、マーク全体が小さくやさしくポンと弾むようにしてください。落ち着いて確かな印象で。
操作が成功したときに一度だけ再生し、スクリーンリーダーが読み上げられるテキストメッセージを添え、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成したマークをすぐに表示してください。似ているモーション
クリックしてください
Checkbox Check Draw (チェックボックスチェックドロー)
別名 Animated checkbox, Checkmark draw
チェックを入れると、ボックスの中にチェックマークが一筆ずつ描かれます。
使いどころ
フォーム、ToDo リスト
[適用する場所]にチェックボックスチェックドロー(Checkbox Check Draw)のアニメーションを追加してください。アニメーションチェックボックス(animated checkbox)、チェックマークドロー(checkmark draw)とも呼ばれます。
チェックを入れるとボックスが色で塗られ、チェックマークが素早くなめらかな一筆で描かれるようにしてください。チェックを外すと同じように消えます。
チェック状態を持つ本物のチェックボックスのままにし、キーボードで操作でき、フォーカスリングが見えるようにしてください。Line Drawing (ラインドローイング)
別名 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
破線オフセットをアニメーションさせ、SVGの線がパスに沿って描かれていくように見せます。
使いどころ
アイコン、ロゴ、イラスト
[適用する場所]にラインドローイング(Line Drawing)アニメーションを追加してください。パスドローイング(path drawing)、セルフドローイングSVG(self-drawing SVG)とも呼ばれます。
各線がパスに沿って始点から終点まで滑らかに自分で描かれていくように見せ、チェックマークのような2本目の線は1本目のすぐ後に続けてください。
ループさせず画面に入ったときに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は描き終わった線を表示してください。クリックしてください
Copy-to-Clipboard Feedback (クリップボードコピーフィードバック)
別名 Copied state, Copy icon to checkmark
コピーアイコンがチェックマークに変わり、ラベルが一瞬「コピーしました」になります。
使いどころ
コードブロック、共有リンク
[適用する場所]にクリップボードコピーフィードバック(Copy-to-Clipboard Feedback)のアニメーションを追加してください。コピー済み表示(copied state)、コピーアイコンからチェックマーク(copy icon to checkmark)とも呼ばれます。
コピーボタンを押すと、コピーアイコンが素早く縮んで消え、代わりにチェックマークが描かれてラベルが「コピーしました」に変わり、少ししたらすべてなめらかに元に戻るようにしてください。
切り替え中もボタンのサイズを変えずに何もずれないようにし、コピー済みの状態をスクリーンリーダーに伝えてください。Progress Ring (プログレスリング)
別名 Circular progress, Radial progress, Animated Circular Progress Bar
円弧がリングに沿って伸び、完了した割合を示します。
使いどころ
アップロード、目標、タイマー
[適用する場所]にプログレスリング(Progress Ring)を追加してください。サーキュラープログレス(circular progress)、ラジアルプログレス(radial progress)とも呼ばれます。
上端から円弧が時計回りにリングに沿って伸びて完了した割合を示し、止まるときはゆるやかに減速し、同時に中央の数字もカウントアップするようにしてください。
円弧と数字は同期させ、値は正しいプログレスバーのセマンティクスでスクリーンリーダーに伝えてください。Micro-interactionのほかのモーション
ドラッグしてください
Swipe to Delete (スワイプで削除)
別名 Swipe actions, Swipe to reveal
リストの行を横にスワイプすると、削除やアーカイブなどの操作ボタンが現れます。
使いどころ
メール一覧、ToDoリスト
[適用する場所]にスワイプで削除(Swipe to Delete)のインタラクションを追加してください。スワイプアクション(swipe actions)、スワイプで表示(swipe to reveal)とも呼ばれます。
行を横にドラッグすると指にそのまま追従して動き、裏にあるアーカイブや削除などの操作ボタンが現れ、ボタンが全部見えたところで止まるようにしてください。離したら弾まずになめらかに所定の位置へ滑らせてください。
横にスワイプしている間も縦スクロールが効くようにし、スワイプしなくてもキーボードやスクリーンリーダーで同じ操作ができるようにしてください。クリックしてください
Toggle Switch (トグルスイッチ)
別名 Switch, Switch Thumb Slide
丸いつまみがトラック上をスライドし、オフとオンでトラックの色が変わります。
使いどころ
設定、ダークモード
[適用する場所]にトグルスイッチ(Toggle Switch)のアニメーションを追加してください。スイッチ(switch)とも呼ばれます。
オン・オフを切り替えると、丸いつまみがトラックの反対側までなめらかにスライドし、同時にトラックの色が変わるようにしてください。素早くきびきびと、弾みは不要です。
キーボードでも操作できる本物のアクセシブルなスイッチ(checked状態を持つrole="switch")にしてください。A
1
クリックしてください
Add to Cart Fly (カート追加フライ)
別名 Fly to cart, Add-to-cart animation
商品画像が縮みながら弧を描いてカートアイコンへ飛んでいきます。
使いどころ
EC サイト
[適用する場所]にカート追加フライ(Add to Cart Fly)のアニメーションを追加してください。フライトゥカート(fly to cart)、カート追加アニメーション(add-to-cart animation)とも呼ばれます。
追加ボタンを押すと、商品画像の小さなコピーが縮みながらなめらかで素早い弧を描いてカートアイコンへ飛び、カートは個数が更新されるときに小さく弾むようにしてください。
押すたびに一度だけ再生して元の商品カードは動かさず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は飛ぶ動きを省いて、カートの更新だけは行ってください。