Рубрикатор страницы кейсов: фильтр по типу работы и отрасли

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

Задача

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

К 14 октября 2026 года кейсов было 122, и искать среди них стало тяжело. Сверху шли 80 флагманских карточек в развёрнутом виде, у каждой задача, решение и результат. Фильтр по пяти типам стоял ниже всех этих карточек, до него нужно было долго листать. А самой большой рубрикой фильтра была «Другое»: туда попало 36 кейсов. Если самая крупная группа называется «Другое», значит, классификация не работает.

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

Что я сделал

• Фильтр под заголовком. Он стоит сразу под заголовком страницы, до любых карточек.
• Ось «Что сделано». Семь типов: сайты и лендинги, боты и приложения, CRM и учёт, платформы и сервисы, ИИ-решения, игры и интерактив, аудиты и предложения.
• Ось «Отрасль». Десять отраслей: HoReCa, бьюти-индустрия, здоровье, услуги и локальный бизнес, авто и логистика, девелопмент и недвижимость, туризм и отельный бизнес, ритейл и опт, культура, медиа, события, IT и свои продукты. Названия отраслей я поправил по отзыву предпринимателей из бизнес-сообществ.
• Счётчики по сочетанию. Когда выбран тип, у каждой отрасли показывается, сколько кейсов этого типа в ней есть, и наоборот. Чип с нулём становится недоступным, чтобы человек не попал в пустую выдачу.
• Выбор в адресе. Фильтр записывается в адрес страницы параметрами type и ind. Ссылку с готовой подборкой можно отправить лиду: он откроет страницу уже с нужным фильтром.
• Шесть избранных вместо восьмидесяти. Пока фильтр не выбран, наверху стоят 6 избранных кейсов. Остальные идут компактной сеткой. При выборе фильтра блок избранных скрывается, чтобы не мешать выдаче.

Как устроено

Рубрики живут в одном файле-справочнике. В нём списки типов и отраслей с названиями на трёх языках, таблица «кейс → тип и отрасль» и список избранных. У каждого кейса ровно один тип и одна отрасль.

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

Остальное делает небольшой скрипт на странице:

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

Что было сложно

Самая долгая часть это разметка 122 кейсов по двум осям. Многие проекты лежат на границе. Цифровая карта лояльности для кафе может быть и ботом, и платформой. Сайт с калькулятором растаможки может быть и сайтом, и сервисом. Я оставил каждому кейсу один главный тип. Вторая ось здесь помогает: кейс про кафе стоит в своём типе и при этом находится через HoReCa, даже если лид не угадал, бот это или платформа.

Вторая сложность была в весе страницы. 80 развёрнутых карточек давали много разметки, которую почти никто не дочитывал. После перехода на 6 избранных и компактную сетку HTML страницы уменьшился примерно с 773 до 490 КБ.

Третья была в контрасте. Счётчик на активном чипе и подписи осей сначала были слишком бледными. Я замерил контраст и поднял его до 4.5:1, это нижняя граница WCAG для обычного текста.

И одно решение я принял сознательно: фильтр не закреплён при прокрутке. На экране ноутбука 1536 на 713 точек две строки чипов заняли бы примерно треть высоты, и на карточки осталось бы слишком мало места. На телефоне строки чипов листаются вбок, чтобы не превращаться в стену из кнопок.

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

• Фильтр виден сразу, без прокрутки через десятки карточек.
• Рубрики «Другое» больше нет: каждый кейс стоит в одном из семи типов и одной из десяти отраслей.
• Лид может сузить выдачу до своего сочетания, например боты для HoReCa, и сразу видит, сколько таких кейсов.
• Подборку можно отправить ссылкой: фильтр откроется уже выбранным.
• Страница стала легче примерно на 280 КБ HTML.

Ограничения

• У кейса один тип. Проект, где есть и сайт, и бот, стоит в одной рубрике, и в другой его не найти.
• Рубрики новым кейсам я пока проставляю руками. Если забыть, сработает подбор по заголовку, и он может ошибиться.
• Поиска по тексту на странице нет, только две оси.
• Как новый фильтр влияет на заявки, я не измерял. Это следующий шаг.

Частые вопросы

Зачем две оси, если можно сделать много тегов?

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

Можно ли отправить клиенту ссылку на подборку?

Да. Выбранный фильтр сохраняется в адресе страницы, например с параметрами type=bot и ind=food. Клиент откроет ссылку и сразу увидит боты для HoReCa.

Почему фильтр не прилипает к верху экрана?

На ноутбуке с экраном 1536 на 713 точек две строки чипов заняли бы треть высоты. Я решил, что видеть карточки важнее, чем держать фильтр перед глазами при прокрутке.

Что будет с новым кейсом, который забыли разметить?

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

Коротко о главном

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