Привлечь внимание аудитории и убедить совершить целевое действие можно с помощью Landing Page. Так называют одностраничный сайт, посвященный презентации одного продукта. Пошаговая инструкция, как сделать лендинг самому, — в нашей в статье.
Определяем целевую аудиторию: что для нее важно
Составляем блоки лендинга и продумываем структуру
Социальные доказательства и блоки доверия
Создание прототипа: обзор инструментов
Выбираем систему управления контентом
Добавляем дополнительные инструменты
Тестируем и проверяем лендинг пейдж
Подготовка
Чтобы лендинг выполнял свою функцию, надо понимать, для чего он сделан и кому будет интересен. Поэтому на старте определяем цели и аудиторию, а также анализируем конкурентов, текущие тренды в нише.
Цель лендинга
Цели могут быть разными: увеличить продажи, собрать контакты, проинформировать об акции, презентовать новый товар или услугу, пригласить на мероприятие и т. д. От них зависит дизайн, содержание страницы и способы привлечения посетителей.
Лучше выбрать одну цель и сфокусироваться на ней, так будет проще сделать продающую страницу и измерить ее эффективность. Можно выбрать несколько целей, но они не должны размывать основное сообщение лендинга. Например, после достижения цели «Оформление заказа» можно добавить дополнительную «Подписаться на рассылку».
Определяем целевую аудиторию: что для нее важно
Привлекательность страницы зависит от того, насколько она соответствует потребностям и интересам потенциальных клиентов. Поэтому нужно проанализировать аудиторию, а сделать это можно следующими способами.
- Опросить менеджеров по продажам, операторов колл-центра — людей, которые непосредственно общаются с клиентами.
- Проанализировать данные из сервисов статистики Яндекс Метрика и Google Analytics: кто посещает сайт, какие действия выполняют и т. д.
- Изучить подписчиков в соцсетях. В этом помогут парсеры TargetHunter, Pepper.Ninja или другие.
- Провести интервью с представителями ЦА, опросы, фокус-группы.
Целевая аудитория неоднородна, поэтому ее сегментируют — разделяют на более узкие группы. Например, фитнес-центр посещают спортсмены, новички, женщины с целью похудеть — все это сегменты аудитории. Лучше выбрать одну группу ЦА, так проще закрывать потребности. Если сегментов несколько, на странице выделяют общие элементы, которые будут интересны каждому, и добавляют персонализированные блоки.
Анализ конкурентов
Перед созданием лендинга изучают конкурентов: оффер, гарантии, социальные доказательства, тактики. Интересные решения можно улучшить и адаптировать под себя, а слабые места сделать конкурентными преимуществами.
Текст для лендинга
На странице лендинга должен быть сильный текст, который вызовет интерес к продукту и доверие к компании. Сделайте акцент не на свой бизнес, а на клиента: зачем ему нужен товар или услуга, какие выгоды получит. Также учитывайте «температуру» аудитории: сформирована ли потребность или это пока этап знакомства с продуктом.
Заказать тексты для лендинга можно в PromoPult. Через три рабочих дня вы получите тексты с описанием вашего продукта, компании, бизнеса строго по ТЗ, оптимизированные под требования поисковых систем. ТЗ можете составить самостоятельно или доверить специалистам PromoPult. Стоимость — 250 рублей за 1000 знаков, включая профессиональную редактуру.
Составляем блоки лендинга и продумываем структуру
Для лучшего восприятия текст разделяют на блоки. Универсального шаблона тут нет, структура зависит от вашей стратегии. В начале самое важное, далее дополнительная информация, которая поможет совершить целевое действие. Приведем стандартную структуру продающей страницы, ее можно менять под свои задачи.
Header (шапка сайта)
В шапке сайта располагают данные о компании: название, логотип, слоган, контакты для связи. Если лендинг объемный, делают меню навигации, чтобы посетитель сразу смог перейти к нужной части.
Первый экран
У первого экрана самая ответственная задача — произвести впечатление и заинтересовать клиента. Он состоит из ключевой информации о продукте и выгодах.
- Заголовок и подзаголовок. Кратко передайте основное сообщение страницы: суть продукта и оффер. В подзаголовке раскройте предложение более детально. Исходите из потребностей аудитории и добавляйте больше конкретики, например, вместо «быстро запустим интернет продажи» лучше написать «запустим интернет продажи за 7 дней».
- Призыв к действию (CTA-кнопка). Четко сформулируйте, что должен сделать посетитель: «Записаться на пробный урок», «Получить бесплатную консультацию» или «Заказать товар». Этот блок используют несколько раз: на первом экране, в средней части и в конце. Ведь посетитель может решить совершить целевое действие на любом этапе просмотра страницы.
Описательная часть
Расскажите о продукте подробнее: выделите особенности, сценарии использования, выгоды для клиента, добавьте привлекательные фото.
Чтобы продемонстрировать преимущества или рассказать о сложных продуктах, используйте инфографику или видео.
Укажите цену, ведь большинство людей не захотят тратить время на ее выяснение и общение с менеджером. Если услуги индивидуальны и определить стоимость сложно, разместите тарифы, по которым она рассчитывается. Усилить блок поможет скидка или акция с ограничением времени. Если продаете что-то дорогое и нужно максимально «разогреть» аудиторию, цену лучше добавить в конце страницы.
Социальные доказательства и блоки доверия
Убедить посетителей, что ваш продукт и компания заслуживают доверия, помогут следующие блоки.
- Отзывы. Все еще работают, но они должны выглядеть «живыми». Интересное решение — оформить их, как истории клиентов.
- FAQ (Часто задаваемые вопросы). Ответьте на вопросы, которые чаще всего задают покупатели.
- Кейсы. Продемонстрируйте примеры работ. Это можно сделать в виде краткого рассказа, наглядной демонстрации результата, фото до и после.
- Процесс работы. Расскажите, как работаете с клиентами, как выполняете услугу или производите продукцию, покажите этапы.
- Фото команды. Актуально, если продаете услуги. Только не берите стоковые фото, используйте реальные.
- Клиенты и партнеры. Если сотрудничали с известными компаниями, расскажите об этом, разместив логотипы.
- Гарантии, сертификаты, лицензии, дипломы — все это подтверждает качество продукта, компетентность и надежность компании.
Footer (подвал сайта)
В футере размещают контакты, логотип компании, юридическую информацию, кнопки социальных сетей. Если у вас есть офис, добавьте схему проезда, это вызовет больше доверия и поможет пользователям быстро вас найти.
Создание прототипа: обзор инструментов
Разработка лендинга начинается с прототипа — чернового наброска. Его можно сделать от руки на бумаге или в специальных программах.
Wireframe.cc
Подойдет для создания простых прототипов. На экране только рабочее пространство и ничего лишнего. Чтобы добавить блок, выделяем нужную область и выбираем объект (текст, список, кнопку, иконку). Wireframe можно пользоваться бесплатно, стоимость премиум версии — от $9 в месяц.
InVision App
В этом сервисе можно создавать интерактивные прототипы. Есть инструмент для векторного рисования, копирования компонентов, создания анимации и других визуальных эффектов. Можно добавить пользователей, чтобы работать совместно. Есть бесплатная версия и платные — от $4 в месяц.
NinjaMock
В NinjaMock тоже много функций и есть векторный редактор. Отличительная особенность сервиса — макеты выглядят как наброски, нарисованные от руки. Стоимость — от $5 в месяц, один прототип — бесплатно. Все проекты сохраняются в личном кабинете, можно открывать доступ к ним, дублировать, скачивать.
Draftium
Здесь можно создать прототип на основе шаблона: выбираем подходящий и редактируем под себя. Есть большая библиотека иконок и изображений. Три прототипа — бесплатно, профессиональный тариф — от $99 в год.
Moqups.com
Можно создать прототип с нуля или по шаблону. Много опций и хороший выбор готовых элементов: фигур, кнопок, схем, форм. Интерфейс кажется перегруженным, но на самом деле все просто: слева меню выбора элементов, справа меню для их настройки. Один прототип — бесплатно, платный тариф — от $9 в месяц.
Создаем дизайн
На основе прототипа делают дизайн-макет — графическое представление сайта в цвете. На этом этапе подбирают цветовую схему, шрифты, графику. Но обычно дизайн делают в соответствии с корпоративным стилем компании, чтобы улучшить восприятие и узнаваемость бренда.
Шрифт
Шрифт передает настроение лендинга, например, для фитнес-клуба подойдет что-то энергичное, для ювелирного магазина — утонченное и элегантное. Если выбрать шрифт сложно, используйте нейтральный, например, Roboto или Open sans, они подойдут большинству проектов. Скачать шрифты можно в Google Fonts или других библиотеках.
Цвет
Цвет вызывает определенную ассоциацию: белый — это чистота, синий — спокойствие и безопасность, зеленый — рост и свежесть. Правильные сочетания усилят воздействие лендинга на посетителей. Стоит выбрать 2–3 основных цвета, чтобы не перегружать страницу.
Графика
Картинки помогают продавать, поэтому используйте их. Добавьте фото продукта с разных ракурсов, а также фоновые изображения, которые дополнят текст. Не забудьте про иконки и символы, с их помощью можно выделить ключевые элементы и направить взгляд посетителей к важным кнопкам и формам.
Верстка лендинга
Когда дизайн-макет готов и согласован, приступаем к разработке сайта. Для этого выбирают систему управления контентом или верстают лендинг вручную.
Выбираем систему управления контентом
Изготовить лендинг проще всего в конструкторах и CMS. Так называют программные обеспечения с набором готовых решений. Сайт собирают из блоков и настраивают. Подобных систем сейчас много, перечислим несколько подходящих вариантов.
Конструктор Tilda
В этом конструкторе более 550 шаблонов, на основе которых проектируют интерфейс. Есть пустой блок (Zero Block) для разработки страницы с нуля. На сайте Tilda много информации, как работать с конструктором, один простой лендинг можно сделать бесплатно. Платные тарифы — от 500 рублей.
Конструктор uKit
На uKit гибко настраивается каждый элемент лендинг пейдж сайта. Здесь понятный интерфейс и удобный визуальный редактор — разобраться легко. Конструктор платный, стоимость — от 9 у.е./ месяц, есть скидки при оплате сразу за несколько месяцев.
CMS WordPress
Любую тему на WordPress можно менять практически до бесконечности и таким образом делать уникальный дизайн, но для этого потребуются навыки работы с кодом. С CMS разобраться сложнее. Новичкам рекомендуем установить плагин визуального конструктора Elementor или другой подобный, он облегчит создание сайта. Стандартный функционал плагина бесплатный.
Ручная верстка
Этот способ требует глубоких знаний в программировании. Готовый макет переводят в HTML и CSS код и интегрируют в CMS. Обязательно делают адаптивный дизайн, чтобы страницы корректно отображалось на разных устройствах. Ручную верстку используют, когда требуется нешаблонное оформление или нестандартный функционал.
Выбираем домен
Домен — имя сайта в интернете, которое отображается в адресной строке браузера. Найти и купить свободный можно у регистраторов доменных имен (Рег.ру, Timeweb.com). На этих же ресурсах приобретаем хостинг. Совет — выбирайте информативное и легко запоминающееся имя, отражающее суть продукта или бренда.
Добавляем дополнительные инструменты
Добавьте виджеты и настройте интеграции, чтобы сделать страницу более эффективной.
Онлайн чат
В онлайн чате можно быстро решать вопросы пользователей и собирать контакты для дальнейшего взаимодействия. Установить и настроить чат можно с помощью сервисов Jivo, LiveChat, Envybox, GetSale и подобных.
Пример онлайн-чата Jivo
Обратный звонок
Некоторые вопросы проще решать голосом, а не по переписке, для клиента звонок будет бесплатным. Обратный звонок есть в сервисах Jivo, Calltouch, Envybox, CallbackHunter и других.
Установка счетчика Яндекс Метрики или GA
Чтобы анализировать и улучшать лендинг, подключите его к Яндекс Метрике или Google Analytics. Оба сервиса генерируют подробные отчеты по поведению посетителей, источникам трафика и конверсиям. Данные помогут понять, как оптимизировать страницу, чтобы получать больше лидов.
Чтобы всё правильно настроить, воспользуйтесь гайдами PromoPult по установке Яндекс Метрики и Google Аналитики.
Тестируем и проверяем лендинг пейдж
Проверьте и протестируйте сайт. Если какой-то функционал не работает, едет верстка или страница долго загружается, это может снизить конверсию. Не у всех в штате есть тестировщик, но страницу вполне можно проверить самостоятельно и попросить сделать это сотрудников. Важно не просто оценить внешний вид, но и заполнить заявку, написать в онлайн-чат, заказать обратный звонок, отправить сообщение на email или в мессенджер.
Проверка текста
Вычитайте текст: грамматические ошибки и опечатки поставят под сомнение экспертность и снизят доверие к бренду. Для проверки текста можно использовать сервисы:
- Орфограммка, LanguageTool — пунктуация, орфография, стилистика.
- Грамота.ру — проверка правописания слов и синтаксиса.
- Тургенев, Главред — оценка качества текста.
Проверьте также отображение контента. При неправильной верстке возникают разрывы слов, пропущенные абзацы и другие проблемы.
Проверка адаптивности
Сайт должен корректно отображаться на разных устройствах. Проверить можно вручную с разных экранов или в сервисах Google Mobile-Friendly Test и Adaptivator.
Если не получается адаптировать какой-нибудь блок, сделайте два одинаковых и каждый настройте отдельно для выбранного экрана. При этом один блок скройте на ПК, второй — на мобильных устройствах.
Проверка кнопок
Убедитесь, что кнопки:
- кликабельны;
- ведут на правильные страницы или выполняют ожидаемые действия (например, отправку формы);
- совместимы с разными браузерами.
Проверка форм заявки
Заполните форму самостоятельно и проверьте, есть ли необходимые метки. Отправьте заявку и убедитесь, что она доставлена. Если сайт интегрирован с CRM, посмотрите, попала ли заявка в систему.
Продвижение страницы
Основные способы продвижения лендинга — контекстная, таргетированная реклама, инфлюенс-маркетинг (нативные интеграции с блогерами). Если товар новый на рынке и конкуренция низкая, попробуйте SEO — поисковую оптимизацию. Для этого настройте файл robots.txt для лендинга, метатеги, соберите семантику — более подробно про SEO-продвижение landing page писали в этой статье.
SEO, контекстную рекламу в Яндексе и таргетированную рекламу в ВКонтакте можно быстро настроить в едином кабинете PromoPult. В нем понятный интерфейс и подсказки на каждом этапе. Умные алгоритмы берут на себя самые трудозатратные процессы — подбор ключевых слов, генерацию объявлений, подбор креативов, управление ставками. Это экономит рекламный бюджет и время на запуск кампаний. Результаты наглядно отображаются на интерактивном дашборде. Еще одно преимущество платформы — бесплатная маркировка рекламы. Мы сами получаем токены и вовремя формируем отчетность, вам нужно просто заполнить специальные поля в интерфейсе.
Используйте лендинг, чтобы достигать поставленных бизнес-целей и получать продажи.
