Техническое задание на сайт: как составить, шаблон ТЗ

Техническое задание на сайт это документ, по которому исполнитель понимает, что именно нужно сделать, а вы потом проверяете, сделано ли это. В нём должны быть: цель сайта и аудитория, структура страниц, описание каждого шаблона, функции и формы, интеграции, требования к контенту, SEO, скорости и адаптивности, а также порядок приёмки. Хорошее ТЗ не обязано быть длинным: для корпоративного сайта на 15 страниц хватает 5-10 страниц текста. Ниже шаблон-структура, который можно заполнить самостоятельно, и разбор ошибок, из-за которых сайт выходит не таким, как ожидали.

Зачем ТЗ, если можно просто объяснить на созвоне

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

ТЗ решает три задачи:

Сравнимые оценки. Пять исполнителей, получивших одинаковое задание, оценивают один и тот же объём. Без ТЗ разброс цен бывает десятикратным, подробнее об этом в статье сколько стоит сайт.
Граница объёма. Всё, что не описано, оценивается отдельно. Это защищает и вас, и исполнителя.
Критерии приёмки. Вы проверяете сайт по пунктам документа, а не по ощущению «как-то не так».

Кто пишет ТЗ

Есть три рабочих варианта.

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

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

Шаблон-структура технического задания

Ниже разделы, которые стоит включить. Для простого сайта часть разделов займёт два-три предложения, это нормально.

1. Общие сведения

Название проекта, домен.
Заказчик и исполнитель, контактные лица с обеих сторон.
Сроки: старт, ключевые этапы, запуск.
Какой документ главнее, если ТЗ и договор расходятся.

2. Цели и аудитория

Опишите, зачем нужен сайт и что считается успехом. Не «красивый современный сайт», а измеримые вещи:

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

Кто ваши клиенты, откуда они приходят (реклама, поиск, рекомендации), с каких устройств заходят. Если 70 % заказов приходит с телефонов, это меняет приоритеты дизайна.

3. Конкуренты и примеры

Дайте 3-5 ссылок на сайты, которые вам нравятся, и для каждого напишите, что именно: структура каталога, подача цен, форма заявки. Отдельно сайты, которые не нравятся, и почему. Это экономит часы обсуждений дизайна.

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

Карта страниц в виде дерева. Например:

Главная
├── Услуги
│   ├── Монтаж кондиционеров
│   ├── Обслуживание
│   └── Ремонт
├── Цены
├── Портфолио
│   └── Карточка объекта
├── Блог
│   └── Статья
├── О компании
└── Контакты

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

5. Описание шаблонов страниц

Это самый важный раздел. Опишите каждый тип страницы со своим набором блоков: какие блоки на нём есть и в каком порядке. Не нужно рисовать дизайн, достаточно списка.

Пример для страницы услуги:

Заголовок H1 и короткий подзаголовок с выгодой.
Цена «от» и кнопка «Рассчитать стоимость».
Что входит в услугу, списком.
Этапы работы.
Фото выполненных объектов, 6-9 штук.
Частые вопросы.
Форма заявки: имя, телефон, комментарий.

Если есть прототипы, приложите их и укажите в ТЗ, что прототип часть документа.

6. Функциональные требования

Всё, что сайт должен делать, кроме показа текста:

формы: какие поля, какие обязательные, куда уходят заявки (почта, Telegram, CRM);
каталог: фильтры по каким характеристикам, сортировка, сравнение;
корзина и оформление заказа: способы оплаты и доставки, расчёт стоимости доставки;
личный кабинет: что видит пользователь, история заказов, документы;
поиск по сайту;
калькулятор, квиз, онлайн-запись;
мультиязычность.

Для каждой функции полезно описать сценарий от лица пользователя: «Клиент выбирает модель, площадь помещения, нажимает “Рассчитать” и видит цену с монтажом. Ниже кнопка “Оставить заявку”, в которую подставляются выбранные параметры».

7. Интеграции

Перечислите все внешние системы и что с ними нужно делать:

Система	Направление	Что передаётся	Как часто
amoCRM	сайт → CRM	заявки с форм, UTM-метки	сразу
1С:Управление торговлей	1С → сайт	товары, цены, остатки	раз в час
1С:Управление торговлей	сайт → 1С	заказы	сразу
ЮKassa	двусторонне	оплата, статус платежа	сразу
СДЭК	сайт → СДЭК	расчёт доставки, пункты выдачи	при оформлении

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

8. Требования к администрированию

Кто и что будет менять сам: тексты, цены, фото, статьи блога, баннеры. Сколько будет пользователей админки и с какими правами. Нужно ли обучение. От этого раздела во многом зависит выбор платформы: Tilda, WordPress, Webasyst или 1С-Битрикс.

9. Контент

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

10. SEO-требования

Даже если продвижением займутся позже, базу закладывают при разработке:

человекопонятные адреса страниц (ЧПУ): /uslugi/montazh/, а не /?id=123;
редактируемые title, description и H1 для каждой страницы;
автоматическая генерация sitemap.xml и управляемый robots.txt;
канонические адреса, отсутствие дублей с www и без, со слешем и без;
микроразметка: организация, хлебные крошки, товары, FAQ;
301-редиректы со старых адресов, если сайт переделывается.

11. Требования к скорости, адаптивности и браузерам

Сайт корректно отображается на ширине от 360 до 1920 пикселей.
Поддерживаемые браузеры: Яндекс Браузер, Chrome, Safari, Firefox, Edge в актуальных версиях.
Показатели Core Web Vitals в зелёной зоне на мобильных: LCP до 2,5 с, INP до 200 мс, CLS до 0,1. Что это за метрики, мы объяснили в статье про Core Web Vitals.

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

12. Хостинг, безопасность, доступы

На чьём хостинге будет сайт и кто за него платит.
На кого регистрируется домен (на заказчика).
SSL-сертификат.
Резервное копирование: как часто и где хранятся копии.
Передача всех доступов и исходного кода по окончании работ.

13. Аналитика

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

14. Этапы и приёмка

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

Как проверить готовое ТЗ

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

Ещё несколько вопросов для самопроверки:

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

Что в ТЗ писать не нужно

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

Типичные ошибки

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

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

Сколько стоит составление технического задания?

У студий и фрилансеров предпроектный этап с ТЗ и прототипами стоит обычно 5-15 % от бюджета разработки. Для лендинга часто входит в стоимость, для крупного магазина это отдельный договор.

Нужно ли ТЗ для лендинга?

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

Можно ли менять ТЗ в процессе работы?

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

Если вы готовите проект и хотите, чтобы ТЗ составили вместе с вами, мы проведём бриф и подготовим документ под вашу задачу. Делаем лендинги, корпоративные сайты и интернет-магазины.

Техническое задание на сайт: как составить и что в нём должно быть