つい見ちゃう！テキストアニメーション3選

近年のwebトレンドとして、
「アニメーション」は欠くことのできない演出の1つですよね。

テキストやページ遷移、マウスオーバー、イラスト、ローディング画面など、アニメーションを用いることは実に多く、むしろ動きを全く付けていないサイトの方が珍しいかも？と思うぐらい。

特に最近気になっているのは、「テキストアニメーション」です。
これは見出しや目立たせたい文字、商品名などに
より注目させることができる演出です。

今回は、TVやYoutube、アプリの広告などで最近みつけた、
気持ちのいいテキストアニメーション事例を3つご紹介します！

▼ドコモ　「ahamo はじまるよ」篇

https://www.youtube.com/watch?v=QZAbh6azzbM

丸っこくて可愛いロゴが、たくさん、さまざまな動きで登場します。
（ラインからロゴに変化する、持ち上がって落ちる、拡大縮小、はずむ、くるくる回転、カラフルにきらめく…などなど）
スローで再生すると、「ここではまた違う動きなんだ…！」と、驚きます！

▼コカ･コーラ ゼロシュガー　「いいじゃん！休憩！」篇

https://www.youtube.com/watch?v=YubsV8Qcy4I

コピー「いいじゃん！休憩！」のアニメーション、
文字裏となる平行四辺形が、左端からスーっと入ってきて、行きすぎて「ばうんっ」と戻る動きがあります。
それに伴って出てきたテキストが、急ブレーキ後の車内の乗客のように、「おっとっと」と揺れる演出。すごく細かいです…！

最後の商品名「ゼロシュガー」を目立たせるために、コピーとは少し違う動きをつけています。（ここもぜひスローでご覧ください…！）
1文字1文字が違う動きで表示されるのですが、こういった動きはどうやって設計してるんだろう？挑戦してみたいです。

▼スタディサプリ中学講座　「放題篇」

https://www.youtube.com/watch?v=lMpowV1BFJY

人は動いているものに注目すると言いますが、こちらはラインアニメーションが絡んだ演出で、コピーに注目させる動きになっています。

特に目立たせたい部分は、文字色がチカチカと点滅するアニメーション。
暖色と寒色が交互に点滅するような演出は、最近ますますよく見かけます。トレンド感がありますね。

普段なにげなく見ているCMも、ゆっくり見てみると動きが細かく見れて楽しいですね！
特にインスタストーリー広告などは一度画面をクローズしてしまうと、なかなか再度お目にかかれないので、すぐキャプチャ・画面収録するようにしています。今後も沢山参考にしていきたいです！

みなさんもオススメのアニメーションを見つけたら、ぜひ教えてください！