BLOGHP制作
WEBサイトの動きを見やすくする｜止められるアニメーション設計
動きは変化を伝える助けになりますが、常に揺れるボタンや自動スライドは読むことと操作を妨げます。目的のない動きを減らします。
先に結論状態変化を短く伝え、重要情報を動きだけに頼らず、利用者が停止・軽減できるようにします。
動きの目的を一つずつ確認する
メニュー開閉、保存完了、並べ替えなど、何が変わったかを伝える動きは短くします。注目を集めるだけの繰返し、背景の常時移動、不要な視差は見直します。
アニメーションがなくても情報と操作が理解できることを確認します。完了やエラーは文言とアイコンでも示します。
自動再生と点滅を避ける
カルーセルや動画を自動で動かす場合は停止操作を用意し、文章を読む前に切り替えません。重要なCTAを動くバナーの一枚だけへ置きません。
速い点滅や大きな拡大縮小を使わず、健康上の影響がある表現を避けます。動画には必要に応じて字幕や代替説明を用意します。
動きを減らす設定へ対応する
OSやブラウザの動きを減らす設定を尊重し、装飾アニメーションを停止・簡略化します。操作に必要な状態変化は瞬時または短い表示へ置き換えます。
設定時にもメニュー、モーダル、通知、スクロール位置が正しく動くか確認します。非表示要素が残ってクリックを妨げないようにします。
性能と押し間違いを実機で確認する
低性能端末や低速回線で、動きが入力やスクロールを遅らせないかを見ます。押した直後にボタンが移動し、別操作を誤タップさせないようにします。
PC・スマホ・タブレットで、動きあり・軽減設定、キーボード操作を撮影・検査します。見た目の楽しさと作業時間の両方を確認して残す動きを決めます。
相談前にそろえるもの
- 動きの目的
- 自動再生・停止
- 色・文言との併用
- 動き軽減設定
- 低性能端末・誤タップ
全部そろっていなくても構いません。分かる範囲を確認し、業務ルールや金額に関わる部分は担当者と一緒に決めます。