Copy-to-Clipboard Feedback (クリップボードコピーフィードバック)
別名 Copied state, Copy icon to checkmark
コピーアイコンがチェックマークに変わり、ラベルが一瞬「コピーしました」になります。
使いどころ
コードブロック、共有リンク
バリエーション
- icon morph
- tooltip Copied
- label swap
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にクリップボードコピーフィードバック(Copy-to-Clipboard Feedback)のアニメーションを追加してください。コピー済み表示(copied state)、コピーアイコンからチェックマーク(copy icon to checkmark)とも呼ばれます。
コピーボタンを押すと、コピーアイコンが素早く縮んで消え、代わりにチェックマークが描かれてラベルが「コピーしました」に変わり、少ししたらすべてなめらかに元に戻るようにしてください。
切り替え中もボタンのサイズを変えずに何もずれないようにし、コピー済みの状態をスクリーンリーダーに伝えてください。似ているモーション
クリックしてください
Icon Morph (アイコンモーフ)
別名 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
ハンバーガーメニューなどのアイコンが、バーの回転と移動によって別のアイコン(X)に変わります。
使いどころ
メニューの開閉ボタン
[適用する場所]にアイコンモーフ(Icon Morph)を追加してください。ハンバーガーからX(hamburger to X)、メニューアイコンモーフ(menu icon morph)とも呼ばれます。
押すたびに上下のバーがまず中央に寄ってから回転してXになり、中央のバーはフェードアウトし、もう一度押すと元に戻るようにしてください。素早く切れのある動きにしてください。
実際のトグルボタンにしてアクセシブルなラベルと展開状態も一緒に切り替え、周りがずれないようにアイコンのサイズは固定してください。Success Checkmark (サクセスチェックマーク)
別名 Animated success tick
円とチェックマークが描かれ、操作が成功したことを伝えます。
使いどころ
フォーム送信、決済完了
[適用する場所]にサクセスチェックマーク(Success Checkmark)のアニメーションを追加してください。アニメーション付き成功チェック(animated success tick)とも呼ばれます。
円がなめらかな一筆で描かれ、続いて内側にチェックが描かれ、マーク全体が小さくやさしくポンと弾むようにしてください。落ち着いて確かな印象で。
操作が成功したときに一度だけ再生し、スクリーンリーダーが読み上げられるテキストメッセージを添え、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成したマークをすぐに表示してください。Button Loading State (ボタンローディングステート)
別名 Spinner button, Loading button, Button spinner, Submit loading state
処理の実行中、ボタンのラベルが小さなスピナーに置き換わるか、スピナーが追加されます。
使いどころ
フォーム送信、非同期の操作
[適用する場所]にボタンローディングステート(Button Loading State)を追加してください。スピナーボタン(spinner button)、ローディングボタン(loading button)とも呼ばれます。
押すとボタンが軽く沈み、ラベルがフェードアウトして代わりに小さなスピナーが処理中に表示され、終わったらラベルが戻るようにしてください。
読み込み中もボタンの幅は変えず、連続して押せないようにし、処理中であることをスクリーンリーダーに伝えてください。••••••ABCDEF
クリックしてください
Password Reveal Toggle (パスワード表示切り替え)
別名 Show/hide password, Eye icon toggle
パスワードの表示・非表示に合わせて、目のアイコンが開いた状態と斜線入りの状態で切り替わります。
使いどころ
ログイン・新規登録フォーム
[適用する場所]にパスワード表示切り替え(Password Reveal Toggle)を追加してください。表示/非表示パスワード(show/hide password)、目のアイコントグル(eye icon toggle)とも呼ばれます。
目を押すと斜線が素早く消え、伏せ字の点が実際の文字へクロスフェードし、もう一度押すと斜線が描き戻されて文字が隠れるようにしてください。なめらかで素早く、弾みは不要です。
文字がずれないよう入力欄の幅を一定に保ち、トグルはパスワードが表示中かどうかをラベルで伝える本物のボタンにしてください。Micro-interactionのほかのモーション
A
ドラッグしてください
Drag (ドラッグ)
別名 Draggable, Drag constraints
ドラッグすると要素がポインターに追従し、範囲や軸を制限することもできます。
使いどころ
スライダー、並べ替え可能なカード
[適用する場所]にドラッグ(Drag)のインタラクションを追加してください。ドラッガブル(draggable)、ドラッグ制約(drag constraints)とも呼ばれます。
ドラッグ中は要素がポインターにそのまま追従し、許可された範囲の端で止まり、離すと小さく弾んで元の位置に戻るようにしてください。
マウスだけでなくタッチでも、下のページがスクロールせずに操作できるようにし、キーボードで動かす方法も用意してください。ABC
Floating Label (フローティングラベル)
別名 Float label, Animated placeholder
フィールドにフォーカスが当たるか入力があると、プレースホルダーのラベルが上へ移動して小さくなります。
使いどころ
フォーム、ログイン入力欄
[適用する場所]にフローティングラベル(Floating Label)を追加してください。フロートラベル(float label)、アニメーションプレースホルダー(animated placeholder)とも呼ばれます。
フィールドにフォーカスが当たるか値が入ると、中にあるラベルがなめらかに素早く上へ移動しながら縮んでフィールドの上端に乗り、フィールドが空でフォーカスもないときだけ元に戻るようにしてください。
入力欄に関連付けた本物のラベルのままにし、フィールドの高さが変わらずフォームがずれないようにしてください。クリックしてください
Like / Heart Burst (いいね/ハートバースト)
別名 Heart animation, Twitter heart, Favorite toggle
クリックするとハートアイコンが色で満たされ、小さな粒子がはじけたり脈打ったりします。
使いどころ
いいね・お気に入りボタン
[適用する場所]にいいね/ハートバースト(Like / Heart Burst)のアニメーションを追加してください。ハートアニメーション(heart animation)、お気に入りトグル(favorite toggle)とも呼ばれます。
いいねしたらハートが色で満たされて弾むようにポンと膨らみ、リングと小さな点が外へはじけて消えるようにしてください。全体に素早く遊び心のある動きで、いいねを外したときはハートが静かに空になるだけにしてください。
押下状態を持つ本物のトグルボタンにし、バーストはオンにしたときだけ再生してください。