Bounce (バウンス)
別名 Bounce (attention)
要素が上下に跳ね、弾みがだんだん小さくなっていきます。
使いどころ
下へのスクロール案内、CTAボタン
[適用する場所]にバウンス(Bounce)の注目エフェクトを追加してください。
要素が跳び上がっては落ちる動きを、だんだん小さくなる素早いバウンドで数回繰り返し、着地のたびに少しつぶれるようにしてください。
ループさせずトリガーされたときに一度だけ再生し、モーションを減らす設定にしているユーザーには再生しないでください。別名 Bounce (attention)
要素が上下に跳ね、弾みがだんだん小さくなっていきます。
使いどころ
下へのスクロール案内、CTAボタン
[適用する場所]にバウンス(Bounce)の注目エフェクトを追加してください。
要素が跳び上がっては落ちる動きを、だんだん小さくなる素早いバウンドで数回繰り返し、着地のたびに少しつぶれるようにしてください。
ループさせずトリガーされたときに一度だけ再生し、モーションを減らす設定にしているユーザーには再生しないでください。別名 Blink
要素が不透明度をすばやく切り替えて点滅します。
使いどころ
新着コンテンツの通知
[適用する場所]にフラッシュ(Flash)の注目エフェクトを追加してください。ブリンク(blink)とも呼ばれます。
要素がすばやく消えては現れる点滅を2回行い、その後は完全に表示されたままにしてください。
延々と点滅させず一度だけ再生し、速い点滅は不快に感じられることがあるため、モーションを減らす設定にしているユーザーには再生しないでください。別名 Flickering
要素の不透明度が、切れかけた電灯のように不規則にちらつきます。
使いどころ
ネオンやグリッチの演出
[適用する場所]にフリッカー(Flicker)のエフェクトを追加してください。flickering とも呼ばれます。
要素はほとんどの時間は安定させ、切れかけたネオンのように短く不規則に途切れて暗くなるようにしてください。
タイミングは等間隔ではなく不規則にし、最大の明るさでの速い点滅は避け、モーションを減らす設定にしているユーザーには止めてください。別名 Headshake, No Shake
要素が少し回転しながら左右に揺れ、首を横に振って「いいえ」と伝えるように見えます。
使いどころ
無効な入力や拒否の表示
[適用する場所]にヘッドシェイク(Head Shake)のアテンション効果を追加してください。headshake、no shakeとも呼ばれます。
要素が首を横に振るように、少しひねりを加えながら素早く左右に向きを変え、振れ幅を少しずつ小さくして止まるようにしてください。
操作が拒否されたときなど、トリガーされるたびに一度だけ再生し、周りのレイアウトが動かないようにしてください。別名 Heart Beat
要素が鼓動する心臓のように、二拍ずつのリズムで拡大・縮小します。
使いどころ
いいね・お気に入りアイコン、ライブインジケーター
[適用する場所]にハートビート(Heartbeat)効果を追加してください。heart beatとも呼ばれます。
要素が素早く二度ふくらんでは戻り、次の鼓動の前に少し休むようにしてください。鼓動する心臓のような動きです。
鼓動の間の休みを保ったまま途切れなくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。別名 Jelly
要素がゼリーのようにぷるぷると左右にゆがみ、揺れ幅がだんだん小さくなります。
使いどころ
ボタンやロゴの遊び心のある強調
[適用する場所]にジェロ(Jello)のアテンション効果を追加してください。ジェリー(jelly)とも呼ばれます。
要素がゼリーのようにぷるぷると左右にゆがみ、最初は大きく、すぐに落ち着いて止まるようにしてください。
トリガーされたら一度だけ再生し、要素が占める領域は変えずに周りのコンテンツがずれないようにしてください。別名 Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
要素のコピーがレーダーの波紋のように、拡大しながら消えていく動きを繰り返します。
使いどころ
通知ドット、ライブステータス
[適用する場所]にピング(Ping)効果を追加してください。レーダーピング(radar ping)、パルスリング(pulse ring)とも呼ばれます。
要素のコピーが外側へ広がりながら消えていく動きを、一定のペースで何度も繰り返してください。要素そのものは動かしません。
リングは別レイヤーに描いてレイアウトに影響しないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はループを止めてください。別名 Pulsing
要素がやわらかく拡大縮小、またはフェードを繰り返します。
使いどころ
スケルトンローダー、ライブインジケーター、CTA
[適用する場所]にパルス(Pulse)効果を追加してください。パルシング(pulsing)とも呼ばれます。
要素がゆっくり一定のリズムで、やわらかくふくらんでは戻るようにしてください。控えめで、弾むような動きは不要です。
周りのレイアウトを動かさずに途切れなくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。別名 Rubberband
要素が横に伸びて縦に縮む動きを弾むように数回繰り返し、元の形に戻ります。
使いどころ
ボタンのフィードバック、注目を集める演出
[適用する場所]にラバーバンド(Rubber Band)のアテンション効果を追加してください。rubberbandとも呼ばれます。
要素が横に伸びて縦に縮み、その後小さく弾む動きを数回挟みながら元のサイズに落ち着くようにしてください。
トリガーされたら一度だけ再生し、伸び縮みしている間も周りのレイアウトがずれないようにしてください。別名 Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
要素が一方向の軸に沿って素早く小刻みに往復します。
使いどころ
フォームのエラー表示
[適用する場所]にシェイク(Shake)効果を追加してください。エラーシェイク(error shake)、invalid input shakeとも呼ばれます。
要素が左右に数回素早く小刻みに揺れ、ちょうど元の位置で止まるようにしてください。速く、きっぱりと。
ループさせずにエラーが起きるたびに一度だけ再生し、意味が動きだけに頼らないよう、目に見えるエラーメッセージも一緒に表示してください。別名 Rotate Loop, Spinner
要素が一定の速さで回転し続けます。
使いどころ
読み込み中のスピナー
[適用する場所]にスピン(Spin)効果を追加してください。スピナー(spinner)、ローテートループ(rotate loop)とも呼ばれます。
要素が一定の均一な速さで回り続けるようにし、回転の合間にイージングは入れないでください。
ループは途切れなくし、スピナーにはアクセシブルな読み込み中ラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。要素が上端を支点に振り子のように左右に揺れ、揺れ幅がだんだん小さくなります。
使いどころ
吊り下げ看板、通知アイコン
[適用する場所]にスイング(Swing)のアテンション効果を追加してください。
要素が吊り下げ看板のように左右に揺れ、最初は大きく揺れてすぐに収まるようにしてください。
中心ではなく上端を支点にして揺らし、トリガーされたら一度だけ再生してください。要素が大きくなり、回転しながら小刻みに揺れてから元のサイズに戻る、お祝いのような動きです。
使いどころ
成功時の表示、お祝い
[適用する場所]にタダー(Tada)のアテンション効果を追加してください。
要素が一度少し小さくなってから大きくなり、素早く傾きながら左右に揺れて元のサイズに戻るようにしてください。ささやかなお祝いのような動きです。
成功した直後などに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は再生しないでください。別名 Vibration, Buzz
要素がスマートフォンのバイブのように、さまざまな方向へ細かく素早く震えます。
使いどころ
アラート、着信風の合図
[適用する場所]にバイブレート(Vibrate)のアテンション効果を追加してください。バズ(buzz)、バイブレーション(vibration)とも呼ばれます。
要素がスマートフォンのバイブのように、いろいろな方向へ細かく素早く一瞬震えてから止まるようにしてください。
コンテンツが読めるよう動きはごく小さくし、ループさせずにアラートごとに一度だけ再生してください。要素が不安定な物のように、傾きながら左右に揺れます。
使いどころ
アイコンやボタンへの注目
[適用する場所]にウォブル(Wobble)のアテンション効果を追加してください。
要素が傾きながら左右に揺れ、最初は大きく、揺れるたびに小さくなって止まるようにしてください。
トリガーされたら一度だけ再生し、隣のコンテンツがずれないようにしてください。