アニメーションバナー（動くバナー）の作り方｜GIF・HTML5の違いと媒体の決まり

公開日 2025.9.12更新日 2026.10.28

アニメーションバナーは、動きで目を引き、数コマで順番に情報を伝えられるバナーです。GIF・HTML5・動画の違い、作り方の流れ、よく使われる動き、Google広告のファイルサイズや長さの決まり、作るときの注意点まで、バナー制作会社が解説します。

1：アニメーションバナーとは
2：アニメーションバナーの作り方の流れ
3：よく使われる動き
4：媒体の決まり（Google広告の例）
5：アニメーションバナーを作るときの注意点
6：動くバナーを作るときに使うツール
7：アニメーションバナーの制作を頼むなら
●まとめ

アニメーションバナーとは

アニメーションバナーは、画像や文字が動くバナーです。止まった画像よりも目に入りやすく、「悩み→解決→申し込み」のように、数コマに分けて順番に情報を伝えられます。主な作り方は次の3つです。

形式	特徴
GIF	画像を何枚か切り替えて動かす形式。作りやすく、多くの媒体で使えるが、色数が少なく、容量の上限が小さい
HTML5	Webの技術で動かす形式。なめらかな動きを軽い容量で作れるが、作れる人と使える媒体が限られる
動画	MP4などの動画ファイル。SNS広告で多く使われ、音や細かい動きも入れられる

アニメーションバナーの作り方の流れ

最後のコマ（止まったときに見せる画面）を先に決める。商品・ひと言・ボタンがそろった画面にする
伝えたい順番に、必要なコマだけに分ける（例：悩み→商品→ボタン）
コマごとに、どこをどう動かすかを決める
PhotoshopのタイムラインやAdobe Animateなどで動きをつける
書き出して、容量と長さが媒体の決まりに収まっているか確かめる

最後のコマから決めるのは、アニメーションが止まった後や、動きを最後まで見てもらえなかった場合でも、伝えたいことが伝わるようにするためです。

制作実績一覧

制作費用はこちら

よく使われる動き

動きは多ければよいわけではありません。目を引きたいところに、少しだけ動きを入れるのが基本です。

フェード（ふわっと出る・消える）

文字や画像が少しずつ現れたり消えたりする動きです。上品で、コマの切り替えに使いやすく、どんな商材にも合わせやすい動きです。

スライド（横や縦から入ってくる）

要素が画面の外から入ってくる動きです。入ってくる方向に目が動くので、次に見てほしい場所へ視線を運ぶのに向いています。

拡大・縮小

商品や価格を少し大きくしたり、ボタンを軽く弾ませたりする動きです。「ここを見てほしい」という強調に向いています。

点滅や強い動きは控えめに

激しい点滅や速い動きは、目を引く一方で、見る人に不快感を与えやすく、体調に影響することもあります。強調はひと動作にとどめ、点滅をくり返す表現は避けましょう。

媒体の決まり（Google広告の例）

アニメーションバナーは、媒体ごとにファイルサイズや長さの決まりがあります。たとえばGoogle広告のアップロード型ディスプレイ広告では、次のように決められています。

形式	主な決まり
GIF	150KBまで。アニメーションは30秒以内（ループさせる場合も30秒で止まること）。毎秒5フレーム未満
HTML5	ZIPファイルで600KBまで

出典：Google 広告ヘルプ「アップロード型ディスプレイ広告の仕様」、Google 広告ポリシーヘルプ「イメージ広告の要件」

ほかの媒体にも、それぞれ決まりがあります。作り始める前に、出す媒体の入稿規定を確かめましょう。

アニメーションバナーを作るときの注意点

止まった画面（最後のコマ）だけでも伝わるように作る
コマを増やしすぎない。伝えたいことが増えると、どれも伝わらなくなる
文字は読み終わるまで表示しておく。すぐ切り替わると読めない
容量が上限を超えやすいので、色数やコマ数を減らして調整する
静止画版も用意しておく。アニメーションが使えない枠にも出せる
ループさせるときは、最後のコマから最初のコマへのつながりを自然にする。急に切り替わると、どこから見ればよいか分からなくなる
ボタンや申し込みの案内は、最後のコマまで残しておく

静止画のバナーで伝わる形を作ってから動きを足すと、失敗が少なくなります。デザインの失敗例はバナーデザインの失敗例16選でまとめています。

動くバナーを作るときに使うツール

動くバナーは、形式に合わせてツールを選びます。

ツール	向いている形式と使い方
Photoshop	GIF。タイムラインでコマを並べ、表示する秒数を決めて書き出す。静止画のデータからそのまま作れる
Adobe Animate	GIF・HTML5。動きの多いアニメーションを作り、形式を選んで書き出せる
Google Web Designer	HTML5。Google が無料で出しているツールで、Google 広告用のHTML5バナーを作れる
After Effects	動画（MP4）。SNS広告の動画など、細かい動きを入れたいとき
Canva	GIF・動画。テンプレートの動きを使って手軽に作れるが、細かい調整はしにくい

出典：Google Web Designer

GIFは容量の上限を超えやすい形式です。容量の落とし方はGIFバナーの容量を落とす方法でまとめています。

アニメーションバナーの制作を頼むなら

バナー制作.jpでは、動画やアニメーションのバナーも制作しています。制作するコマ数や動きのご希望によって費用が変わるため、詳細をお伺いしてお見積りします。2本目以降が同じような内容であれば、同じ費用で制作できます。静止画のバナーは、サイズに関係なく1本4,000円（税別、別途ディレクション費20%）です。詳しくは制作料金をご覧ください。

まとめ

アニメーションバナーは、動きで目を引き、数コマで順番に情報を伝えられる
GIF・HTML5・動画の違いを知り、出す媒体で使える形式を選ぶ
最後のコマを先に決め、動きは目を引きたいところに少しだけ
Google広告のGIFは150KBまで・30秒以内など、媒体の決まりを守る

この記事を書いたライター

株式会社Ryuki Design

2009年創業のデザイン会社です。バナー制作.jp（バナー制作実績）では、Instagram・X（旧Twitter）・LINE・Meta・Google・LINEヤフーなどの広告バナーを年間3,000本以上制作しています。制作実績は累計40,000件以上（バナー以外の制作を含む）、取引社数は4,000社以上です。記事の書き方と確認の流れは編集方針をご覧ください。

へのお問い合わせはこちらから

お電話でも承ります: 050-3541-5719

件名
会社名
会社名ふりがな
担当者
担当者ふりがな
電話番号
メールアドレス
都道府県

ご商談希望 （3～4候補）
web商談時に 聞きたい事

ご返信方法
電話連絡の場合 ※複数回答可: 10～11時11～12時13～14時14～15時15～16時16～17時17～18時指定無し
お問い合わせ内容

バナーサイズ （単位：px）
デザイン参考
バナーにいれる テキスト情報: ■キャッチコピー（上から優先順位高い順）１：２：３：４：５： ※情報が多いと全て入れれない可能性があります
イメージ
フォント
リンク先URL
レギュレーション（仕様）
素材画像URL: ※GigaFile便でアップロードしたURLを上記に張り付けてください
※提供素材が無い場合は有料素材のみで制作

デザイン制作に関する規約

弊社デザインサービス利用者（以下、「甲」という。）とバナー制作.jpを運営している株式会社Ryuki Design（以下、「乙」という。）とは、乙が甲のために行うバナーデザイン制作に関して次のとおり定めるものとする。

第１条（総則）
１．甲は、この契約に定める条件でバナーデザイン制作に関する業務を乙に注文し、乙はこれを受注する。
２．乙は本業務完了後、デザイン制作した納入物（以下「本納入物」という）を、納入するものとする。
３．制作料は、契約条項第２条に規定の通りとする。
４．本契約に定めのない事項又は本契約の内容等に疑義が生じた場合は、その都度、甲乙双方が民法をはじめとする法令等を踏まえ、誠意をもって協議する。
５．甲及び乙は、本業務の遂行に甲乙双方の共同作業が必要とされることを認識し、互いに作業を誠実に実施すると共に、相手方の作業の実施に対して誠意を持って協力する。

第２条（対価の支払い）
１．本契約に定める本納入物の制作料については、発生しないものとする。

第３条（納入完了の確認）
１．甲は乙から本納入物を受領したときは、納入日の翌日から起算して５営業日以内に検査を行い、検査に合格した時は、遅延なく乙に結果を通知するものとする。

第４条（納入物の著作権）
１．本件で乙が制作した著作物の著作権は乙にあることを確認する。ただし、甲に契約期間内、又は契約終了後、契約の目的の範囲のみの使用権（非独占的使用権）を与える。
２．本納入物に関しては、乙のホームページ又は、販促物で制作実績として公開する事ができるものとする。
３．預かった写真素材又は商品以外で、乙が制作に使用した素材、写真、フォントなどの素材が含まれる場合、ロイヤリティフリー素材など著作権が購入元に帰属する可能性があるため他の制作に利用してはならない。

第５条（再委託）
乙は本納入物の制作にかかわる業務の一部を、乙の責任において第三者に再委託することができるものとする。ただし、乙は当該再委託先に対して、本契約第10条に定める秘密保持義務と同様の義務を負わせなければならない。

第６条　（実施状況の報告及び通知）
１．甲は乙に対し必要があると認めるときは、本業務の実施状況等について報告を求めることができるものとする。
２．本契約に基づき甲乙間において取り交わされるあらゆる通知、要求、その他の連絡は、電話または電子メールをもって、本件業務担当者間においてなされるものとする。
３．いずれの当事者も、前項に定める本件業務担当者に関する事項について変更を生じた場合には、相手方に対し、遅滞無く電話またはメールによって通知しなければならない。

第７条（契約不適合責任）
１．乙は「本納入物」に関して、その品質、性能、適合性、もしくは特定の目的への適用性について一切の責任を負わないものとする。
２．甲が納入品について何らかの契約不適合を発見した場合であっても、乙に対し修補または代替品の納入等を請求することはできないものとする。ただし、乙が善意に基づき可能な範囲で修正対応を行う場合があることを妨げない。
３．前項の規定は、本条に定める契約不適合に限らず、「本納入物」使用に起因するいかなる損害や損失についても適用されるものとする。

第８条（契約解除時の完了済業務および納入物）
本契約が解除された場合であって、かつ、すでに業務の一部が完了（本納入物の一部の完成を含む）している場合、当該業務の納入完了は、本契約第３条の定めに従うものとする。

第９条（資料等の貸与・保管・返却・廃棄）
甲は委託業務の遂行上必要な資料等を（以下「資料等」という）を乙に貸与し、また委託業務遂行上必要な情報を告知するものとする。
１．乙は甲より貸与された資料等を善良な管理者の注意をもって保管・管理し本契約に基づくデザイン制作の遂行以外の目的に使用しないものとする。
２．乙は甲より貸与された資料等を本契約に基づくデザイン制作の遂行以外の目的に複写・複製・編集等を行わないものとする。
３．乙は甲より貸与された資料等について、甲の指示により、返却または廃棄するものとする。ただし、その際の費用は甲の負担とする。

第１０条（秘密保持）
甲および乙は本契約に際して、または本契約に基づくデザイン制作遂行上知り得た双方の技術上、営業上、および個人情報その他の秘密情報の秘密を遵守せしめ るものとし、本契約有効期間中のみならず、本契約終了後も相手方の事前の承諾を得ることなく、第三者に開示・漏洩しないものとする。

第１１条（事故処理）
本契約に基づく委託業務の遂行に支障をきたすおそれのある事態が生じた場合は、速やかに相手方連絡するとともに、甲乙協力してその解決処理にあたるものとする。

１．乙は、本契約に基づき「本納入物」に関して、いかなる損害賠償責任も負わないものとする。
２．甲から支給された素材や情報の著作権、知的財産権などに関しては、乙は一切の責任を負わないものとする。
３．甲が乙の承諾または指示を得ずに行った納入物の改変もしくは補修、または乙の責めに帰すべからざる事由によって甲に生じた損害について、乙は一切賠償義務を負わないものとする。

第１３条　（準拠法、合意管轄）
本契約は日本法に基づき解釈されるものとし、甲と乙との間で訴訟の必要を生じた場合は、大阪地方裁判所を第一審の専属的合意管轄裁判所とする。

第１４条　（協議）
本契約で定めのない事項、解釈について疑義が生じた事項については、必要に応じて甲乙協議のうえ、定めるものとする。

規約に同意する

※アンケートモニター提供元：ゼネラルリサーチ　
調査期間：2020年8月7日～12日
調査方法：インターネット調査　
調査概要：デザイン制作会社10社を対象にしたサイト比較イメージ調査
調査対象：全国の20代～50代の男女 1052名