Mainostoimiston verkkosivuprojektissa aikaa kuluu moniin toistuviin vaiheisiin: sivurakenteen kokoamiseen, sisältöjen luonnosteluun, yhteisten elementtien rakentamiseen ja asiakkaan muutosten viemiseen eri sivuille. Tekoälystä on eniten hyötyä, kun se pääsee auttamaan näissä vaiheissa osana samaa työnkulkua.
Tässä oppaassa käymme läpi, miten verkkosivujen tekeminen tekoälyllä etenee asiakkaan briefistä tarkistettavaksi sivustoksi. Esimerkkialustana toimii Devella One™, jossa Agency-ylläpito, sivuston tiedostoihin yhdistyvä CLI ja sisällönhallinta tukevat toimiston toteutustyötä.
Mistä AI:n tuoma tehokkuus syntyy mainostoimistossa?
Yksittäisen tekstin kirjoittaminen on vain yksi käyttötapa. Laajempi hyöty syntyy, kun AI-koodiavustaja voi työstää sivuston rakennetta, sisältöjä ja yhteisiä komponentteja samassa projektissa. Esimerkiksi palvelusivujen rakenne, yhteydenottokehotukset ja navigaatio voidaan valmistella yhden rajatun tehtävän pohjalta.
Toimistolle tämä tarkoittaa mahdollisuutta vähentää toistuvaa toteutustyötä. Kun yhteinen komponentti muuttuu, jokaista sivua ei tarvitse korjata erikseen. Kun sivuston ohjeet ja brändin määrittelyt kulkevat projektin mukana, niitä voi käyttää myös seuraavan muutoskierroksen lähtötietoina.
Hyötyä kannattaa arvioida koko projektista: kuinka paljon aikaa menee ensimmäisen version tekemiseen, tarkistamiseen, asiakkaan korjauksiin ja julkaisuun? Nopeasti syntynyt luonnos on hyödyllinen vasta, kun sen saa viimeisteltyä asiakkaan tavoitteita palvelevaksi sivustoksi.
1. Muuta asiakkaan briefi selkeäksi toteutustehtäväksi
Aloita tiedoista, joiden varaan sivusto rakennetaan. Mitä yritys myy, kenelle palvelu sopii ja mitä kävijän halutaan tekevän? Kokoa lisäksi hyväksytyt palvelukuvaukset, yhteystiedot, logo, kuvat sekä väri- ja typografiaohjeet.
Käytetään esimerkkinä kuvitteellista paikallista remonttiyritystä. Yritys haluaa tarjouspyyntöjä kylpyhuoneremonteista, keittiöremonteista ja huoneistoremonteista. Sivustolle tarvitaan etusivu, kolme palvelusivua, yritysesittely ja yhteydenottolomake.
- Tavoite: kävijä löytää tarvitsemansa palvelun ja lähettää tarjouspyynnön.
- Sisältö: palvelun sisältö, työn eteneminen, toiminta-alue ja asiakkaan toimittamat työnäytteet.
- Ilme: asiakkaan brändiohje, selkeä typografia ja aidot kuvat tehdyistä töistä.
- Rajaukset: puuttuvia hintoja, asiakasarvioita tai sertifikaatteja ei keksitä.
Hyvä briefi antaa myös AI:lle rajat. Jos toiminta-alue tai palvelun sisältö on epäselvä, selvitä asia asiakkaalta ennen kuin tieto päätyy julkaistavaan tekstiin.
2. Perusta asiakassivusto ja yhdistä se CLI-työnkulkuun
Devella One™ -alustassa asiakassivusto perustetaan Agency-ylläpidossa. Sen jälkeen sivusto yhdistetään CLI-projektiin käytettävissä olevilla oikeuksilla. Agency-oikeuksilla toimiston toteuttaja voi kehittää omien asiakkaidensa sivustoja.
CLI eli komentorivityökalu tuo sivuston sisällöt, pohjat, komponentit ja asetukset tiedostoina paikalliseen projektihakemistoon. AI-koodiavustaja voi työstää näitä tiedostoja editorissa projektin ohjeiden mukaisesti. CLI ei itse ole tekoälymalli: se yhdistää tiedostoissa tehtävän työn Devella One™ -alustaan.
Kun projekti on yhdistetty oikeaan sivustoon, devella pull hakee sen nykytilan. Tallenna mahdolliset paikalliset muutokset versionhallintaan tai varmuuskopioon ennen hakemista. Käytännön komennot ja työnkulun löydät Devella One™ CLI:n esittelystä.
3. Anna AI:lle kokonainen, rajattu tehtävä
Seuraava tehtävänanto sopii esimerkkiprojektiin, kun asiakkaan materiaalit ovat jo käytettävissä ja sivusto on yhdistetty CLI:hin:
Valmistele asiakkaan hyväksytyn briefin ja brändiohjeen pohjalta remonttiyrityksen etusivu, kolme palvelusivua, yritysesittely ja yhteystietosivu.
Tee yhteinen navigaatio, alatunniste ja tarjouspyyntöön ohjaavat toimintolinkit. Käytä projektin sisältömalleja ja yhteisiä tyylejä. Kirjoita jokaiselle sivulle oma hakukoneotsikko ja metakuvaus asiakkaan antamien tietojen perusteella.
Älä keksi puuttuvia yritystietoja, hintoja tai asiakaskokemuksia. Listaa avoimet kysymykset erikseen. Pidä uudet sisällöt luonnoksina, tarkista muutokset ja avaa esikatselu. Älä lähetä muutoksia palvelimelle tai julkaise niitä.
Tehtävä yhdistää sivuston osat samaan kokonaisuuteen. Etusivulla esitellään palvelut, palvelusivuilla vastataan tarkempiin kysymyksiin ja jokaiselta sivulta löytyy luonteva reitti tarjouspyyntöön. Toimiston suunnittelija voi tämän jälkeen arvioida rakennetta ja ilmettä selaimessa.
Jatka selkeillä muutoskierroksilla. Esimerkiksi ”nosta toiminta-alue näkyviin kaikille palvelusivuille” tai ”lyhennä mobiilin aloitusosioita ja tuo yhteydenottolinkki ylemmäs” on helpompi tarkistaa kuin epämääräinen pyyntö tehdä sivustosta parempi.
4. Tarkista esikatselussa rakenne, sisältö ja toiminta
devella dev näyttää paikalliset muutokset jatkuvassa esikatselussa. Erillisellä devella preview -komennolla voi luoda määräaikaisen esikatselulinkin esimerkiksi asiakkaan palautekierrokselle. Näin toteutusta voi arvioida ennen muutosten tallentamista varsinaiselle sivustolle.
Tarkista ensin kokonaisuus: ymmärtääkö uusi kävijä yrityksen palvelut, löytyvätkö vastaukset tärkeimpiin kysymyksiin ja onko yhteydenotto helppoa? Käy sen jälkeen läpi tekstit, kuvat, linkit ja mobiilinäkymä.
Lomakkeen näkyminen esikatselussa ei yksin osoita, että ilmoitusviesti tulee perille tai kaikki taustatoiminnot on määritetty oikein. Varaa erillinen tarkistus lomakkeen lähetykselle, vastaanottajalle ja onnistuneen lähetyksen jälkeiselle kiitossivulle.
5. Viimeistele SEO ja julkaise tarkistettu kokonaisuus
Hakukoneoptimointi alkaa sivujen tehtävistä ja sisällöstä. Esimerkin remonttiyritykselle palvelukohtaiset sivut antavat tilaa kertoa, mitä eri remontteihin kuuluu ja millaiselle asiakkaalle ne sopivat. AI voi auttaa luonnostelussa, mutta julkaistavan sisällön pitää perustua yrityksen todellisiin palveluihin.
Kirjoita sivuille kuvaavat otsikot ja metakuvaukset. Tarkista myös otsikkohierarkia, sisäiset linkit, kuvien vaihtoehtoiset tekstit sekä vanhojen osoitteiden uudelleenohjaukset, jos kyseessä on sivustouudistus.
CLI-työssä devella validate tarkistaa paikallisten tiedostojen rakennetta ja devella push --dry-run palvelimen tulkintaa muutoksista ilman tallennusta. Ne täydentävät selaimessa tehtävää tarkistusta.
- Vahvista asiakkaalta palvelutiedot, yhteystiedot ja hyväksyttävä sisältö.
- Tarkista sivusto puhelimella sekä näppäimistöllä.
- Testaa lomake, vastaanottaja ja kiitossivu sovitulla testilähetyksellä.
- Tarkista SEO-asetukset, sisäiset linkit ja tarvittavat uudelleenohjaukset.
- Varmista oikea kohdesivusto ja sisältöjen julkaisutilat ennen muutosten lähettämistä.
Varsinainen devella push tallentaa muutokset palvelimelle ja voi päivittää myös julkaistua sivustoa. Siksi lähetys on erillinen, tietoinen vaihe esikatselun ja hyväksynnän jälkeen.
6. Jatka samalla työnkululla julkaisun jälkeen
Ensimmäinen julkaisu on sivuston elinkaaren alku. Asiakas voi päivittää sisältöjä ylläpidossa hänelle annettujen oikeuksien mukaisesti. Toimisto voi käyttää CLI:tä laajempiin muutoksiin, kuten uuden palvelukokonaisuuden lisäämiseen, navigaation uudistamiseen tai yhteisten tyylien päivittämiseen.
Agency-ylläpito kokoaa asiakassivustot samaan hallintaan. Toimiston kannalta jatkuvuus syntyy siitä, että ensimmäisessä toteutuksessa käytettyjä projektiohjeita, komponentteja ja tarkistustapaa voi hyödyntää myös jatkokehityksessä.
Jos haluat käyttää AI-työkaluja työkalurajapinnan kautta, tutustu myös Devella One™ MCP-yhteyteen. CLI sopii tiedostoissa tehtävään kehitykseen; MCP tarjoaa myönnettyjen oikeuksien mukaisen tavan lukea sivustoa ja valmistella muutosehdotuksia.
Kokeile työnkulkua yhdellä asiakasprojektilla
Valitse ensimmäiseksi kokeiluksi selkeä yrityssivusto, jonka briefi ja materiaalit ovat saatavilla. Kirjaa, mihin aikaa kuluu ensimmäisessä versiossa ja korjauskierroksella. Näin saat omalle toimistollesi hyödyllistä tietoa siitä, missä AI ja CLI vähentävät käsityötä ja mitä haluat kehittää työskentelytavassasi.
Devella One™ yhdistää tähän työnkulkuun sivustonhallinnan ja Agency-työkalut. Tutustu alustan ominaisuuksiin tai pyydä toimistollesi ilmainen 14 päivän kokeilu. Otamme yhteyttä kokeilun käyttöönotosta.