Лендинг для сервиса автопостинга в Pinterest: делаем для себя так же, как для клиентов

Это кейс про наш собственный лендинг: страницу, которая продаёт сервис «контент-завод для Pinterest». Сервис сам делает картинки для пинов по одной фотографии товара и выкладывает их по расписанию. Лендинг мы нарисовали и сверстали за пять недель: с 3 июля по 6 августа 2026 года. На дизайн ушло около 22,5 часа, на вёрстку около 76,5 часа, всего почти 100 часов. Страница работает на русском и английском, а на странице есть сравнение с ручным постингом, показ кабинета и отдельное предложение обучения.

Зачем мы это показываем. Свой продукт мы делаем так же, как продукты клиентов: сначала продумываем, что должен понять человек, потом рисуем, потом верстаем по макету. Разница одна: заказчиком здесь была наша же команда. Страница открыта, её можно посмотреть и пощупать: pinterest.la-chatte.com.

Кто клиент и что за продукт

Клиент здесь мы сами. La Chatte делает сайты, поддержку сайтов и внедряет искусственный интеллект в бизнес. Продукт «контент-завод для Pinterest» мы начали делать осенью 2025 года. Задачу поставили так: магазин даёт ссылку на товар, фото товара и поисковые запросы, а сервис делает из этого картинку в новой обстановке, заголовок, описание и сам публикует пин.

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

В чём была задача

Нужна была страница, после которой незнакомому человеку понятно:

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

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

Как шла работа: сначала структура, потом рисунок

Дизайн делали с 3 по 28 июля 2026 года, на него ушло около 22,5 часа. Исходным материалом была презентация продукта в Figma. Мы шли двумя этапами:

1. Структура страницы на согласование. Сначала решили, какие блоки нужны и в каком порядке они идут, и только потом рисовали. Так обсуждение идёт про смысл, а не про цвета.
2. Отрисовка. После одобрения структуры нарисовали все экраны в Figma и оформили их в набор готовых элементов, на который опирается вёрстка.

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

Что на странице, блок за блоком

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

Для кого подходит

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

Сравнение с ручной работой

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

Кабинет «в одном дашборде»

Три карточки показывают кабинет: как запускать и останавливать задачи, как писать запрос для картинок (с подстановкой разных мест и поз, список можно загрузить таблицей) и как прикладывать фото своего товара. На картинках настоящий кабинет сервиса, а не рисунок «для красоты».

Платное обучение отдельным блоком

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

Вопросы и ответы

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

Две версии языка

Страница есть на русском (/ru) и на английском (/en). Переключатель стоит в шапке рядом с телефоном: флаги и подписи «Рус» и «Eng». У каждой версии свой заголовок страницы и своё краткое описание для поиска.

Версия для телефона

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

Что получилось

За пять недель у продукта появилась отдельная страница на своём адресе, на двух языках, с кнопками заявки и с ответами на частые вопросы. Страница открыта и работает.

Часы взяты из учёта времени в наших задачах. Дизайн и вёрстка шли частично одновременно: с 17 по 28 июля.

Что это значит для вашего лендинга

Мы делаем лендинги так же, как сделали этот. Сначала структура на согласование, потом дизайн в Figma, потом вёрстка по макету с описанием анимации и состояний, потом проверка на телефоне. Если нужно, добавляем второй язык. Подробно про состав работ, сроки и цену: лендинг под ключ. Если вам важна скорость страниц, посмотрите, как мы ускорили свой сайт на WordPress.

Для технических специалистов

Страница собрана на Next.js: серверная отрисовка, два маршрута языка (/ru и /en), отдельные title и description для каждого. Макеты в Figma, анимация первого экрана описана аннотацией на макете. Адрес лендинга отделён от основного сайта: он живёт на поддомене pinterest.la-chatte.com.