Toggle Switch (トグルスイッチ)
別名 Switch, Switch Thumb Slide
丸いつまみがトラック上をスライドし、オフとオンでトラックの色が変わります。
使いどころ
設定、ダークモード
バリエーション
- checkbox-hack toggle
- role=switch
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にトグルスイッチ(Toggle Switch)のアニメーションを追加してください。スイッチ(switch)とも呼ばれます。
オン・オフを切り替えると、丸いつまみがトラックの反対側までなめらかにスライドし、同時にトラックの色が変わるようにしてください。素早くきびきびと、弾みは不要です。
キーボードでも操作できる本物のアクセシブルなスイッチ(checked状態を持つrole="switch")にしてください。似ているモーション
クリックしてください
Checkbox Check Draw (チェックボックスチェックドロー)
別名 Animated checkbox, Checkmark draw
チェックを入れると、ボックスの中にチェックマークが一筆ずつ描かれます。
使いどころ
フォーム、ToDo リスト
[適用する場所]にチェックボックスチェックドロー(Checkbox Check Draw)のアニメーションを追加してください。アニメーションチェックボックス(animated checkbox)、チェックマークドロー(checkmark draw)とも呼ばれます。
チェックを入れるとボックスが色で塗られ、チェックマークが素早くなめらかな一筆で描かれるようにしてください。チェックを外すと同じように消えます。
チェック状態を持つ本物のチェックボックスのままにし、キーボードで操作でき、フォーカスリングが見えるようにしてください。ABC
クリックしてください
Tab Indicator Slide (タブインジケータースライド)
別名 Sliding underline, Active tab indicator, Segmented control pill
下線やピル型の背景が、前のタブから新しく選んだタブへすべるように移動します。
使いどころ
タブバー、セグメントコントロール
[適用する場所]にタブインジケータースライド(Tab Indicator Slide)を追加してください。スライディングアンダーライン(sliding underline)、アクティブタブインジケーター(active tab indicator)とも呼ばれます。
新しいタブを選んだら、下線が前のタブから新しいタブへ素早く、なめらかに減速しながらすべり、幅が違う場合は新しいタブの幅に合わせて伸び縮みするようにしてください。
矢印キーで操作できる正しいタブのセマンティクスを保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすべらせずにインジケーターを移してください。••••••ABCDEF
クリックしてください
Password Reveal Toggle (パスワード表示切り替え)
別名 Show/hide password, Eye icon toggle
パスワードの表示・非表示に合わせて、目のアイコンが開いた状態と斜線入りの状態で切り替わります。
使いどころ
ログイン・新規登録フォーム
[適用する場所]にパスワード表示切り替え(Password Reveal Toggle)を追加してください。表示/非表示パスワード(show/hide password)、目のアイコントグル(eye icon toggle)とも呼ばれます。
目を押すと斜線が素早く消え、伏せ字の点が実際の文字へクロスフェードし、もう一度押すと斜線が描き戻されて文字が隠れるようにしてください。なめらかで素早く、弾みは不要です。
文字がずれないよう入力欄の幅を一定に保ち、トグルはパスワードが表示中かどうかをラベルで伝える本物のボタンにしてください。Micro-interactionのほかのモーション
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)にしている場合は飛ぶ動きを省いて、カートの更新だけは行ってください。A
クリックしてください
Confetti (紙吹雪)
別名 Confetti burst, Celebration
色とりどりの紙片がはじけ出て舞い落ち、成功を祝います。
使いどころ
購入完了、目標達成
[適用する場所]に紙吹雪(Confetti)のお祝い演出を追加してください。コンフェッティバースト(confetti burst)とも呼ばれます。
色とりどりの小さな紙片がボタンから素早くはじけ出て、くるくる回りながらふわりと舞い落ち、消えていくようにしてください。短く賑やかに。
ループさせず成功ごとに一度だけ発動し、ページのクリックを妨げないようにして、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は表示しないでください。