Как создать лендинг: структура, шаги и ошибки

Разработка

19 сентября 2026 г.

Максим КозловРуководитель отдела разработки

Как создать лендинг, чтобы он приносил заявки, а не просто существовал в интернете? Большинство провалов случаются раньше дизайна и вёрстки: нет одной цели, оффер размыт, блоки собраны «как у конкурентов», а заявки уходят на почту, которую никто не читает. Ниже — пошаговый процесс от цели и оффера до структуры по блокам, прототипа, сборки, аналитики и запуска рекламы, а в конце — когда лендинг можно сделать самому, типовые ошибки и чек-лист.

Если вы ещё не решили, нужен ли вам вообще одностраничник, начните с разбора что такое лендинг и когда он нужен бизнесу. Здесь формат уже выбран.

Шаг 1. Цель лендинга: одно целевое действие

Лендинг строится вокруг одного измеримого действия: заявка на замер или расчёт, запись на консультацию или демо, покупка, регистрация на вебинар, запрос КП. Всё на странице подталкивает к нему или снимает сомнения на пути. Второе действие («подписаться на канал») допустимо только как запасной вариант и визуально слабее главного.

Сразу посчитайте допустимую цену заявки. Пример: средний чек 30 000 ₽, маржа 40% — 12 000 ₽ с продажи. Если на привлечение клиента вы готовы отдать половину маржи, это 6 000 ₽. При конверсии заявки в продажу 20% на одного клиента нужно 5 заявок, значит, заявка не должна стоить дороже 1 200 ₽ (6 000 × 0,2). Эта цифра потом станет критерием, по которому вы оцениваете и лендинг, и рекламу.

Проверка цели одной фразой: «[Кто] приходит с [какого канала], чтобы [получить что], и должен [сделать что]». Если фраза не складывается или в ней три действия — страница развалится на несколько сценариев и не отработает ни один.

Шаг 2. Целевая аудитория, оффер и УТП

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

Сегмент и ситуация. Кто покупает, кто принимает решение, что произошло перед поиском («затопило соседей», «перестал справляться бухгалтер»).
Критерии выбора и возражения — из звонков менеджеров, переписки, отзывов о вас и конкурентах. Каждое частое возражение потом станет блоком или вопросом FAQ.
Оффер. Что человек получит, на каких условиях и в какой срок: «Установка сплит-системы за 1 день с гарантией 3 года, цена монтажа фиксируется до выезда». Цена «от», срок и результат работают сильнее «индивидуального подхода».
УТП. Почему у вас, а не у конкурентов из выдачи: что вы можете пообещать и доказать, а они нет. Методика и способы проверки — в материале что такое УТП и как его составить.

Шаг 3. Структура лендинга: блоки, их задачи и порядок

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

Блок	Задача	Что показать
Первый экран	За 3–5 секунд подтвердить, что человек попал куда нужно	Оффер в заголовке, уточнение в подзаголовке, главная кнопка, элемент доверия: рейтинг на Картах, гарантия, число объектов
Проблема	Показать, что вы понимаете ситуацию клиента	2–4 боли языком клиента, последствия бездействия, без запугивания
Решение / продукт	Объяснить, что именно вы предлагаете	Что входит, форматы или комплектации, фото и видео, для кого подходит и для кого нет
Выгоды	Перевести характеристики в результат	3–6 выгод с цифрами — только те, что можете подтвердить
Как работаем	Снять страх неизвестности	4–6 этапов от заявки до результата со сроками, где договор и оплата
Кейсы и отзывы	Доказать опыт	«Задача — решение — результат», фото «до/после», отзывы со ссылками на Яндекс Карты или 2ГИС, логотипы клиентов в B2B
Цены и пакеты	Отфильтровать нецелевых и снять главный вопрос	Цена «от» или 2–3 пакета, от чего зависит итог; калькулятор или квиз, если цена считается индивидуально
FAQ и гарантии	Снять возражения и риск решения	5–8 вопросов из реальных звонков, условия гарантии, фиксация цены в договоре — то, что вы готовы исполнить
Форма / финальный CTA	Получить контакт	2–3 поля, кнопка с действием («Рассчитать стоимость», а не «Отправить»), что будет после заявки, альтернатива: мессенджер, звонок
Контакты и реквизиты	Подтвердить, что компания реальная	Телефон, мессенджеры, адрес, режим работы, наименование, ИНН/ОГРН, ссылки на политику и согласие

Соберите структуру в виде таблицы: блок — вопрос клиента, на который он отвечает, — доказательство. Строки без доказательства («мы лучшие на рынке») — первые кандидаты на удаление или переписывание.

Шаг 4. Прототип и тексты лендинга

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

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

Заголовок первого экрана повторяет обещание из объявления. Человек кликнул на «Ремонт стиральных машин на дому за 1 день» — он должен увидеть то же, а не «Сервисный центр с 15-летней историей».
Факты вместо оценок и язык клиента: «выезд через 2 часа» вместо «оперативно», «течёт кран» вместо «неисправность запорной арматуры».
Текстом, а не картинкой. Заголовки и выгоды — настоящим текстом: его видят поисковики, он читается на телефоне и не грузится как тяжёлое изображение.

Шаг 5. Дизайн: мобильная версия, скорость и Core Web Vitals

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

Скорость закладывается в дизайне: слайдер и фоновое видео на первом экране, три шрифта в пяти начертаниях — решения, за которые платит конверсия. Для поиска Google ориентируется на полевые Core Web Vitals: «хорошая» зона для 75-го процентиля визитов — LCP до 2,5 с, INP до 200 мс, CLS до 0,1. Яндекс не использует термин Core Web Vitals и не публикует пороговых значений; полевые данные смотрят в Метрике: Отчёты → Мониторинг → «Время загрузки страниц». Замеряйте мобильную версию: там проблемы видны раньше.

Если своего дизайнера нет, макет можно заказать отдельно: дизайн лендинга с прототипом и адаптивом передаётся в Figma, и его сверстает любая команда.

Шаг 6. Вёрстка и сборка: CMS или код, формы в CRM, аналитика

На чём собрать лендинг

Три пути: конструктор, CMS с готовой темой или вёрстка по макету. Конструктор даёт быстрый старт, но ограничивает интеграции, скорость и перенос страницы (сравнение по стоимости владения — в статье блога «Свой сайт или конструктор»). Для лендинга под постоянную рекламу обычно выбирают вёрстку по макету: код легче, а формы, квизы и калькуляторы подключаются без ограничений тарифа. Тексты и цены после сдачи вы должны менять сами, без программиста.

Формы и заявки

Каждая заявка попадает в CRM (Битрикс24, amoCRM или другую) через API или вебхук, а не только на почту, плюс уведомление в Telegram ответственному менеджеру.
В скрытых полях формы передаются UTM-метки и идентификатор посетителя Метрики (ClientID): по ним видно, какое объявление привело клиента.
После отправки человек видит, что произойдёт дальше и когда ему перезвонят.

Аналитика: Метрика, цели, Вебвизор

Счётчик Яндекс Метрики с Вебвизором, картами кликов и скроллинга.
Цели на реальные события. Заявка — цель типа «JavaScript-событие»: метод reachGoal вызывается после того, как сервер подтвердил приём заявки, а не по клику на кнопку. Плюс клики по телефону и мессенджерам, шаги квиза.
Составная цель: дошёл до цен → открыл форму → отправил.
Цель-заявка выбрана в кампаниях Яндекс Директа, чтобы стратегия оптимизировалась на заявки, а не на клики.
Защита данных в Вебвизоре. Метрика сама маскирует только поля, которые распознала как конфиденциальные (например, имя). Чтобы телефон и e-mail не попадали в записи, отключите опцию «Записывать все поля» (Настройки → вкладка «Вебвизор») или пометьте поля формы CSS-классом ym-disable-keys.

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

Лендинг с формой собирает персональные данные, поэтому юридический минимум для него такой же, как для сайта компании:

Политика обработки персональных данных опубликована на сайте (ч. 2 ст. 18.1 152-ФЗ), ссылка на неё — в подвале и рядом с каждой формой.
Согласие на обработку ПДн. С 1 сентября 2025 года оно оформляется отдельно от других документов (ст. 9 152-ФЗ в ред. 156-ФЗ): отдельный текст согласия и отдельный чекбокс, который не стоит заранее.
Уведомление о cookie и Метрике. Данные счётчиков могут считаться персональными, поэтому Метрику упоминают в политике и показывают уведомление о cookie.
Согласие на рекламные рассылки (ч. 1 ст. 18 38-ФЗ «О рекламе») — если собираете контакты для рассылок: ещё один чекбокс, не совмещённый с согласием на ПДн и необязательный для отправки заявки.

Уведомление Роскомнадзора об обработке ПДн подают до начала обработки — политика на сайте его не заменяет. Полный перечень, включая требования к магазинам, клиникам и учебным центрам, — в статье какие страницы и блоки обязательны на сайте.

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

Шаг 8. Запуск трафика и A/B-тесты

Перед запуском отправьте тестовые заявки с iPhone и Android из разных браузеров: они должны дойти до CRM с UTM-метками, а цели в Метрике — сработать. Основной трафик для лендинга — Яндекс Директ и таргет во ВКонтакте и Telegram; под разные сегменты делают разные варианты первого экрана.

Первые 2–4 недели — сбор данных: кроме конверсии смотрите Вебвизор и карту скроллинга — до какого блока доходят, на каком поле формы бросают. Улучшения проверяйте по одному. Честный A/B-тест требует достаточного трафика — при небольшом бюджете разумнее делать крупные изменения и сравнивать сопоставимые периоды, чем месяцами ждать статистической значимости.

Как создать лендинг самому или заказать: честное сравнение

Вариант	Когда подходит	Ограничения
Самому на конструкторе или готовой теме CMS	Тест спроса, небольшой рекламный бюджет, вы готовы сами писать тексты и настраивать Метрику	Шаблонная структура, абонплата за платформу, ограничения интеграций и скорости, ваше время — от нескольких дней до пары недель
Фрилансер	Понятная задача и готовые тексты, есть кому проверить результат	Прототип, адаптив и интеграции часто за доплату или не входят; сроки и ответственность зависят от одного человека
Студия под ключ	Постоянная реклама с заметным бюджетом, нужны прототип, копирайтинг, интеграции с CRM и аналитикой	Дороже на входе и дольше: нужно время на бриф и согласования

Для ориентира: в АП-ИМ создание лендинга под ключ начинается от 150 000 ₽ и занимает 7–12 рабочих дней, с квизами, CRM, оплатой и сквозной аналитикой — от 200 000 ₽ и 3–4 недели. Итоговая сумма зависит от объёма блоков, текстов и интеграций.

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

Ошибки при создании лендинга

Одна страница под все сегменты и объявления. Реклама обещает разное, а первый экран один — совпадение с запросом теряется.
Цель в Метрике на клик по кнопке. Кнопку нажали, форма не отправилась из-за ошибки валидации, а Директ считает это конверсией и оптимизируется на мусор.
Заявки только на почту. Письма попадают в спам или к уволенному сотруднику, а скорость ответа — один из главных факторов продажи.
Страница в чужом аккаунте. Исходники и доступы остались у подрядчика или на платформе — любая правка и переезд превращаются в проблему.

Чек-лист перед запуском лендинга

Одна цель и одно целевое действие, допустимая цена заявки посчитана
Заголовок первого экрана совпадает с обещанием в рекламе
На первом экране — оффер, кнопка и элемент доверия
Каждый блок отвечает на реальный вопрос клиента и содержит доказательство
Есть цена «от» или пакеты, гарантии и ответы на частые возражения
Форма из 2–3 полей, кнопка с конкретным действием, повторяется каждые 2–3 экрана
Мобильная версия проверена на реальных телефонах, первый экран грузится быстро
Заявки приходят в CRM и мессенджер вместе с UTM-метками
Цели Метрики срабатывают на успешную отправку формы, клики по телефону и мессенджерам; поля форм скрыты в Вебвизоре
Опубликована политика ПДн, согласие — отдельный текст и отдельный неотмеченный чекбокс, есть уведомление о cookie
Контакты и реквизиты компании на странице совпадают с карточками на Картах
Тестовые заявки отправлены с разных устройств и браузеров и дошли до менеджера

Частые вопросы

Зависит от объёма и того, кто делает. Простой лендинг на готовой теме можно собрать самому за несколько дней, если тексты и фото уже есть. В студии продающий лендинг с прототипом, дизайном и вёрсткой обычно занимает 1,5–2,5 недели, а с квизами, CRM и оплатой — 3–4 недели. Больше всего времени обычно уходит не на вёрстку, а на сбор фактов, текстов и согласования.

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

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

Сформулированный оффер и цену «от», реальные фото объектов или продукта, 3–5 кейсов и отзывы со ссылками на площадки, условия гарантии и этапы работы, реквизиты компании. Из технического — доступы к домену, хостингу, Метрике и CRM, куда должны приходить заявки. Чем полнее материалы на старте, тем меньше итераций с текстами и согласованиями.

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

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

Создание лендинга

Поможем с этой задачей под ключ — от идеи до результата. Рассчитаем стоимость и сроки под вашу задачу.

Читать подробнее

Услуги по теме

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

Подробнее

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

Подробнее

Запустите сквозную аналитику и управляйте бизнесом по цифрам.

Подробнее

Заявки из Яндекс Директа с отчётностью до выручки — первые обращения в течение двух недель

Подробнее