(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93905182, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(93905182, 'hit', window.location.href);

Как бизнесу сэкономить почти 100 000 ₽ на создании сайта, и при чём здесь нейросети

Мы давно используем AI-сервисы для внутренних задач студии, и только сейчас применили в коммерческом проекте. Рассказываем, как столкнулись с багом «шести пальцев», нашли общий язык с Midjourney и сократили с его помощью стоимость сайта. А также сравнили, сколько ресурса на эти же задачи потребовалось бы у штатного иллюстратора.

Привет! Это веб-студия Молния. К нам обратилась компания CPA LIFE FEST за экспресс-лендингом. Этот формат — рабочее решение, когда сайт нужен быстро, и бюджет ограничен: мы разрабатываем проект за 7 дней, без правок и по фиксированной стоимости.

Для фестивалей CPA LIFE FEST мы уже разрабатывали посадочные страницы, но в этот раз перед нами стояла нестандартная и творческая задача. Мы собирали лендинг, как пазл. И детали для него генерировала нейросеть.

Погрузились в волшебный мир идей заказчика

CPA LIFE FEST — это уникальный формат CPA-конференций по интернет-рекламе и партнёрскому маркетингу. Фишка в том, что они выходят за рамки классических арбитражных конференций, и проводят их в виде тематического летнего фестиваля на большой территории под открытым небом. Концепция IX фестиваля — MAGIC WORLD: стилизованное пространство, оформленное в стиле волшебных миров с мистическими персонажами и загадочной атмосферой. Потому что «в бизнесе есть место волшебству».

Отличительная черта CPA LIFE FEST — проявление максимального креатива при организации мероприятия. Поэтому запрос на разработку сайта был чёткий:

  • придерживаться стиля MAGIC WORLD, сделать яркий и сочный визуал, чтобы передать атмосферу будущего мероприятия;
  • сохранить понятное и информативное повествование, чтобы сайт в первую очередь побуждал пользователей к покупке билета. Целевая аудитория и B2B, и B2C: маркетологи, международные CPA-сети, СМИ и инфопартнёры. И всем должна быть понятна цель мероприятия, что они от него получат, когда и где будет проходить фестиваль.

На разработку лендинга была всего неделя, и чтобы максимально ускорить процесс работы, клиент прислал подробное ТЗ. В нём были прописаны структура сайта, где и какой визуал должен располагаться, идеи по анимации. А также был прикреплён пак с изображениями, которые сгенерировала нейросеть.

Фрагмент из ТЗ по визуалу сайта

Для некоторых блоков в структуре были прописаны идеи заказчика в формате «сделать иконки соцсетей, будто они появляются из котла». На такие задумки не было подходящих изображений в паке, поэтому нам нужно было их реализовать самостоятельно. Для таких задач обычно мы привлекаем в проект иллюстратора. Но в этот раз было мало времени и ограничен бюджет, поэтому мы решили тоже воспользоваться помощью нейросети.

Столкнулись с мутантами при генерировании изображений, но всё-таки нашли общий язык с искусственным интеллектом

Для работы дизайнер выбрал нейросеть Midjourney, потому что сейчас это наиболее известный и прокаченный AI-сервис. Нужно было сгенерировать 4 иллюстрации:

— каменную арку для экрана загрузки;

— монетки для блока с тарифами;

— магический шар для видео с презентацией фестиваля;

— котелок с зельем для финального блока с контактами.

Дизайнер сам составлял все запросы и поделился опытом: в чём Midjourney оказался идеальным и незаменимым помощником, и с какими трудностями столкнулся в процессе.

Иллюстрация №1. Каменная арка

Для прелоадера — это экран загрузки сайта, нужно было сделать каменную арку, через которую «проходит» пользователь и погружается в волшебный мир, который царит на сайте.

Экран загрузки сайта

Чтобы получить изображение, которое максимально подойдёт по стилистике сайта, дизайнер сначала детально продумал в своих мыслях образ арки: она должна быть большая, каменная, вырезанная в скале, а на фоне — светящееся небо со звёздами. А уже после того, как образ был готов, прописал запрос на английском языке. При таком подходе изображение генерируется за минуту и попадает в ожидания с первых попыток.

Примеры запросов для иллюстраций, которые создал дизайнер

Больше всего времени при генерировании изображений составляет продумывание того, как оно должно в итоге выглядеть. В целом, вместе с представлением, формулированием и созданием изображения нейросетью, процесс занял 5 минут.

Мы решили сравнить, сколько времени отрисовка похожей работы заняла бы у иллюстратора. Такая арка создаётся с помощью 3D-рендеринга — преобразования 3D-модели в 2D-изображение. Плюс нужна постобработка в фотошопе, чтобы создать эффект свечения. Большую роль играет опыт специалиста, но в среднем создание такого изображения заняло бы от двух-трёх дней.

Также узнали у наших сейлз-менеджеров, сколько бы такая работа вышла по стоимости. Мы в студии рассчитываем цену иллюстрации в зависимости от её детализации. В данном случае, учитывая сложную прорисовку самой арки и фона, получилось бы 30 000 ₽.

Иллюстрация №2. Монеты

Для блока с тарифами нужны были монеты. Информация о стоимости каждого тарифа оформлена на плашках в виде MAGIC TICKETS — магических билетов, которые нужно оплатить золотыми. Поэтому и запрос для создания монет прописали соответствующий: «золотые монеты из волшебного мира». Процесс их генерирования занял две минуты.

Монетки в блоке с билетами

Иллюстратор оценил объём своей работы для создания похожего визуала в один-два дня: потребуется разработка 3D-моделей без дополнительных обработок. А сейлз-менеджер помог рассчитать их цену: так как степень детализирования небольшая, получается 10 000 ₽.

Иллюстрация №3. Магический шар

Для блока с видео-презентацией фестиваля мы создали магический шар. Так пользователи буквально заглядывают в своё будущее и могут увидеть, какие красивые виды и мистические локации будут их ждать.

Изначальная задумка дизайнера была в том, что магический шар будет держать красивый персонаж волшебницы. И мы думали, по опыту генерирования прошлых изображений, что всё пройдёт легко. Но столкнулись с проблемой, про которую говорят многие пользователи Midjourney. Иногда нейросеть может добавить человеку лишнюю руку или, в нашем случае, лишние пальцы.

После нескольких неудачных попыток мы отказались от идеи использовать на изображении образ человека и создали шар отдельно. Запрос прописали как «волшебный шар с ярко-голубым свечением, который находится на столе». У дизайнера на всю работу над этим изображением ушло около получаса.

Магический шар в блоке с видео-презентацией

В сравнении с нейросетью, иллюстратор сделал бы такой шар за несколько часов в 3D-редакторе. А по стоимости изображение вышло бы в 30 000 ₽ из-за большого размера и высокой детализации. Так как чем больше изображение, тем более чётко оно должно быть проработано.

Иллюстрация №4. Котелок с зельем

Для финального блока с контактами в ТЗ был продуман котелок, из которого с дымом выходят иконки социальных сетей. Изображение получилось сгенерировать с первого раза за 5 минут, с помощью запроса «магический котёл ведьмы с зелёным дымом, который находится в лесу».

Котелок с зельем на блоке с контактами

Иллюстратору, как и в случае с прелоадером, понадобилось бы около двух дней на создание похожего котелка. Снова использовали бы 3D-рендеринг и постобработку в фотошопе для добавления свечения, дыма и прорисовки заднего плана. А по цене иллюстрация вышла бы в 20 000 ₽.

Сравнили, насколько нейросеть сэкономила время и бюджет проекта

Так как сроки разработки сайта и бюджет были ограничены, нейросеть оказалась отличным инструментом для решения задачи. Если бы все изображения создавались вручную иллюстратором, то срок сдачи проекта увеличился бы на неделю. А итоговая сумма — минимум на 90 000 ₽. Учитывая ещё и то, что большую часть иллюстраций заказчик разработал сам, выгода для бизнеса очевидна — это быстро и дёшево.

Работа с нейросетью однозначно ускоряет процесс: за пару минут могут сгенерироваться 4 изображения, а иллюстратору нужно минимум день на одно.

Но есть и минусы, всё-таки полностью иллюстратора она пока не заменит: нельзя одного персонажа делать в разных позах, так как каждый раз будет создаваться новый, даже с одного запроса. Поэтому, например, маскота для сайта сгенерировать не получится.

Илья Ярыгин, дизайнер Молнии

В этом кейсе нейросеть помогла справиться с задачей сэкономить ресурсы. Но если нужно будет, например, отстроиться от конкурентов или вызвать доверие у пользователей с помощью фирменного персонажа, нейросеть здесь не справится. Поэтому выгода использования искусственного интеллекта в коммерческих проектах полностью зависит от поставленной задачи.

Разобрались, чьи в итоге авторские права на иллюстрации

Если использовать на сайте чужой контент, то можно нарушить авторские права. Это может грозить судебным процессом и выплатой денежной компенсации. Сейчас ситуация с использованием изображений от нейросетей в коммерческих целях очень расплывчатая: многие спорят, чьё в итоге авторское право, и нужно ли его как-то обозначать.

Мы тоже задумались о юридической стороне использования изображений от Midjourney на сайте. Что делать, чтобы обезопасить клиента от проблем с использованием контента? Должно ли быть указано авторство? Если да, то чьё: дизайнера или нейросети? Вопросов много, и вот какие ответы на них мы нашли.

Бесплатная лицензия запрещает коммерческое использование иллюстраций без указания нейросети, в которой они были созданы, и ссылки на эту лицензию.

А при использовании Midjourney на платном тарифе, с которым мы и работали, можно использовать сгенерированные иллюстрации в коммерческих целях без дополнительных указаний и водных знаков. Это работает как для рекламы, так и на сайтах.

Сделали вывод, что нейросети — хороший инструмент для решения определённых задач, но человека они не заменят

Кейс для CPA LIFE FEST — это наглядный пример, что искусственный интеллект помогает генерировать красивый и сочный контент, при этом сокращая сроки сдачи проекта и стоимость чека за работу.

Но есть и нюансы, которые пока не позволяют AI-сервисам полностью заменить людей — дизайнеров и иллюстраторов. Так как специалисты формируют и направляют запросы в нужное русло, дорабатывают все недочёты и баги. А также создают то, на что нейросеть пока не способна: маскотов, карты и другой визуальный контент, который требует точности и детальной проработки.

Однако командная работа человека и искусственного интеллекта может дать крутой результат, в чём мы и убедились, работая над этим проектом.

Больше наших кейсов можно посмотреть в портфолио. А почитать полезный контент о веб-разработке на Тильде — в нашем Telegram-канале @flash_family.

0
21 комментарий
Написать комментарий...
Юлия Тохтуева

Сама безумно влюблена в нейросети и активно их использую. Ваш опыт просто поражает.

Захотелось повторить.

Ответить
Развернуть ветку
Сергей Ананьев

Мы рады, что вдохновили вас повторить наш опыт)

Ответить
Развернуть ветку
Николай Белкин

Видели фильм "Она", там тоже человек был влюблен в нейросеть

Ответить
Развернуть ветку
Перламутрово-Мышиный

Котелок вышел преотличный.

Ответить
Развернуть ветку
Сергей Ананьев

Спасибо! Как вам остальные иллюстрации?

Ответить
Развернуть ветку
Перламутрово-Мышиный

Немного слишком. Визуально похоже на фестиваль косплея, разработчиков видеоигр. Главное, чтобы заказчик был доволен.

Ответить
Развернуть ветку
Сергей Ананьев

Такой он магический мир)))

Ответить
Развернуть ветку
Alexandr Svetlov

Задача лендинга продажи или лиды генерировать. Эти все навороты с воротами и котелками нужны арбитражникам? Много этот лендинг продаж сделал? Об этом ни слова.

Ответить
Развернуть ветку
Сергей Ананьев

А разве речь про арбитражников? Это сайт для фестиваля)

Ответить
Развернуть ветку
Семен Б.

До сих пор не верится, что нейросети уже умеют делать ТАКОЕ

Ответить
Развернуть ветку
Сергей Ананьев

Да, будущее уже здесь)

Ответить
Развернуть ветку
Manga TV

Вот кстати ровно неделю назад, встала передо мной аналогичная задача - сделать лендинг (я не дизайнер, я программист). Перерыл огромное количество генераторов, но ни один не разрешал экспорт в хтмл/JS, платить также не хотелось. В итоге все сделал в CoPilot с поддержкой чата, получилось вот https://mangatv.shop/landing/index.html

Ответить
Развернуть ветку
Роман Рабочий

Получилось ок)
Рекомендую webflow, 28 баксов но оно того стоит

Ответить
Развернуть ветку
Pivozavr

Подскажите, copilot лучше пишет чем писать запрос в chatgpt руками?

Ответить
Развернуть ветку
Manga TV

Да, лучше. Он имеет сразу доступ к коду - ну и потом там гпт4. Но я про тот что в режиме чата работает, в отдельной панели. Там вэйтлист

Ответить
Развернуть ветку
Froxy

прикольно, ток дырки забыли вырезать

Ответить
Развернуть ветку
Батищев Александр

Какие дырки?
Upd. Понял

Ответить
Развернуть ветку
SelfMasteryLab

Нейросети - это будущее. Потрясающая работа 😍

Ответить
Развернуть ветку
Сергей Ананьев

Спасибо!

Ответить
Развернуть ветку
Палесика Виталий

Где можно посмотреть макет / сайт целиком?

Ответить
Развернуть ветку
Сергей Ананьев

Сайт ещё дорабатывается)

Ответить
Развернуть ветку
18 комментариев
Раскрывать всегда