# Laskeutumissivun suunnittelu: rakenne, joka saa toimimaan

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

Laskeutumissivu esittää yhden perusteluketjun, jolla on yksi päämäärä. Tässä saat sen järjestyksen, kopioitavan esimerkin ja suunnitteluratkaisut, jotka vievät lukijaa sivulla eteenpäin.

## The short version

- Laskeutumissivu on itsenäinen sivu, jolla on yksi tavoite, kuten rekisteröityminen, varaus tai ostos.
- Toimiva rakenne etenee aloitusosiosta ongelmaan, toimintatapaan, näyttöön, tarjouksen yksityiskohtiin, epäilyksiin ja lopun toimintakehotteeseen.
- Sivun sanojen ja ilmeen tulisi vastata mainosta, julkaisua tai sähköpostia, josta kävijä saapui.
- Sivuston navigaation ja ylimääräisten linkkien poistaminen keskittää huomion siihen yhteen toimintaan, jota varten sivu on olemassa.
- Testaa muutoksia yksi kerrallaan omia lukujasi vasten yleisten vertailulukujen sijaan.

Hyvä **laskeutumissivun suunnittelu** perustuu yhteen tavoitteeseen ja järjestyksessä eteneviin perusteluihin. Etusivu palvelee kaikkia, mutta laskeutumissivu on yhdestä paikasta saapuvalle kävijälle yhtä toimintaa varten: kokeilutunnin varaamiseen, jonotuslistalle liittymiseen tai tarjouksen lunastamiseen. Yhä uudelleen toimiva rakenne on selkeä aloitusosio, ongelma lukijan sanoin, toimintatapa, näyttö, tarjouksen yksityiskohdat, vastaukset epäilyksiin ja sama toimintakehote lopussa. Suunnittelun tehtävä on tehdä tämän järjestyksen seuraamisesta vaivatonta.

## Yksi sivu, yksi tavoite

Kirjoita tavoite yhdeksi lauseeksi ennen suunnittelua: ”Saada Instagram-mainoksesta ensi kertaa saapuvat kävijät varaamaan ilmainen tutustumistunti.” Sen jälkeen voit arvioida jokaista osiota. Auttaako se tätä ihmistä ottamaan tämän askeleen? Ellei auta, poista osio tai siirrä se varsinaiselle sivustolle.

### Etusivu

- Palvelee kaikenlaisia kävijöitä
- Täysi navigaatio ja paljon linkkejä
- Useita tuotteita tai palveluja
- Esittelee koko yrityksen

### Laskeutumissivu

- Palvelee yhtä yleisöä yhdestä lähteestä
- Ei navigaatiota, tai vain logo
- Yksi tarjous
- Esittää yhden perusteluketjun ja pyytää toimintaa ensin kerran, sitten uudelleen

## Laskeutumissivun rakenne osio kerrallaan

1. **Aloitusosio** Lupauksen kertova otsikko, yksi tukilause, yksi painike ja yksi kuva. [Aloitusosion suunnittelu](https://gradiently.design/fi/guide/hero-section-design) käsittelee tätä näkymää tarkemmin.
2. **Ongelma** Kaksi tai kolme lausetta kävijän tilanteesta hänen omin sanoin. Näytät ymmärtäväsi ennen kuin myyt.
3. **Näin se toimii** Kolme vaihetta, jokaisessa lyhyt otsikko ja lause. Sitoutuminen on helpompaa, kun prosessin voi kuvitella.
4. **Näyttö** Aitoja nimettyjä asiakaskokemuksia, kuvia todellisista töistä, oikeiden asiakkaiden logoja tai lyhyt esittely. Ei koskaan keksittyjä.
5. **Tarjous tarkemmin** Mitä kävijä tarkalleen saa, milloin ja mitä se maksaa tai ei maksa. Selkeät ehdot vähentävät epäröintiä.
6. **Epäilykset** Lyhyt kysymysosio vastaa syihin, joiden vuoksi ihmiset eivät toimi: aika, hinta, sopivuus, peruuttaminen ja seuraavat vaiheet.
7. **Lopun toimintakehote** Toista otsikon lupaus ja sama painike. Loppuun asti lukeneet ovat valmiita; älä pakota heitä vierittämään takaisin ylös.

Jokainen sivu ei tarvitse jokaista osiota. Julkaisun jonotuslistalle voivat riittää aloitusosio, kolme riviä toimintatavasta ja sähköpostikenttä. Suurempaa sitoutumista vaativa tarjous, kuten kurssi tai konsultaatio, tarvitsee yleensä kaikki seitsemän osiota ja enemmän näyttöä.

## Esimerkki: joogastudion tutustumistarjous

| Osio | Mitä sivu sanoo |
| --- | --- |
| Aloitusosio | ”Ensimmäinen tuntisi on ilmainen.” Tukilause: ”Pienet, aloittelijaystävälliset ryhmät Bristolissa kuutena päivänä viikossa.” Painike: ”Varaa ilmainen tuntisi” |
| Ongelma | ”Isoilla kuntosalitunneilla edetään nopeasti eikä kukaan tarkista tekniikkaasi. Aloittaminen on vaikeaa, kun et tiedä, mitä teet.” |
| Näin se toimii | Valitse aloittelijoiden tunti. Saavu kymmenen minuuttia etuajassa, matot saat meiltä. Jää lopuksi viiden minuutin keskusteluun sinulle sopivista vaihtoehdoista. |
| Näyttö | Kolme lyhyttä arviota oikeilta jäseniltä etunimineen ja kuvineen sekä kuvia todellisesta studiosta. |
| Tarjous | Yksi ilmainen tunti uusille oppilaille, mikä tahansa aloittelijoiden tunti, maksukorttia ei tarvita. |
| Epäilykset | ”En ole notkea.” ”Mitä puen päälle?” ”Onko pysäköintipaikkoja?” ”Mitä ilmaisen tunnin jälkeen tapahtuu?” |
| Lopun toimintakehote | ”Tule kokeilemaan tuntia.” Sama painike: ”Varaa ilmainen tuntisi” |

Jokainen rivi vastaa kysymykseen, joka jännittävällä aloittelijalla oikeasti on. Sama rakenne toimii hammastarkastustarjouksessa tai ohjelmistokokeilussa.

## Sovita sivu mainokseen, josta kävijä saapui

Useimmat laskeutumissivun kävijät tulevat jostain: [Instagram-mainoksesta](https://gradiently.design/fi/guide/instagram-ad-design), LinkedIn-mainoksesta, sähköpostista tai esitteen QR-koodista. Heti saavuttuaan he tarkistavat olevansa oikeassa paikassa. Toista mainoksen täsmällinen tarjous otsikossa ja tuo mukaan sen ilme: sama tausta, värit ja typografia. Mainokseen kuulumattomalta näyttävä sivu tuntuu harhautukselta, vaikka se ei sitä olisi.

Pysty Instagram-mainos joogastudiolle, joka tarjoaa ensimmäisen tunnin ilmaiseksi

Instagram-mainos koossa 1080×1350.

Leveä laskeutumissivun aloitusosio, joka toistaa mainoksen ilmaisen ensitunnin tarjouksen ja taustan

Laskeutumissivun aloitusosio koossa 1920×1080: samat sanat ja sama ilme, joten kukaan ei mieti, napsauttiko oikeaa linkkiä.

Kun suunnittelet molemmat samasta lähteestä, yhtenäisyys syntyy automaattisesti. Gradientlyssä Pro muuttaa yhden suunnitelman kaikkiin kokoihin yhdellä kertaa, joten julkaisu, tarina, sähköpostin otsakekuva ja sivun aloitusosio jakavat saman Markin ja otsikon. [Yksi ilme, kaikki koot](https://gradiently.design/fi/guide/one-look-every-size) näyttää työnkulun, ja [brändin yhtenäisyys](https://gradiently.design/fi/guide/brand-consistency) selittää, miksi se merkitsee yhden kampanjan ulkopuolellakin.

## Suunnitteluratkaisut, jotka saavat jatkamaan lukemista

- **Yksi korostusväri kaikille painikkeille**, eikä mihinkään muualle. Silmä oppii, mistä napsauttaa. [60 30 10 -sääntö](https://gradiently.design/fi/guide/60-30-10-rule) auttaa tasapainon löytämisessä.
- **Reilusti tilaa osioiden välille**, jotta kukin hahmottuu yhtenä ajatuksena. Ahtaat sivut tuntuvat työläiltä.
- **Otsikot, jotka toimivat yksinään.** Moni silmäilee vain otsikot; niiden pitäisi kertoa koko tarina.
- **Oikeita kuvia kuvapankkikuvien sijaan.** Todellinen tilasi, tuotteesi, tiimisi tai tuloksesi.
- **Lyhyet lomakkeet.** Pyydä vain sitä, mitä tarvitset nyt. Sähköpostiosoite on helpompi antaa kuin puhelinnumero.
- **Ei navigaatiovalikkoa**, tai vain logo, jotta huomio ei karkaa muualle.

- Sivun pohja: #fbf7f2
- Osion taustakaista: #efe6da
- Teksti: #2b2a33
- Toissijainen teksti: #6b6670
- Vain painikkeet: #c2410c

Rauhallinen laskeutumissivun paletti: kaksi lämmintä pohjaa vuorotteleviin osioihin, kaksi tekstiväriä ja yksi toimintakehotteelle varattu korostusväri.

## Ensin mobiili, sitten testaus

Somejulkaisuista tuleva liikenne saapuu enimmäkseen puhelimilla, joten suunnittele ensin 390 pikseliä leveä versio. Pidä otsikko ja painike ensimmäisessä näkymässä, tee painikkeista vähintään 44 pikseliä korkeita ja käytä mukana pysyvää painiketta vain, jos se ei peitä sisältöä.

### Vältä

- Viiden asian muuttamista kerralla ja toimivan muutoksen arvaamista
- Blogikirjoituksen konversioprosentin kopioimista tavoitteeksi
- Ponnahdusikkunoita ennen kuin kävijä on lukenut mitään
- Kymmenen kentän lomaketta oppaan lataamiseen

### Tee näin

- Muuta yhtä asiaa, kuten otsikkoa, ja vertaa
- Mittaa suhteessa omaan edelliseen versioosi
- Anna ihmisten lukea tarjous ennen kuin pyydät mitään
- Pyydä vain välttämätön ja opi lisää myöhemmin

Yleispätevää hyvää konversioprosenttia ei ole; se riippuu tarjouksesta, hinnasta ja liikenteestä. Voit kuitenkin aina tehdä seuraavasta versiosta edellistä selkeämmän. Taustojen väreihin löydät apua artikkelista [verkkosivun värimaailma](https://gradiently.design/fi/guide/website-color-scheme).

## FAQ

### Mikä on paras rakenne laskeutumissivulle?

Aloitusosio, ongelma, toimintatapa, näyttö, tarjouksen yksityiskohdat, epäilykset ja lopun toimintakehote. Lyhyissä tarjouksissa osioita voi jättää pois; suurempi sitoutuminen vaatii ne kaikki.

### Pitäisikö laskeutumissivulla olla navigaatio?

Yleensä ei. Valikon poistaminen pitää huomion siinä yhdessä toiminnassa, jota varten sivu on olemassa. Logo riittää.

### Kuinka pitkä laskeutumissivun pitäisi olla?

Niin pitkä, että se vastaa kävijän kysymyksiin. Ilmaiselle jonotuslistalle voi riittää yksi näkymä, kun taas maksullinen kurssi vaatii usein pitkän sivun, tarkkaa näyttöä ja vastauksia kysymyksiin.

### Mitä eroa on laskeutumissivulla ja etusivulla?

Etusivu palvelee kaikkia kävijöitä ja linkittää kaikkialle. Laskeutumissivu palvelee yhtä yleisöä yhdestä lähteestä ja pyytää yhtä toimintaa.

### Pitäisikö laskeutumissivuni näyttää mainokseltani?

Kyllä. Toista mainoksen tarjous otsikossa ja säilytä sen värit ja tausta, jotta kävijät tietävät heti olevansa oikeassa paikassa.