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

Короткий ответ: ТЗ на сайт — это документ на 2–6 страниц, в котором написано, что именно будет сделано, как это проверить и что в работу не входит. Ему не нужны ГОСТы и юридические обороты. Ему нужны конкретные ответы на десять вопросов, и ниже они разобраны по порядку с готовым шаблоном.

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

Чем ТЗ отличается от брифа и зачем оно вообще нужно

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

Подробнее о брифе для одностраничника — в статье бриф на лендинг, а о том, чем ТЗ отличается от устной договорённости, — в материале ТЗ, бриф или «объясню голосом».

Десять разделов рабочего ТЗ

1. Цель сайта одной фразой

Не «рассказать о компании», а действие и метрика: «получать 30 заявок в месяц на установку окон из Краснодара». Если цель нельзя проверить цифрой, она не цель. От этой фразы зависят все остальные решения: структура, тексты, акцент на форме или каталоге.

2. Кто будет пользоваться сайтом

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

3. Структура: список страниц и что на каждой

Таблицей или маркированным списком: главная, услуги, цены, о нас, контакты, статьи. Для каждой страницы одна строка: «зачем она нужна» и «какое действие должен совершить посетитель». Если страницы будут создаваться по шаблону (например, 30 карточек услуг), опишите шаблон один раз и укажите количество.

4. Функции и интеграции

Всё, что делает сайт больше, чем просто набор страниц: форма заявки, калькулятор, онлайн-запись, оплата, личный кабинет, поиск, интеграция с CRM, подключение Яндекс Метрики, чат-бот. Для каждой функции напишите: что она делает, что происходит после отправки данных, куда они уходят. «Форма заявки» — это неполное описание. «Форма заявки с полями имя, телефон, комментарий; после отправки письмо на lead@company.ru и сообщение в Telegram; сообщение пользователю «Перезвоним в течение часа в рабочее время»» — полное.

5. Дизайн: референсы и ограничения

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

6. Контент: кто пишет тексты и готовит фото

Самая частая причина срыва сроков. Укажите прямо: тексты пишет заказчик или подрядчик, фото снимает заказчик или берутся из банка, кто и к какой дате передаёт материалы. Как правильно передавать фото и документы, чтобы они не потеряли качество, написано в статье как передавать фото подрядчику, а полный перечень материалов — в чек-листе материалов для сайта.

7. Технические требования

Платформа (WordPress, Tilda, самописный), хостинг, домен, SSL, поддержка мобильных устройств, браузеры, скорость загрузки. Для скорости можно написать проверяемое требование: «оценка Google PageSpeed на мобильных не ниже 80 на главной». Если вы не знаете, что требовать, пропишите «подрядчик предлагает решение и обосновывает выбор» — это честнее, чем копировать чужие требования.

8. SEO и аналитика

Если сайт должен приводить клиентов из поиска, укажите: уникальные title и description для каждой страницы, один H1, адаптивные картинки с alt, карта сайта, robots.txt, 301-редиректы со старого сайта, подключение Яндекс Вебмастера и Метрики с целями. Если у вас уже есть сайт, отдельным пунктом напишите: «сохранить адреса страниц» или «составить таблицу редиректов». Потеря позиций при переезде чаще всего происходит именно из-за этого пункта.

9. Этапы, сроки и порядок оплаты

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

10. Критерии приёмки и что не входит в работу

Самый недооценённый раздел. Для каждой функции и страницы напишите, как проверить, что она готова: «форма отправляет заявку на почту за 1 минуту», «страница открывается на iPhone SE без горизонтальной прокрутки», «все страницы имеют уникальный title». И отдельным списком, что не входит: написание текстов, подключение платежной системы, перенос 500 товаров из старого каталога. Всё, что не записано, считается не входящим, и в этом смысл раздела.

Готовый шаблон: скопируйте и заполните

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

ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА РАЗРАБОТКУ САЙТА

1. Цель
   Сайт нужен, чтобы: [действие] ; метрика: [число в месяц/квартал].

2. Аудитория
   Посетитель А: ищет [что], хочет [действие].
   Посетитель Б: ищет [что], хочет [действие].

3. Структура
   Страница | Назначение | Целевое действие
   Главная  | ...        | ...
   Услуги   | ...        | ...
   Контакты | ...        | ...

4. Функции и интеграции
   Функция | Что делает | Куда уходят данные | Что видит пользователь после

5. Дизайн
   Нравится: [3 ссылки + что именно]
   Не нравится: [1 ссылка + что именно]
   Бренд: логотип [есть/нет], цвета [есть/нет], шрифты [есть/нет]

6. Контент
   Тексты: [кто пишет] до [дата]
   Фото: [кто снимает/берём из банка] до [дата]
   Передача материалов: облако, ссылка [адрес]

7. Технические требования
   Платформа: ...  Хостинг/домен: ...  Мобильная версия: да  Скорость: ...

8. SEO и аналитика
   Title/description: на каждой странице; редиректы: [да/нет]; Метрика: цели [список]

9. Этапы и оплата
   Этап | Результат | Срок | Оплата

10. Приёмка и исключения
    Критерии: [для каждой функции]
    Не входит: [список]
    Правки: [сколько кругов включено]

Пример: как выглядит заполненный фрагмент для стоматологии

Чтобы шаблон не казался абстрактным, один раздел вживую. Это примерная формулировка, подставьте свои данные.

Типичные ошибки заказчиков и как их избежать

• Слишком общие формулировки. «Удобная навигация» не проверяется. Замените на «любая страница достижима за 3 клика от главной».
• Список функций «на вырост». Всё, что вы не будете использовать в первые полгода, вычеркните. Каждая функция стоит денег сейчас и обслуживания потом.
• Нет раздела «что не входит». На приёмке обязательно всплывёт функция, которую «подразумевали».
• Нет ответственного. Если у проекта три согласующих, правки будут противоречить друг другу. Назначьте одного человека, который говорит «да» или «нет».
• ТЗ написано один раз и забыто. Изменения в ходе работы нужно вносить в документ, иначе через месяц у вас и подрядчика будут две разные версии.
• Копирование ТЗ с шаблона из интернета. Шаблон на 40 пунктов для интернет-магазина не подходит визитке. Берите структуру, заполняйте только нужное.

Как проверить ТЗ перед тем, как подписывать

Пройдите по трём вопросам. Если на любой ответ «нет», доработайте документ.

1. Могу ли я после запуска проверить каждую строку ТЗ и сказать «сделано» или «не сделано»?
2. Понимает ли человек, который не участвовал в обсуждении, что именно будет создано?
3. Записано ли, что не входит в работу и сколько стоит дополнительная работа?

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

Нужно ли ТЗ, если я заказываю небольшой сайт

Для лендинга или сайта-визитки хватит одной страницы: цель, структура, функции, критерии приёмки, что не входит. Но не пропускайте документ совсем. Чем меньше проект, тем чаще заказчик решает «объясню на словах», и тем чаще потом спорит об объёме. Цена такого спора для небольшого проекта сопоставима с ценой самого проекта.

Часто задают вопросы

Кто должен писать ТЗ: заказчик или подрядчик?

Лучше всего вместе. Заказчик знает бизнес и аудиторию, подрядчик знает, как это реализуется технически. Заказчик пишет бриф, подрядчик превращает его в ТЗ и согласовывает с заказчиком. Если подрядчик отказывается составлять документ и просит «пришлите ТЗ», он перекладывает на вас то, что не может обосновать.

Сколько стоит составление ТЗ?

Для небольших проектов у меня это входит в стоимость и делается в рамках первой недели. Для сложных систем с интеграциями ТЗ выделяют в отдельный платный этап, и его цена зависит от объёма. Ориентиры по ценам на сами сайты — в статье сколько стоит сайт.

Можно ли использовать шаблон ТЗ из интернета?

Как отправную точку да, как готовое ТЗ нет. Шаблон даёт структуру, но не содержание. Любой шаблон нужно сократить до того, что нужно именно вам, и наполнить конкретикой.

Что делать, если требования изменились в ходе работы?

Зафиксировать изменение письменно, оценить его по времени и стоимости и только потом делать. Изменение без записи превращается в спор на приёмке. Правка в ТЗ занимает пять минут, а недоразумение стоит недели.

Нужно ли ТЗ для сайта на конструкторе вроде Tilda?

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

Если у вас уже есть набросок или вы не знаете, с чего начать, напишите мне и приложите то, что есть. Я верну вам структурированное ТЗ с оценкой по срокам и бюджету. Цены на работы открыты на странице «Цены».

Читайте также: почему созвоны неэффективны, когда созвон нужен, консультация 5 000 ₽ за 30 минут.