Как создать одностраничный сайт

Рассказываем, что такое одностраничник, чем отличается от лендинга и как сделать одностраничный сайт на конструкторах и CMS.

Мы писали эту статью вместе с Михаилом Новокшеновым, ведущим SEO-специалистом Dokia.ru.

Что такое одностраничный сайт, лендинг и сайт-визитка

Одностраничный сайт — это сайт, который состоит из одной страницы.

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

Лендинг — это коммерческая страница, посвященная продукту или услуге, которая может являться частью многостраничного сайта.

Функционально одностраничник и лендинг могут выполнять роль и полноценного сайта, но с некоторыми нюансами:

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

• технически посетитель будет просматривать только одну страницу ресурса.

Сайт-визитка — это небольшой сайт, который состоит из одной веб-страницы с информацией о компании или человеке.

Что сделать до создания сайта

Несколько подготовительных шагов перед тем, как приступить к работе.

Обозначить цели

Ответьте себе на несколько вопросов:

1. Как люди будут использовать ваш одностраничник?

2. Какую информацию вы хотите дать людям с помощью сайта?

3. Что будет на сайте? Текст, товары, форма сбора контактов?

4. Будет ли сайт вести на ещё какую-то страницу?

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

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

Определить целевую аудиторию (ЦА)

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

От того, какая у вас ЦА, будет зависеть многое: стиль оформления лендинга, стиль текста.

3 способа безошибочно определить целевую аудиторию

Изучить конкурентов

Посмотрите, как устроены одностраничные сайты конкурентов: как они оформлены, какая установлена стоимость на товары/услуги, как расположены блоки.

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

Как делать сравнительный анализ конкурентов в ТОПе — рассказываем в нашем бесплатном курсе по базовому SEO.

Выбрать инструмент для создания одностраничника

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

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

Ещё несколько популярных сервисов для создания одностраничника:

• Wix, Readymag — хорошо подходят для создания портфолио.

• uKIT, LPGenerator — подойдут бизнесу для создания лендингов.

Крупные CMS — UMI.CMS, Wordpress и прочие — тоже имеют отдельные предложения по созданию лендингов. Делать сайт нужно будет через плагины. Есть даже бесплатные, например Elementor у Wordpress. Чаще всего такие плагины имитируют конструктор сайта.

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

Продумать юридическую сторону

Следует обратить внимание на две вещи:

1. Сookie‑файлы. Нужно уведомить пользователей, если вы собираете информацию об их поведении в браузере: cookie‑файлы, IP‑адреса, геоданные.

Уведомления о сборе куки‑файлов нужны на всех сайтах, не только на одностраничниках. Обычно делают стандартное предупреждение: «Используя наш сайт, вы соглашаетесь на сбор и обработку данных cookie…». Но можно написать и более человеческим языком. Например:

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

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

Если не сделать этого, можно нарушить закон о персональных данных.

Как создать одностраничник: шаблон

В зависимости от продукта лендинг может иметь разное количество блоков. И чем сложнее или дороже продукт, тем больше разделов на нём обычно присутствует, так как необходимо рассказать обо всех преимуществах товара.

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

Представление (первый экран)

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

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

Какие элементы должны быть на первом экране:

• Призыв к действию — фраза, которая мотивирует пользователя совершить целевое действие.

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

• Демонстрация продукта, фото, видеообзор — всё, что может вызвать доверие пользователя.

Демонстрация продукта на первом экране хорошо проработана у Apple. На их сайте можно подсмотреть идеи. Например, на первом экране лендинга об AirPods компания демонстрирует продукт с помощью видео:

Знакомство с продуктом

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

Определите, какие проблемы пользователь может решить с помощью продукта, расскажите, какими характеристиками этот продукт обладает.

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

Работа с возражениями

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

• «Это ненадёжная компания» — размещаем отзывы реальных клиентов с фотографиями.

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

• «Не знаю, как использовать продукт» — фотографии, видеообзоры, на которых люди используют продукт в разных условиях.

Призыв к действию

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

• «Если оставите заявку сейчас, доставка по России за наш счёт».

• «Если товар не понравится или не подойдёт, вернём деньги в течение 30 дней».

• «Перезвоним через 5 минут».

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

Максим Ильяхов о том, как создавать промостраницы

Как проверить работу лендинга

Перед тем, как продвигать лендинг, проверьте, что все работает так, как задумано. Вот на что нужно обратить внимание:

1. Формы заявок. Отправьте тестовую заявку и проверьте, что всё дошло, как вы и задумывали.

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

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

4. Адаптивность. Посмотрите на свой лендинг с планшета и с телефона — все ли элементы помещаются в окно просмотра, удается ли взаимодействовать с элементами лендинга, нормальный ли размер шрифта. Если под рукой нет телефона и планшета, можно посмотреть на сайт через инструменты разработчика, эмулируя эти устройства. Чтобы открыть инструменты разработчика в Chrome, наберите Ctrl + Shift + I на Windows или Cmd+Opt+J на MacOS.

Что запомнить

1. Одностраничники — это проверенный и эффективный инструмент интернет‑продаж. Этот формат даёт более высокую конверсию по сравнению с обычным сайтом.

2. Одностраничник и лендинг — не совсем одно и то же. Лендинг может быть частью многостраничной структуры и чаще всего посвящён какому‑то отдельному продукту или услуге.

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

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

5. Сделать одностраничный сайт несложно. Для этого существует множество конструкторов и шаблонов. Также это можно сделать с помощью CMS, но на конструкторе проще.

6. Хоть сайт и небольшой, стоит продумать его юридическую сторону: указать, что вы собираете cookie‑файлы и персональные данные (если собираете).

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