Строительство & Кровля

Muller Toiture

Протечку крыши не решают как ремонтный проект: два сценария, один сайт.

Год
2026
Разработка
4 недели
Стек
Next.js · React · Tailwind · Vercel
  • Дизайн
  • Разработка
  • Калькулятор стоимости
  • Локальное SEO

Демоверсия, размещённая Kayzen Web на адресе Vercel; окончательный домен принадлежит клиенту.

https://mullertoiture.vercel.app/
Главная страница сайта Muller Toiture — Строительство & Кровля, создан Kayzen Web
отдельных сценария
2
вопроса для оценки стоимости
3
SEO в Lighthouse
100/100
Отправная точка

Какую задачу нужно было решить.

Контекст

Muller Toiture — кровельная компания из Мьона (Mions), работающая на востоке Лионской агломерации и на севере департамента Изер: кровля, жестяные работы, утепление, очистка от мха.

Ограничение

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

Решение

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

Измерено, а не заявлено

Показатели на момент сдачи.

Оценки Lighthouse для сайта в рабочей среде. Мы публикуем их как есть: если какая-то оценка низкая, её причина и план исправления описаны ниже, а не замалчиваются.

PageSpeed
75
Производительность: 75 из 100
97
Доступность: 97 из 100
100
Лучшие практики: 100 из 100
100
SEO: 100 из 100
Дизайн и арт-дирекшн

Каждое решение — и его причина.

  1. Постоянная аварийная плашка

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

  2. Калькулятор из трёх вопросов

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

  3. Очистка от мха — отдельно

    Услуга с небольшим чеком, но большим объёмом, которую часто ищут саму по себе. У неё своя страница, а не строка в списке.

Палитра проекта

  • Шифер

    #39434D

    Структура — цвет материала

  • Черепица

    #B15A2B

    Действие

  • Небо

    #EEF3F7

    Фон

  • Аварийный красный

    #C0392B

    Только плашка о протечке

Типографическая система

Заголовки

Outfit 700

Основной текст

Inter 400

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

Разработка

Что внутри.

  • Next.js
  • React
  • Tailwind
  • Vercel
  1. Калькулятор целиком на стороне клиента

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

  2. Выявленная задача по производительности

    75 по производительности из-за галереи объектов. План написан: конвертация в AVIF, srcset и разбиение галереи на страницы. Оценка публична — полезнее её объяснить, чем скрыть.

SEO-продвижение

Как сайт становится находимым.

  1. Срочные и проектные запросы

    «Протечка крыши срочно Лион», «кровельщик Мьон», «цена замены кровли север Изера». Три намерения, три семейства страниц: смешать их — значит не ранжироваться ни по одному.

  2. Чётко обозначенная зона работ

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

Доступность

Удобно для всех.

С июня 2025 года Европейский акт о доступности (European Accessibility Act) требует цифровой доступности для значительной части онлайн-сервисов. Мы закладываем её на этапе проектирования, а не исправляем задним числом.

  1. Калькулятор, доступный с клавиатуры

    Нативные поля, результат объявляется в live-области, ни один шаг не зависит от перетаскивания.

Структура сайта

Что было сдано.

  • Главная — срочный вызов + калькулятор
  • Кровля и жестяные работы
  • Утепление
  • Очистка от мха
  • Калькулятор кровли
  • Зоны обслуживания
  • Контакты
Метод

Ход проекта.

  1. Анализ заявок

    По поступающим звонкам выявлены два профиля.

  2. Дизайн

    Аварийная плашка, калькулятор, раздельные сценарии.

  3. Разработка

    Калькулятор на клиенте, формы, уведомления.

  4. SEO

    Три семейства страниц, размеченная зона обслуживания.

Вопросы

О чём нас часто спрашивают.

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

Тот же уровень требований — для вашего сайта.

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

Поделиться