Press (Button Tap Scale) (プレス)
別名 Tap feedback, Active scale, Press state
押している間は要素が少し縮み、離すと弾むように元に戻ります。
使いどころ
ボタン、カード
バリエーション
- whileTap scale
- active:scale-95
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にプレス(Press (Button Tap Scale))の効果を追加してください。タップフィードバック(tap feedback)、押下状態(press state)とも呼ばれます。
押している間は要素が少し縮んでわずかに暗くなり、離すと小さく弾みながら元のサイズに戻るようにしてください。素早く控えめに。
キーボードやタッチで押したときも同じ反応を見せ、周りのレイアウトがずれないようにしてください。似ているモーション
A
マウスを乗せてください
要素が内側へ沈んでから戻り、物理ボタンを押したように見えます。
使いどころ
ボタン
[適用する場所]にプッシュ(Push)のホバーエフェクトを追加してください。
ポインターが入るたびに要素が一度すばやく小さく沈み、弾むように通常のサイズへ戻って、物理ボタンを押し込んだように見せてください。
ループさせずホバーごとに一度だけ再生し、周りのレイアウトがずれないようにしてください。A
マウスを乗せてください
Shrink (シュリンク)
別名 Scale Down
ポインターが乗っている間、要素がなめらかに少し縮小します。
使いどころ
ボタン、タイル
[適用する場所]にシュリンク(Shrink)のホバーエフェクトを追加してください。スケールダウン(scale down)とも呼ばれます。
ポインターが乗っている間は要素がなめらかに少し縮小し、離れたら元のサイズに戻るようにしてください。素早く控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
Bounce Scale (バウンススケール)
別名 Bounce In / Out
ホバーの開始時や終了時に、要素が弾むように少し行き過ぎながら拡大・縮小します。
使いどころ
ボタン、バッジ
[適用する場所]にバウンススケール(Bounce Scale)のホバーエフェクトを追加してください。バウンスイン/アウト(bounce in / out)とも呼ばれます。
要素が弾むように少し大きくなり、最終サイズを一瞬はっきり行き過ぎてから落ち着き、ポインターが離れたら同じように弾んで戻るようにしてください。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。クリックしてください
Long Press (長押し)
別名 Press and hold, Touch and hold
要素をしばらく押し続けると、追加の操作や進行度の塗りが現れます。
使いどころ
コンテキストメニュー、長押しで確定
[適用する場所]に長押し(Long Press)のインタラクションを追加してください。プレスアンドホールド(press and hold)、タッチアンドホールド(touch and hold)とも呼ばれます。
押している間は要素が少し沈み、進行度の塗りが一定のペースで横切るようにしてください。塗りが満ちたら弾むように戻ってメニューを開き、途中で離したらキャンセルして塗りをリセットしてください。
キーボードやスクリーンリーダーの利用者にも同じ操作へたどり着く別の手段を用意し、長押しでテキスト選択やブラウザ標準のコンテキストメニューが出ないようにしてください。Micro-interactionのほかのモーション
ドラッグしてください
Pull to Refresh (プルトゥリフレッシュ)
別名 Swipe to refresh
リストを下に引っ張るとスピナーが現れ、離すとコンテンツを再読み込みします。
使いどころ
フィード、受信トレイ
[適用する場所]にプルトゥリフレッシュ(Pull to Refresh)のインタラクションを追加してください。スワイプトゥリフレッシュ(swipe to refresh)とも呼ばれます。
リストを一番上から下に引っ張ると、少し抵抗を感じさせながら指に追従し、引く量に合わせて回るスピナーが現れるようにしてください。離したらコンテンツの再読み込み中もスピナーが回り続け、終わったらリストがなめらかに上へ戻るようにしてください。
リストがすでに一番上までスクロールされているときだけ開始し、キーボードやスクリーンリーダーの利用者向けに通常の更新ボタンも用意してください。クリックしてください
Ripple (リップル)
別名 Material ripple, Touch ripple, Ripple Button, Ink ripple
クリックやタップした位置から円形の波が広がり、フェードアウトします。
使いどころ
ボタン、リスト項目
[適用する場所]にリップル(Ripple)の効果を追加してください。マテリアルリップル(material ripple)、インクリップル(ink ripple)とも呼ばれます。
クリックやタップのたびに、押した位置からやわらかい円形の波が要素全体を覆うまで広がり、広がりながら薄れていくようにしてください。素早く軽やかに。
波は要素の形で切り抜き、素早く連続して押したときはそれぞれ別の波を出し、キーボードで押したときは中心から広げてください。Success Checkmark (サクセスチェックマーク)
別名 Animated success tick
円とチェックマークが描かれ、操作が成功したことを伝えます。
使いどころ
フォーム送信、決済完了
[適用する場所]にサクセスチェックマーク(Success Checkmark)のアニメーションを追加してください。アニメーション付き成功チェック(animated success tick)とも呼ばれます。
円がなめらかな一筆で描かれ、続いて内側にチェックが描かれ、マーク全体が小さくやさしくポンと弾むようにしてください。落ち着いて確かな印象で。
操作が成功したときに一度だけ再生し、スクリーンリーダーが読み上げられるテキストメッセージを添え、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成したマークをすぐに表示してください。