いいとこすぎて移住しちゃいました / LAMP壱岐
いいとこすぎて移住しちゃいました / LAMP壱岐
2014.02.06

新しさ満載!GIFアニメーションを効果的に使ったwebサイト6選

ハルエ

こんにちは。デザイナーのはるえです。
今回はGIFアニメーションについてお話させていただきます!

GIFアニメーションは、複数のGIF画像をつなげてパラパラマンガのようにWEB上で動きをつける表現手法のことです。
昔からある手法なので古くさいイメージを持たれている方もいるかもしれませんが、手軽でブラウザを問わず閲覧することができ、その表現力の幅広さからGIFアニメーションは長年愛され続けています。
特にFLASHの人気が低迷してからは完全復活しましたね。

そんなGIFアニメーションを効果的に使用したWEBサイトをご紹介させていただきます。

GIFアニメーションを効果的に使用したWEBサイト

卤猫

oaml

海外のイラストレーター&アニメーターOamul Luさんのポートフォリオサイトです。
とにかくイラストの雰囲気がとても柔らかくて癒されます。
ポートフォリオには様々なGIFアニメーションが掲載されていますので、興味のある方はのぞいてみてください。ぜひぜひ!

oaml_001

oaml_002

oaml_003

oaml_005

oaml_006

和むわ〜。

ハーゼスト株式会社

hearzest

GIFアニメーションがとても暖かい雰囲気を作り出しているサイトです。

HARZEST HARZEST HARZEST HARZEST

Guillaume Kurkdjian

guillaume

海外のイラストレータ-Guillaume KurkdjianさんのWEBサイトです。
色合いといいセンスのあるストーリが個人的にすごくすごく好きです。こちらも様々なGIFアニメーションが掲載されています。

guillaume_001

guillaume_002

guillaume_003

guillaume_005

癒されるわ〜。

SEKAI NO OWARI オフィシャルサイト

sekainoowari

マウスオーバーでPNG画像からGIFアニメーションに切り替わるようにできています。
細かいところまで作り込まれており、コミカルな動きが見ていてとても楽しくなります。

sekainoowari_001

sekainoowari_004

sekainoowari_003

sekainoowari_002

TIERRA

tierra

福岡にある美容室のサイトです。写真を用いたGIFアニメーションをフルスクリーンで効果的に表現しています。
レトロな雰囲気がとてもおしゃれです!

tierra_001

tierra_003

tierra_002

スチールプランテック株式会社

steelplantech

メインで大胆に使ったGIFアニメーションが印象に残るサイトです。会社の商品である製鉄の魅力を遊び心満載の動きで見事に表現しています。

おまけ

最後におまけでお気に入りのシネマグラフを紹介させていただきます。
シネマグラフとは、写真の一部分だけを動かすGIF画像で、視線を一点に注目させるためのテクニックです。

RRRRRRRROLL_gif

rrrrrrrroll

女性や物体がひたすらくるくる回り続ける哀愁たっぷりのシネマグラフです。
お洒落すぎて思わず回りたくなります。

roll_001

roll_002

roll_003

roll_004

最後に

いかがでしたか?わくわくしますよね! GIFアニメーションは、使い方次第でWEBサイトをより魅力的なものにしてくれます。
手軽にアニメGIFが作成出来るWEBサービスもありますので、作りたくなった方はぜひ一度お試し下さい。

GIFアニメーションが簡単に作れるWEBサービス

※本記事の内容は2014年2月時点のものです。ご紹介したアニメーションとリンク先のアニメーションが異なる場合がございます。