Как создать продающий лендинг?

Для чего нужен лендинг?

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

• Увеличение продаж товаров или услуг. Одностраничник может стать отличным способом с помощью которого можно подробно рассказать о своей продукции, ответить на все вопросы пользователя и усилить его доверие к компании или персоне в целом.
• Привлечение внимания к акциям или розыгрышам. По аналогии с продажей товаров или услуг, создается лендинг, заточенный для продвижения акционных предложений или проведения розыгрышей.
• Сбор e-mail адресов пользователей через оформление подписки на рассылку. С помощью лендинга можно мотивировать пользователей подписываться на e-mail рассылку, перечислив преимущества, которые они получат.
• Создание лид-магнита, например, при проведении какого-либо вебинара, продажи информационных товаров и т.д.
• Привлечение участников партнерских программ.

Целей может быть множество, но основная – это увеличение числа конверсий.

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

Анализ конкурентов и аудитории

Кроме определения целей и постановки задач лендинга, до его запуска рекомендуется изучить посадочные страницы конкурентов, а также свою целевую аудиторию.

Анализ конкурентов

Мы подготовили упрощенную методику по анализу лендингов конкурентов.

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

Для исследования лучше выделять не менее пяти лендингов разных конкурентов. На что следует обратить внимание:

• На стилистику оформления, обычно она создается с учетом специфики целевой аудитории.
• Как формулируются уникальные товарные предложения (УТП).
• На структуру страницы, какие блоки должны быть обязательными, а наличие каких варьируется.
• На характеристики контента. Его тональность, стилистику, также к контенту относятся изображения, изучаем их тоже.
• Способы мотивации посетителя к совершению конверсии.
• На ценовую политику. Хоть это и не относится на прямую к теме создания лендинг пейджа, но цены часто влияют на его конечную эффективность.

Структурировать полученные характеристики лендингов удобнее всего в виде таблицы, соблюдая единые метрики и правила их учета для всех конкурентов.

Анализ аудитории

Для того чтобы построить идеальное предложение, потребуется предварительно изучить целевую аудиторию – один из важнейших этапов создания лендинга. Именно ответ на вопрос «кто ваш клиент?» даст четкое понимание о том, как оформлять посадочную страницу и не позволит «завалить» продажи.

Схема разработки портрета целевой аудитории:

1. Определяем ее портрет и описываем его свойства (пол, возраст, интересы, уровень достатка, сферы деятельности и т.д.).
2. Выделяем факторы, которые влияют на принятие решения о совершении конверсионного действия, что может являться мотивацией. Часто это наличие какой-либо проблемы.
3. Выделяем выгоды, которые влияют на принятие решения при совершении конверсии. Здесь следует показать, каким образом ваша продукция поможет решить проблему целевой аудитории.
4. На основе полученных данных формулируем предложение. Оффер должен вызывать интерес и выделяться на фоне конкурентов – на это обращаем особое внимание.

Также портрет аудитории должен учитываться при выборе стилистики оформления (дизайна, контента) лендинга в целом.

Из чего состоит лендинг?

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

• Первый экран – это то, что видит посетитель при открытии страницы.
• Все то, что доступно после скроллинга ниже.

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

Оформление первого экрана

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

Первый экран должен включать в себя:

• Логотип компании. Необязательный пункт, но если лого есть, то размещаем.
• Краткое описание того, куда именно попал пользователь. Можно указать род деятельности компании или специализацию персоны (например, юридическая консультация бизнесменов), при этом длина дискрипта в идеале не должна превышать шести слов. Если получится уместить в него какую-либо выгоду, то это будет плюсом.
• Контактные данные, обычно это телефон или адрес. Располагаются в правом верхнем углу лендинга.
• Кнопка обратной связи, например, заказать звонок, размещается ниже контактных данных. По клику открывается форма, куда пользователь вводит свой номер телефон.
• Заголовок. Самая основная часть первого экрана, напрямую влияет на конверсию. Должен создаваться с целью привлечения внимания пользователя. Заголовок обычно является продающим, при этом сочетает в себе полезность, срочность и актуальность, уникальность. Пример, «Строим дома, в которые хочется возвращаться». Если позволяет тематика, то рекомендуется оперировать цифрами.
• Подзаголовок – дополнительный элемент, раскрывающий или дополняющий смысл заголовка. Сюда можно добавить второстепенную выгоду от предложения или «надавить» на боль потенциального клиента.
• Изображение. Усиливает эмоции от первого экрана лендинга, допускается использование исключительно высококачественных фотографий или иллюстраций. Изображение может подтверждать ценность предложения или перекрывать возражения, но оно должно быть привязано к продвигаемому продукту.
• Кнопка. На ней прописывается призыв к действию (CTA), например, «Заказать сейчас». Кнопка должна выделяться на фоне остального контента первого экрана.
• Меню. Его может и не быть, но в идеале лучше сделать так, чтобы был быстрый доступ к основным блокам лендинга без скроллинга.
• Форма обратной связи, в которую пользователь вводит указанные данные. Состоит из заголовка и подзаголовка, полей ввода, кнопки отправки действий.

На изображениях показаны примеры лендингов с выделенными элементами из списка.

Пример 1

Пример 2

Пошаговая инструкция по созданию структуры лендинга

На следующем этапе создания продающего лендинга следует продумать путь клиента от ознакомления с предложением до конверсии.

Структура второго и последующих экранов должна включать в себя:

• Описание проблемы пользователя и ее усиление, если это возможно.
• Варианты решения проблемы с помощью вашего продукта. Здесь можно продемонстрировать в формате изображений или видео.

Программа решения проблемы, т.е. как именно она будет решаться, например, описание шагов.

• Информация об авторе или о компании, цель – показать уровень экспертности.
• Стоимость продукта или тарифная линейка с описанием характеристик.
• Демонстрация результатов, приветствуется использование фотографий «до и после».
• Отзывы клиентов. Они могут быть текстовыми или скриншотами, например, из личных сообщений (или комментариев) в социальных сетях. Важно показать, что человек, оставивший отзывы существует, а отзыв не фейк.
• Призыв к действию, форма регистрации.
• Футер должен содержать реквизиты, адреса, ссылки на социальные сети, договор публичной оферты, политику обработки персональных данных и т.д.

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

• Неуникальное УТП (похожее на то, которое опубликовано у конкурентов) часто приводит к снижению эффективности посадочной страницы.
• Не указаны цены. Также рекомендуется обосновывать ценообразование в целом, особенно, если прайс завышен.
• Цель лендинга – это концентрация внимания пользователя на одном типе товара, услуге или персоне. Если пытаться предлагать посетителю товары «в разнобой» или нерелевантные (например, продажа автомобилей и автомобильных аксессуаров), то это снизит конверсию.
• Использование сложных форм обратной связи с множеством полей. Старайтесь при первом касании брать минимум информации, например, только номер телефона. Не используйте капчи.
• На лендинге нет полной информации о компании или персоне. Это могут быть сертификаты, лицензии, юр. адреса, схемы проезда, благодарственные письма, отзывы и т.д.

Создание прототипа

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

Цели, ради которых создается прототип:

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

Создать прототип лендинга можно на листке бумаги, схематично нарисовав его блоки. Но наиболее приемлемый вариант – это создание с помощью специальных сервисов. Они значительно упростят работу, в том числе по корректировке прототипа, а также в таком виде прототип проще согласовывать между специалистами. Мы подобрали 5 наиболее удобных сервисов для проектирования макетов лендингов любой сложности.

Wireframe.cc

Самый простой в использовании сервис, позволяет самостоятельно начать проектирование без регистрации и создать прототип продающего landing page в сжатые сроки.

Wireframe.cc

Возможности и особенности:

• Интуитивно понятный интерфейс, не перегруженный инструментами.
• Выбор шаблона, отображение окна рабочей области: мобильные устройства, десктоп.
• К каждому элементу можно добавить комментарий.
• При создании фигуры, система «пытается» автоматически определить тип элемента (форма, заголовок и т.д.).
• Возможность работы с цветовой палитрой.
• Использование горячих клавиш, что позволит ускорить прототипирование.

Сервис доступен как в бесплатной версии, так и в платной. Отличие в том, что бесплатная позволяет работать только с одной страницей, но этого достаточно для прототипирования landing page.

InVision App

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

Работа ведется на монтажной области с помощью инструментов drag-and-drop.

Сервис InVision App

Сервис InVision App

Возможности и особенности:

• Командная работа над проектом с уведомлениями для всех специалистов о внесенных изменениях другими членами команды. Это позволяет выстроить контроль над правками в макет.
• Облачная структура платформы позволяет работать над макетами из любого местоположения разработчика.
• Выстраивание системы дедлайнов, с учетом стадий готовности макета.
• 128-битное шифрование и продвинутые технологии защиты данных.
• Создание бэкапов.
• Загрузка пользовательских макетов.
• Создание дискуссий внутри каждого проекта или прототипа.
• Наличие десктопного приложения под MacOS, позволяющее синхронизировать рабочую папку на компьютере с облаком, а также получать уведомления о появлении новых задач в проектах.

Что касается тарифных планов, то имеется бесплатная версия, если работа будет вестись над одним проектом. Платные тарифы начинаются от $13/мес. до индивидуальных, рассчитанных на работу больших по численности команд.

NinjaMock

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

Сервис NinjaMock

Возможности и особенности:

• Доступна командная работа над прототипом, также к нему можно открыть доступ для ознакомления, например, заказчику.
• Прототип можно комментировать, в том числе отдельные его блоки и элементы.
• Экспорт прототипа в pdf, png, html.
• Высокая скорость работы монтажной области.

Доступен бесплатный тариф, в котором допускается создание до 3-х проектов, при этом они будут находиться в публичном доступе. Стоимость платных тарифных планов зависит от количества аккаунтов пользователей, которые могут работать над проектом.

Moqups.com

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

Редактор Moqups.com

Возможности и особенности:

• Наличие большого количества высококачественных шаблонов, на базе которых можно создавать свои прототипы.
• В платных тарифах можно привлечь к работе от 3-х и более специалистов, которые одновременно могут работать над проектом.
• Тонкая настройка конфиденциальности проекта.
• Экспорт проектов в облачные хранилища (Dropbox и Google Drive).
• Экспорт прототипов в png и pdf.
• Платные тарифы позволяют создавать неограниченное количество макетов.
• Имеется система заметок, комментариев и отзывов.
• Загрузка собственных макетов.
• Интеграция с такими сервисами как Trello, Slack.

В бесплатной версии допускается создание одного макета, используя при этом до 200 объектов и 5 МБ облачного хранилища. Для прототипа лендинга в большинстве случаев этого будет достаточно. Если нет, то есть платные тарифы: $16/мес. и $49/мес.

Draftium

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

Draftium

Возможности и особенности:

• Множество блоков для различных целей – шапки, футеры, галереи и т.д.
• Каждый из блоков имеет ряд настроек, например, цвета, шрифты.
• Доступна проектировка форм обратной связи.

В рамках бесплатной версии можно создавать до 3-х прототипов, платной ($99/год) неограниченное количество.

Создание лендинга с помощью конструктора Tilda

Для начала регистрируемся и заходим в кабинет конструктора, после можно приступать непосредственно к созданию лендинга, нажав на кнопку «Создать новую страницу».

Tilda

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

Шаблоны Тильды состоят из блоков-модулей, которые можно добавлять, редактировать или менять местами на странице. Чтобы зайти в настройки достаточно навести курсор на модуль и выбрать соответствующий пункт во всплывающем окне. Каждый из модулей имеет свой набор настроек, например, внешний вид, количество колонок, размеры элементов и т.д.

Настройка блоков

В блоке «Теги» указываются заголовки H1-H6, а в «Контенте» – содержимое модуля. Если это модуль, например, «Обложки», то для него можно выбрать фоновое изображение, логотип и прочее.

Изменение контента

Выбор фонового изображения

Кроме меню «Контент», содержимое блоков можно редактировать прямо на рабочей области, достаточно выделить нужную строчку и внести правки.

Редактирование блоков

Функции дублирования модуля или изменения его положения на странице находятся справа вверху во всплывающем окне.

Функции модулей

Чтобы добавить новый модуль из библиотеки на страницу нажмите «+» внизу любого из опубликованных модулей.

Добавление модуля из библиотеки

Библиотека блоков

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

Если лендинг содержит в себе большое количество блоков, то для быстрой проверки положения на странице и их последовательности предусмотрен специальный инструмент «Карта модулей».

Карта модулей

В настройках сайта доступны различные опции, касающиеся, в том числе SEO-оптимизации. Однако эти функции доступны на платных тарифах. Если говорить о них, то платная подписка позволяет использовать всю коллекцию библиотеки модулей, устанавливать собственное доменное имя (парковка своего домена), настройка SSL-сертификата.

Тестирование лендинга

Перед размещением лендинг обязательно следует протестировать.

Пройтись нужно по следующим пунктам:

• Скорость загрузки страницы. Проверить ее можно в сервисе от Google PageSpeed Insight, он покажет не только скорость загрузки на десктопе и мобильных устройствах, но и выявит наиболее ресурсоемкие элементы лендинга. При обнаружении неудовлетворительной скорости загрузки, рекомендуется уделить время оптимизации элементов, чаще всего это касается изображений или прочей графики.
• Адаптивность под мобильные устройства. Тут все просто, значимая доля трафика идет с мобильных устройств, соответственно, страница должна корректно отображаться на всех типах разрешений экранов. Самостоятельно это можно проверить в сервисе Google – Mobile Friendly.
• Качество дизайна и наполнения в целом. Проверьте, чтобы не было ошибок в верстке и в текстовом наполнении лендинга.
• На лендинге должны быть установлены системы аналитики (Яндекс.Метрика и Google Analytics) и он должен быть добавлен панели вебмастеров (Яндекс.Вебмастер и Google Search Console). Также обязательно настройте цели.
• Перед тем как привлекать трафик, обязательно следует проверить формы обратной связи на работоспособность. Если к лендингу подключена CRM, то следует проверить факт отправки данных в нее.

После запуска лендинг рекомендуется проверить на эффективность с помощью А/Б-тестов. Что нужно учесть:

• На каждом тестировании должна проверяться строго одна гипотеза.
• Перед началом тестирования желательно подготовить его план.
• Количество трафика определяет длительность тестирования – чем его больше, тем меньше времени требуется, чтобы прийти к каким-либо выводам. При этом важно, чтобы на время тестирования не создавались резкие скачки по посещаемости, например, при проведении акций или конкурсов. Это может повлиять на точность результатов.
• Отслеживайте лендинги конкурентов, а также актуальную их рекламу. Возможно, они проводят А/Б-тестирование двух посадочных страниц, постарайтесь отследить длительность теста, что именно проверяют и какую версию страницы оставят в итоге.
• Кроме конверсий, в расчет следует брать и некоторые другие метрики, например, процент отказов или длительность сессий.

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