Почему визуал это не оформление, а контент
Текст на лендинге говорит “что”. Визуал говорит “кто” и “как”. Когда человек листает лендинг, первые 4-5 секунд его глаз цепляется именно за фото, иллюстрации и видео. Текст он начинает читать только после того, как визуал не оттолкнул.
Я раз в месяц просматриваю Вебвизор по своим проектам. Закономерность одна: лендинги с натуральными фото процесса получают на 25-40% больше времени скролла и на 18-30% больше кликов по CTA, чем лендинги со стоковой графикой. Это устойчивый эффект.
В этой статье разбираю, какой визуал работает на разные типы продуктов, какие форматы видео действительно увеличивают конверсию и что пропускать мимо.
Что отталкивает сразу
Список визуальных элементов, которые регулярно роняют конверсию. Эти паттерны видно сразу.
- Стоковые фото счастливых людей в офисе. Человек за ноутбуком, улыбающийся, три коллеги сзади, доска с графиками. Это визуальный маркер “сайт не настоящий”.
- Фоновые видео с замедленной съёмкой города. Медленный pan по небоскрёбам, закат, хипстерский кофе. Не имеет отношения к вашей услуге.
- Слайдеры на первом экране. 5 слайдов, каждый 4 секунды. Посетитель не успевает считать ни один.
- Огромные фото без смысла. Фото “горы и океан” на полэкрана, занимает весь первый экран, смысла не несёт.
- 3D-рендеры интерфейсов из 2015 года. Смартфон под углом 30 градусов с размытой картинкой на экране.
Это не эстетика, это конкретный вред. Одно такое фото на первом экране режет конверсию на 15-25% по сравнению с отсутствием фото вообще.
Что работает на разных типах продукта
Визуал зависит от того, что вы продаёте. Ниже подход под 5 типов продукта.
Локальные услуги (ремонт, клининг, барбершоп)
Лучше всего работают реальные фото процесса. Мастер стрижёт клиента в реальном кресле. Плиточник кладёт плитку в реальной кухне. Клинер моет окно в конкретной квартире. Фото не постановочные, без позирования.
Оборудование для съёмки: любой смартфон последних 4 лет. Главное - дневной свет, не угловые ракурсы, минимум 8-10 фото из разных моментов работы.
Эксперты и консультанты
Здесь решает фото самого эксперта. Не бизнес-портрет в костюме, а живая съёмка: человек за рабочим столом, с клиентом на консультации, выступает на мероприятии. Максимум 4-5 фото, но живых.
Дополнительно: скриншоты сертификатов, статей в отраслевых изданиях, переписки с клиентами (с согласия и замазанными именами). Это социальное доказательство в визуальной форме.
Онлайн-продукты и SaaS
Скриншоты интерфейса, но не просто интерфейса, а в действии. Показывайте, как пользователь решает свою задачу внутри продукта. Если есть анимации или короткие gif-ролики с демонстрацией функции, это повышает понимание в разы.
Видео-демонстрация длиной 30-60 секунд на первом экране даёт одну из самых высоких конверсий среди всех типов визуала для SaaS.
Инфопродукты и курсы
Фото автора курса, студии съёмки, интерьер, в котором снимается программа. Скриншоты уроков, личный кабинет, примеры заданий. Если есть отзывы в видео-формате, они работают лучше любых текстовых.
Производство и B2B
Фото производства, оборудования, готовой продукции в реальных условиях. Видео-облёт цеха длиной 15-30 секунд даёт сильное ощущение реальности. B2B-клиент принимает решения на основе рационального восприятия, визуал должен подтверждать реальность производства.
Видео на лендинге: где работает, где нет
Видео это мощный инструмент, но он не универсален. Три сценария, в которых видео увеличивает конверсию.
Сценарий 1: демонстрация результата
Короткий ролик 15-45 секунд, где показан результат до и после. Для ремонта: комната до и после. Для стрижки: клиент в кресле до и после. Для лендинга: старый сайт клиента и новый, который вы сделали.
Это самый понятный формат видео. Посетитель за 20 секунд понимает, что вы умеете.
Сценарий 2: процесс работы
Ролик длиной 30-90 секунд, в котором вы показываете, как работаете. Для мастера: инструменты, этапы работы, финальная проверка. Для эксперта: как проходит консультация, какие материалы получает клиент.
Такое видео снимает возражение “что именно я получу за деньги”. Работает особенно хорошо на услугах, где процесс невидим для клиента.
Сценарий 3: отзыв клиента
Видео-отзыв длиной 30-60 секунд. Человек на экране, не актёр. Рассказывает конкретный опыт: какая была задача, что вы сделали, какой результат. Это лучшее социальное доказательство из возможных. Конверсия блока “отзывы” с видео обычно в 2-3 раза выше, чем с текстовыми отзывами.
Где видео не работает
- Видео-приветствие от СЕО. “Здравствуйте, меня зовут Иван, добро пожаловать на наш сайт”. Это отнимает время посетителя, не давая никакой пользы.
- Корпоративные ролики длиной 3-5 минут. Никто не досматривает.
- Видео-фон с зациклённой графикой. Декоративно, но мешает сосредоточиться на контенте.
- Видео с автопроигрыванием со звуком. Это раздражает и режет конверсию.
Технические требования к визуалу
Чтобы визуал не тормозил сайт, нужно соблюдать технические ограничения. Вот они в виде чек-листа.
| Параметр | Рекомендуемое значение |
|---|---|
| Формат изображений | WebP или AVIF, JPG запасным |
| Размер одного фото | до 150 КБ после оптимизации |
| Разрешение для первого экрана | 1920x1080 max, 2x для Retina |
| Ленивая загрузка | loading=“lazy” для всего ниже первого экрана |
| Формат видео | MP4 с кодеком H.264 |
| Размер видео до 30 секунд | до 2 МБ |
| Автозапуск видео | только без звука и с атрибутом muted |
| Alt-атрибуты | для всех картинок, с описанием, не только ключом |
Эти параметры дадут PageSpeed выше 85 при любом количестве визуала на странице.
Где взять контент, если съёмки нет
Частая проблема новичка: “у меня нет времени и денег на фото-съёмку, а стоки плохо работают”. Варианты решения.
- Снимайте на смартфон, но системно. 30 минут в течение рабочего дня, 15-20 фото процесса, окружения, результата. Этого хватает на лендинг.
- Попросите у клиентов фото результата. Отзыв плюс фото из проекта это в 3 раза ценнее, чем сток.
- Используйте AI-генерацию для абстрактных иллюстраций. Flat-иллюстрации, схемы, диаграммы. Они не подменяют реальные фото, но закрывают декоративные потребности лендинга без стоковых банок.
- Снимайте короткие скрин-касты для онлайн-продуктов. Инструменты типа Loom или встроенная запись экрана macOS дают отличный результат без дополнительных вложений.
Быстрый тест “свой-чужой”
Простой способ проверить, насколько ваш визуал “свой” для целевой аудитории. Покажите 3 фото с лендинга человеку, который похож на вашего клиента, и попросите угадать, какая из трёх компаний реальна, а какие две - сток.
Если он не может отличить, визуал работает. Если сразу показывает пальцем “вот это ненастоящее”, нужно менять.
Вывод
Визуал на лендинге это не оформление, а отдельный канал коммуникации. Стоковые фото счастливых людей режут конверсию, реальные фото процесса повышают её на 20-40%. Видео работает в трёх сценариях: демонстрация результата, процесса и отзыв клиента. Технические ограничения: WebP до 150 КБ, MP4 без звука, ленивая загрузка всего ниже первого экрана.
По теме: 10 элементов первого экрана, Отзывы на лендинге: как собрать и оформить и Триггеры доверия на лендинге.
