Umí AI vytvořit web za mě? Elopementy.cz [Case Study]
Před více než rokem jsem si koupila doménu elopementy.cz s vizí přinést jednoduchý informační web s katalogem dodavatelů. A teď nastal čas vytvořit web. Projekt jsem vzala jako příležitost vyzkoušet zase ušetřit významnou část práce díky AI, a tady je dost podrobný soupis toho, jak mi to (ne)šlo.
Co vše je potřeba na webu udělat, a co chci delegovat?
Každý web začínám stejně. Doména, hosting. Pro tento chci využít WordPress, takže rychlá instalace a následně vybrat šablonu, upravit ji podle svých představ a pak naplnit obsahem.
Strukturu webu jsem si nechala načrtnout od chatGPT a podle toho pak vybírala šablonu.
Vlastním doménu elopementy.cz. Na té bych chtěla vybudovat jednoduchou landing page, která by pokryla otázky jako „co je elopement“ a tak dále. Měla by fungovat trochu jako informační průvodce elopementy, ale taky bych tam chtěla zakomponovat odkazy a doporučení jednotlivých dodavatelů. Můžeš mi pomoct navrhnout strukturu takové stránky?
Šablonu jsem vybírala co nejlevnější a nejjednodušší. Parametry byly: hezká, jednoduchá, upravitelná s portfoliem/katalogem. A samozřejmě funkční support pro případ, že bych se někde zasekla – tady fakt nechci ztrácet čas tím, že na to musím přijít sama. U tohoto webu jsem to měla jednoduché, protože úpravy na šabloně jsou minimální. Ve finále jsem spíš jen odmazávala věci, které na webu nevyužiju a upravila pár maličkostí, aby to bylo podle mých představ. Jedno zaseknutí v CSS ale přeci jen proběhlo, a tak jsem výše zmíněný support k šabloně nakonec přece jen využila, čímž jsem si ušetřila čas i nervy. Celkově jsem na úpravě šablony strávila něco kolem hodiny času. A pak už přišlo na řadu plnění obsahem, a tedy AI nástroje.
Texty generované přes chatGPT
Texty si vzalo kompletně na starost chatGPT. S tím už jsem pracovala tolikrát a zadání byla tak jednoduchá, že jsem tady na žádný problém nenarazila.
A ChatGPT tvořilo všechny texty, které na webu jsou. Texty na homepage, nadpisy i popisy pro jednotlivé sekce, texty tlačítek, texty do blogových příspěvků, často kladené otázky, texty do patičky, i texty k jednotlivým dodavatelům (tady jsme společně přepisovali nejvíce – o tom podrobněji níže).
Ať zde nevypisuju každý jeden prompt, který jsem zadávala, jen v bodech uvedu, jak jsem k zadání přistupovala:
-
- zadala jsem chatGPT roli
představ si, že jsi světově uznávaný copywriter
- zadala jsem chatGPT roli
-
- zadala jsem tón psaní
text by měl být příjemný, přátelský, jako když ti radí kamarád, ale zároveň by měl působit profesionálně, jakože vím, o čem mluvím
- zadala jsem tón psaní
-
- zadala jsem celou řadu zdrojů, odkud může čerpat informace, pokud by potřebovalo
zadávala jsem konkrétní články a mnou čtené a ověřené zahraniční zdroje, kde vím, že je téma skvěle zpracované
- zadala jsem celou řadu zdrojů, odkud může čerpat informace, pokud by potřebovalo
-
- pro každou sekci jsem zadala konkrétní zadání
např. pro tuto sekci mi připrav nadpis o maximálně 3 slovech, podnadpis a krátký popis o 3 větách
- pro každou sekci jsem zadala konkrétní zadání
-
- pokud jsem někde měla vlastní představu, poskytla jsem veškeré info, které jsem měla
např. připrav mi 3 ukázky elopementů, konkrétně půjde o: 1. elopement ve městě, 2. elopement v přírodě, 3. elopement v zahraničí
- pokud jsem někde měla vlastní představu, poskytla jsem veškeré info, které jsem měla
-
- a někdy jsem nechala vše náhodě
Připrav mi ještě prosím návrhy článků na blog.
- a někdy jsem nechala vše náhodě
Šlo to skvěle. U většiny textů jsem to jen v rychlosti přelítla, zkontrolovala, občas upravila slovosled, občas nějakou tu strojovinu a bylo. Celkově jsem měla komplet texty pro prvotní spuštění během nějakých 3 hodin ready. Včetně veškerého ladění, kontrolování a „nasypání“ do ostrého webu.
Součástí generovaných textů byly mimo všechny statické texty také první dva blogové články.
Fotky a obrázky
Nejprve jsem zkoušela vytvořit komplet ilustračky v Dall-e, čistě z toho důvodu, že jsem ji v tu dobu zrovna používala. Ovšem vytvořit v ní realistické fotky je (alespoň pro mě) dost náročné, a tak jsem brzy obnovila předplatné Midjourney a pustila se do celého generování nanovo tam.
S Dall-e jsem se mořila něco lehce přes 3 hodiny, a výsledek jsem až na jednu nebo dvě fotky kompletně zahodila.
V Midjourney jsem strávila zhruba stejné množství času, respektive ještě o pár minut méně, za tu dobu jsem však zvládla kompletně připravit podkladové a ilustrační fotky pro celý web (a spoustu vygenerovaných ale nepoužitých variant pro budoucí blogposty mi zbylo). Občas jsem jen musela přeformulovat, co chci, protože když jsem se snažila o diverzifikaci, narazila jsem na to, že same-sex couple a podobná slovní spojení, nesplňujou podmínky. V tomhle konkrétním případě jsem to obcházela použitím 2 grooms/2 brides.
SVG ikony
Další cca 3 hodiny jsem strávila ve slepé uličce. Chtěla jsem totiž původně do sekce „o elopementech“ použít svg ikony. Ty mi však žádná AI vygenerovat nedokázala.
ChatGPT to do určité míry zvládlo, ovšem výsledky byly dost nekonzistentní, včetně toho, že mi občas svg vygenerovalo a občas řeklo, že to neumí. Některá vygenerovaná svg byla super (např. ikona foťáku prošla napoprvé), některá nevyšla vůbec (např. ze šipky se stala jakási ohlá čára). Proč to jednou jde, jindy ne, jednou je to jak má a jindy nesmysl, na to jsem v rozumném čase nepřišla, tak jsem šla dál.
Gemini si s tím taky neporadilo. Tvářilo se sice, že ikony tvoří a mohu je zvesela stahovat (čili teoreticky to vypadalo jako velmi funkční řešení), samotné soubory však byly rozbité, nebo ještě častěji prázdné.
No a Midjourney konzistentně tvrdilo, že svg z toho fakt nevyrazím, a tak jsem tam zkusila ikony vygenerovat aspoň v komplet setu jako obrázky, což taky nevyšlo (jednotlivé ikony nesplňovaly zadání, a pokud se negenerovaly najednou, nedržely zas jednotný styl). Nakonec jsem tomu věnovala ze svého pohledu příliš mnoho času a místo ikon použila prostě fotky, které jsem měla vygenerované raz dva.
Ačkoliv se to může zdát na první pohled ok, není to ani svgčko, ani to neplní zadání co se obsahu obrázků týče
Ořez fotek na kruh
Ořezání fotek na kruh jsem původně plánovala udělat taky nějak v AI, jelikož jsem ale netušila odkud to vzít a chtěla jsem to mít už hotové, nakonec jsem to hodila jednoduše vymaskovat do Photoshopu, udělala celou várku najednou a strávila na tom tím pádem asi tak 5 minut.
Ořezání těchto fotek proběhlo nakonec přes Photoshop, což mi zabralo asi tak 5 minut a tedy se úspora času nezdála tentokrát dost velká na to, abych hledala AI řešení
Tip k fotkám na závěr
Poslední poznatek, na který jsem narazila při tvorbě tzv. flat-layů, a který mi dává smysl zmínit je, že pokud má něco pevně daný počet (např. boty, svatební prstýnky apod.) je nutné to vždycky zmínit. A i tak to vyjde jen v cca 80 % případů.
Vlevo – když se domníváte, že počet bot bude AI jasnej vs. Vpravo – přesnější zadání včetně počtů
Plnění katalogu dodavatelů
Katalog je řešen jako portfolio, a tak se přidávají jednotlivé portfolio items jako třeba na šablonách pro fotografy nebo digitální agentury.
Šablona dodavatele
Vizuální formu jsem ladila asi hodinu, nakonec jsem si ale načrtla něco, co mi dávalo smysl pro všechny dodavatele napříč kategoriemi: cover fotka, fotka + text, odkazy formou kusu kódu & galerie.
Texty
Jak už jsem předeslala, texty mi připravilo chatGPT, a to na základě mnou nastaveného tónu, ukázky, jak bych si to představovala + odkazu na web daného dodavatele, odkud je možno čerpat info. Nástroj měl tendenci namísto mnou vybrané tonality použít tonalitu na webu dodavatele, takže bylo potřeba ladit o trochu víc. Nikdy to nevyšlo napoprvé, u jednoho dodavatele jsem to vracela dokonce 5x. Průměrně jsem na každém dodavateli strávila cca 10 minut na textech. Do budoucna tu vnímám příjemný prostor pro výraznou úsporu času.
Fotky
U dodavatelů je ještě potřeba vybrat (a nahrát) fotky, což jsem doufala, že taky udělá AI. Zatím jsem nepřišla na to jak toho docílit, pokud máte tip, dejte 🙂
Gemini mi sice vybralo fotky suprově (podle popisů fakt přesně ty, co jsem chtěla), ale odkazy byly nefunkční, URL prázdné a často uměle vytvořené (za lomítkem bylo často jen jméno fotografa a číselná řada). Ani na několik úprav zadání jsem nebyla schopná z nástroje vyrazit funkční URL.
U chatGPT jsem pochodila o něco lépe a třeba 2-3 fotky/dodavatele mi vyšly, i tak jsem ale nebyla schopná se probourat dál, opět byl problém primárně v rámci URL.
Proč to tak bylo, nevím. Napadá mě, že to může být kvůli webům, které jsem používala jako zdroje – fotografové mají často velké galerie externě, nikoliv přímo na svém webu, a je možné že se přes to AI nedostane.
Nakonec jsem to tedy udělala ručně. Kde to šlo, šla jsem cestou google search pictures, kde to nefungovalo, stahovala jsem fotky přímo z webu, a kde nešlo ani stahovat (apel na všechny weby – vykašlete se na to blokování pravýho tlačítka, je 2024!) vypínala jsem javascripty a stahovala pak, anebo v jednom případě dokonce scanovala zdroják, abych fotky stáhnout mohla. Což už mě fest prudilo, ale zdaleka ne tolik, jako kdybych měla vyžadovat něčí součinnost 😀 (a samozřejmě jsem se k nim nakonec dostala – jakmile něco na web dáte, uložit si to zkrátka může každý). Odhaduju, že průměrně jsem strávila dalších 10 minut/dodavatel na fotkách. Pokud bych si odmyslela blokované stránky, byl by proces samozřejmě mnohem svižnější.
Ukázky promptů pro Midjourney
a photo of a newlywed couple jumping from the cliff into the water in their wedding robes as a fun! Show them from behind
photography of intimate wedding in tuscany, 2 brides reading vows to each other
a photo of an elegant luxurious modern envelope with a little minimalistic heart on it, on silk backdrop, could easily be a wedding invitation
Závěr a shrnutí
Kolik času to teda zabralo?
- Hosting, doména, WP instalace = řekněmě 10 minut
- Struktura webu = 5 minut (chatGPT)
- Výběr šablony = 20 minut
- Úprava šablony = 1 hodina
- Hlavní texty pro web včetně 2 blogpostů = cca 3 hodiny
fotky generované přes Dall-e = 3 hodiny- Fotky pro web v Midjourney = 3 hodiny
svg ikony = 3 hodiny- ořezy fotek na kruh = 5 minut
- dodavatelé, prvotní nastavení = 1 hodina
- dodavatelé, plnění textem = 9x 20 minut = 3 hodiny
Celkem tedy (bez slepých uliček) necelých 12 hodin. Reálně samozřejmě rozloženo do několika dnů.
Čekala jsem, že toho přes AI zvládnu mnohem víc, ale s ohledem na to, že to byl první takovýhle projekt, jsem s výsledkem spokojená. Kdybych takový web stavěla celej ručně a měla všechny texty připravovat sama a nedejbože to i fotit, zabere mi to o hooodně víc času. Pro představu, na tomhle článku, který právě čtete, jsem už teď strávila cca 6 hodin, takže půlku času, co jsem dělala celej web elopementy.cz 🙂
A co bude s webem dál?
Práce na webu samozřejmě (nikdy) nekončí. V hlavě mám spousty nápadů na blogové články, témata, která bych chtěla pokrýt (a chatGPT bude mít jistě taky nějaké), a zapracovat se bude muset i na SEO. Věřím, že i katalog dodavatelů bude časem rozsáhlejší, ostatně pokud byste tam chtěli předat, klidně mi napište.
To všechno už ale nechávám na fázi II, web v tuhle chvíli běží a vše ostatní se dá a bude řešit za běhu :-))
