・GIFアニメーションが今、WEB＆スマホサイトで再評価されている。

・アート作品として、GIFアニメーション専門のコンテストもできた。

・「廃れたもの」ではなく「新しい表現」として取り入れるべき時代に。

今から20年以上前に誕生したGIF規格。

現在主流となっているGIF89aにはアニメーションがサポートされており、誰でも簡単にアニメーションが作れたり、見られたりすることで広く普及してきました。インターネット黎明期には、このGIFアニメーションを取り入れたページが数多く存在していたのを覚えています。

しかしながら、GIFアニメーションは容量がかさばり、モバイル端末での表示に時間がかかったりとの理由から、WEBデザインのトレンドから外れ、代替となる動画フォーマットやフラッシュが普及したことで徐々にその姿を消していきました。

そして現在。

モバイル通信の発達やフラッシュの衰退といった影響もあり、スマホサイトでも有効に使うことのできるGIFアニメーションの存在が、見直されてきています。今回は、そのGIFアニメーションの現状と未来について、触れてみようと思います。

まずは、GIFアニメーションが今、どのようにWEBサイトに取り入れられているか、いくつかの事例と共にご紹介します。

企業サイトに見る、GIFアニメーションの好活用事例

背景に使っておしゃれに見せる

◇ TIERRA | 福岡市中央区平尾の美容室 ティエラ

背景にスライドショーでGIFアニメーションを設定し、まるで編集された動画のように見せています。

背景に使うと、どうしても画像を大きくしなければなりません。

しかし、CSSで細かい格子状のパターンを表示してあげれば、荒い画像を使って容量を削減しても、このサイトのようにおしゃれな見せ方をすることが可能です。

動くデータや数値でユーザーの目を惹く

◇ ご利用企業様10,000社突破！ | PR TIMES

このサイトでは、利用企業10,000社突破記念として過去のあらゆるデータをグラフなどで表現していますが、そのすべてがGIFアニメーションで作られています。

制作秘話を覗くと、製作期間があまりなかったそうなのですが、それでも可愛らしいキャラクターが動くアニメーションは、堅苦しいデータが羅列されたシンプルなページでも非常に目を惹きますね。

また、スマホでの閲覧も意識されたページなので、いかにGIFアニメーションがスマホ上で有効に扱えるかというのも、実際にチェックしてみると良いかと思います。

賑やかな演出の1つとしてちりばめる

◇ チチカカ 公式サイト TITICACA OFFICIAL WEB

このページは背景動画こそフラッシュですが、その下で賑やかしく演奏している人たちはみなGIFアニメーションが使われています。

ループ設定させたGIFアニメーションを複数箇所に配置することで、とても賑やかな雰囲気が演出されています。

jsで鳥を飛ばしたりと他にも表現は用いていますが、GIFアニメーションがその一助となっているのは間違いありません。

賑やかなアニメーションで企業イメージを伝える

◇ Steel Plantech | Heat the World Shape the Future

サイトのトップページだけでなく、サイト内の至るところに楽しげなGIFアニメーションが使われています。

企業として目指している未来のイメージを大きく見せることで、会社への理解や信頼を生むことも出来ます！

GIFアニメーションの作品的価値

WEBサイトに、GIFアニメーションを取り入れる事例も、前述のとおり増えていますが、作品・アートの表現としてGIFアニメーションを扱う動きも盛り上がりを見せています。

おまけ

TIME＆SPACEには、クスリと笑ってしまうGIFアニメーションが盛りだくさんありますよ。ちょっと覗いてみてください。

番外編 – PING、APNGも再注目！

LINEのうごスタにも使われているGIFのようにアニメーションするPNG、APNG（Animated Portable Network Graphics）という規格も普及しています

簡単に言ってしまえば、GIFより高精細かつ低容量にすることが可能なアニメーション画像です。最近では、Google chromeやOperaなどにPNGのサポート環境ができ、今後もより一層アニメーションの幅が広がりそうです。

番外編 – シネマグラフ

アートとしてGIFアニメーションを見る場合に、必ずと言っていいほど出てくるのが“シネマグラフ”です。

これは写真を使ったGIFアニメーションの表現で、絶対に動かない静止画部分とアニメーションしている部分が、同じ画像上で組み合わさっているものです。

静止した写真の中で、一部が動き続けているので、どこか不思議な魅力が感じられるアーティスティックな作品となります。

特に真新しい表現というわけではないので、“シネマグラフ”で検索してみると様々な作品に出会うことができますよ。

ちなみに以下の画像はNHKのメディアライブラリーから素材を拝借し、簡単に作ってみたシネマグラフの例。

一部の滝だけが流れていて不思議な空間に見えるかと思います。

Photoshopがあればさくっと作ることができるので、ぜひ一度お試しあれ。

まとめ・WEBやスマホサイトへの活用、またはアートとして、再評価！

このように様々な方面で、その価値が見直されてきているGIFアニメーションは、今ではPCだけでなくスマホサイトにも活かすことのできる有用な画像フォーマット。

「もうすでに廃れたもの」という認識から脱し、むしろ新しい表現手法として、WEBサイトや作品に取り入れてみてはいかがでしょうか。

最後にデジタルハリウッドSTUDIO横浜についてご案内!!

STUDIO横浜は駅直結の好立地で学習ができます！

渋谷駅 – 横浜駅　約30分

茅ヶ崎駅 – 横浜駅　約25分

横須賀駅 – 横浜駅　約45分

武蔵小杉駅 – 横浜駅　約10分

川崎駅 – 横浜駅　約10分

乗り継ぎなし！駅直結で雨に濡れる心配なしの好立地はSTUDIO横浜だけ！

神奈川県初のデジタルハリウッド STUDIOへどうぞお越しください♪