Первый экран лендинга: из чего состоит и каким должен быть

Первый экран — это видимая без прокрутки часть landing page, где посетитель за 3–7 секунд решает остаться на сайте или уйти. Его ещё называют hero-блоком, главным или начальным экраном. На десктопе видимая зона обычно занимает 600–800 px по высоте, на мобильном — 550–700 px, и именно этот блок формирует первое впечатление о компании и продукте. От первого экрана зависит, будет ли пользователь читать вашу страницу дальше или сразу закроет вкладку.

Материал разобрал [Иван Тзшников, автор блога тзшник.рф, специализация — технические задания для лендингов и разработка структуры сайтов], который проверял конверсию первых экранов на нескольких десятках проектов через Яндекс Метрику. Дальше — из каких элементов собирают такой блок, как написать заголовок, какой нужен визуал вашего продукта и какие ошибки чаще всего снижают отклик пользователей. Разбор построен на реальных кейсах, а не на абстрактных советах, и может помочь вам избежать типичных ошибок в собственном проекте.

Зачем нужен первый экран и какие задачи он решает

Задачи первого экрана всегда одни и те же, независимо от ниши и продукта:

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

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

Если задачи не решены, это видно по метрикам: отказы выше 40%, глубина прокрутки ниже одного экрана, мало кликов по кнопке. Такие показатели считают через карту скроллинга и отчёты Яндекс Метрики. Конверсия первого экрана обычно измеряется долей посетителей, которые дошли до кнопки и нажали её, а не просто пролистали страницу вниз без остановки.

По запросу «лендинг первый экран» сервис разобрал 17 страниц выдачи Яндекса и Google, вывел медиану объёма 1147 слов и структуру из 6 разделов, а затем сам написал текст на 1112 слов с релевантностью 96 пунктов — с блоками про элементы первого экрана, заголовок с оффером и разбор частых ошибок. Человеку остаётся подставить название компании, цены и контакты, сверить факты о своём продукте и опубликовать страницу.

Из каких элементов собирают первый экран

Обязательные элементы первого экрана есть на любом рабочем лендинге, и без них экран не выполняет свою задачу:

• Логотип и название компании — размещают в верхнем углу, без лишней графики, высота логотипа 30–40 px.
• Дескриптор — короткая фраза из 3–7 слов рядом с логотипом, поясняющая сферу компании.
• Заголовок с оффером — 5–9 слов, главное торговое предложение, отвечающее на вопрос «что я получу».
• Подзаголовок — 1–2 строки, снимает первое возражение или уточняет условия.
• Кнопка призыва к действию CTA — 2–3 слова, формулировка через действие: «оставить заявку», «рассчитать цену».
• Визуал — фото продукта, процесс работы или лицо компании.

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

Ключевое правило: одно целевое действие на экран. Если рядом стоят кнопки «купить» и «узнать больше», пользователь теряется и не совершает ни одного клика. У товара с высоким чеком форму обратной связи можно продублировать ниже по странице, но кнопка на первом экране остаётся одна. Информация о продукте на этом уровне должна быть максимально короткой: пользователь не готов читать абзацы, ему нужен ответ за несколько секунд.

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

Заголовок и оффер: как сформулировать главное предложение

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

Три рабочие схемы:

• по проблеме — «Течёт кран? Устраним за 2 часа»;
• по результату — «Сайт с заявками за 14 дней»;
• по условию сделки — «Ремонт квартир под ключ от 5 000 ₽ за м²».

Пример переписывания текста: было «Профессиональные услуги по ремонту техники», стало «Ремонт стиральных машин на дому за 1 день с гарантией 12 месяцев». Второй вариант текста понятен и конкретен, первый ни о чём не говорит человеку, который ищет решение своей проблемы прямо сейчас.

Подзаголовок работает как второй слой заголовка: он снимает первое возражение клиента — по цене, срокам или доверию. Формулировку на кнопке пишут через действие: «Рассчитать стоимость», «Оставить заявку», «Получить пример работ». Хороший заголовок первого экрана обязан совпадать по смыслу с рекламным объявлением — иначе посетитель решит, что попал не туда, и уйдёт без решения.

Заголовок для экрана пишут после того, как определена выгода клиента, а не до. Сначала фиксируют, что человек хочет получить от вашего продукта, потом подбирают формулировку текста. Нужно помнить: чем ближе к кнопке, тем короче должна быть фраза перед глазами человека. Хороший заголовок решает главную задачу — объяснить клиенту, зачем ему нужно ваше предложение прямо сейчас.

Дизайн и визуал: изображение, вёрстка, мобильная версия

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

Технические ориентиры для картинки: вес файла 200–300 КБ, формат WebP — он легче JPEG на 25–30% при том же качестве. Заголовок поверх фона должен читаться без напряжения: можно использовать затемняющую подложку или размещать текст на однотонном участке фона. Обратите внимание: слишком яркий фон часто перекрывает надпись, и она теряется в общей картинке.

Первый экран должен одинаково хорошо работать на телефоне, ведь оттуда приходит большая часть трафика. Для мобильной версии: кнопка обязана попадать в видимую зону без прокрутки, шрифт заголовка — 24–28 px, зона клика по кнопке — от 44 px, чтобы палец не промахивался. Весь контент на экране должен помещаться без горизонтальной прокрутки на любом устройстве, иначе пользователь может закрыть страницу раньше, чем прочитает предложение.

Три рабочих варианта компоновки: заголовок слева, картинка справа; заголовок поверх полноэкранного фото; заголовок сверху, визуал и форма — снизу. Выбор зависит от продукта и объёма формулировки. Можно протестировать несколько вариантов на реальном трафике и сравнить показатели по кликам и глубине просмотра — это надёжнее, чем выбор по личному вкусу дизайнера, и обычно даёт больше данных для принятия решения.

Частые ошибки первого экрана и как их проверить

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

Чек-лист проверки первого экрана и что делать дальше

• Логотип и дескриптор компании на месте
• Заголовок содержит продукт, выгоду и конкретику
• Подзаголовок снимает главное возражение клиента
• Одна кнопка с формулировкой через действие
• Визуал соответствует услуге, вес файла 200–300 КБ
• Заголовок читается на фоне без напряжения
• Мобильная версия: кнопка видна без прокрутки
• Формулировка совпадает с текстом рекламы
• Уже есть цена или условия услуги, видимые сразу
• Есть контакты или форма обратной связи
• Высота блока в пределах 600–800 px

Собрать первый экран самостоятельно можно за один-два дня. Заказать создание лендинга у подрядчика стоит от от 60 000 ₽ — агентство «Комета» — в услугу обычно входит заголовок и оффер, визуал, вёрстка с адаптивом и проверка на мобильных. Если хотите проверить готовый вариант или получить аудит перед запуском, отправьте лендинг на разбор через форму обратной связи — агентство «Комета», +7 495 118-37-73, top@cometa.agency. Дополнительно можно сделать разбор своей ниши и прочитать статью с примерами первых экранов по разным нишам, чтобы сравнить подходы и выбрать подходящий под свой продукт. Такая информация может дать несколько готовых идей ещё до старта создания собственного сайта.

Частые вопросы о первом экране лендинга

Цены, сроки и состав работ приведены по информации Компании Комета (cometa.agency), проверено 15 сентября 2026. Стоимость зависит от ниши и объёма работ, точный расчёт — после разбора проекта.