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

Техническое задание на разработку сайта это главный рабочий документ проекта. По нему разработчик считает сроки и стоимость, а вы по нему же принимаете готовую работу. Если в ТЗ написано "современный удобный сайт", спор на сдаче почти неизбежен, потому что каждая сторона понимает эти слова по-своему. Ниже разбираем, чем ТЗ отличается от брифа, какие разделы в него включить и как формулировать требования, чтобы их нельзя было прочитать двумя способами. В конце статьи есть пример и шаблон.

Что такое техническое задание на создание сайта

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

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

Бриф и техническое задание: в чём разница

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

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

Для небольшого лендинга бриф и ТЗ иногда сводят в один документ, и это нормально. Для интернет-магазина или сайта с личным кабинетом так делать не стоит: в брифе слишком мало подробностей, чтобы по нему честно оценить объём работ.

Что включить в ТЗ на разработку сайта

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

1. Цель сайта и аудитория. Что посетитель должен сделать на сайте: оставить заявку, купить товар, записаться, позвонить. От ответа на этот вопрос зависит всё остальное.
2. Структура сайта. Список страниц и разделов, лучше в виде схемы: главная, услуги, страница каждой услуги, цены, контакты. Для каждой страницы перечислите блоки, которые на ней должны быть.
3. Функции. Формы, калькулятор, онлайн-запись, личный кабинет, поиск, оплата. По каждой функции опишите, что происходит после нажатия кнопки и куда уходят данные.
4. Дизайн. Фирменный стиль, если он есть: логотип, цвета, шрифты. Три или четыре сайта, которые вам нравятся, и что именно в них нравится. Отдельно укажите, нужен ли дизайн-макет до начала вёрстки.
5. Контент. Кто пишет тексты, кто готовит фотографии, в каком виде их передают разработчику и к какому сроку.
6. Платформа и технические требования. Нужна ли система управления контентом (CMS, Content Management System), кто будет править тексты после запуска, на каких устройствах и в каких браузерах сайт должен работать без ошибок.
7. Интеграции. CRM, 1С, платёжный сервис, служба доставки, телефония, Telegram-бот для уведомлений. Для каждой интеграции укажите, какие данные и в какую сторону передаются.
8. Требования к SEO-оптимизации. Человекопонятные адреса страниц, заголовки и описания для поисковиков, карта сайта, подключение Яндекс Вебмастера и Google Search Console. Если сайт переезжает со старого адреса, перечислите страницы, с которых нужна переадресация.
9. Домен, хостинг и доступы. На кого оформлены домен и хостинг, кто получает доступы после сдачи и в каком виде передаются исходники.
10. Этапы, сроки и приёмка. Из каких этапов состоит работа, что сдаётся по итогам каждого из них и по каким признакам этап считается принятым.

Как писать требования, чтобы их не поняли по-разному

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

Как правильно: к каждому требованию добавляйте признак, по которому его можно проверить. Сравните формулировки:

• Было: "Сайт должен быстро загружаться". Стало: "Оценка PageSpeed Insights на телефоне не ниже 80, Largest Contentful Paint (LCP) не больше 2,5 секунды на главной странице и страницах услуг".
• Было: "Адаптивная вёрстка". Стало: "Страницы корректно отображаются на экранах шириной от 360 до 1920 пикселей, без горизонтальной прокрутки и без наложения элементов друг на друга".
• Было: "Форма обратной связи". Стало: "Форма с полями "Имя" и "Телефон", телефон проверяется на формат. После отправки заявка приходит менеджеру в Telegram и на почту, а посетитель видит сообщение об успешной отправке".
• Было: "Как у конкурента". Стало: ссылка на конкретную страницу конкурента и список того, что с неё берём, например структура блоков и калькулятор стоимости.

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

Пример технического задания на сайт

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

• Цель: запись клиентов на ремонт и обслуживание без звонка администратору. Аудитория это владельцы легковых автомобилей из соседних районов, большинство заходит с телефона.
• Структура: главная, отдельная страница каждой из шести услуг, цены, онлайн-запись, отзывы, контакты с картой проезда.
• Онлайн-запись: клиент выбирает услугу, марку автомобиля, дату и свободное время, занятые окна не показываются. После записи клиент получает подтверждение по SMS, мастер получает уведомление в Telegram.
• Администрирование: менеджер сам меняет цены, тексты услуг и часы работы через панель управления, без участия разработчика.
• Технические требования: адаптивная вёрстка от 360 пикселей, оценка PageSpeed Insights на телефоне не ниже 80, сертификат HTTPS, резервная копия сайта раз в сутки.
• SEO: отдельная страница под каждую услугу, человекопонятные адреса, карта сайта, подключение Яндекс Вебмастера и карточки в Яндекс Бизнесе.
• Приёмка: запись проходит весь путь от выбора услуги до уведомления мастеру на iPhone, на Android-смартфоне и на компьютере, а изменённая менеджером цена сразу видна на сайте.

Шаблон ТЗ на разработку сайта

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

1. Зачем нужен сайт и какое действие должен совершить посетитель?
2. Кто ваши клиенты и с каких устройств они чаще заходят?
3. Какие страницы нужны и что должно быть на каждой из них?
4. Какие функции нужны: формы, запись, оплата, личный кабинет, поиск?
5. Куда уходят заявки и заказы: на почту, в Telegram, в CRM, в 1С?
6. Есть ли фирменный стиль, какие три сайта вам нравятся и чем именно?
7. Кто готовит тексты и фотографии и к какому сроку?
8. Кто будет обновлять сайт после запуска и что он должен уметь менять сам?
9. Есть ли старый сайт и какие его страницы нужно сохранить в поиске?
10. На кого оформлены домен и хостинг?
11. По каким признакам вы примете готовую работу?

Ошибки в техническом задании, из-за которых срываются сроки

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

Нужен ли ГОСТ для технического задания на сайт

В поиске по теме часто попадается ГОСТ 34.602-2020. Он действует в России с 1 января 2022 года и описывает техническое задание на создание автоматизированной системы. Стандарт рассчитан на крупные информационные системы, поэтому для коммерческого сайта такой формат избыточен: большая часть его обязательных разделов к сайту просто не относится. Если заказчик или условия закупки прямо не требуют ГОСТ, хватит разделов из этой статьи.

Кто составляет техническое задание: заказчик или разработчик

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

Для лендинга или сайта-визитки на это обычно хватает одной встречи и пары дней на текст. Для интернет-магазина с интеграциями составление ТЗ превращается в отдельный этап работ длиной в одну или две недели.

С чего начать

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