Webページ上で表示する要素のテキストやボタンやグラフなど、適度にアニメーションなどの動きを加えることで、目立たせることだけでなく操作感を良くしたり、効果的な視覚効果を演出したりすることができます。
そんなWebサイト制作におけるさまざまな動きのアイデアを集めたサイト「Web Motion Catalog」がとても魅力的だったので備忘録として紹介してみます。
Web Motion Catalog
このサイトでは円グラフの演出や立体的なカードUI、お気に入りボタンのインタラクションに加えて、ボタンやテキストのマウスホバー演出など、さまざまな動きのアイデアが紹介されています。
各アイデアをクリックすると、詳細が表示され、実装のポイントに加えて、HTMLやCSSやJavaScriptのコード例をコピペして簡単に利用することも可能になっています。
動きのアイデアは20種類以上（2025年5月現在）用意されていて、ページ上にはフィルタ機能もあり、ホバー、スクロール、クリックなどの「インタラクション種別」、CSSのみ、JavaScriptなどの「技術」、テキスト、ボタン、リストなどの「要素」、ふわっと系、回転系、ローディングなどの「キーワード」といったジャンルで絞り込むことも可能になっています。
個々のアイデアの使用に関しては、サイト内に掲載されている規約を確認の上ご使用ください。
このサイトについて | Web Motion Catalog
今後もアイデアの数は増えていくと思われるので、何かWebサイトに掲載する動きで迷った際にはのぞきにくると良いインスピレーションをもらえそうです。
Webサイトで使用する動きのアイデアが必要になった際にぜひ。。。