最近、リンクをホバー ( :hover ) した時のアニメーションについてよく考えています。

CSS や JavaScript などが進化するにつれて、リンク箇所をマウスでホバーした時のアニメーションも多様になりました。古くは、文字色を変えたり少し上に動かしたりするぐらいでしたが、最近では、複雑なアニメーションをするものが増えてきました。Web制作の tips を載せているコリスさんでよくそういう記事を見ます。最近のアニメーションの例をコリスさんから引用してみます。

引用元：[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation | コリス

引用元：[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js | コリス

これらのアニメーションを見た時に、私は「凄いな」と思うと同時に「そもそもその動き必要なのかな」と思ってしまいました。ホバー時のアニメーションはリンク箇所であることをユーザーに伝える補助をするために存在すると私は考えていたので、最近のアニメーションはただ「魅せる」ためのものになっているのかなと。現に、急いでいる時にゆっくりアニメーションされると、とてもわずらわしく感じることが多々あります。

考え方は色々ありますし、「こういうアニメーションをもっと多用したい」という人もいらっしゃるでしょう。ですが、スマートフォンやタブレットなどのホバーが効かないデバイスの存在も考えると、私はアニメーションにはそこまで力を入れなくてもいいのではないかと考えます。アニメーションを頑張るよりは、ホバーしなくてもリンクであることがわかるデザインをすることの方が重要ではないかと考えました。