Запустить email-рассылку Создайте письмо за 15 мин
Советы

Как сделать хороший лендинг. Самое важное в одной инструкции

О чем писать. Как создать прототип. В каких сервисах собирать.

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

Пока вы будете проводить исследования и досконально изучать аудиторию, кто-то по-быстрому склепает лендинг в конструкторе и заберёт клиентов.

Тратить кучу времени, чтобы с первого раза сделать самую лучшую посадочную страницу, бессмысленно:

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

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

Определяем цель 

Прежде чем делать лендинг, надо понять, для чего он вам нужен. 

Основные цели лендинга:

  • Продать. Самый сложный вариант, который используется редко. Клиент нажимает на кнопку и сразу переходит на страницу с оплатой. Сделка закрывается без дополнительного взаимодействия с клиентом. Подходит для недорогих понятных сервисов, а также платных рассылок.  
  • Принять заказ. Посетитель оставляет заявку на продукт и превращается в лид. Далее с ним работают специалисты отдела продаж или клиентского отдела. 
  • Получить контакты. Такие лендинги ещё называют лид-магнитами. Посетитель бесплатно получает какой-то ценный контент в обмен на email и/или телефон. Далее человек конвертируется уже с помощью рассылок, а иногда и звонков. 

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

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

Совет

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

Собираем информацию

Продающий лендинг нельзя сделать совсем без подготовки. Такой сайт получится оторванным о реальности и не принесёт результата. А придумывать его будет сложнее.

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

Изучаем сайты конкурентов

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

Зачем анализировать конкурентов:

  • будете представлять, какие блоки нужны на вашем лендинге;
  • сможете понять, как выделиться на фоне остальных;
  • подсмотрите какие-то интересные решения.

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

Результаты анализа занесите в таблицу:

Название компании Рога и копыта
Сайт конкурента www.***.ru
Преимущества продукта Доставка за 2 дня

Собственное производство

Основные блоки Преимущества

Схема работы

Отзывы

Что понравилось Уникальные иллюстрации
Что не понравилось Мало конкретики, много воды
Идеи Подумать, стоит ли использовать иллюстрации вместо фото

Совет

Даже если вам известны основные конкуренты, не поленитесь проверить, какие ещё сайты выдаёт поиск по соответствующим запросам. Также поищите похожие предложения в соцсетях.

Анализируем целевую аудиторию

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

Если у вас уже есть клиенты, покопайтесь в голове и поищите там ответы на вопросы:

  • Что люди спрашивали перед покупкой?
  • В чем сомневались?
  • По каким причинам отказались покупать?
  • Насколько им понравилось и что именно?
  • Что не понравилось и почему? 

Если на какие-то вопросы не знаете ответов, позвоните 4—5 клиентам и уточните. 

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

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

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

Совет

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

Пишем текст

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

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

О чём писать

Обычно лендинг состоит из таких логических блоков:

  • оффер, или УТП (уникальное торговое предложение);
  • преимущества продукта;
  • процесс работы;
  • отзывы/список клиентов;
  • рассказ о компании и сотрудниках;
  • цена;
  • отработка возражений, ответы на популярные вопросы (FAQ).

Это основные блоки информации, которые используют в большинстве случаев. Всё остальное зависит от продукта и целевой аудитории.

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

Совет

Писать и редактировать текст для лендинга удобнее в текстовом редакторе. Я пользуюсь Google Docs, потому что так могу работать и с телефона, и с ноута, а также подключать к согласованию и редактированию любое количество человек.

Основные принципы копирайтинга

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

Ясный текст — это:

  • короткие предложения (7—8 слов);
  • простые конструкции (чем меньше запятых и двоеточий, тем лучше);
  • слова, понятные целевой аудитории (если сомневаетесь, что слово известно читателю, замените на другое или поясните);
  • действительный залог (никаких «было сделано» или «ведётся разработка»);
  • подзаголовки для каждого раздела (не забывайте называть блоки информации, чтобы посетителю было легко ориентировать в тексте).
Вы что-нибудь поняли из этого текста про онлайн-образование? Я нет. Проблем много. Это и сложные предложения по 20 слов с причастными оборотами, и пустые выражения типа «кратный рост», и отглагольные существительные
Вы что-нибудь поняли из этого текста про онлайн-образование? Я нет. Проблем много. Это и сложные предложения по 20 слов с причастными оборотами, и пустые выражения типа «кратный рост», и отглагольные существительные

Опирайтесь на факты. Проверьте, чтобы все ваши утверждения о продукте не были голословными. Слова типа «качественный», «уникальный», «высококвалифицированный» требуют конкретных доказательств. Однако и тут не стоит забывать про ясность. Факты убеждают, только если они в мире читателя и опираются на его чувственный опыт. Вместо «влагозащита по стандарту  IEC 60529» лучше написать «с телефоном можно нырять на глубину до 4 метров на полчаса».

Ребята не просто «гарантируют качество», а дают конкретное обещание: «переуберем, если работа вас не устроит»
Ребята не просто «гарантируют качество», а дают конкретное обещание: «переуберем, если работа вас не устроит»

Самое важное — на первый экран. По исследованиям Nielsen Norman Group, 80% времени на сайте посетители рассматривают первый экран. А некоторые и вовсе дальше не скроллят. Поэтому оффер лучше разместить в заголовке лендинга. Расскажите в нескольких словах, что предлагаете и почему это стоит внимания.

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

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

Длинный vs короткий лендинг

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

Размер лендинга зависит от:

Цели. Оставить почту в обмен на что-то ценное многие готовы, лишь бегло ознакомившись с предложением. А вот если просят заплатить кому-то деньги, хочется знать всё ОТ и ДО.

Продукта и его стоимости. Чем сложнее и дороже продукт, тем длиннее нужен лендинг, чтобы обосновать цену. Об очных курсах или крутом смартфоне мы хотим получить больше информации, чем о каком-нибудь дешёвом и простом сервисе.

Осведомленности аудитории. Если посетители лендинга знакомы с компанией или продуктом, их убедит и более короткий сайт. Популярный пример про Ренда Фишкина и его компанию MOZ (программное обеспечение для SEO). Увеличив лендинг в 6 раз, компания повысила конверсию на 52%. Однако в дальнейшем, когда MOZ приобрела мировую известность, маркетологи снова сократили длину сайта.

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

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

Рисуем прототип

Прототип — схематичный рисунок лендинга. Он показывает длину сайта и то, что у него внутри: где расположен текст, где форма, а где картинки.

Есть специальные программы для создания прототипов. Но если вы не занимаетесь этим профессионально, проще и быстрее нарисовать прототип от руки. Для одностраничника этого достаточно.

Алгоритм создания прототипа

  1. Начните с первого экрана. Обозначьте обложку (изображение на первом экране), заголовок, подзаголовок, форму и кнопку (или только кнопку). 
  2. Нарисуйте столько секций, сколько блоков в тексте, и подпишите их справа.
  3. Наполните содержанием каждый блок. Если возникнут трудности, ещё раз просмотрите подобные разделы у конкурентов или даже на других лендингах.

Прототип легко поместится на листе А4, если не делать его широким. Чтобы оценить, насколько логично и удобно представлена информация на лендинге, хватит и 5 см.

Фрагмент прототипа
Фрагмент прототипа для примера. Из меня тот ещё художник. Но, думаю, суть понятна
Фрагмент прототипа

Совет

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

Основные принципы

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

По-моему, ребята слишком буквально поняли принцип «всё важное — на первый экран»
По-моему, ребята слишком буквально поняли принцип «всё важное — на первый экран»
А этот скриншот скорее напоминает кусок статьи, чем часть лендинга, продающего курсы английского языка
А этот скриншот скорее напоминает кусок статьи, чем часть лендинга, продающего курсы английского языка
И, наконец, ничего лишнего. Заголовок, подзаголовок, обложка и кнопка
И, наконец, ничего лишнего. Заголовок, подзаголовок, обложка и кнопка

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

Интересное решение. Описание услуги оформлено в виде подписей на фото. Получилось просто и наглядно
Интересное решение. Описание услуги оформлено в виде подписей на фото. Получилось просто и наглядно

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

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

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

Создаём лендинг

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

Подробный обзор конструкторов — отдельная тема, поэтому здесь лишь перечислю самые популярные сервисы:

  • uKit (есть бесплатный тестовый период);
  • Tilda (есть бесплатная версия с ограниченным функционалом);
  • Wix (бесплатный конструктор);
  • Nethhouse (есть бесплатная версия с ограниченным функционалом);
  • LPgenerator (есть бесплатный тестовый период).

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

Преимущества конструкторов

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

Быстро. Сайт в конструкторе реально сделать за 1—2 дня. Не надо тратить время, чтобы искать специалистов, объяснять задачу, согласовывать дизайн, регистрировать хостинг. Да и любые изменения вносить гораздо быстрее. 

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

Совет

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

Основные принципы

В конструкторе создать лендинг просто, особенно если знаешь базовые правила дизайна.

Избегайте визуального шума. Старайтесь не отвлекать посетителя от сути предложения:

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

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

Пустое пространство занимает большую часть экрана и помогает сосредоточиться на форме в центре
Пустое пространство занимает большую часть экрана и помогает сосредоточиться на форме в центре

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

Форму разместили на яркой подложке, в то время как весь остальной сайт сделан на белом фоне
Форму разместили на яркой подложке, в то время как весь остальной сайт сделан на белом фоне

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

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

Тестируем

Готовый лендинг тестируют перед запуском. Прежде всего проверяют:

Скорость загрузки. По исследованиям Gomez, типичный онлайн-покупатель ожидает, что страница загрузится за 2 секунды или быстрее (в 2006 году люди были терпеливее и ждали 4 секунды). Через три секунды 40% людей закроют сайт и пойдут дальше. Если не хотите потерять клиентов, заранее проверьте скорость загрузки в сервисе Google PageSpeed Insights.

Сервис измерит скорость и даст рекомендации, как ускорить загрузку страницы
Сервис измерит скорость и даст рекомендации, как ускорить загрузку страницы

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

Проверка оптимизации сайта для мобильных устройств
Проверка оптимизации сайта для мобильных устройств

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

Представьте, что вы проделали всю эту работу и, наконец, запустили лендинг. Теперь у вас есть сайт, но всё ещё нет клиентов. Сама по себе страница бесполезна. Чтобы лендинг стал продающим вам предстоит:

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

Как сделать лендинг с нуля за 6 шагов. Чек-лист

  1. Определите цель лендинга. Вы хотите продавать, получать заказы или собирать контакты.
  2. Изучите сайты конкурентов и целевую аудиторию. Если клиентов пока нет, сосредоточьтесь на анализе конкурентов.
  3. Напишите ясный текст. Суть предложения поместите в заголовок и подзаголовок на первом экране. Любые утверждения подкрепите фактами из мира читателя. 
  4. Нарисуйте прототип, следуя принципу «один экран — одна мысль». Продумайте, где разместить картинки, видео, кнопки. Определите, какие куски текста можно заменить на визуальные материалы. Не забудьте про футер и шапку. 
  5. Изучите возможности конструкторов и соберите лендинг в том сервисе, который подойдёт больше других. Избегайте визуального шума и не лепите всё в одну кучу. Используйте реальные фотографии и покажите, какая информация самая важная.
  6. Протестируйте лендинг перед запуском. Проверьте скорость загрузки, понятность и корректность отображения на мобильных.

Комментарии