ポータルサイトの価値をあげるアニメーションの小技8選

一人でも多くのユーザーを集め利用してもらうのがポータルサイトの目的ですが、
機能性・利便性に加え独自性も備えていないと競合に出し抜かれてしまいます。
ほんの少しの変化でもポータルサイトの印象は変わります。
そんな少しの変化を生み出す小技を紹介したいと思います。

アニメーションを駆使したポータルサイト

最近のポータルサイトを見てみると、コンテンツが横からスライドして表示されたり、ズームインして表示されたりと”動き”で見せるものが増えてきました。
ちょとした動きでも”おっ”と思わせることができるので利用しない手はないですね。

1.透明度をコントロール
要素の透明度をコントロールするアニメーション。オーソドックスながら高級感も出ます。
細かいところに拘っているなという印象を生み出します。
※1と3の間にカーソルを当ててください。

2.ズームイン・ズームアウトでコミカルに
画像をズームイン・ズームアウトさせれば面白い印象を生み出せます。
個性的なサイトにしたい場合はこのアニメーションが最適です。

3.スライドでシャープな印象を
カーソルを当てた際に色がスライドして変化したり、
隠れていた要素を表示したりと何かと使い勝手が良いアニメーション。
洗練されたサイトを印象付けます。

4.変わり種の回転アニメーション
くるくるっと回転する動きが気持ちいいアニメーション。
とにかくビジュアルが大事というサイトにはもってこいです。

See the Pen card flip animation by Jon McLaren (@thewebtech) on CodePen.

See the Pen cube service box by RahulDhiman (@rahuldhiman) on CodePen.

5.好き嫌いが分かれそうなバウンドアニメーション
ピョンと飛び跳ねる何とも楽しげなアニメーション。
ただ好き嫌いは分かれそうですね。
とにかく他とは違ったことをしたいと思ったらこちらを。

6.チェックボックスをかっこよく
フォーム周りでもアニメーションは活躍します。
チェックボックスも動きがあると印象ががらっと変わります。

7.フォローアップに繋がる？SNSアイコンもおしゃれに表示
ボタンの中にSNSアイコンが収納されていて、カーソルを当てるとスライドして表示。
見た目もスッキリしていておしゃれです。

8.進化した未来型のアニメーション
パカッと開いて要素が現れる手の込んだアニメーション。
進みすぎていて利用するのに躊躇しそうです（笑）。

まとめ

今回はポータルサイトに役立つアニメーションをピックアップしてみました。
さりげない動きでも閲覧数に影響しますので導入してみると良いのではないでしょうか