スマホアプリやWebサービスなど、スクリーン上のUIには様々な形でモーション(動き)が使われています。 こうしたUIモーションは利用者として毎日何気なく目にしているものですが、そこには作り手がいて目的があるはずです。この記事ではUIモーションの目的と効果的な使用方法について考察します。 UIモーションとUIアニメーション「モーション」と「アニメーション」はどちらも動きを表す言葉として、同じ意味で使われることもありますが、元々の言葉の意味を踏まえると以下のような違いがあると言えます。 UIモーション:UI要素に動きを与えたもの。ユーザーの操作や時間経過に応じてUI要素が移動・拡大・縮小・変形などの変化が生じること。(例:モーダルウィンドウの表示・非表示など) UIアニメーション:時間とともに変化するグラフィックをUIに取り入れること。(例:Twitterのいいねボタンを実行した際の演出) 厳
![UIモーション01: UIになぜ動きが必要か?|鈴木慎吾 / TSUMIKI INC.](https://cdn-ak-scissors.b.st-hatena.com/image/square/c72598784696c5e661f25d1cbdde59bd87e367c8/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F114578446%2Frectangle_large_type_2_d95bd0115cb96e911ad3095b9acd2f11.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)