Подайте заявку на открытие ИП до 31 октября и получите 6 месяцев бесплатного обслуживания. Подробнее

Новости в телеграме

Будьте в курсе событий бизнеса

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

Подписываясь на рассылку, вы соглашаетесь с политикой конфиденциальности
Бизнес с нуля Редактор: Фади Кики

Как сделать сайт, который поможет повысить продажи

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

Иван Морозов

Иван Морозов

Дизайнер конструктора сайтов Тинькофф

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

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

Эта статья — подробный конспект вебинара «Как сделать сайт, который поможет повысить продажи». Если вам больше нравится смотреть, чем читать, — запись вебинара доступна на нашем канале на Ютубе.

Смотреть на канале

Подготовка: определите боли клиентов и сформулируйте пользу

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

Кратко о проверке гипотез — в инструкции «Как создать микролендинг»

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

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

Чтобы найти боли клиентов, можно поговорить с ними, изучить сайты конкурентов, запускать и тестировать разные варианты страниц

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

Чем точнее получится раскрыть пользу от товара или услуги, тем охотнее клиент согласится на покупку

Выберите конструктор сайтов

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

Конструктор — это программа, в которой вы собираете сайт из готовых блоков, как лего. Все основные элементы сайта уже готовы, поэтому вам не обязательно уметь программировать или работать с дизайном. Самые популярные конструкторы — Tilda, Readymag, WordPress.

Еще вы можете создавать сайты в конструкторе Тинькофф

Он не только простой, но еще и заточен под задачи бизнеса: собирает заявки, отправляет уведомления о заказах, принимает онлайн-оплату.

Конструктор сайтов Тинькофф
Tinkoff конструктор
Главный экран конструктора сайтов Тинькофф. Выбираете готовый шаблон страницы, расставляете блоки и наполняете их информацией

Разместите меню сайта

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

Классическое меню сайта состоит из логотипа, нескольких ссылок и кнопки.

 Меню сайта, сделанное на конструкторе Tinkoff
Сайт мастерской Василия Мартынова, сделан на конструкторе Тинькофф. В самом верху — меню сайта с логотипом, тремя ссылками и кнопкой

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

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

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

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

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

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

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

 Меню со ссылками на сайте «Мастерская Мартынова»
У мастерской три ссылки: «О мастерской», «Сколько стоит?» и «Контакты». Лучше не использовать в ссылках вопросительный знак, поскольку кажется, что мы задаем вопрос клиенту или сами себе

Делайте ссылки самодостаточными, чтобы они читались максимально хорошо в отрыве от всего сайта. Например, ссылка «Сколько стоит?» несамодостаточная: непонятно, о чем именно идет речь. Вроде бы мелочь, но чем чаще клиенту придется останавливаться и додумывать смысл, тем быстрее он устанет от сайта.

Несамодостаточная ссылка может вызвать комичный эффект. Например, если поставить ссылку «Сколько стоит?» сразу после логотипа, клиент может прочитать так: «Мастерская Мартынова — сколько стоит?». Клиент в конце концов разберется, но ему придется напрягаться.

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

Из названия ссылки должно быть понятно, о чем раздел

Представьте, что ссылка — это вывеска над полкой магазина. В магазине есть «Овощи», «Фрукты», «Мясо» — здесь все понятно. А бывает, что есть вывеска «Сопутствующие товары». Что это за товары — непонятно, приходится подходить к полке и всматриваться в каждый товар.

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

Чтобы помочь клиенту сориентироваться, используйте в ссылках сами названия товаров и услуг. Если продаете запчасти, так и пишите: «Шины», «Масло», «Диски». Если товаров много, можно сделать рубрики: «Для легковых автомобилей», «Для грузовиков».

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

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

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

Разместите обложку

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

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

Классическая обложка состоит из трех элементов:

  • заголовка и подзаголовка;
  • иллюстрации;
  • кнопки.

Добавьте заголовок и подзаголовок. Заголовок помогает понять, как называется товар или услуга, а подзаголовок — какая от них польза.

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

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

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

 Заголовок с точным позиционированием на странице сайта
Заголовок с максимально точным позиционированием — для клиентов, которые хотят отремонтировать объективы фотоаппарата Sony

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

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

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

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

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

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

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

Не ставьте на сайт иллюстрации из Яндекса или Гугла. Они помогают найти интересную идею, но если их поставить на сайт, то автор может обратиться в суд.

Авторские права — ст. 1255 ГК РФ

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

Полезные инструменты для создания сайта

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

Кнопка с призывом к действию
У мастерской Мартынова по кнопке можно узнать стоимость ремонта. Цвет кнопки такой же, как у логотипа и иллюстрации

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

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

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

Расскажите о товарах и услугах

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

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

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

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

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

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

Чтобы рассказать о товаре, используйте сценарии использования

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

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

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

Говорите о пользе для клиента

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

Чем сильнее у клиента боль, тем больше вероятность, что он согласится на покупку

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

Как рассказать на сайте о преимуществах компании
У мастерской Мартынова понятная польза и аккуратно оформленный текст. Каждый пример доказывает тезис в заголовке — «С нами удобно»

Пробуйте разные форматы

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

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

Расскажите о компании

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

Как понять, что у вас слабый текст о компании

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

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

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

Как рассказать о компании
Вроде история про компанию, но на самом деле — про выгоды для клиента

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

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

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

Расскажите о сотрудниках

Рассказ о сотрудниках повышает доверие: клиент видит, что с ним работают настоящие люди. Он еще не позвонил, но уже заочно с вами познакомился.

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

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

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

Добавьте отзывы клиентов

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

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

Почему важно размещать отзывы клиентов на сайте
У мастерской Мартынова хорошие отзывы: клиенты больше доверяют отзывам в соцсетях и на маркетплейсах. Каждый отзыв можно проверить

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

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

Разместите контактную информацию в конце сайта

Отметьте офис и пункты самовывоза на карте: клиент сможет территориально сориентироваться и проложить маршрут в навигаторе. Телефон и почта помогут быстро связаться.

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

Контактная информация: как оформить на сайте
Пример блока с контактной информацией. Хорошо, что количество строк одинаково по высоте: блок аккуратно смотрится

Продайте товар или услугу

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

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

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

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

Как выглядит классическая структура сайта

Вот стандартная структура сайта, которую вы можете взять за основу:

  1. Меню сайта.
  2. Обложка.
  3. Блоки с товарами и услугами.
  4. Рассказ о компании и клиентах.
  5. Отзывы.
  6. Контакты.
  7. Форма заявки или оплаты.
  8. Подвал сайта.

Бесплатный конструктор сайтов Тинькофф

Создавайте сайты без разработчиков и дизайнеров:

  • сайты-визитки за пару минут;
  • интернет-магазины с онлайн-оплатой и промокодами;
  • микролендинги для Инстаграма и других соцсетей;
  • не нужен счет в Тинькофф Бизнесе.
Подключить

Сейчас читают

Безакцептное списание денег с расчетного счета

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

Как использовать факсимильную подпись

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

Тинькофф Бизнес защищает персональные данные пользователей и обрабатывает Cookies только для персонализации сервисов. Запретить обработку Cookies можно в настройках Вашего браузера. Пожалуйста, ознакомьтесь с Условиями обработки персональных данных и Cookies.

Чтобы скачать чек-лист,
подпишитесь на рассылку о бизнесе

После подписки вам откроется страница для скачивания

Подписываясь на рассылку, вы соглашаетесь с политикой конфиденциальности

[popup_uchebnik_ip]

[popup]