「こんな動きが欲しい」がすぐ見つかる。モーションリファレンス

Webサイトを制作していると、「ボタンをふわっと表示したい」「カードを気持ちよく動かしたい」といった、アニメーションの相談を受けることがあります。

そんなときに便利な、動きそのものを検索・比較できる「モーションリファレンス」というサイトをご紹介します。

「モーションリファレンス」では、動きの名前や速さ、イージング、用途、感触などから、目的に合った動きを探すことができます。現在、392種類のリファレンスが用意されており、実際の動きをプレビューしながら確認できます。

さらに面白いのが、見つけた動きをそのまま眺めるだけではなく、時間やイージングなどを調整して比較できるところ。実装用のHTML・CSS・WAAPI・GSAP・Reactのコードを確認できるものもあり、「参考にする」から「実際につくる」までつながっています。

Web制作では、アニメーションを「なんとなくカッコよく動かす」のではなく、ユーザーが何を認識するための動きなのかを考えることが大切です。

例えば、ボタンを押したことを伝える動き、画面の切り替わりを自然につなぐ動き、重要な情報に視線を誘導する動きなど、目的によって適した表現は変わります。

デザインの参考を探すときに、色やレイアウトだけでなく「動き」も検索する。こうしたリファレンスサイトを活用すると、Webサイトの表現の引き出しがさらに増えそうです。