От идеи до первых заявок: как самому создать Landing Pagе в 2020 году

Landing Page или «лендинг» — это сайт или страница, созданная, чтобы побудить человека совершить определённое действие: купить товар, оставить заявку, заказать замер, зарегистрироваться на вебинар.
Landing Page переводится как «посадочная страница» — страница, куда «приземляются» посетители, перешедшие по рекламной ссылке.
Отступление про термины
В России под термином Landing Page люди обычно подразумевают одностраничный сайт, но это не совсем верно. На самом деле лендинг может быть как одностраничником, так и размещаться на многостраничном сайте.
Дословно Landing Page переводится как посадочная страница — страница, куда приземляется трафик. То есть если М.Видео рекламируется в Яндекс.Директе по запросу «купить iPhone» со ссылкой на категорию в своём магазине — категорию тоже можно назвать лендингом, ведь именно туда «приземляется» рекламный трафик.
Как появились лендинги и почему стали популярны
Десять лет назад российский интернет выглядел иначе. Сайты создавали «для имиджа», они были сложными и запутанными. Их создатели не мыслили цифрами: не замеряли конверсию, не анализировали поведение посетителей и не пытались оптимизировать показатели.
В глазах бизнеса хорошим считался сайт, который отличается от других: с необычным дизайном и анимацией. Основная задача сайтов тех лет была — доносить информацию: выкладывать пресс-релизы, новости, рассказывать об услугах и развлекать, но не продавать.
В 2007 году Студия Артемия Лебедева сделала сайт компании «Эмекс», которая продавала автозапчасти. Выглядел сайт так:

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

На главной появился понятный заголовок, который рассказывает, чем занимается компания. Появились продающие элементы — оффер и выгоды. Ниже есть каталог, где можно оформить заказ.
Между этими двумя скриншотами — 13 лет развития маркетинговой мысли в России.
Первые лендинги начали появляться в 2010-х годах, когда бизнес понял, что интернет — это источник клиентов и возможность заработать деньги.
«Мы осознали потенциал лендингов случайно. В 2011 году мы с партнёрами, как маркетологи, делали сайт для компании «Отличные окна» и вместо креатива и анимаций просто сделали заголовок “Утром окна — вечером деньги” и кнопку “Заказать окна”. На следующий день мы получили в десять раз больше заявок, чем обычно. В тот момент стало понятно одно — мы нащупали что-то новое».
Михаил Дашкиев, главный методолог проекта Units
С 2012 года в России начался расцвет лендингов. В основном компании запускали простые одностраничные сайты, где у посетителя было два сценария: оставить заявку или уйти. Такие сайты были дёшевы в производстве, создавались за несколько дней и давали отличные результаты — 5-10% конверсии.
Почему лендинги эффективнее в лидогенерации, чем сложные корпоративные сайты
- Внимание пользователя сфокусировано только на одной странице, у него есть всего два сценария — уйти или оставить заявку. Так мы не перегружаем пользователя контентом и не даём распыляться и совершать лишние действия, например, кликать по ссылкам в меню.
- На одностраничнике мы даём пользователю самую важную информацию и максимально простой и логичный следующий шаг. Пользователь не «остывает» в процессе знакомства с нашей компанией
- Одностраничник создать проще, быстрее и дешевле, чем многостраничный сайт. Это позволяет эффективнее тестировать гипотезы — пробовать разные заголовки, дизайн, блоки контента.
- Вы можете создать много лендингов — на каждый продукт или категорию продуктов. Или отдельный лендинг для мероприятия или акции.
- Когда все посетители попадают на одну страницу, проще анализировать действия пользователей: как они читают сайт, куда кликают, после какого блока решают оставить заявку.
Вместе с ростом популярности лендингов создался целый рынок маркетинговых агентств, плохих и хороших. На фриланс-биржах можно было найти исполнителей, которые сделают Landing Page с уникальным дизайном всего за 2500 рублей. При этом появились агентства, которые брали за простой одностраничник 1 млн рублей.
Позже начал формироваться рынок сервисов — онлайн-чаты, виджеты и конструкторы. В 2014 году появилась Tilda, которая полностью изменила рынок сайтов.
В этой статье мы расскажем всё про лендинги в 2020 году: какие они бывают, как их создать, что работает, а что нет, покажем примеры и дадим много советов.
Какие Landing Page бывают в 2020 году
В основном все лендинги сегодня можно разделить на два типа:
1. Одноэкранные лендинги. Занимают один экран прокрутки у посетителя. Когда посетитель заходит на сайт, он не может скроллить вниз.
На одноэкранных лендингах не так много контента. Обычно это шапка, заголовок, подзаголовок, несколько буллитов-выгод и кнопка с призывом оставить заявку или пройти квиз.
2. Многоэкранные лендинги. Пользователь может их листать, изучая разные блоки — с информацией о компании, отзывами, выгодами. Многоэкранные лендинги могут быть длинными и короткими — всё зависит от задач компании и воронки продаж.
Сложно сказать, какой лендинг работает лучше — короткий или длинный. В каждом бизнесе работают разные связки, каждый сайт нужно тестировать индивидуально. Советуем сделать оба и посмотреть, какой конвертирует лучше.
Пример длинного лендинга https://sok-aloe.ru/
Примеры Landing Page
1. Архитектурное освещение фасадов зданий — 500lux.ru

2. Продажа растворимого кофе — APPIS Coffee

3. Онлайн-школа вкусных домашних десертов — Pauline School

4. Франшиза площадок для проведения праздников в формате квест-шоу — Rublev Family

5. Предрейсовые и предсменные медосмотры по всей России — MedMap

6. Landing Page нашего юнита, где рассказано, как создать прототип Landing Page — Открыть

Этапы создания Landing Page
Есть восемь этапов: с чистого листа до первых заявок от потенциальных клиентов.
- Определить задачу лендинга.
- Создать прототип.
- Сделать дизайн и сверстать лендинг на конструкторе.
- Настроить аналитику и цели.
- Проверить всё перед запуском.
- Запустить трафик.
- Обработать заявки.
Разберём каждый этап отдельно, чтобы после прочтения статьи вы могли сами создать свой первый лендинг.
Этап 1. Определить задачу
Первое, о чём нужно спросить себя — для чего вы создаёте лендинг, в чём его цель? Вы хотите продавать товар напрямую и получать оплаченные заказы? Собирать заявки для отдела продаж? Или сайт нужен для сбора подписной базы емейлов?
Чтобы сформулировать задачу, предлагаем заполнить небольшую таблицу:

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

После заполнения таблицы вам станет понятна задача — что мы делаем, для кого и какое действие от пользователя хотим получить. Теперь можно переходить к прототипу.
Этап 2: Создать прототип
Прототип лендинга — это эскиз того, как будет выглядеть сайт. В прототипе не должно быть дизайна и красоты, его даже можно нарисовать от руки. Главное в нём — текст, смыслы и расположение элементов.
Разработка прототипа ускоряет создание лендинга. На прототипе мы можем быстро менять местами блоки, смыслы и текст. Делать такие правки в дизайне — дольше и дороже.
Создать прототип можно с помощью этих инструментов:
- Google Slides — сервис для создания презентаций от Google, бесплатный аналог Microsoft PowerPoint.
- NinjaMock — специализированный сервис для прототипирования сайтов. Есть бесплатная версия.
- Mockingbird — ещё один сервис для прототипирования, есть бесплатная версия.
- Axure — сложный софт для профессионалов, можно создавать сайты со сложной структурой, ссылками и динамическим контентом.
- Листок бумаги и ручка — оффлайн-инструмент. Чтобы создать прототип, нужно уметь рисовать линии и писать. Не обязательно делать это красиво.
Важно: прототип мы делаем уже с текстом и описываем все элементы так, как они будут выглядеть на сайте.
Что должно быть в прототипе
Лендинг — это набор блоков, которые идут один за другим. Блоки ещё называют экранами.
Экран — это область, которую пользователь видит на своём устройстве в один момент. Когда пользователь скроллит страницу, экраны сменяют друг друга.
Каждый экран вкладывает в голову пользователя какую-то мысль и отвечает на его вопросы: какая схема работы, преимущества компании, отзывы, каталог товаров.
Любой лендинг состоит из этих экранов:
- Первый (главный) экран — тот, который видит пользователь сразу после загрузки страницы.
- Промежуточные экраны: каталог, категории, отзывы, сертификаты, сравнение с аналогами, условия доставки.
- Подвал с юридической информацией или пользовательским соглашением.
Ещё вы должны продумать формы захвата, чтобы пользователи могли оставлять заявки.
Первый экран
Первый (главный) экран — самый важный, на нём нужно разместить ключевое предложение компании.
По данным исследования Nielsen, 80% всего времени посетители тратят на первый экран и только 20% на все остальные.
Если клиент переходит на лендинг и за три секунды не понимает, куда попал, он уходит. Поэтому первый экран должен быть самодостаточным и сразу отвечать на вопрос: «Чем вы занимаетесь и что предлагаете?»
Чтобы ответить на этот вопрос, первый экран должен иметь несколько ключевых элементов:

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

2. Если у вас есть продающее видео, добавьте иконку просмотра на первый экран.

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

Первый сайт предлагает мебель для кухни, но изображение вызывает сразу несколько ассоциаций: посуда, ресторан, бытовая техника.
Второй сайт — производитель мебели. На изображении нет ничего лишнего, ничто не отвлекает внимание, образы дают однозначную ассоциацию.
С первым экраном мы разобрались. Дальше нужно создать промежуточные экраны.
Промежуточные экраны
Обычно лендинг состоит из 4-7 экранов. Какие нужны вам и сколько их будет, вы определяете исходя из вашей ниши, преимуществ и бизнес-задачи. Если всё для принятия решения можно уместить в два экрана — отлично, делайте короткий лендинг.
Расскажем, какие экраны бывают, чтобы вам было из чего выбирать:
Как создается прототип промежуточных экранов
- Определяете, какие экраны вам нужны для решения бизнес-задачи.
- Определяете их последовательность.
- Заполняете их продающими текстами и усиливаете изображениями.
- Расставляете формы захвата.
Как лучше расположить экраны?
Рекомендуемый порядок:
- Расскажите о вашем продукте.
- Расскажите, почему клиент должен купить продукт у вас.
В идеале экраны о продукте должны ответить на четыре вопроса:
- Что вы продаёте?
- Кто вы, как компания? Отзывы, награды, преимущества.
- Зачем клиенту ваш продукт?
- Почему купить нужно именно сейчас?
Примеры экранов
Мы составили список из десяти типов экранов, можете выбрать подходящие и наполнить их своими смыслами:

Помните, что на этом этапе мы создаём прототип. Не пытайтесь пока уйти в дизайн, смотрите на примеры и вдохновляйтесь структурной частью и расположением элементов. Дизайн будет позже.
Когда вы определились с промежуточными экранами, осталось создать завершающий экран вашего лендинга — подвал.
Подвал
В подвале обычно размещается:
- Контактная информация (телефон, адрес, соцсети).
- Информация о юридическом лице.
- Ссылка на политику конфиденциальности. Её нужно расположить, чтобы не получить штраф за нарушение 152-ФЗ.
Формы захвата
Форма захвата — это окно с полями для ввода контактов. Она предлагает посетителю сделать следующий шаг.
Формы захвата бывают трёх видов:
1. Закрытая форма захвата содержит только кнопку с текстом, по нажатию которой открывается форма контактов. Она не занимает много места, вы можете использовать её в конце каталога, описания преимуществ или на любом экране.

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

Формы захвата обычно располагают вначале (на первом экране), в середине лендинга и в конце. Но это не строгое правило.
Каждая форма должна содержать призыв к действию — описание того, что пользователь должен делать дальше. Оно обычно совпадает с нашим следующим шагом.
При проектировании форм захвата вспоминайте про нашу шкалу стрессовости:

Советы по написанию текста:
- Не используйте в заголовках клише: «Лучшее качество», «Команда профессионалов», «Низкая цена». В них не видно вашей уникальности, и пользователю непонятно, что стоит за громкими словами.
- Усиливайте заголовки фактами и цифрами.

3. Структурируйте текст, не публикуйте большие блоки информации сплошным текстом. Следуйте правилу «одна мысль — один абзац».
Посмотрите на эти два примера. Какой из этих текстов легче прочитать?

Теперь вы знаете, из чего состоит прототип и как его создать. Прототип — это самая сложная часть. В конце статьи мы дадим ещё несколько лайфхаков по написанию текста и редактуре, а пока двигаемся дальше — переходим к визуальному слою и вёрстке.
Этап 3. Сделать дизайн и сверстать лендинг на конструкторе
Если бы мы создавали сложный маркетплейс с большим количеством страниц, дизайн и вёрстка были бы разными процессами. Дизайнер делает из прототипа красивый макет, а верстальщик переносит красивый макет в браузер, программирует все элементы, анимацию и формы.
В этой статье мы рассмотрим создание лендинга на конструкторе.
Что такое конструктор лендингов
Конструкторы лендингов — это онлайн-сервисы, где вы собираете сайт из готовых блоков, перетаскивая их мышкой и меняя текст на свой. На конструкторе всего за день можно сделать приличный сайт, не подключая дизайнеров и программистов.
Топ-5 сервисов-конструкторов
- Tilda — более 550 готовых блоков дизайна, встроенная CRM. Используйте блоки в сотнях комбинаций, просто добавляя один за другим, в интуитивно понятном интерфейсе.
- Mottor — конструктор сайтов и лендингов, где можно запустить готовый сайт за час. 465 готовых шаблонов.
- Wix — конструктор, где c созданием полнофункционального сайта справится любой — и эксперт, и человек, который берётся за это впервые.
- PlatformaLP — конструктор для быстрого создания страниц.
- WebFlow — американский конструктор сайтов, с помощью которого можно создавать лендинги, блоги и интернет-магазины без программирования.
Как перенести прототип на конструктор
Первое, что нужно сделать — выбрать сервис. Зарегистрируйтесь, сравните тарифы, выберите подходящий для вас.
У каждого сервиса внутри есть отличное обучение, как создавать и публиковать страницы — вы научитесь комбинировать и редактировать блоки, добавлять формы захвата.
Когда сервис выбран, осталось перенести туда прототип. Найдите в конструкторе похожие по дизайну блоки и соберите страницу. Отредактируйте содержимое блоков, добавьте туда текст и изображения.
Советы по визуальному оформлению
1. Старайтесь, чтобы цвета текста и фона контрастировали. Главное правило дизайна — тёмный текст на светлом фоне, светлый текст — на тёмном фоне.

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

3. Избегайте фотостоков. Сайты со стоковыми фотографиями «успешных людей» смотрятся дёшево и постановочно. Лучше сделайте профессиональную фотосессию на основе вашего прототипа. Или найдите иллюстратора, который красиво отрисует продукт.

Когда вы перенесёте прототип на конструктор, не забудьте показать его друзьям и сотрудникам. Спросите, что можно улучшить, выслушайте честную обратную связь. Через несколько таких итераций у вас получится неплохой лендинг.
Где искать вдохновение
Есть сайты, где дизайнеры со всего мира выкладывают свои работы. Там можно вдохновиться и почерпнуть идеи. Обращайте внимание на цвета, кнопки, изображения и расположение элементов. Со временем у вас выработается насмотренность, и дизайн будет получаться всё лучше.
Список сайтов для вдохновения:
Этап 4. Настроить аналитику и цели
Чтобы понять, хорошо или плохо работает лендинг, нам нужно настроить аналитику.
Аналитика — это набор инструментов, с помощью которых можно собирать и анализировать данные о посетителях сайта: откуда они приходят, сколько времени проводят на сайте, какие товары покупают или какие статьи читают.
Сервисы веб-аналитики для сайта:
Перед запуском рекламы обязательно подключите аналитику к лендингу. Найдите об этом статью в базе знаний конструктора, который вы выбрали — там будет подробная инструкция.
Настройка целей
Кроме подсчёта посетителей и анализа их поведения, бизнесу нужно отслеживать конкретные действия: оформление заказа, заявка, подписка на рассылку и другие. Для этого в веб-аналитике есть цели.
Мы заранее определяем, какие действия для нас важны, прописываем это в системе, и когда пользователь это действие совершит — аналитика это увидит и зафиксирует.
Настройка аналитики и целей — тема для отдельной статьи. Но можно посмотреть инструкцию от самих сервисов web-аналитики:
Этап 5. Проверить всё перед запуском
Перед запуском рекламы пройдитесь по этому чек-листу и убедитесь, что всё работает:
- На компьютере сайт отображается так, как вы задумали — ничего не съехало и не обрезалось.
- Зайдите на сайт с телефона — мобильная версия должна выглядеть хорошо.
- Проверьте все формы захвата — попробуйте оставить тестовые заявки, убедитесь, что они приходят куда нужно: во встроенную CRM-систему или вам на почту.
- Проверьте сайт на опечатки, а лучше привлеките корректора.
- Покликайте по всем ссылкам и кнопкам — убедитесь, что всё работает как надо.
Этап 6. Запустить трафик
Чтобы получать целевые действия и продажи, на лендинг нужно привести пользователей. Для этого нужно создать и запустить рекламные кампании.
Чтобы плотно погрузиться в вопросы трафика, советуем пройти наши Юниты:
Этап 7. Обработка заявок
После запуска рекламы вы начнёте получать первые заявки. Ваша задача — связаться с потенциальными клиентами как можно быстрее.
Чтобы продавать эффективнее, пройдите наш Юнит «Маркетинг-кит».
Главное
Создать лендинг — непростая задача, которая состоит из множества шагов.
Сложность в том, что каждый этап состоит из этапов поменьше. В итоге это путает и пугает. Поэтому важно сфокусироваться и не бросить всё на полпути — оценить объём и «есть слона по кусочкам».
Ещё раз пройдёмся по шагам:
- Определить задачу. Понять, кому и что вы продаёте, и выбрать менее стрессовый следующий шаг для клиента.
- Создать прототип — самый важный шаг, фундамент. В прототипе закладываются смыслы, которые компания хочет донести до клиентов, чтобы они купили продукт.
- Сделать дизайн и сверстать лендинг на конструкторе. Нужно собрать из прототипа готовый сайт. В дизайне важно не использовать стоковые фото и правильно выбрать цвета.
- Настроить аналитику и цели. Чтобы анализировать, как пользователи ведут себя на лендинге, нужна аналитика. Без неё не получится улучшать страницу.
- Проверить всё перед запуском. Иногда думаешь: «Почему нет заявок? Вроде запустил рекламу и 2000 человек зашло на сайт». А потом обнаруживаешь, что форма не работает — выдаёт ошибку или кнопка не нажимается. Поэтому обязательно проверьте всё перед запуском, оставьте тестовые заявки и посмотрите, как выглядит мобильная версия сайта.
- Запустить трафик. Настройте рекламную кампанию, чтобы потенциальные клиенты увидели ваше предложение.
- Обрабатывать заявки. Как можно скорее свяжитесь с людьми, которые оставили заявки, продавайте им, исполняйте обязательства и зарабатывайте.
У нас есть отличный Юнит «Прототип Landing Page», который поможет вам разобраться с двумя самыми сложными этапами — определить задачу и создать прототип. Автор этого Юнита — Михаил Дашкиев. Михаил одним из первых в России начал системно использовать лендинги и вложил в этот Юнит все свои знания и опыт.
Юнит — это двухчасовая сессия с инструктором по специальной методике, после которой вы уходите с конкретным результатом на руках.
На Юните мы чередуем теорию и практику. Теория — это записанная заранее лекция от автора, где он пошагово рассказывает, что надо делать. В практической части вы проходите все шаги из теории и получаете реальный результат.
Во время практики вам помогает специально обученный инструктор. Вы работаете с ним один на один, без посторонних, поэтому можно задавать сколько угодно вопросов.
Отличие Юнита от обычных тренингов в том, что здесь мы разбираем только ваш бизнес индивидуально с вами, и на выходе вы получаете не скучную историю для бизнеса в вакууме, а реальный результат — готовый прототип лендинга, сделанный по всем правилам.