+375445023245
+375445023245Обновлено: сентябрь 2026
Hero image — главное изображение первого экрана сайта или лендинга: то, что человек видит до прокрутки. Его задача не украшать страницу, а за пару секунд ответить на три вопроса: куда я попал, для меня ли это и что здесь можно сделать. Работает связка из четырёх элементов — изображение, заголовок, короткое пояснение и кнопка, — и решает не картинка сама по себе, а то, насколько быстро человек считывает смысл. Главное изменение последних лет: стоковые изображения перестали работать, потому что выглядят одинаково у всех, а сгенерированные нейросетью — по той же причине, если их берут по общему запросу без правки. Ниже — из чего состоит первый экран, примеры «слабо / сильно», разбор по нишам, как использовать нейросети правильно и какие ошибки стоят конверсии.
Что решает первый экран
Человек принимает решение остаться или уйти за несколько секунд, и в эти секунды он не читает — он сканирует. Поэтому первый экран проектируется не как картинка с текстом, а как ответ на три вопроса подряд.
Мы переделали десятки первых экранов и почти всегда рост давало одно и то же — не новая картинка, а замена заголовка. Компания пишет «комплексные решения для вашего бизнеса», а нужно «ремонт квартир в Минске, смета за два дня». Первое ни о чём не говорит и подходит любому; второе отвечает на вопрос человека, который только что кликнул по объявлению. Картинку в таких случаях мы часто вообще не трогаем.
Андрей Гусаров, основатель агентства GUSAROV
Из чего состоит первый экран
Главный элемент. Формула: что вы делаете + для кого + чем отличаетесь. Длина — одна строка на десктопе, две на телефоне.
Почему: Первый вариант подходит любой компании на свете и поэтому не говорит ничего. Второй называет услугу, город и три проверяемых условия — человек сразу понимает, попал ли он туда.
Одна-две строки, которые снимают главное возражение или уточняют, кому это подходит. Не пересказ заголовка другими словами.
Почему: Стаж и любовь к клиентам есть у всех. Уточнение по объектам и бесплатный первый шаг отсекают нецелевых и снижают барьер для целевых.
Подтверждает заголовок: реальная работа, продукт в использовании, процесс, команда, результат. Не абстракция и не сток.
Что работает: фотография вашего объекта или продукта, скриншот интерфейса, если продаёте сервис, человек в кадре, если продаёте услугу через доверие.
Что не работает: рукопожатия, люди в костюмах у ноутбуков, абстрактные градиенты, коллаж из пяти услуг.
Одна, с конкретным действием и понятным результатом. Если действий несколько, второе делается визуально слабее.
Почему: Первые варианты описывают переход, вторые — результат. Человек нажимает на то, что понимает, что получит.
Цифра, срок, гарантия, логотипы клиентов, короткий отзыв или счётчик выполненных работ — прямо на первом экране, а не через три блока.
Правило: одно проверяемое доказательство лучше трёх общих. «47 объектов в 2026 году» сильнее, чем «сотни довольных клиентов».
Первый экран по нишам
Что показывать и о чём писать, зависит от того, что продаёте и на каком этапе человек к вам приходит.
Что решает на первом экране: снять сомнение в цене и сроках — это главные вопросы человека, который ищет исполнителя.
Пример заголовка: «Ремонт квартир в Минске: смета за 2 дня, предоплата 0%»
Что показать: фотография реального объекта до и после или в процессе. Не стоковая гостиная из каталога.
Частая ошибка: ставить красивый интерьер из фотобанка — посетитель понимает, что это не ваша работа.
Что решает на первом экране: снять страх и показать, что первый шаг безопасен и необязывающ.
Пример заголовка: «Первый визит — только осмотр и план лечения. 30 минут, без уговоров»
Что показать: врач или кабинет — реальные, с лицами команды. Работает доверие к людям, а не к оборудованию.
Частая ошибка: обещать результат лечения: это и не работает, и создаёт правовые риски.
Что решает на первом экране: показать категорию и повод купить сейчас: наличие, доставка, цена.
Пример заголовка: «Мебель для квартир с детьми и животными. Доставка по Минску за 2 дня»
Что показать: продукт в реальном интерьере или в использовании, а не на белом фоне — так его проще примерить на себя.
Частая ошибка: карусель из пяти акций: человек не успевает прочитать ни одну.
Что решает на первом экране: обозначить операционную проблему клиента и подтвердить компетентность фактом.
Пример заголовка: «Груз стоит на границе третий день? Расчёт по вашему направлению за час»
Что показать: производство, техника, команда за работой, схема процесса. Логотипы клиентов как доказательство.
Частая ошибка: абстрактные «комплексные решения» и стоковые рукопожатия — в B2B они снижают доверие сильнее, чем где-либо.
Что решает на первом экране: назвать результат обучения и для кого оно, а не перечислить модули.
Пример заголовка: «Профессия SMM-специалиста за 3 месяца. Первый клиент — во время обучения»
Что показать: преподаватель, работы студентов, реальный процесс занятий.
Частая ошибка: фотографии улыбающихся студентов из фотобанка: ниша, где это заметно сразу.
Что решает на первом экране: показать человека и его специализацию — покупают у конкретного специалиста.
Пример заголовка: «Психолог. Работаю с тревогой и выгоранием. Первая встреча — 30 минут бесплатно»
Что показать: ваша фотография хорошего качества, живая, а не студийно-безличная.
Частая ошибка: прятаться за абстрактным логотипом: в экспертных услугах лицо — главный актив.
Нейросети в работе над первым экраном
Модели помогают на всех этапах, но по-разному: в тексте они сильны, в изображениях требуют осторожности.
Варианты заголовков
Самое полезное применение. Модель даёт двадцать формулировок одного смысла под разные боли — вы выбираете и правите. Раньше на это уходил час, теперь минуты.
Разбор болей для оффера
Загружаете переписки и отзывы — получаете повторяющиеся сомнения с цитатами. Из них собирается заголовок, который попадает в реальный вопрос человека.
Проверка готового экрана
Промт-редактор находит оценочные формулировки без подтверждения, проверяет, продолжает ли экран обещание рекламы, и говорит, понятно ли за секунду, о чём страница.
Идеи и композиция изображения
Модель предлагает, что показать в кадре и как построить композицию под ваш заголовок. Дальше вы это снимаете — или собираете из своих материалов.
Фоны, обработка, доработка
Расширение кадра, замена фона, чистка изображения, подгонка под нужные пропорции. Нормальное применение: оформление вокруг вашего реального материала.
Адаптация под форматы
Один экран в версии для десктопа, планшета и телефона; варианты под рекламные объявления. Рутина, которая съедала время дизайнера.
Сгенерированные «клиенты» и «сотрудники». Люди, которых не существует, на сайте услуг работают так же плохо, как сток: посетитель не может проверить, но чувствует несоответствие, а иногда и прямо распознаёт.
Генерация по общему запросу. «Современный офис, команда, светлые тона» даёт то же, что у тысяч других сайтов, — в этом смысле генерация повторила судьбу фотобанков.
Узнаваемые персонажи, логотипы и реальные люди. Изображения известных героев, чужих торговых знаков и узнаваемых лиц — правовой риск, а не творческая находка.
Что безопасно: абстрактные фоны, иллюстрации, схемы, обработка и доработка ваших собственных снимков.
Продукт: [что продаём, кому, цена или вилка, чем отличаемся — только проверяемые факты]. Город и рынок: [где работаем].
В файле — 60 переписок с клиентами и отзывы (обезличены); отдельно текст рекламного объявления, по которому люди попадают на эту страницу: [вставить].
Задача:
1. Выдели 5 повторяющихся сомнений и вопросов, с которыми люди приходят, — с цитатами.
2. Напиши 15 вариантов заголовка первого экрана по формуле «что делаем + для кого + чем отличаемся», каждый до 12 слов.
3. К каждому — подзаголовок на одну строку, который снимает возражение или уточняет, кому подходит.
4. Предложи текст кнопки, обещающий результат, а не переход.
5. Отметь, какие варианты дословно продолжают моё объявление, а какие создают разрыв.
Ограничения: без «качественный», «профессиональный», «индивидуальный подход», «комплексные решения»; только факты, которые есть в моём описании; если фактов не хватает — скажи, каких именно.
Вот содержимое первого экрана: заголовок [текст], подзаголовок [текст], кнопка [текст], что изображено [описание]. Объявление, с которого приходит трафик: [текст]. Целевое действие: [какое].
Задача:
1. Скажи прямо, понятно ли за одну секунду, что здесь предлагают и кому. Если нет — что именно мешает.
2. Проверь, продолжает ли экран обещание объявления теми же словами; отметь разрывы.
3. Найди оценочные формулировки без подтверждения и предложи замену фактом.
4. Оцени изображение: подтверждает ли оно заголовок или живёт отдельно; выглядит ли как сток или генерация по общему запросу.
5. Проверь кнопку: обещает результат или описывает переход.
6. Назови, чего не хватает для доверия: какая цифра, гарантия или доказательство должны быть на этом экране.
Ответь списком правок по пунктам, не переписывая всё заново.
Как проверить свой первый экран
Посадочные страницы, офферы и аналитика конверсии — часть программы курса интернет-маркетинга EDUGUSAROV: сбор болей из данных, структура первого экрана, связка рекламы с посадочной и нейросети в каждом задании. Практика на своём проекте, проверка специалистами агентства GUSAROV. Первый урок бесплатно, возврат 100% в течение 7 дней.
Типичные ошибки
- Абстрактный заголовок. «Комплексные решения для вашего бизнеса» подходит любой компании и не говорит ничего.
- Разрыв с рекламой. Объявление обещает расчёт, а на странице общая информация о компании.
- Стоковые изображения. Рукопожатия и люди у ноутбуков снижают доверие, особенно в B2B.
- Генерация по общему запросу. Даёт то же, что у тысяч других сайтов, — новая версия проблемы фотобанков.
- Несколько равнозначных кнопок. Человек выбирает между действиями вместо того, чтобы действовать.
- Тяжёлое изображение или видео на фоне. Посетитель уходит до того, как страница отрисовалась.
- Кнопка ниже линии скролла на телефоне. Её просто не видят.
- Нет ни одного доказательства. Обещание без цифры, срока или гарантии не работает.
Частые вопросы
Что такое hero image?
Главное изображение первого экрана сайта или лендинга — то, что человек видит до прокрутки. Работает не само изображение, а связка из четырёх элементов: заголовок, подзаголовок, картинка и кнопка. Их задача — за пару секунд ответить, куда человек попал, для него ли это и что здесь можно сделать.
Что важнее — изображение или текст?
Заголовок. При переделке первых экранов рост конверсии почти всегда даёт замена текста, а не картинки: человек сначала считывает смысл, а изображение только подтверждает его. Картинка становится критичной там, где продукт визуальный и результат нужно показать.
Можно ли использовать стоковые фотографии?
Можно, но они почти всегда проигрывают: одни и те же изображения стоят на сотнях сайтов, и посетитель это чувствует. Особенно заметно в B2B и в услугах, где решает доверие. Лучше работает реальная работа, продукт, процесс или команда — даже если снято проще.
Можно ли генерировать изображение нейросетью?
Для абстрактных фонов, иллюстраций, схем, обработки и доработки собственных снимков — да. Для изображения людей, которые якобы ваши клиенты или сотрудники, — нет: это работает так же плохо, как сток. И не используйте узнаваемых персонажей, чужие логотипы и реальных людей — это правовой риск.
Каким должен быть заголовок первого экрана?
Одна строка по формуле «что делаем + для кого + чем отличаемся», с проверяемым фактом вместо прилагательных. Он должен дословно продолжать обещание рекламного объявления, по которому пришёл человек: разрыв здесь — главная причина дорогих заявок при хорошем CTR.
Как проверить, работает ли первый экран?
Тест пяти секунд: показать человеку, не знакомому с вашим бизнесом, и спросить, что предлагают, кому и что можно сделать. Плюс сверка с рекламным объявлением, проверка на телефоне, карта скролла и скорость загрузки. Изменения тестируются по одному элементу.
Нужны ли анимация и видео на первом экране?
Редко. Они замедляют загрузку и отвлекают от смысла, а посетитель уходит до того, как страница отрисовалась. Уместны, когда видео само по себе объясняет продукт и не мешает прочитать заголовок и увидеть кнопку без прокрутки.
Читайте также: как создать эффективное рекламное сообщение, визуально привлекательный контент, брошенная корзина: где теряются заявки, веб-аналитика для оптимизации сайта.
