【劇薬】GIFアニメーションという落とし穴。

こんにちは！デザイン部責任者の平野です。

GIFアニメーションって便利ですよね～。
目を引きやすいし、たくさんの画像が並ぶ店舗ページの中でインパクトを残すのにとても便利です。
ただタイトルにもあるように”劇薬”として副作用があることはご存知でしょうか？

過去下記の記事にて拡張子の解説をしたことがありますが、今回はGIFについて深堀って解説していきたいと思います！

【解説】意外と知らない。「jpg/gif/png」拡張子のあれやこれ。

“劇薬” の効き目と副作用

人は── 動くものに 0.2 秒で視線を持って行かれる──と言われますがこれは狩猟本能の名残らしいですね。
だから静止バナーより GIF バナーはパッと目に付くし、クリック率が上がるケースもザラにあります。
ところが GIF は「1 コマ＝1 枚の静止画」を何十枚も束ねたものとなっており、
動けば動くほどファイルは太り、WEBページの転送量を一気に押し上げてしまいます。

WEBページ読み込みのロジック

WEBページはどのように読み込まれるのか

これは車線の少ない、追い越し車線の無い高速道路をイメージすると分かりやすいですね。
多くの車が走る中で遅い車などがあれば、どれだけ速いスポーツカーも遅い速度になりますし、
道路全体の進みは遅くなり”渋滞”が起こります。
重たいWEBページというのはざっくりこういう”渋滞”が起こっているとイメージすればいいと思います。

表示時間について

モバイル平均速度は約 4Mbpsと言われていますが、回線速度の速い場合・遅い場合でどれだけ
ページの読み込みに時間がかかるのかをざっくり計算してみます。

総ページ容量	10 Mbps(速い)	4 Mbps(平均)	1.5 Mbps(混雑時)
2.5 MB	~2 秒	~5 秒	~13 秒
10 MB	~8 秒	~20 秒	~53 秒
50 MB	~40 秒	~100 秒	~267 秒
200 MB	~160 秒	~400 秒	~1,067 秒

本当にざっくり計算ですが、これくらいの速度感になります。
ちなみにページ容量というのは画像以外にもたくさんの情報があるのですが、テキストは画像と比較するとかなり軽量です。
日本語だと1000文字あっても3KBくらいの重さになります。
静止画だと軽くても～1000KB(1MB)などは普通にあるので、画像がどれだけ容量が重たいか分かりますね。

ヘブンネットのフリースペースなどでは最大10MBの画像が設置できたりしますが、
ページの読み込みにどのような影響を与えるかは一目瞭然ですね。

ちなみにサイト構成の際に、初回表示で画面外の画像を読み込まず、スクロールした際に読み込む方式があったり、
ブラウザキャッシュを強く残す仕組みなどもあるので一概に全てが上記通りというわけではありません。
ただし、同一ページ内に複数枚設置されると、こだわって作ったのにそもそも見られない・表示されにくい。
なんて”落とし穴”もあるって事なんですね…。

直帰率との相関性

実はGoogle の調査では 表示 1 → 3 秒遅延で直帰率＋32％、5 秒で＋90％に跳ね上がると報告されています。
ちなみに直帰率とはユーザーが1ページのみを閲覧して他のページに遷移せず、離脱する割合です。
仮にサイトに100人が訪れて、元々の直帰率が50％（50人）だとした場合、
速度によっては理論上下記の表の相関性があるとも言えます。

読み込み遅延	直帰率の増加幅	基準直帰率50％ → 新しい直帰率	100人中の離脱人数
+0秒（基準）	±0％	50％	50人
+1〜3秒	+32％	50％ × 1.32 ≒ 66％	66人
+5秒	+90％	50％ × 1.90 ≒ 95％	95人

もちろん全てが当てはまるわけではないですが、あくまで表示速度が遅いと離脱数が跳ね上がるというのは分かりますね。

WEBページにおいては、表示速度を上げ、ユーザーをサイト内で回遊させる、階層の深くまで行かせる事が基本戦略になります。
いくらアクセスを集めても直帰率が高いと、まるでキャッチ&リリースの釣りのように、
持って帰れる釣果がない（少ない）となってしまいますね。

“PCメイン画像”や”スマホスライド画像”など、ユーザーがファーストビュー（一番最初に見られる）にて閲覧する情報はこだわり、”もっと詳しく知りたい・見たい”と直感的に思わせることが重要です。
せっかく画像は早く表示されても、画像の中身が文字が多すぎて読みにくい等があれば同じ現象が起きるかもしれません。

“軽い” GIF を作るには

GIFは前述したようにパラパラ漫画の要領で、過去記事の解説にあるように最大256色の色表現となっています。
正しく扱うことができればインパクトを保ったまま軽量なバナーを作成することが可能です。
気を付けるポイントは…

●色数を少なくする
●コマ数（フレームレート）を少なくする
●容量を小さくする

となります。

色数を少なくする

「色数を少なくする」と書くとピンとこないかも知れませんが、実は写真には多くの色情報があるため”軽さ”とは相性が悪く、
女性写真や風景写真を画像内に入れ込むと一気に重量級の処理となってしまいます。

上図はコマ数は1のみでアニメーションを入れていない状態ですが、色数によって容量が大きくなっているのが分かるかと思います。単色に比べ写真は約45倍となりました。かなり重いと言えますね。

コマ数（フレームレート）を少なくする・容量を小さくする

コマ数を少なくすると軽量化は可能です。
分かりやすくするため動画をgifに変換した例で見ていきます。
フレームレートはfpsという単位で表され1秒間に表示される静止画の数を意味します。
今回は3秒のgifを下記のフレームレートで比較しました。

fpsが高いほど動きが滑らかで綺麗ですが、容量は圧倒的に増えましたね。
ここから5fpsと同じくらいの容量に30fpsのまま抑えようとすると砂嵐のようにジャギジャギになり画質がかなり落ちます。
弊社媒体の画像タイプの中には設置できる画像容量に制限があるものがほとんどです。
例えばスマホフリーバナーでは500KB以下にしないといけないので、
女性写真を動かしたりするなら、画質を下げて調整をしないといけない事があります。
静止画よりも画質が荒く表示されてしまうのは前述した色の少なさと、容量調整によってなってしまうのですね。

おすすめ使用法&おすすめしない使用法

おすすめの使用法

GIFは基本的にイベント関係（割引や企画）には持ってこいの拡張子とも言えます。
注目を引きたい要素として「動いている」という特性を活用して、注目度をブーストさせるのに適していると言えます。
個人的には「動きがある」という事自体が大事なので、動きが派手であるか否かの重要度は大きくないと思っています。
（コラム用にざっくり作っているので、文字組みが雑なのはあしからず…）

このように配色にベタが多く、かつ動きがシンプル（例は12コマ）であるならGIFの方が軽くなるケースもあります。
jpgでも画質調整はできるのですが、あくまで例として両方を最高画質で書き出しています。
注目度はもちろん右側の方が目を引きますね。

おすすめしない使用法

まるで動画のようにシーンを切り替えるような時間軸のあるアニメーションや、
スライドショーのような動的なWEBページを再現するようなGIFは容量が重くなるため、
あまりおすすめはできない使用法となります。

このように写真と併用してのスライドショーのような動きを再現するとかなり重くなってきます。
また、動画のように時間軸を設けてシーンの切り替わりを再現した場合、
おすすめの使用法で紹介したバナー（51.3KB）も829KBと容量が跳ね上がってしまいます。
特にシーンの切り替わりを行った場合、ユーザーも1つ1つバナーを丁寧に吟味しているとは思えないため、
ページスクロール時に見せたいはずの情報が表示されていない可能性も上がります。
なので基本は全ての情報（特に重要な情報（￥5000キャッシュバック等））は常に表示されている方がいいかもしれません。

もちろんバナー単体で見た場合のインパクトは動きが派手な方が大きく、目を引きますが、
ページの表示速度やユーザーへの情報の伝達速度を天秤にかけて考える・使用する必要があります。

まとめ

・GIFアニメーションは「目立たせる」のに非常に効果的
・でも容量が重くなりやすく、表示速度にとっては毒になりやすい
・適切に使用することで”漢方薬”のように安全かつ効果的に使用できる

というお話でした！
拡張子によっては毒にも薬にもなる劇薬であることを理解し、
見た目のみでなく“軽く作る”という事も重要な視点である。というお話でした。
この依頼に適したアニメーションは？と考えて制作することもデザイナーの技術と言えますね。

依頼の際は是非デザイナーに相談してみることも視野に指名を活用してみてください。

それでは！

在籍デザイナーはこちら