みなさん、アニメーションの参考を探すとき、どこを見てますか？
こんにちは！
わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。
去年から OH (http://wariemon.com) という名前でも活動中です。ご贔屓に。
みなさん、サイト制作のときにいれるアニメーションなど、どこから着想を得てますか？
ぼくは、Hoverstates というサイトをよく参考にしています！
実際に使われているアニメーションが多く掲載されているこのサイトの中から厳選のアニメーションをまとめました！
ぼくがよくこの Hoverstates を使う理由としては以下の4点があります！
なめらかなアニメーションでわかりやすい！
サイトだけにとどまらず、ロゴだったり多種多様なアニメーションが集まっている
実際に制作されている素晴らしい例の選りすぐり
わかりやすいジャンル分け
という点で非常にお気に入りの Hoverstates。
実をいうと 僕のサイト "OH" も掲載していただいていて、そこもお気に入りの理由の一つでもあります！
それでは、今回はその中でも 文字、タイポグラフィーを活かしたアニメーションに焦点を絞ってみていきましょう！
Hoverstates
Rolloverアニメーション
1. David DeSandro
しょっぱなから rollover だけではないんですが、ドラッグすると文字がどんどん逃げていく演出が入っています！
すごくサイト自体のデザインがシンプルながらも、細かにふわふわしてるのがトリガーのように見えるデザインのようです！
シンプル x 大胆ギミック の王道のような演出ですね！
このアニメーションをチェック！
2. Casco Projects
文字にrolloverすると、並びが偶数の文字がかくっと動くアニメーション。全体が動くと簡単なアニメーションに
見えてしまいますが、こういう工夫一つで見えかたが変わりますね！文字が生きているように見えるナイスな演出です！
このアニメーションをチェック！
3. SPRZ NY
rollover でタイピングされるかのように文字自体に入力のアニメーションが入る王道中の王道アニメーション！
白地に黒、クールなトーンにビビッドな赤の差し色も効いてますね！
このアニメーションをチェック！
4. Realest mc
rollover ラインが分子のように、点に分解されるアニメーション！細かいところで使いたいギミックというよりは、
メインイメージ、それこそ、ロゴとかに大胆にあしらいたくなる演出ですね！
このアニメーションをチェック！
5. Mnmly
これまたミニマルなノイズアニメーションですね！文字にマウスオーバーしたときに違和感あるんだけど
なんだろう？という細かいアニメーションが乗せて外して乗せて外して...と楽しみたくなるかっこいい演出です！
このアニメーションをチェック！
6. Kingston University FADA Degree Show
これは大きいアニメーションのrolloverですね！多分内容には関係ないのでしょうが、rolloverで文字が切り替わる
大胆なアニメーションですね。さながらスロットのようです。何かげーむとかに落とし込みたいですね。
このアニメーションをチェック！
Scroll アニメーション
7. Blank
スクロールに合わせて文字がアウトラインから書き出されるような流麗なアニメーション！
王道的タイポグラフィー的見せ方 に アニメーション が加わることで映像作品を見ているかのような気分になりますね！
このアニメーションをチェック！
8. Not Today
シンプルなヘッダーに関するアニメーションですね。スクロールで一度消えて、改めてでてくる系のヘッダーは
よく見かけますが、こういう画面外に出ず、なめらかにアニメーションするだけで見栄えはだいぶ変わりますね！
このアニメーションをチェック！
その他の アニメーション
9. The Experiment
こちら奥行きをつかった映像的表現の見せ方ですね。webというよりも映像の力のほうが強いかもしれませんが
映像 x タイポグラフィー の見せ方として、非常に勉強になります！
このアニメーションをチェック！
10. Get Used To It
フォントの足が伸び縮みすることで、サイト全体のレイアウト・拡縮のルールも崩れず
フォントだけで見せる見せ方としても一味も二味も違う見せ方になっていますね！
このアニメーションをチェック！
Hoverstateをチェックし続けて優秀な実例を追い続けよう！
今回はタイポグラフィーについてのお話でしたが、それ以外にもいろんなサイト・アニメーションの実例が詰まっている Hoverstates。
これからもチェックし続けましょう！
Hoverstates
カヤックでは、一緒にサービス・ゲーム・クライアントワークでものづくりができるデザイナーを募集しています！
気になった方はぜひ一緒にUI/UX設計、グラフィック作成など楽しみましょう！！
デザイナーはこちらから！
by わりえもん OH : http://wariemon.com