Лендинг. Как создать одностраничный сайт Landing Page

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

Лендинг (от английского landing page, или «посадочная страница») — одностраничный сайт, посвященный конкретному товару или услуге. Лендинг призван не только информировать о товаре и услуг — он конструируется таким образом, чтобы максимально конвертировать входящий трафик. Поэтому лендинги используются для усиления эффективности рекламы. В какие полезные действия может быть сконвертирован трафик:

• продажа товара или услуги;
• сбор контактной информации о посетителях сайта;
• перенаправление трафика.

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

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

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

Создание лендинга — идея и структура

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

• AIDA — Attention, Interest, Desire, Action (привлечь внимание посетителя, вызвать у него интерес, желание и добиться определенного действия);
• PMPHS — Pain, More pain, Hope, Solution (обозначить проблему, максимально обострить её, дать надежду и показать решение).

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

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

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

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

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

Схема получения вашего продукта — простая и четкая последовательность действий, что нужно сделать, чтобы приобрести товар — желательно 3-5 шагов, не более. Пример — «Заполнить эту форму — Звонок менеджера и подтверждение заказа — Оплата — Доставка товара и подарка». Все шаги должны казаться клиенту очень простым способом приобретения продукта.

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

Не стесняйтесь просить клиентов оставлять отзывы на сайте, и (по возможности) выкладывайте на сайт не просто текст отзыва, а скриншот благодарственных сообщений в WhatsApp, SMS, ВКонтакте. С разрешения клиента опубликуйте его фото и имя, ссылку на профиль ВК. Особенно хорошо работают видеоотзывы, их сложнее добыть, но эффект того стоит!

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

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

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

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

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

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

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

Собирая контакты пользователей, вы должны следовать Федеральному закону от 27.07.2006 года № 152-ФЗ «О персональных данных» и получить согласие на обработку данных клиентов. Разместите в форме галочку и ссылку на пользовательское соглашение.

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

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

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

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

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

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

Материал по теме: ОДНОСТРАНИЧНЫЙ САЙТ-ЛЕНДИНГ: ПОСАДОЧНАЯ СТРАНИЦА ДЛЯ ПОЛУЧЕНИЯ ЛИДОВ

Мифы о лендингах

Существует ряд устоявшихся представлений касательно лендинга, которые мы считаем нужным прокомментировать:

• Landing page должна быть объемной. Не должна. Лендинг должен доносить до посетителя ваше предложение, раскрывать его особенности и призывать к действию. Если удалось реализовать все концепции в рамках одного экрана — честь вам и хвала.
• Лендинг требует создания специальных текстов. Да, это так. Продающий текст для рекламных страниц убеждает и конвертирует посетителей. Если не готовы написать сами — отдайте специализирующемуся автору или агентству.
• Лендинг нельзя продвигать при помощи SEO. Это верно почти всегда. У нас есть исключительный пример, когда лендинг находится в ТОП Яндекса и получает органический трафик из поиска. Как правило, лендинг может собирать только рекламный трафик: контекстная реклама, тизеры и т.д..
• Лендинг можно сделать самому. Да, можно, сейчас на рынке представлен большой выбор конструкторов сайтов, в том числе и бесплатных. Однако, если ваш рекламный бюджет составляет несколько десятков тысяч рублей в месяц, то созданный лендинг с низкой конверсией приведет к его расходованию. Поэтому рекомендуем вам обратиться к специалисту: цена лендинга «под ключ» может составлять от 30 000 до 150 000 рублей, иногда выше. Но в таком случае вы получите действительно «продающий» сайт.

Воплощаем идею в жизнь

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

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

Анализ конкурентов и создание УТП

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

Определение целевой аудитории

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

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

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

Определившись с аудиторией, перейдем к рассмотрению её целей.Именно они будут определять сценарий поведения пользователя на сайте.

Важно получить ответы на ряд вопросов:

• каковы условия просмотра сайта (мобильное приложение или стационарный ПК);
• какие базовые задачи может решить пользователь на сайте;
• какие дополнительные задачи пользователь может решить на сайте;
• как можно изменить сайт, чтобы все актуальные для пользователя задачи были решены.

После этого этапа, можно приступать к написанию текстов для лендинга. Здесь выделяют три основных шага:

• разработка структуры повествования;
• написание текста;
• его оптимизация.

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

Например, плохо: «У нас самые дешевые сумки по ценам от производителя».

Лучше: «У нас самые дешевые сумки в регионе, потому что мы обладаем собственной производственной базой».

Отлично: «Производим сумки — отвечаем за качество и лучшую цену!»

Дизайн лендинга

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

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

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

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

Верстка и поисковая оптимизация

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

Любой сайт-визитка с большой неохотой индексируется поисковыми системами — из-за незначительного объем текста. Однако, это не повод исключать из материала ключевые поисковые слова. Для подбора ключевых слов используйте сервис, например Яндекс Подбор слов. Большое значение имеет место употребления ключевого слова в тексте: например, в заголовке «ключ» более значим для поисковой системы.

Продвижение лендинга

Мы уже говорили, что сайты-визитки невысоко ранжируются поисковыми системами ввиду малого объема информации. Ввиду этого обстоятельства приходится применять альтернативные способы продвижения, самый популярный из которых — контекстная реклама: Яндекс.Директ и Google AdWords. Оба сервиса основаны на поисковых системах и это не совпадение. Именно вводимый пользователем запрос определяет вид рекламного объявления, которое будет ему показано. Как запустить контекстную рекламу Яндекс Директ, мы подробно описали в отдельной статье.

Чтобы контекстная реклама хорошо работала для вашего лендинга, придерживайтесь этих правил:

• лендинг должен быть максимально релевантен ключевому запросу;
• текст объявления должен быть релевантен ключевому запросу и создавать верные ожидания у ЦА (другими словами, обещать то, что действительно имеет место быть);
• настроен таргетинг ЦА и конверсионные цели в Метрике.

Альтернативой может стать реклама лендинга в социальных сетях. Практически каждая из них имеет свой собственный рекламный сервис, который можно задействовать для продвижения вашего одностраничника. Главное преимущество подобного подхода относительно классической контекстной рекламы — максимально гибкие настройки таргетинга. Социальная сеть знает о своем посетителе гораздо больше, чем обычная поисковая система. Ей доступны не только пол, возраст и географическое расположение пользователя, но и ряд других параметров — начиная от музыкальных вкусов и заканчивая пабликами, которые ему интересны. Всё это используется системой для настройки рекламной кампании, что сделает продвижение вашего лендинга максимально адресным. Не стоит также забывать, что пользователь социальной сети более активен в плане просмотра, распространения и обсуждения информации.

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

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

Примеры лендингов

Лендинг для МТС банка, финансовые услуги

• Заголовок и визуализация продукта — кредитной карты.
• Преимущества кредитного предложения.
• Конверсионная форма с 3 полями.
• Конверсионный кнопки имеют разный текст для пользователей разного уровня заинтересованности.

Страница акции Beeline

Страница создана специально для привлечение в акцию абонентов.

• Конверсионная кнопка с текстом-призывом «Попробовать бесплатно».
• Кнопка находится под областью с указанием выгоды: зачеркнута старая цена, выделена новая цена по спецпредложению.
• Совместная акция с известным брендом, имеющим лояльную аудиторию: логотип коллаборативного бренда размещен на первом экране и бросается в глаза.

Такси «Убер»

Страница-лендинг, конвертирует посетителей в действия: скачать приложение, приглашение водителей работать в такси.

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

Лендинг цветочной компании

Красивое оформление и легкость дизайна, основанном на фотографиях цветов и интерьеров.

• Обратите внимание на форму и яркую кнопку.
• Фотографии показывают примеры работ компании — оформление интерьеров цветами.
• Меню разделяет целевую аудиторию: бизнесу, свадьба.

Компания «Майкрософт»

Лендинг сделан на домене сайта, но практически не связан с ним — нет основного меню и какой-либо другой информации, кроме предложения о программном продукте компании — SQL Server, предназначенный для узкой ЦА.

• Заголовок обозначает главную проблему клиентов и ее решение.
• Форма только с необходимыми полями.
• Нет меню — ничего не отвлекает от заполнения формы.

Как улучшить лендинг?

Напишите нам, если хотите создать лендинг, получить рекомендации для вашего сайта или привлечь целевой трафик. Мы всегда открыты для диалога!