走れ！コブリーナ

さりげない「GIFアニメ」で遊び心をプラス！

WEBサイトをデザインする時、GIFアニメーション（GIFアニメ）を使って
遊び心を演出することがあります。

GIFアニメは、WEBサイトに動きを加える時の古典的な手法で、
FLASHアニメーションのような複雑なものはできませんが、
作るのが簡単だし、古いブラウザでも表示できるという利点があります。

このブログにも、いくつかGIFアニメをちりばめています。
たとえば左サイドメニューの上にくっついてるライオン。
しっぽと目がさりげなく動いています。

GIFアニメをサイトデザインの一部として使う時のポイントは、
なんといっても「さりげなさ」！

あんまりド派手に動くと目がチカチカして視覚的にうるさいので、
むしろ気づかれないくらいがちょうどいいと思ってください。
あくまで遊び心ですから。

GIFアニメ作成の具体的な方法は、使うソフトによっても違いますし、
そういうのは いろんなサイトで紹介されてますので、
ここでは「さりげないGIFアニメを作るコツ」 について述べたいと思います。
（※ツールのキャプチャはPhotoshopです）

＊＊＊
GIFアニメはいわゆるパラパラ漫画形式でできています。
最初はあまり欲張らず、２コマだけで作ることを考えてみましょう。
たった２コマでも結構楽しいアニメーションができますよ。

ライオンの場合は、
しっぽの部分が２コマで、パタパタとしっぽをふるアニメーション。

 

目の部分も２コマで、まばたきをするアニメーション。

いかがですか？簡単ですよね〜。

なめらかな動きに見せるポイントは、コマ間の差異を少なくすることです。
例えばしっぽをパタパタの場合、１コマ目と２コマ目の差異が大きすぎると、
ギクシャクした動きに見えてしまいます。

もしも「しっぽをブンブン」と大きく動かしたい場合は、
その分コマ数を増やしてあげるとなめらかな動きが表現できます。

それぞれのコマを作るときは、動く部分だけをレイヤーに分けておきます。
共通部分はいじらないようにするとラクチンです。

 

最後にフレームのタイムラインで、１ループ分のコマ割りを決めて、
各フレームごとの表示時間を設定してあげます。

 

無限ループにして、
はい完成♪

フレームの表示時間を変えたり、順序を変えたりしても、
また違ったニュアンスのGIFアニメができると思います。

 

＊＊＊
ちなみにヘッダー部分の流れ星は、星を単純にならべただけ。

色の濃さと、星の間隔を少しずつ変化させてコマ割りを作っています。

↑分かりやすいように、少し遅いアニメーションにしています。

一からGIFアニメを作ろうとすると気負っちゃうかもしれませんが、
すでに配置してある画像素材を使って、
「もしこれがちょっと動いたらどんな感じ？」
と想像して、素材を有効利用してみると、とっかかりやすいかも。

こんなのできたよ〜っていう遊び心たっぷりの作品がありましたら、
ぜひ教えてください♪

ツイート