Как сделать хороший продающий лендинг? Основы успешного сайта

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

Продающий лэндинг

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

Для чего предназначается лэндинг пейдж:

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

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

Создание лэндинг пейдж производится по плану:

Определение цели продающего сайта и аудитории.
Создание УТП (уникальное торговое предложение).
Разработка текста, структуры, прототипа продающей страницы.
Дизайн, фоны, вёрстка, хостинг, форма обратной связи, адаптивный дизайн.
Тестирование лендинга (стабильность работы, трафик, конверсия).

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

Как сделать страницу захвата самостоятельно

Создать самому одностраничный сайт можно посредством платных онлайн-конструкторов, бесплатных программ (Adobe Muse и WebPageMaker используются 30 дней бесплатно) или скачав бесплатный макет landing page psd (формат файлов Photoshop’a). Также страницу захвата можно арендовать или приобрести в специальных сервисах для автоматизации бизнеса. Пример: сервис JustClick предназначенный для создания подписных и продающих веб-страниц, позволяющий редактировать их.

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

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

Конверсия лендинга

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

Часто страницы захвата называют инструментом нетипичных продаж. Это объясняется тем, одностраничники работают по несколько другим правилам маркетинга, нежели интернет-магазины.

Для лендингов существуют некоторые принципы, следование которым поможет увеличить конверсию. Это УТП в заголовке, фото реального клиента, видео, инфографика, продажа эмоций. Но ни один из принципов не гарантирует отличную конверсию после запуска, поэтому рекомендуется тестировать продающие одностраничники перед полноценным запуском.

Безотказный способ получить клиента – наладить поэтапное общение с посетителем сайта, прежде чем попросить его сделать конверсионное действие.

Если конверсия одностраничника меньше 2%, то стоит сделать другую продающую веб-страницу (переделать существующую) или проверить настройки рекламной кампании. Исключения – продажа дорогих услуг и товаров (недвижимость, автомобили и т.д.). В таких нишах повысить конверсию выше 4-5% удаётся очень немногим.

Лендинг с гарантией конверсии

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

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

Триггеры, способные увеличить продажи:

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

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

Прототип лэндинга

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

Зачем нужен прототип посадочной страницы:

Разработка лэндинга займёт меньше времени, так как несложно изобразить все составляющие в чёрно-белом варианте прототипа и заменять детали. Трудно менять готовый дизайн, если что-то необходимо сверстать по-новому.
Прототип позволяет увидеть конечный результат выполнения заказа и если какие-то элементы вызывают сомнения, попросить сделать какой-то из элементов иначе.
Соблюдение этапов работы при создании лэндинга (текст-прототип-дизайн-вёрстка) позволит уменьшить количество ошибок и увеличить конверсию сайта.
Прототип необходим для того чтобы сделать «скелет» одностраничника, который возможно использовать в дальнейшей деятельности.

Лучший вариант, когда прототип рисует делают профессионалы, а заказчик участвует только при составлении ТЗ и приёмке работы.

Пример ТЗ для лэндинга

Правильный одностраничный сайт можно создать, придерживаясь чёткого плана в процессе работы над проектом. Особенно тщательно продуманным должен быть план работы, который предназначается для других – ТЗ (техническое задание) для студий или фрилансеров. ТЗ на создание продающей страницы схоже с заданием на разработку любого другого ресурса в интернете, но менее объёмно.

Пример ТЗ посадочной страницы:

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

Существуют ресурсы и программы, которые дают возможность сделать ТЗ на создание веб-страницы онлайн. Пример: программа ТЗ Майкер.

Составляя ТЗ нужно описать структуру одностраничника и предпочтения к исполнению как можно нагляднее. Обычно техническое задание пишется обычным текстом, но картинки и схемы куда информативнее.

Адаптивный одностраничный сайт

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

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

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

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

Как создать страницу захвата в фотошопе

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

Этапы работы:

Для начала нужно сделать макет landing page design или дизайна, чтобы приблизительно увидеть результат работы и представить расположение блоков, элементов.
Определить ширину одностраничника в пикселях и на основании этого делать размеры рабочей области. Универсальным является макет 960 пикселей шириной и 1500–2500 высотой, так как ширина среднестатистического экрана колеблется в диапазоне 1000 – 2500 пикселей.

Файлообменники и порталы по дизайну содержат множество готовых одностраничников в формате, позволяющем вносить правки (PSD), что позволяет сделать свой дизайн. Чтобы охватить англоязычный сегмент интернета при поиске, следует использовать запрос “landing page design”.

Landing page psd

В сети есть шаблоны одностраничников для продвижения товаров и услуг.

Шрифты для лэндинга

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

Шрифты, используемые для чтения. Например, Times New Roman.
Рубленые шрифты (Verdana).
Курсивные шрифты идеально подойдут для цитат или отзывов, так как имитируют написание от руки.

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

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

Видео-лендинг

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

Лид-форма

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

Эффективная лид форма имеет 5 компонентов:

Позиция формы захвата.
Кнопка СТА.
Длина.
Число полей.
Конфиденциальность.

Форма обратной связи для целевой страницы

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

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

Как редактировать продающую страницу

Существует 4 сервиса, позволяющие редактировать одностраничник:

Редактор Lpgenerator позволяет создать страницу захвата за час, если использовать инструмент «конструктор секций». Он применяется при создании одностраничника с нуля и при изменении шаблонов. Для некоторых интерфейс покажется сложным.
Редактор LPTrend предоставляет самый продолжительный тестовый период – пятнадцать дней.
Сервис Landingi бесплатно предоставляет доступ к версии инструмента на тридцать дней.
Редактор LPmotor отлично подойдёт для одностраничников, так как здесь структура адаптирована именно под выполнение задач продающей страницы. Интерфейс несложный, с ним можно разобраться за 15 минут и создать лендинг. Чтобы редактировать посадочную страницу не понадобится брать уроки у профессионалов и специальных знаний.

Предусмотрены два способа редактировать посадочную страницу:

Визуальный редактор.
Редактор исходного кода.

АБ-тестирование одностраничника

AB-тестирование лендингов – это маркетинговое исследование, которое характеризуется сравниванием показателей сайта с другим, по заданному параметру. Это помогает выявить и исправить отстающие показатели. Провести самостоятельно АБ-тестирование задача несложная.

Распространённые ошибки:

АБ тестирование нескольких одностраничников плохого качества.
Проведение АБ тестирования всего подряд, а не ключевых показателей.
Малая продолжительность АБ тестирования.
Источники трафика при АБ-тестах разного рода.
Выбран неправильный показатель для АБ-теста.

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

Яндекс.Метрики: настройка для посадочной страницы

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

Посредством Яндекс.Метрики делается настройка цели четырёх типов:

Просмотры страниц.
Просмотра конкретного URL.
Событие.
Составная цель.

Для одностраничника важна настройка с помощью Яндекс.Метрики цели «событие», которая проинформирует об отправке формы, нажатии на кнопку или о переходе по ссылке. Настройка цели позволяет узнать, какая из рекламных площадок привлекательна для посетителей, по каким запросам обнаруживают посадочную страницу, и на какую кнопку приходится наибольшее число кликов.

Для интернет-магазина посредством Яндекс.Метрики производится настройка составной цели, для продающего сайта – URL страницы. Для информационных порталов идеально подойдёт настройка с помощью Яндекс.Метрики цели «просмотры страниц».

Robots.txt для страницы захвата

Robots.txt – технический файл, указывающий роботам-поисковикам на необходимость (или порядок) индексации отдельных элементов одностраничника. Файл robots.txt и его синтаксис, даёт возможность направлять поисковых роботов и указывать для них правила. Некоторые факты про файл robots.txt:

Формат robots.txt – текстовый файл, создающийся в обыкновенном блокноте.
Файл robots.txt размещается в корневой директории одностраничника.
Если файл robots.txt пуст или его нет – это означает, что можно индексировать весь одностраничник.
Файл robots.txt больше 256 Кб не читается.

Правила robots.txt:

Файл называется robots.txt и никак иначе.
Кодировка – только Unix.
Файл размещается в корневом каталоге продающего сайта без вложения в другие папки.

Хостинг для лендинга

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

Каким должен быть хостинг для продающей страницы:

Хороший хостинг обеспечивает моментальную загрузку одностраничника, в том числе все картинки.
Качественный хостинг гарантирует стабильность работы при увеличенной посещаемости.
Хостинг позволяет заказать продукт и безопасно произвести оплату, то есть обеспечивает элементарную защиту сайта.
Правильный хостинг делает простой установку одностраничного сайта на WordPress, DLE или Joomla.

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

Политика конфиденциальности для лендинга

Имя, фамилия, адрес электронной почты, телефон – это данные, приватность которых охраняется на законодательном уровне. Потому владелец сайта должен объяснить клиентам цели сбора персональных данных, как производится обработка подобной информации и правила её использования. Это и есть политика конфиденциальности. Она должна предоставлятся, даже если из контактов требуется указать только e-mail для получения электронных писем по рассылке.

Что представляет собой аудит одностраничника

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

Успешный продающий лендинг. Секреты посадочных страниц