GIFバナーの作り方｜動くバナーを作る5つの手順と媒体別の容量規定

静止画のバナーで数字が伸び悩むと、「動かしたら目を引けるのでは」と考えます。そこで出てくるのがGIFバナーです。ただ、いざGIFバナーの作り方を調べ始めると、タイムラインの操作でつまずく、容量が重くて入稿で弾かれる、そもそも出したい媒体がGIFに対応していない、といった場所で止まりがちです。

この記事では、GIFバナーの作り方を、Photoshopでの制作手順から書き出しまで5つのステップでまとめました。先に押さえておきたいGoogle広告の規定（150KB・30秒・5fps未満）と、媒体ごとのGIF対応早見表も載せています。上から順に進めれば、動くバナーを1枚、入稿できる状態まで持っていけます。

この記事でわかること

• GIFバナーが向く場面と、動画との使い分け
• GDN・YDA・SNSの媒体別GIF対応早見表
• Photoshopで動くバナーを作る5手順
• 容量を150KBに収める5つのコツ
• GIFバナーで成果を出すデザインの考え方

💡 この記事で解説する作業は、Tasky ならURLを入れるだけで数分で完了します。7日間無料トライアル（クレカ登録不要）。

GIFバナーとは｜動きで目を引く画像形式のバナー

GIFバナーとは、複数のコマをパラパラ漫画のように切り替えて、動きを付けた画像バナーのことです。1枚の静止画では伝えきれない「前後の変化」や「複数の訴求」を、1枠のなかで見せられます。

GIFには向き不向きがあります。GIFで表現できる色は256色まで、という制限があるためです。写真の階調をなめらかに見せる用途には弱く、グラデーションの多いデザインは色が荒れやすくなります。一方で、ロゴの登場・価格の切り替え・矢印の動きといった、色数の少ないシンプルな動きは得意です。

静止画・GIF・動画の使い分け

動きを付ける手段はGIFだけではありません。用途で選びます。

SNSのフィード面で動かしたいなら、GIFより短尺動画（MP4）が実務の定番です。GIFが主役になるのは、Googleディスプレイネットワーク（GDN）のような、アップロード型の画像広告枠だと考えておくと迷いません。

TASKY GENERATED生成例の生成例

URLを入れるだけで、この品質のバナーが3案。

7日間無料トライアル。月額9,800円から。

Taskyを見る →

GIFバナーを作る前に｜媒体ごとの規定を押さえる

作り方の前に、出し先の規定を確認します。ここを飛ばすと、せっかく作ったGIFが入稿で弾かれます。特にGoogleは数値が明確です。

Google広告のアップロード広告では、アニメーションGIFに次の規定があります（Google広告ヘルプ）。

• ファイルサイズ: 最大150KB（アニメーション・静止画とも同じ上限）
• 再生時間: 30秒以下（ループは可。ただし30秒で停止させる）
• フレームレート: 毎秒5フレーム未満
• 対応形式: GIF / JPG / PNG

150KBという上限は、静止画より厳しく感じる場面があります。コマ数が増えるほどGIFは重くなるためです。なお、より大きく作りたい場合はHTML5広告という選択肢もありますが、こちらは上限600KBで、利用にアカウントの資格要件があります（Google広告ヘルプ）。まず動くバナーを試すなら、150KBのGIFから入るのが現実的です。

媒体別GIF対応早見表

GIFがそのまま使えるかは媒体で分かれます。

YDAはGIFに対応していないため、Yahoo!面で動かしたい訴求は静止画で設計し直すか、別の見せ方を考えます（Yahoo!広告ヘルプ）。媒体ごとのサイズそのものは「広告バナーサイズの早見表」にまとめています。

GIFバナーの作り方｜Photoshopで作る5手順

ここからは、GIFバナーの作り方を手順で見ていきます。PhotoshopでのGIFバナーの作り方には「フレームアニメーション」と「ビデオタイムライン」の2方式があり、コマ送りの単純な動きならフレームアニメーションが扱いやすいです（Adobe公式）。

手順1｜バナーの実寸でドキュメントを作る

出し先のサイズで新規ドキュメントを作ります。GDNの主力なら300×250、728×90、320×50あたりです。カラーモードはWeb用のRGB、解像度は72ppiにします。この最初のサイズ設定を固めておくと、あとの作業が速くなります。

手順2｜コマごとにレイヤーを用意する

動きの各コマを、別々のレイヤーとして重ねて作ります。「価格が切り替わる」なら、価格Aのレイヤーと価格Bのレイヤーを分ける、という具合です。既存の画像から作るときは、「ファイル → スクリプト → ファイルをレイヤーとして読み込み」でまとめて取り込めます（CAD-KENKYUJO）。

手順3｜タイムラインでフレームに変換する

「ウィンドウ → タイムライン」を開き、中央の「フレームアニメーションを作成」を選びます。ビデオタイムラインが表示されている場合は、矢印から切り替えます。次にパネルメニューの「レイヤーからフレームを作成」を選ぶと、各レイヤーがコマとして並びます（Adobe公式）。

手順4｜表示秒数とループを設定する

各フレームの表示時間（秒数）を決めます。切り替えが速すぎると読めないので、文字を見せるコマは長めにします。ループ回数は「無限」「1回」「回数指定」から選べます。ここで、前述の「30秒以内」「5fps未満」に収まっているかを意識します。再生ボタンでプレビューし、動きが読めるかを目で確認します。

手順5｜Web用に書き出して容量を150KBに収める

「ファイル → 書き出し → Web用に保存（従来）」でGIF形式を選び、書き出します。ここで表示されるファイルサイズが、入稿規定を満たすかの最終チェックになります。150KBを超えていたら、次章のコツで削ります。手順の詳しいキャプチャ感が欲しい方は、静止画版の「Photoshopバナーの作り方」も合わせて読むと流れがつかめます。

### 動くバナーも、量産したいなら

>

1枚を手作業で作るのは数時間で終わりますが、媒体ごと・訴求ごとに何枚も展開すると工数が一気に膨らみます。Tasky なら URL を入れるだけで企画からサイズ展開まで自動化でき、動画フォーマットにも対応しています。月額9,800円〜。無料で7日間試す

容量が150KBを超えるときの5つの対処

GIFで最初につまずくのが容量です。150KBに収めるには、次の順で削ります。

1. 色数を減らす — 「Web用に保存」で色数を256から128・64へ下げる。色数の少ないデザインほど効く
2. フレーム数を抑える — コマを増やすほど重くなる。動きは必要最小限に
3. 画像の実寸を見直す — 大きいサイズほど容量を食う。配信面に合った寸法にする
4. ディザリングを下げる — 色の境目をなめらかにする処理。上げると容量が増える
5. 損失圧縮（Lossy）を使う — さらに軽くなるが、上げすぎると画質が落ちる

実際の配信現場では、1本あたり20〜30KBといった厳しい上限を設ける媒体もあります（UX Planet）。「動かすほど重くなる」を前提に、動きを欲張らないのが容量対策の近道です。

GIFバナーで成果を出すデザインの考え方

GIFバナーの作り方そのものは手順で覚えられますが、動かせば当たるわけではありません。動きは目を引く手段であって、それ自体が訴求ではないからです。成果につなげるには、設計の順番が効きます。

• 動かす要素は1つに絞る — あちこち動くと視線が散る。見てほしい1点だけ動かす
• 最初のコマで内容が完結している — ループの切れ目や読み込み前は静止画として見られる。1コマ目だけで訴求が伝わる状態にする
• 誰に・何を言うかを先に決める — 動きの前に、ターゲットと訴求軸を決める。ここが土台になる

この「誰に・何を・どう伝えるか」を先に固める考え方は、動くバナーでも静止画でも変わりません。基本の流れは「バナー広告の作り方」で解説しています。

量産とサイズ展開はAIで短縮する

GIFバナーは、1枚作れたら終わりではありません。媒体ごとにサイズが違い（詳しくはバナーリサイズの方法）、訴求を複数試すほど必要枚数が増えます。手作業だと、この展開の工数が成果検証の足かせになります。

Taskyは、URLを入力するだけで訴求の設計からバナー生成までを自動化します。1枚あたり約45円〜、月180枚ペースで回せます（product.md）。静止画だけでなく動画フォーマットにも対応しているため、「GDNはGIF、SNSは動画」という媒体ごとの出し分けも、作り直さずに展開できます。

ベルフェイス株式会社では、広告制作を内製化してCPAを外注比1/3まで改善した実績があります（product.md）。制作がボトルネックでなくなると、動かす・動かさないを含めた検証そのものに時間を使えます。

よくある質問

Q1. GIFバナーはどうやって作りますか？

Photoshopを使ったGIFバナーの作り方は、コマをレイヤーで用意し、タイムラインで「レイヤーからフレームを作成」し、表示秒数とループを設定して「Web用に保存」でGIF書き出し、という流れです。本記事の5つの手順の通りに進めれば、1枚を入稿できる状態まで作れます。無料ツールやAIツールでも作成できます。

Q2. GIFバナーの容量はどれくらいに抑えるべきですか？

Google広告のアニメーションGIFは最大150KBです（Google広告ヘルプ）。配信面によっては20〜30KBといったさらに厳しい上限もあります。色数・フレーム数・実寸を削ると軽くできます。まずは出し先の規定を確認してください。

Q3. GIFと動画（MP4）はどちらを使うべきですか？

出し先で決めます。GoogleディスプレイならGIFが使えます。Meta・TikTok・XなどのSNSフィードは、GIFより短尺動画（MP4）が実務の定番です。色数の少ない単純な動きはGIF、情報量の多い動きや音を使うなら動画、という分け方が目安になります。

Q4. Google広告でGIFアニメーションは使えますか？

使えます。ただしアップロード広告（イメージ広告）での対応で、再生時間30秒以内・毎秒5フレーム未満・最大150KBという規定があります（Google広告ヘルプ）。レスポンシブディスプレイ広告はアニメーションGIFに対応していないため、静止画を複数入稿してGoogleに最適化を任せる形になります。

Q5. GIFバナーが動かない原因は何ですか？

よくあるのは、出し先がGIFに対応していない（YDAなど）、ループ設定が「1回」になっている、容量超過で静止画扱いになっている、の3つです。入稿前に媒体の対応形式と、ループ・容量の設定を確認してください。

## まずは動くバナーを1枚、形にする

>

GIFバナーは、媒体の規定（Googleなら150KB・30秒・5fps未満）さえ押さえれば、Photoshopの5手順で作れます。あとは動かす要素を1つに絞り、1コマ目で訴求が完結する設計にするだけです。

>

量産やサイズ展開、動画への出し分けまで一気に短縮したい方は、Tasky の無料トライアルでお試しください。URLを入れて数分で複数パターンが生成できます。

>

7日間無料トライアルを始める（所要3分・クレカ登録不要）

まとめ

GIFバナーの作り方のポイントを、最後に振り返ります。

• GIFバナーは色数の少ない単純な動きに向く — 写真の階調やグラデーションは苦手。動かす要素は1つに絞る
• 出し先の規定を先に確認する — GDNはGIF可（150KB・30秒・5fps未満）、YDAはGIF非対応、SNSフィードは短尺動画が定番
• 作り方はPhotoshopの5手順 — 実寸で作成 → コマをレイヤー化 → タイムラインでフレーム変換 → 秒数とループ設定 → Web用に書き出し
• 容量は色数・フレーム数・実寸で削る — 150KBに収まらなければ、まず色数とコマ数を見直す
• 量産とサイズ展開はAIで短縮できる — 媒体ごとのGIF・動画の出し分けも含めて自動化すると、検証に時間を使える

動くバナーのサイズ一覧から確認したい方は「広告バナーサイズの早見表」、静止画の制作手順は「Photoshopバナーの作り方」も参考にしてください。