Password Reveal Toggle (パスワード表示切り替え)
別名 Show/hide password, Eye icon toggle
パスワードの表示・非表示に合わせて、目のアイコンが開いた状態と斜線入りの状態で切り替わります。
使いどころ
ログイン・新規登録フォーム
バリエーション
- eye open/closed
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にパスワード表示切り替え(Password Reveal Toggle)を追加してください。表示/非表示パスワード(show/hide password)、目のアイコントグル(eye icon toggle)とも呼ばれます。
目を押すと斜線が素早く消え、伏せ字の点が実際の文字へクロスフェードし、もう一度押すと斜線が描き戻されて文字が隠れるようにしてください。なめらかで素早く、弾みは不要です。
文字がずれないよう入力欄の幅を一定に保ち、トグルはパスワードが表示中かどうかをラベルで伝える本物のボタンにしてください。似ているモーション
クリックしてください
Icon Morph (アイコンモーフ)
別名 Hamburger to X, Menu Icon Morph, Line-to-Close Icon
ハンバーガーメニューなどのアイコンが、バーの回転と移動によって別のアイコン(X)に変わります。
使いどころ
メニューの開閉ボタン
[適用する場所]にアイコンモーフ(Icon Morph)を追加してください。ハンバーガーからX(hamburger to X)、メニューアイコンモーフ(menu icon morph)とも呼ばれます。
押すたびに上下のバーがまず中央に寄ってから回転してXになり、中央のバーはフェードアウトし、もう一度押すと元に戻るようにしてください。素早く切れのある動きにしてください。
実際のトグルボタンにしてアクセシブルなラベルと展開状態も一緒に切り替え、周りがずれないようにアイコンのサイズは固定してください。クリックしてください
Copy-to-Clipboard Feedback (クリップボードコピーフィードバック)
別名 Copied state, Copy icon to checkmark
コピーアイコンがチェックマークに変わり、ラベルが一瞬「コピーしました」になります。
使いどころ
コードブロック、共有リンク
[適用する場所]にクリップボードコピーフィードバック(Copy-to-Clipboard Feedback)のアニメーションを追加してください。コピー済み表示(copied state)、コピーアイコンからチェックマーク(copy icon to checkmark)とも呼ばれます。
コピーボタンを押すと、コピーアイコンが素早く縮んで消え、代わりにチェックマークが描かれてラベルが「コピーしました」に変わり、少ししたらすべてなめらかに元に戻るようにしてください。
切り替え中もボタンのサイズを変えずに何もずれないようにし、コピー済みの状態をスクリーンリーダーに伝えてください。クリックしてください
Toggle Switch (トグルスイッチ)
別名 Switch, Switch Thumb Slide
丸いつまみがトラック上をスライドし、オフとオンでトラックの色が変わります。
使いどころ
設定、ダークモード
[適用する場所]にトグルスイッチ(Toggle Switch)のアニメーションを追加してください。スイッチ(switch)とも呼ばれます。
オン・オフを切り替えると、丸いつまみがトラックの反対側までなめらかにスライドし、同時にトラックの色が変わるようにしてください。素早くきびきびと、弾みは不要です。
キーボードでも操作できる本物のアクセシブルなスイッチ(checked状態を持つrole="switch")にしてください。Micro-interactionのほかのモーション
中をスクロールしてください
テキストがスクロールで画面に入ると、ポインターの矢印が単語の周りにハイライトの枠を描きます。
使いどころ
見出し、マーケティングコピー
[適用する場所]にポインターハイライト(Pointer Highlight)の効果を追加してください。
テキストがスクロールで画面に入ったら、キーワードの周りに左から右へ枠が描かれ、小さなポインターの矢印がその角に沿って動くようにしてください。なめらかで一定の速さで、誰かが手で単語に印をつけているような感じです。
最初に画面に入ったときに一度だけ、テキストをずらさずに描き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成した枠をすぐに表示してください。A
クリックしてください
Press (Button Tap Scale) (プレス)
別名 Tap feedback, Active scale, Press state
押している間は要素が少し縮み、離すと弾むように元に戻ります。
使いどころ
ボタン、カード
[適用する場所]にプレス(Press (Button Tap Scale))の効果を追加してください。タップフィードバック(tap feedback)、押下状態(press state)とも呼ばれます。
押している間は要素が少し縮んでわずかに暗くなり、離すと小さく弾みながら元のサイズに戻るようにしてください。素早く控えめに。
キーボードやタッチで押したときも同じ反応を見せ、周りのレイアウトがずれないようにしてください。ドラッグしてください
Pull to Refresh (プルトゥリフレッシュ)
別名 Swipe to refresh
リストを下に引っ張るとスピナーが現れ、離すとコンテンツを再読み込みします。
使いどころ
フィード、受信トレイ
[適用する場所]にプルトゥリフレッシュ(Pull to Refresh)のインタラクションを追加してください。スワイプトゥリフレッシュ(swipe to refresh)とも呼ばれます。
リストを一番上から下に引っ張ると、少し抵抗を感じさせながら指に追従し、引く量に合わせて回るスピナーが現れるようにしてください。離したらコンテンツの再読み込み中もスピナーが回り続け、終わったらリストがなめらかに上へ戻るようにしてください。
リストがすでに一番上までスクロールされているときだけ開始し、キーボードやスクリーンリーダーの利用者向けに通常の更新ボタンも用意してください。