Webページやアプリにおいて、アニメーションを使うことで画面・要素の遷移を視覚的に伝えることができます。この記事では画面・要素（オブジェクト）の遷移をアニメーションを使ってより伝える際のポイントをまとめます。
画面遷移のアニメーション
例えばiOSにおけるアプリ起動時、アイコンをタップするとアイコンが拡大しスプラッシュ画面が画面全体に表示されます。
これによりタップしたアプリを起動していることが視覚的に理解しやすくなります。スマホのような小さい画面では得られる視覚的情報も限られるので、アニメーションを用いて操作に対するフィードバックを適切に伝えています。
位置の遷移アニメーション
ノーアニメーションでは、操作していた要素がどこにいったか分かりづらくなってしまいます。要素の追加・更新・削除時に位置のアニメーションを適切につけることで操作した要素を追いかけやすくなります。
この例では要素の追加およびその他の更新にトランジションをかけ、位置の遷移にアニメーションを使うことで理解を助けています。これは追加時だけでなく要素の並び替えや要素を非表示にするときにも効果的です。
プレゼンテーションやデモンストレーション
ウェブサイトの機能や商品の特徴を紹介するときにアニメーションを使うことで魅力を伝えやすくなります。スクロールイベントに応じたアニメーションによって、都度見てしてほしい要素に注目を集めることができます。
Appleの製品ページはいつ見てもすごいなぁと感動してしまいます…。
アニメーションを使うときの注意点
上記では遷移時に効果的なアニメーションを紹介しましたが、アニメーションを使うにはいくつか注意点があります。
パフォーマンスに注意する
複雑・多すぎるアニメーションはデバイスのパフォーマンスを低下させる恐れがあるので避けるべきです。綺麗なアニメーションでもカクカクした動作をさせる場合は結果的にユーザーへ不快感を与えます。
また、アニメーションはグラフィクスメモリを多く消費するため、 バッテリー への影響も考慮すべきです。
ユーザーの注意を過度に引きすぎない
UIのアニメーションはユーザーの理解を助けるために利用するものであり、過度な注意を引くために使うべきではありません。なんらかのアクションに対するフィードバックとして、違和感を感じさせないアニメーションにするよう心がけてください。タイミングとイージングを意識することで自然なアニメーションとなります。
参考文献
この記事の 最終更新：2023.7.14