世の中のアニメーションには、「目に見えているけど、頭脳でほとんど認識されない装飾」で溢れています。ゲームでも動画でも、何気ない部分に光の粒が舞っていたり、小さい円が弾けていたり。
ウェブも同じで、
- アニメーションの演出用に
- 何か装飾をプラス1することで
ユーザーには気づかれずとも、無意識のうちに「このアニメーション気持ちいいな」と思わせることができます。
（あ、実際には頭の中で「思う」ことすらしないんですが…無意識レベルなんです）
残像を使った例
今回は弊社の制作実績の北海道コンサドーレ札幌グローバルサイトを例にお話します。
ポイントはこの赤く囲った部分！アニメーションを派手に見せるためにわざと同じ画像を同じ位置に重ね、アニメーションのタイミングや拡大率を変えています。つまり、残像として同じ画像を2回使うのです。
はじめのうちは与えられたデザイン案の画像だけで（=あるものだけで）アニメーション案を考えがちですが、ときには登場しない画像を思いつく（生み出す）ことも重要です。
もしこれらの残像がないと下記のようになります。
これでもアリですが…やはり今回のサイトのコンセプトに合っているのは、残像あり版でしょう。
今は簡単に学べる時代？！
こういうアニメーション演出の勉強に意外と役立つのが・・
- ゲームのトレイラー（PV） 特にポップなゲームがおすすめ
- テレビゲームのメニュー画面(UI部分) 特にポップなゲームがおすすめ
- アニメの主題歌映像
などです（人によるかもだけど）。
今はYouTubeの公式チャンネルで、アニメもゲームのトレーラーも観られる時代ですね。これらを一時停止やスローで観ると、意外と細か～いところが派手に動いていたりすることに気づきます。これらのテクニックはウェブにも応用できますね！
