Design デザイン・UI

 
デザイン・UI

今こそ見直したい!GIFアニメーションの「素晴らしき未来」と「可能性」を探る

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

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

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

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

現在主流となっているGIF89aにはアニメーションがサポートされており、誰でも簡単にアニメーションが作れたり、見られたりすることで広く普及してきました。

インターネット黎明期には、このGIFアニメーションを取り入れたページが数多く存在していたのを覚えています。

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

そして現在。

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

今回は、そのGIFアニメーションの現状と未来について、触れてみようと思います。

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

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

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

TIERRA | 福岡市中央区平尾の美容室 ティエラ
https://hs-tierra.com/


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

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

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

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

ご利用企業様10,000社突破! | PR TIMES
https://prtimes.jp/10000/


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

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

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

箸休め的なワンポイントとして活用

日本ハム株式会社 | ニッポンハム
https://www.nipponham.co.jp/

このサイトではどこにGIFアニメーションが使われているでしょうか。

答えは、中団のコンテンツ郡の中。

さりげなく、食品のGIFアニメーションが使われています。

このように、あえて目立たせず箸休め的に使うというのも、目を引くアニメーションだからこそのバランスの良い配置かもしれません。

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

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

https://www.titicaca.jp/


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

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

jsで鳥を飛ばしたりと他にも表現は用いていますが、GIFアニメーションがその一助となっているのは間違いありません。
GIFアニメーションの作品的価値
WEBサイトに、GIFアニメーションを取り入れる事例も、前述のとおり増えていますが、作品・アートの表現としてGIFアニメーションを扱う動きも盛り上がりを見せています。

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

まだ現場レベルで浸透してはいないものの、GIFのようにアニメーションするPNG、APNG(Animated Portable Network Graphics)という規格も徐々に注目されてきています。

 

簡単に言ってしまえば、GIFより高精細かつ低容量にすることが可能なアニメーション画像ですが、サポート環境が少ないことからなかなか目にする機会がないのが現状です。

しかし、今後サポートや開発環境が整えばGIFに変わる規格として活躍する可能性も十分にあるので、今後も目が離せません。

番外編 – シネマグラフ


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

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

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

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

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

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

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

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

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

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

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事