# Animoidut bannerimainokset: viestiä tukeva liike

[Canonical HTML page](https://gradiently.design/fi/guide/animated-banner-ads)

Banneri saa vilkaisun silmäkulmasta. Liike voi ansaita sen, mutta sen jälkeen viestin pitää olla niin yksinkertainen, että sen lukee sekunnissa.

## The short version

- Toimivat animoidut bannerimainokset seuraavat yleensä kolmea ruutua: koukku, hyöty sekä brändi ja toimintakehotus.
- Bannerin loppuruudun pitää toimia itsenäisesti, sillä monet mainosverkostot rajoittavat animaation kestoa tai toistokertoja.
- Yleisiä display-mainoskokoja ovat 300×250, 728×90, 300×600, 160×600 ja 320×50 pikseliä.
- Animoidut bannerit toimitetaan yleensä HTML5-paketteina tai GIF-tiedostoina. Verkostot rajoittavat molempien tiedostokokoa tiukasti.
- Bannerin liikkeen tulee houkutella katse kerran ja jättää sitten sanat paikalleen riittävän pitkäksi lukuajaksi.

Hyvät **animoidut bannerimainokset** tavoittavat katseen kerran liikkeellä ja antavat sitten tilaa viestille. Luotettava rakenne on kolme ruutua: koukku, hyöty ja näytölle jäävä loppuruutu, jossa on brändi ja selkeä toimintakehotus. Pidä sarja lyhyenä, tee viimeisestä ruudusta itsenäinen still-mainos ja tiedostosta kevyt. Mainosverkostot rajoittavat sekä animaation kestoa että tiedostokokoa.

## Kolmen ruudun kuvakäsikirjoitus

Bannerit nähdään ohimennen sen sisällön vieressä, jota lukija tuli katsomaan. Kukaan ei odota bannerin loppua. Suunnittele jokainen ruutu itsenäisesti ymmärrettäväksi ja järjestys pieneksi tarinaksi.

1. **Ruutu 1: koukku** Yksi lyhyt rivi tai vaikuttava kuva. Ainoa tehtävä on saada katsomaan. ”Pöytäsi, hieman rauhallisempi paikka.” Kaksi tai kolme sekuntia.
2. **Ruutu 2: hyöty** Tarjontasi lukijan näkökulmasta. ”Kaapelihyllyt joka pöytään.” Kaksi tai kolme sekuntia.
3. **Ruutu 3: loppuruutu** Logo, lyhyt tarjous ja painikkeen muotoinen toimintakehotus. ”Tutustu valikoimaan.” Ruutu jää näkyviin mainoksen loppuun.

Neliömainoksen koukku Pöytäsi, hieman rauhallisempi paikka hitaasti liikkuvalla liukuvärillä

Ensimmäinen ruutu: neljän sanan koukku liikkuvan värin päällä. Mikään muu ei kilpaile.

Neliönmuotoinen loppuruutu, jossa on brändi, lyhyt hyöty ja toimintakehotus Tutustu valikoimaan

Loppuruutu: brändi, hyöty ja toimintakehotus yhdessä. Mainos toimii vaikka katsoja näkisi vain tämän.

Sama kuvakäsikirjoitus toimii somemainoksissa, jotka ovat yleensä lyhyitä videoita bannerien sijaan. [Facebook-mainoksen suunnittelu](https://gradiently.design/fi/guide/facebook-ad-design) ja [Instagram-mainoksen suunnittelu](https://gradiently.design/fi/guide/instagram-ad-design) käsittelevät näitä formaatteja.

## Animoitujen bannerien ajoitus ja toisto

Monet mainosverkostot ja julkaisijat rajoittavat animaation kestoa ja toistoja eri tavoin. Esimerkiksi Google Ads rajoittaa ladattujen animoitujen mainosten animaation 30 sekuntiin. Tarkista jokaisen käyttämäsi verkoston ajantasaiset vaatimukset. Suunnittele mainos päättymään vahvimpaan ruutuunsa rajasta riippumatta.

| Osa | Ajoitus | Sääntö |
| --- | --- | --- |
| Koukkuruutu | 2-3 sekuntia | Lyhyet sanat, suuri teksti |
| Hyötyruutu | 2-3 sekuntia | Yksi hyöty, ei luetteloa |
| Loppuruutu | Pysyy näkyvissä | Brändi, tarjous ja toimintakehotus luettavana stillinä |
| Siirtymät | 300-500 ms | Nopeita ja yhtenäisiä, sama tyyli kaikissa ruuduissa |
| Koko sarja | Noin 6-10 sekuntia toistolta | Riittävän lyhyt muutamaan toistoon rajojen sisällä |

Lukuajan nyrkkisääntö: jos et ehdi lukea ruutua ääneen kahdesti, lisää aikaa tai vähennä sanoja.

> **Vältä välkettä ja levotonta liikettä** Nopeat välähdykset ovat epämiellyttäviä ja voivat haitata valoherkästä epilepsiasta kärsiviä. Verkostot hylkäävät niitä usein. Liikuta väriä ja tekstiä tasaisesti, ei koskaan katseen seurantaa nopeammin.

## Bannerimainosten vakiokoot

Display-verkostot käyttävät vakiokokoja. Kampanja kattaa yleensä useita, joten suunnittele järjestelmä yhden mainoksen sijaan: asettelu järjestyy leveisiin, korkeisiin ja pieniin paikkoihin säilyttäen sanat, värin ja liikkeen.

- Keskikokoinen suorakulmio: 300 × 250
- Puolisivu: 300 × 600
- Leveä pilvenpiirtäjä: 160 × 600
- Leaderboard: 728 × 90
- Mobiilibanneri: 320 × 50

Yleiset display-koot mittakaavassa. Hyvin leveät ja matalat paikat tarvitsevat vähemmän sanoja ja yksinkertaisemman loppuruudun.

| Koko (px) | Nimi | Mitä mahtuu |
| --- | --- | --- |
| 300×250 | Keskikokoinen suorakulmio | Koko kolmen ruudun tarina, hyvä lähtökoko |
| 300×600 | Puolisivu | Kuva sanojen yläpuolelle |
| 160×600 | Leveä pilvenpiirtäjä | Sanat pinottuina, kaksi tai kolme rivillä |
| 728×90 | Leaderboard | Yksi rivi ruutua kohden, logo ja painike rinnakkain |
| 320×50 | Mobiilibanneri | Vain koukku ja painike, logo voi olla koukku |

Suunnittele 300×250 ensin ja sovita muihin. Julkaisijat ja verkostot pyytävät usein myös kaksinkertaisen pikselitiheyden versioita.

## GIF vai HTML5 animoituun banneriin

Useimmat display-verkostot hyväksyvät GIF:n tai HTML5:n eli pienen HTML-, CSS-, JavaScript- ja kuvapaketin. HTML5 tuo tasaisemman liikkeen, terävän tekstin kaikissa pikselitiheyksissä ja täydet värit. Se sopii monipuolisempiin mainoksiin. GIF on helpompi tuottaa ja hyväksytään lähes kaikkialla, mutta 256 värin raja raidoittaa liukuvärit. Molempien tiedostorajat ovat tiukkoja, kilotavuja megatavujen sijaan. Tarkista verkoston vaatimukset.

GIF:n tiedostokokoa pienentävät [animoitujen GIFien](https://gradiently.design/fi/guide/gif-maker-tips) tekniikat: vähemmän ruutuja, animaatiosta tehty paletti ja mahdollisimman pieni liikkuva alue. Yhtenäinen [liikkeen pehmennys](https://gradiently.design/fi/guide/easing) erottaa viimeistellyn bannerin nykivästä.

## Toimivan bannerin suunnittelusäännöt

### Vältä

- Neljän tai viiden ruudun tekstiä
- Pientä tekstiä vilkkaalla nopealla liikkeellä
- Logoa vain ensimmäisessä ruudussa
- Eri animaatiotyyliä joka elementille
- Loppuruutua ilman selkeää toimintakehotusta

### Tee

- Kolme ruutua, muutama sana kussakin
- Suuri teksti hitaalla rauhallisella värillä
- Brändi näkyviin jäävään loppuruutuun
- Yksi siirtymätyyli kauttaaltaan
- Painikkeen muotoinen toimintakehotus viimeiseen ruutuun

Erottuva tausta on edullisin tapa tulla tunnistetuksi kampanjassa. Kun sama värikenttä liikkuu kaikissa ruuduissa ja koissa, liike yhdistetään sinuun jo ennen sanojen lukemista. Testaa koukun muunnelmia koko mainoksen sijaan. [Mainosluovien testaus](https://gradiently.design/fi/guide/ad-creative-testing) näyttää reilun kokeen.

Gradiently sopii kampanjan someosuuteen. Suunnittele koukku ja loppuruutu omalla Markillasi. Pro muuttaa koot 1080×1080, 1080×1350 ja 1080×1920 yhdellä kertaa ja vie kunkin MP4:nä. Mark renderöidään joka formaattiin, joten sen rauhallinen alue pysyy sanojen takana kaikissa koissa.

## FAQ

### Kuinka pitkä animoidun bannerimainoksen pitäisi olla?

Yksi noin 6-10 sekunnin toisto sopii useimpiin bannereihin. Monet verkostot rajoittavat kokonaisanimaatioaikaa, Google Ads ladattujen animaatioiden kohdalla 30 sekuntiin. Tarkista jokaisen verkoston vaatimukset.

### Kuinka monta ruutua bannerianimaatio tarvitsee?

Kolme on luotettava rakenne: koukku, hyöty ja loppuruutu brändillä ja toimintakehotuksella. Lisäruudut tarkoittavat yleensä enemmän sanoja kuin kukaan lukee.

### Mitkä ovat tavallisimmat bannerimainosten koot?

300×250, 300×600, 160×600, 728×90 ja 320×50 pikseliä kuuluvat yleisimpiin display-kokoihin. Aloita koosta 300×250 ja sovita muut siitä.

### Pitäisikö animoidun bannerin olla GIF vai HTML5?

HTML5 tarjoaa tasaisemman liikkeen ja terävämmän tekstin monipuolisiin mainoksiin. GIF on yksinkertaisempi ja lähes kaikkialla hyväksytty, mutta raidoittaa liukuvärit. Molempien pitää alittaa tiedostoraja.

### Mitä bannerin viimeisessä ruudussa pitää näkyä?

Brändi, lyhyt tarjous ja selkeä toimintakehotus asettelussa, joka toimii kokonaisena still-mainoksena animaation pysähtyessä.