Создание сайта для SaaS-продукта

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

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

Примеры подсказывают вкус. Структуру определяют ваш продукт и то, как вы продаёте.

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

Покупатель рано проверяет, подключается ли продукт к тому, чем команда уже пользуется: Slack, HubSpot, Salesforce, Zapier, Shopify — список зависит от продукта. Каждая интеграция — одна запись в CMS: название, логотип, категория, что и в какую сторону синхронизируется, в каких тарифах доступно, ссылка на инструкцию. Из этих записей сайт сам собирает каталог с фильтрами, отдельную страницу для каждой интеграции и блок на страницах функций. Разработчики выпустили новый коннектор — маркетолог добавляет одну запись, и страница появляется во всех языковых версиях. Записи без настоящего описания не публикуются, поэтому в каталоге нет страниц, где есть только логотип.

Продуктам с самостоятельной регистрацией и продуктам, которые продаёт отдел продаж, нужны разные пути, а многим нужны оба:

• триал: главная кнопка ведёт прямо в регистрацию в приложении, без лишней формы на сайте; выбранный тариф и метки кампании передаются дальше, и вы видите, откуда пришёл аккаунт
• демо: короткая форма — рабочая почта, размер команды, задача — и сразу календарь; слоты показываются в часовом поясе посетителя из Берлина или Нью-Йорка, а продажи видят их в своём
• оба пути: небольшие команды идут в триал, крупные — на звонок, по размеру команды или тарифу

Регистрации и заявки на демо считаются отдельно, поэтому видно, какая страница что приносит.

Лендинги SaaS для рекламных кампаний

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

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

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

• где хранятся данные клиентов и в каком регионе хостинг
• соглашение об обработке данных (DPA) по GDPR — скачать или запросить
• список субпроцессоров с целью и страной и то, как клиенты узнают об изменениях
• отчёты и сертификаты, если они есть, например SOC 2 или ISO 27001, с датой
• полное название компании, страна регистрации и адрес — закупщик проверяет, с кем подписывает договор

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

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

Команда думает по-русски, покупатель читает по-английски — и сразу узнаёт текст, переведённый с русского: длинные пассивные фразы, «allows to», абзацы, где функция описана раньше задачи. Английская версия пишется как оригинал, словами покупателя. Немецкий, испанский или польский добавляются под рынки, каждая версия со своими адресами страниц и hreflang. Русская версия имеет смысл, если вы продаёте в Казахстане, Грузии, Армении или Израиле. Тексты на английском, польском и русском пишу я, другие языки — носитель с вашей стороны. Мой сайт и сайт консультанта на 153 страницы работают на трёх языках; подход описан на странице разработка многоязычного сайта.

Tilda, Webflow и WordPress хороши для старта, но со временем страниц функций, интеграций и статей становятся сотни, языковые версии живут копиями страниц, а любое изменение шаблона приходится повторять вручную. Позиции в Google привязаны к адресам, поэтому переезд начинается со списка всех URL. Каждый получает 301-редирект на новый адрес, заголовки и микроразметка переносятся, статьи и кейсы превращаются в структурированный контент CMS, а редиректы проверяются на тестовой версии до переключения домена.

Так я перенёс сайт Джузеппе из Милана с WordPress на Next.js 16 и Sanity: 468 статей, редирект с каждого старого адреса, 44 рабочих дня до передачи. После запуска маркетолог публикует в Sanity страницы функций, кейсы и записи changelog с предпросмотром, а вёрстка остаётся защищённой. О самом стеке — на странице разработка на Next.js.

Шаблон SaaS-сайта или конструктор дают главную, таблицу тарифов и блог за несколько дней. Этого хватает, пока у продукта одна аудитория и короткий список функций; страницы сценариев, каталог интеграций, безопасность и языки потом приходится встраивать вопреки шаблону. Студия даёт команду — менеджера, дизайнеров, разработчиков — и подходит для большого ребрендинга с длинным согласованием. Я работаю один: продумываю структуру, рисую дизайн, пишу код, настраиваю CMS и техническое SEO, а вы говорите с тем, кто делает работу. Если у вас есть дизайнер, я собираю сайт по его макету в Figma.

Покупатели всё чаще спрашивают ChatGPT, Perplexity и обзоры от ИИ в Google: «CRM for real estate agencies with WhatsApp integration», «GDPR-compliant help desk for a 20-person team» — и получают короткий список. Нейросеть называет только то, что смогла прочитать, а сайты SaaS часто прячут именно эти факты: тарифы — в скрипте, интеграции — рядом логотипов, безопасность — в PDF. Поэтому тарифы и лимиты, интеграции, языки, регион хранения данных и соответствие GDPR записаны текстом, который отдаёт сервер, с микроразметкой SoftwareApplication и Organization и явными правилами для ИИ-краулеров в robots.txt. По тем же правилам сделан сайт Джузеппе, и его новые страницы уже появляются в ответах ChatGPT.

Как удерживать продукт в ответах нейросетей, объясняю на странице AI SEO и GEO-оптимизация, а регистрации и демо из поиска Google — на странице продвижение SaaS.

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

• Простой сайт для SaaS — главная, описание продукта, тарифы, о компании и контакты, кнопки регистрации и входа: 700–1 400 €.
• Полный сайт с шаблонами функций и сценариев, каталогом интеграций, триалом и демо, кейсами, страницей безопасности, документацией или changelog, языковыми версиями и CMS для маркетинга: от 2 000 €. Большинство SaaS-сайтов — в этом варианте.

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