Webフロントエンド界隈のエンジニア諸氏は「〇〇に○○するアニメーションつけてよ！」と気さくに話しかけられたシーンが何度もあるだろう。
モーションデザインの役割はそもそもどんなものなのか、どのようなモーションデザインを行えばいいかを改めての復習。
モーションデザインはUIとアクションを繋ぐもの
アニメーションは必ずユーザーの操作をフックとして発動する。
例えば、ボタンを押したときやスクロールしたとき、ページを移動したとき、読み込んだときなどだ。
ユーザーの操作によってアニメーションという波が発生し、それが連鎖的にUIに波及して、次をアクションを待つ。
こういった目線を持ってモーションデザインを行うと、アニメーションの主張の度合いや、どのようなアニメーションが適切なのか、目星がつくはず。
リアリティが生む、心地よさ
アニメーションが現実世界とかけ離れた体験だとどうだろう。
例えば、ドラッグアンドドロップで特定の要素の間に、特定の要素を入れる場合、いきなりその要素がその間に表示されてしまうと、どこが変わったか、操作が完了したかがユーザーにはわからない。
このようなモーションデザインの正解は、現実世界（リアリティ）を参考にすると良い。
要素が入るとき、その要素が他の要素を押し出すようなモーションデザインにすればいい。
他には、例えば、要素が移動するアニメーションにしても等速直線運動のようだと、人間の目には自然界にない動きだから違和感のあるように思える。
慣性の法則を使用したイージングのあるアニメーションが心地よく感じるはずだ。
モーションデザインだけにいえることではないが、人間の感性にそぐわないものは概ね自然ではなくリアリティのないものなので、俯瞰して評価することが重要である。
心地よく感じるかどうかわからないという人にはまず、Appleのプレゼンを見てほしい。
見た後に、Appleのプレゼンシートがもしアニメーションのないものだったとしたら、どんな印象を持つか想像してほしい。
きっと感動の度合いが少なからず薄れるだろう。
また、必ず現実世界では体験できないようなモーションデザインをすることもあるだろう。
このような場合には、デファクトスタンダートを意識すると一般的なユーザーにとってはリアリティのあるモノのように感じる。
そのため、Webデザインのトレンドを把握しておく必要がある。
これはWebデザイナーとグラフィックデザイナーの大きな違いのひとつである。
モーションランゲージとしての役割
目は口ほどに物を言うと言われるが、アニメーションも意思を伝えることができることを覚えておいて欲しい。
例えば、特定の要素が消えるときに、メニューアイコンのなかに消えるようなアニメーションをしたら、そのメニューアイコンを押せば再び現れることが想像つくだろう。
またデザインコンセプトとして、エネルギッシュなWebサイトの場合は、モーションは穏やかではなく、過激なほうが望ましいはずだ。
また意味的（一貫性のあるよう）にモーションデザインを行うことも重要だ。
例えば、モーダル画面が下から現れたにもかかわらず、右に消えていくと、感受性の豊かなユーザーはパニックに陥る。
少しのアニメーションを入れるだけで、その要素はユーザーに注意を向けさせる効果が生まれる。
空間的・階層的な関係性、注意を向けさせるような集中性、フィードバックやアクションにあったステータスの提示する説明性、そして個性までも2Dあるいは3Dという次元で表現できる。
モーションはユーザーに伝える手段のひとつである。
不快を愉快にする
レイテンシが発生するような場合。
例えば、読み込みに時間がかかるような場合、その待機画面に何も変化がないとユーザーは不安になる。
このような場合には、ローディングやプログレスバーを表示したりすることで、ユーザーの体験（UX）を大きく向上することができる。
不快だけでなく、普通も面白くしてくれる力がある。
ただ要素が羅列されるような画面で、スクロールアニメーションをつけると、誕生な操作も少しは和らぐ。
UXという言葉が一般的になったのは、モノの消費から体験の消費へと消費行動が変化したことがきっかけだという説があるが、これと同様にいまやアニメーションのないWebサイトなどほとんど見ない。
そうしたなかで、形骸的にアニメーションを実装するのではなく、自身の意思を持ってモーションデザインを行わないと、いきいきした画面とは対照的にWebサイトは死んでいく。