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

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

Ценовая политика веб-студий. Не каждый может легко расстаться с суммой в 500–1000 долларов за одностраничник, особенно, если бизнес молодой. Желание вникнуть в работу и сделать свой лендинг самостоятельно. Многим предпринимателям это действительно интересно.

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

Этапы разработки landing page. как сделать посадочную страницу самому

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

Сбор данных

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

Анализ

После этого информацию о найденных предложениях анализируют. Также на этом этапе проводится сборка ядра поисковых запросов. Для этого мы используем Yandex Wordstat, Google Keywords Planner или специальные программы. Полученный перечень запросов структурируется и сегментируется, после чего наиболее релевантные запросы снова используются для поиска конкурентов в нише.

Здесь важно не быть пристрастным: собственный продукт, как собственный ребенок, для вас лучше всех. Постарайтесь здраво оценить, насколько хорошо landing pages сделаны у конкурентов. Создайте критерии, по которым потом сможете поставить оценку, в том числе — самому себе.

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

УТП и преимущества

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

Плохой пример:

«Хотите привнести в свой дом неповторимый дух загадочной Франции. Действует гибкая система скидок!»

Хороший пример:

«Продаем и монтируем натяжные потолки от французского производителя в Киеве и области. –10% на каждую вторую комнату».

Когда УТП готово, сядьте и напишите:

список своих преимуществ (хотя бы 10 пунктов; пошаговый план выполнения заявки; перечислите клиентов или проекты, которыми особенно гордитесь; отберите отзывы, награды, публикации в СМИ; оттметьте, с какими производителями, поставщиками и партнерами ведете дела; выделите из них тех, с кем сотрудничаете только вы; соберите визуальные элементы: фотографии рабочего процесса и результатов, видео, графики и схемы.

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

«Высокая надежность» — нет.

«Дополнительные 2 года гарантии» — да.

Конкурентные акции

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

У вас есть потолки специально для детских комнат? Отлично! «Потолки в детскую –30%!» И кнопка: «Получить детский каталог». Да, эта акция не рассчитана на всех, она подходит только родителям, зато для них это действительно выгода, а не туманные обещания «гибкой системы скидок».

Прототипирование

Итак, информация собрана, проанализирована и структурирована. Теперь пришло время прототипа landing page. и я скажу, как создать его самому. Прототип — схема с прописанными деталями, правильно размещенными блоками, с отметками о фотографиях, видео и т. п.

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

Разложите элементы по порядку, пропишите в каждом пункте текст. Не забудьте создать thank you page — страницу, которую видит пользователь сразу после подписки. Там может быть ваше «спасибо» за действие клиента и пояснение следующего шага. Если кнопки и призывы разные, страница благодарности понадобится не одна.

Структура для landing page

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

1. Левый верхний угол: логотип с дескриптором. Дескриптор — короткое пояснение, чем занимается ваша компания. У нас такой: «Создание продающих сайтов».

2. Правый верхний угол: контактные данные, может быть кнопка «Заказать обратный звонок».

3. Первый разворот: УТП и главные преимущества.

4. Далее — форма захвата, куда пользователь вводит контактные данные. В форме захвата должен быть призыв, а кнопка обязательно должна выделяться. Сами поля для ввода данных могут размещаться непосредственно под кнопкой или же справа/слева от нее на странице (открытая форма), а могут открываться после нажатия: в новой вкладке или попапе (закрытая форма).

5. Разворот с кратким описанием механики вашей работы.

6. Фото-/видеогалерея или другая визуализация результатов.

7. Еще преимущества: дополнительные гарантии, возможность получить индивидуальные условия, уникальные материалы и технологии и т. п.

8. Отзывы или публикации в СМИ.

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

Если у вас не хватает информации для какого-то блока — пропустите его. Есть лендинги, которые состоят из одного-двух экранов, и они продают.

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

Дизайн и верстка

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

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

Если хотите более оригинальную картинку, можно нанять дизайнера (например, фрилансера). Прототип — уже практически готовое ТЗ для него. Чтобы точно получить то, что задумывалось, подготовьте примеры дизайна, которые вам нравятся.

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

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