ホバーアニメーションのアイデア 7選

こんにちは、デザイナーの磯野です！

Webデザインで、画像リンクにホバーアニメーションを加えるのは、 ユーザーの興味を引きつけたり、インタラクションの心地よさを演出したりするうえで欠かせない要素ですよね。
皆さんは、どんなホバーアニメーションをよく使っていますか？
一般的によく使われるものといえば、例えば以下のようなアニメーションが定番かと思います。

• ズームアウトする
• ズームインする
• 半透明にする
• ブラーがかかる

どれもシンプルで使いやすく、いろんなデザインにフィットする便利な表現です。
今回は、こうした定番の動きとは少し違った、ユニークなホバーアニメーションのアイデアを、実際のサイトを参考にしながら紹介していきたいと思います！

※この記事では、ホバーの動きをわかりやすくするために、オリジナルで名前をつけてご紹介していきます。

マグネットホバー

画像にカーソルを近づけると、吸い寄せられるようにスッと反応する動き。
まるでマグネットのような感覚です。指先でレコード盤をそっと動かしているような、そんな軽やかなコントロール感もありました。
この動きが使われているのは、“洋楽で英語を学ぶ”をコンセプトにした「UM English Lab」のWebサイト。
ビビッドでポップなビジュアルの中に、知的で洗練された印象もあって、遊び心と学びのバランスがちょうどよく保たれています。ホバーの動き自体が、そのコンセプトを補っているように感じられました。

回転ホバー

カーソルを合わせると、画像がくるっと回転しながら縮小し、ふわっと奥に傾くような動き。
ポップで跳ねるようなアニメーションが、サイトの楽しげな雰囲気とぴったり合っています。
このホバーアニメーションが使われているのは、「JY-CONTENTS」というWebデザイナー・エンジニアのJorYさんによるブログサイト。
「創るを思いっきり楽しむ！」というコンセプトの通り、サイト全体に遊び心が散りばめられていて、つい見入ってしまいます。
最新記事の「NEW」ラベルでは、👀の絵文字がびっくり箱のように飛び出すような動きもあって、細かいところにもユニークな仕掛けが感じられました。
細かいところまで動きが工夫されていて、触っているだけでも楽しくなってきますね。

カクっと傾きホバー

カーソルを画像に近づけると、カクッと小さく傾くような動き。
控えめな動きですが、ちょっとラフで、いい意味で“抜け感”のある印象になります。
このアニメーションが使われているのは、ファッションやカルチャーを扱うWebメディア「ガールフィナム」。
赤と白をベースにしたミニマルなデザインに、大きめのタイポグラフィが大胆に配置されていて、雑誌のような雰囲気があります。
マガジン系のサイトでよく見かける動きですが、紙っぽさやアナログなトーンのあるデザインと相性が良いと感じます。マガジン系のサイトや、ゆるさを出したい場面で使うと、自然に馴染みそうですね。

角丸ホバー

カーソルを合わせると、カードの角がふわっと大胆に丸く変わる動き。
ホバーで角が丸くなるアニメーションはよく見かけますが、ここまで大胆に角をラウンドさせるのは珍しい印象です。
しかもすべて同じ丸さではなく、カードごとに微妙に異なる角丸のサイズが、画面全体に柔らかくて親しみやすい雰囲気をつくっています。
この動きが使われているのは、「みんなの暮らし方不動産」というWebメディア。
モノトーンを基調にしつつ、角丸やセリフ体のあしらいがやわらかく親しみやすい印象を与えています。ホバー時には色も加わり、物件ごとにそれぞれの個性が際立つのも特徴的です。モノトーンのフラットなデザインにこうした動きや色が加わることで、ホバーアニメーション自体がサイト全体の個性や世界観をしっかり形づくっているように感じました。

エリア塗りつぶしホバー

カーソルを合わせると、区切られたエリアが色で塗りつぶされ、さらに画像が別のシーンに切り替わる動き。
シンプルながら、しっかり印象に残るアニメーションだと感じました。
このホバーが使われているのは、UDSの宿泊施設をまとめた「UDS HOTELS」のサイト。
小さめのフォントと細い線を使ったシンプルなデザインに、落ち着いた雰囲気の画像や動画が組み合わさり、モダンで洗練された印象がつくられています。
単に画像が動くだけでなく、切り替わることで、それぞれのホテルのイメージがより伝わりやすくなっていると感じました。
見せたいイメージのバリエーションが多いときにも、こうしたホバー表現は効果的に使えそうです。

バウンドホバー

カーソルを近づけると、画像が軽く左右にバウンドするような動き。
まるでボールが跳ねているような、スポーツらしい軽やかさを感じさせてくれます。
このアニメーションが使われているのは、「BEAMS SPORTS」のWebサイト。
スポーツカルチャーをもっと身近に感じてもらうことをテーマに、グッズや音楽、漫画、食など、運動を楽しむライフスタイルが幅広く紹介されています。
サイト全体は、スポーティーなかっこよさとポップな楽しさのバランスが心地よく、ホバーのバウンドする動きもその雰囲気とマッチしている印象です。

ウェーブホバー

カーソルを合わせると、画像がふわっとゆらめくように揺れる動き。
まるで旗が風に揺れているような、なめらかで気持ちのいいアニメーションです。
このホバーは、原宿にあるクリエイティブカンパニー「サンアド」のWebサイトで使われています。
ゆったりとした余白と自由なレイアウトが組み合わさったデザインから、クリエイティブな空気感が伝わってきます。
ホバーの動きもその雰囲気に溶け込み、サイト全体に個性と遊び心を添えているように感じました。

最後に

いかがでしたでしょうか？
改めてホバーアニメーションに注目してみると、サイト全体の個性や世界観を引き立てるうえで、思っていた以上に大きな役割を担っていることに気づかされました。
これからも、デザインとの相性やサイトの世界観に合ったアニメーションについて、もっと意識して取り入れていきたいと思います。
最後までご覧いただき、ありがとうございました！