Техническое задание на сайт - это документ, в котором заказчик и разработчик заранее договариваются, какие страницы будут на сайте, что каждая из них должна уметь, как сайт должен выглядеть и по каким признакам работу примут. Хорошее техзадание отвечает на вопрос «что именно мы делаем» так, что его одинаково понимают обе стороны. Плохой документ или его отсутствие почти всегда заканчивается спором при сдаче проекта.
В статье разберём, из каких разделов состоит ТЗ на разработку сайта, и покажем на примере, как описать одну страницу. В конце - частые ошибки и шаблон, который можно скачать и заполнить.
Что такое ТЗ и как расшифровывается
ТЗ расшифровывается как «техническое задание». Термин пришёл из инженерии и госзаказа, где по ТЗ строят мосты и закупают оборудование, но сейчас так называют любое подробное описание задачи для исполнителя. ТЗ пишут на логотип и дизайн, на текст для сайта, на мобильное приложение, на ремонт офиса.
В разработке сайтов ТЗ отвечает на три вопроса:
- что делаем - список страниц, разделов и функций;
- как это должно работать - поведение форм, каталога, корзины, интеграций;
- как проверить результат - критерии, по которым заказчик принимает работу.
Иногда говорят «ТЗ заказчика» и «ТЗ исполнителя». Первое - это задача в словах клиента: что ему нужно и зачем. Второе - перевод этой задачи на язык разработки, с конкретными требованиями к каждой странице. В небольших проектах оба документа часто сливаются в один.
Зачем нужно техническое задание
Без ТЗ разработчик оценивает проект так, как сам понял задачу, а заказчик ждёт то, что представлял себе. Обычно разница всплывает, когда сайт уже почти готов и переделывать дорого.
Что получает заказчик:
- понятную смету и срок: студия считает не «сайт вообще», а конкретный список работ;
- защиту от сюрпризов: всё, чего нет в ТЗ, обсуждается отдельно, а всё, что есть, должно быть сделано;
- возможность сравнить подрядчиков: когда несколько студий оценивают один документ, их цены можно сопоставить;
- основу для приёмки: работу принимают по пунктам, а не по ощущению «нравится или нет».
Что получает исполнитель:
- точную оценку трудозатрат;
- общий документ для дизайнера, верстальщика, программиста и SEO-специалиста;
- границы проекта: правки, которые выходят за рамки документа, оформляются как новые задачи.
Обычно техзадание прикладывают к договору. Тогда оно становится юридическим документом, и споры решаются по тому, что в нём написано.
Бриф и ТЗ: в чём разница
Бриф и техническое задание часто путают. Это разные документы на разных этапах.
| Бриф | Техническое задание | |
|---|---|---|
| Зачем | Понять бизнес и задачу | Описать, что и как сделать |
| Кто заполняет | Заказчик | Обычно студия по итогам брифа и обсуждения |
| Когда | До оценки проекта | Перед стартом разработки |
| Что внутри | Компания, услуги, клиенты, конкуренты, пожелания, бюджет | Страницы, блоки, функции, требования к дизайну, CMS, приёмке |
| Объём | 2-5 страниц ответов на вопросы | От 5 до 50 страниц в зависимости от проекта |
Бриф - это входные данные, техзадание - результат их обработки. Если его составляет студия, начните с брифа: так вы сформулируете задачу без технических терминов. Наш бриф на создание сайта заполняется онлайн, без технических вопросов.
Кто составляет ТЗ на сайт
Есть три рабочих варианта.
Заказчик сам
Подходит, если в компании есть человек, который уже запускал сайты: маркетолог, руководитель проекта, IT-специалист. Плюс - вы сразу контролируете каждое требование. Минус - легко пропустить технические вещи, о которых знают только разработчики: требования к хостингу, переезд со старого сайта без потери позиций, обработку ошибок в формах.
Студия-исполнитель
Самый частый вариант. Студия проводит интервью, изучает бриф, конкурентов и поисковый спрос и пишет техзадание, а заказчик его согласует. Важно, чтобы составление ТЗ было отдельным этапом с отдельным результатом: тогда документ останется у вас, даже если дальше вы решите работать с другим подрядчиком.
Независимый аналитик
Нужен для крупных проектов: интернет-магазинов с обменом с 1С, порталов, сервисов с личным кабинетом. Аналитик не заинтересован в том, чтобы сделать ТЗ под возможности конкретной студии, и описывает задачу нейтрально.
Структура ТЗ на разработку сайта
Состав разделов зависит от проекта, но костяк почти всегда одинаковый. Для лендинга часть пунктов уместится в пару строк, для интернет-магазина каждый раздел может занять несколько страниц.
1. Общая информация о проекте
Название компании, чем она занимается, цель сайта и как измеряется успех: заявки, продажи, звонки. Кто целевая аудитория и с какими вопросами она приходит. Ссылки на конкурентов и сайты, которые нравятся, с пояснением, что именно нравится.
2. Термины
Если в документе встречаются слова «карточка», «лид», «блок», «модальное окно», объясните их один раз в начале. Это кажется лишним, пока не выясняется, что заказчик и разработчик понимали под «каталогом» разные вещи.
3. Структура сайта
Список всех страниц и разделов с вложенностью. Удобнее всего в виде дерева или таблицы. Для сайта, который будет продвигаться в поиске, структура строится от запросов клиентов: у каждой услуги, которую ищут отдельно, должна быть своя страница.
4. Описание страниц
Для каждого типа страницы - какие блоки на ней есть и в каком порядке, что в каждом блоке, какие элементы кликабельны. Достаточно описать шаблон один раз: двадцать страниц услуг, собранных по одному макету, описываются как одна. Пример такого описания - ниже.
5. Сценарии использования
Короткие описания того, как разные посетители проходят по сайту. Например: «человек находит в поиске страницу услуги, смотрит цены и примеры работ, открывает форму расчёта и оставляет телефон». Или: «постоянный клиент заходит с телефона, находит в каталоге нужную позицию через поиск и оформляет заказ без регистрации». Сценарии помогают проверить, что на каждом шаге у человека есть следующее действие, и что ни одна важная страница не осталась без входа.
6. Функциональные требования
Всё, что сайт делает сам:
- формы заявок: какие поля обязательны, куда приходит заявка (почта, мессенджер, CRM), что видит человек после отправки;
- каталог и фильтры: по каким параметрам, сколько товаров, как сортируются;
- корзина и оплата: способы оплаты, онлайн-касса по 54-ФЗ, расчёт доставки;
- личный кабинет, если он нужен;
- интеграции: 1С, CRM, онлайн-запись, телефония.
7. Требования к дизайну
Есть ли фирменный стиль или брендбук, какие цвета и шрифты обязательны, какие сайты нравятся и чем. Отдельно - адаптивность: на каких экранах проверяется сайт. На многих коммерческих сайтах с телефона приходит больше половины посетителей, поэтому мобильную версию описывайте так же подробно, как компьютерную.
8. Контент
Кто готовит тексты, фото, видео, карточки товаров. Нужно ли переносить материалы со старого сайта и в каком объёме. Этот пункт чаще всего пропускают, а потом сроки срываются из-за того, что тексты не готовы.
9. Технические требования
Система управления (CMS) или собственная разработка, хостинг, требования к скорости загрузки, поддерживаемые браузеры, SSL-сертификат, резервное копирование. Отдельно укажите, что домен, хостинг и доступы к админке оформляются на заказчика.
10. SEO и аналитика
Человекопонятные адреса страниц, заголовки и описания, карта сайта и robots.txt, микроразметка. Если сайт переезжает со старой версии - карта 301-редиректов, иначе накопленные позиции в поиске пропадут. Подключение Яндекс Метрики с целями на заявки и звонки, добавление в Вебмастер.
11. Юридические требования
Политика обработки персональных данных, отдельное согласие на обработку данных у каждой формы, уведомление о cookie. Для интернет-магазина - оферта и условия возврата.
12. Порядок сдачи и приёмки
Этапы работ и сроки, что сдаётся на каждом этапе, сколько кругов правок входит в работу и по каким критериям работа считается принятой. Например: «форма заявки работает, если заявка с телефона и компьютера приходит в Telegram менеджеру не позже чем через минуту».
Пример: как описать одну страницу в ТЗ
Возьмём страницу услуги для компании, которая занимается ремонтом квартир. Вот как может выглядеть её описание в техническом задании.
Страница «Ремонт квартир под ключ». Адрес: /remont-kvartir-pod-klyuch.html. Шаблон используется для всех страниц услуг.
| Блок | Содержимое | Требования |
|---|---|---|
| Первый экран | H1, подзаголовок с ценой «от ... ₽ за м²», кнопка «Рассчитать стоимость», фото выполненного объекта | Кнопка открывает форму расчёта, на телефоне видна без прокрутки |
| Что входит | 6-8 карточек с работами и иконками | Иконки в фирменном стиле, текст до 20 слов в карточке |
| Цены | Таблица из трёх пакетов: косметический, капитальный, дизайнерский | Цены редактируются в админке без программиста |
| Примеры работ | Галерея из 6+ объектов с фото до и после | Фото открываются на весь экран, листаются свайпом |
| Этапы | 5-7 шагов от замера до сдачи | Сроки у каждого этапа |
| Отзывы | 3-6 отзывов с именем и фото объекта | Ссылка на отзывы в Яндекс Картах |
| FAQ | 5-8 вопросов | Раскрываются по клику, размечены для поиска (FAQPage) |
| Форма заявки | Имя, телефон, площадь квартиры, согласие на обработку данных | Заявка уходит в CRM и в Telegram, после отправки - страница «Спасибо» с целью в Метрике |
Такое описание занимает полстраницы, но снимает большинство вопросов дизайнера и программиста. А заказчику при приёмке есть с чем сверить готовую страницу.
ТЗ и прототип: что делать сначала
Прототип - это схема страниц без цвета и картинок: какие блоки, в каком порядке, где кнопки и формы. Его удобно рисовать вместе с техзаданием или сразу после него. Текстовое описание отвечает на вопрос «что должно быть на странице», прототип показывает, как это будет расположено.
На прототипе дешевле всего спорить. Передвинуть блок или убрать лишний экран на схеме - это минуты работы, а переделать готовый дизайн - дни. Поэтому в крупных проектах прототип главной и ключевых страниц прикладывают к ТЗ, и дизайнер начинает работу, когда схема согласована. Для небольшого сайта бывает достаточно таблицы блоков, как в примере выше.
Как составить ТЗ: пошагово
- Сформулируйте цель. Не «нужен новый сайт», а «получать 50 заявок в месяц из поиска на ремонт квартир». Цель определяет всё остальное.
- Соберите исходные данные. Услуги и цены, информация о компании, фото, логотип, доступы к старому сайту, примеры конкурентов.
- Составьте структуру. Список страниц, лучше сразу с учётом того, что ищут клиенты. Здесь помогает анализ спроса в Яндекс Вордстате и сайтов конкурентов из топа.
- Опишите шаблоны страниц. Блоки, их порядок и требования, как в примере выше.
- Перечислите функции и интеграции. Отдельно отметьте, что обязательно к запуску, а что можно сделать вторым этапом.
- Пропишите требования к контенту, дизайну, технике и SEO. Пройдитесь по разделам из структуры выше.
- Договоритесь о приёмке. Этапы, сроки, критерии готовности, количество правок.
- Согласуйте и подпишите. После подписания документ меняется только письменными дополнениями с пересчётом сроков и стоимости, если они меняются.
Частые ошибки в ТЗ на сайт
- Оценки вместо требований. «Современный дизайн», «удобный каталог», «быстрая загрузка» каждый понимает по-своему. Замените на проверяемое: «страница загружается на телефоне быстрее 2,5 секунды по PageSpeed».
- «Как у конкурента». Ссылка на чужой сайт без пояснений ничего не объясняет. Напишите, что именно взять: структуру каталога, подачу цен, форму расчёта.
- Всё обязательно. Если каждая функция в приоритете, их нельзя разделить на этапы, и запуск откладывается. Отметьте, без чего сайт не может работать, а что подождёт.
- Функции «на вырост». Личный кабинет, который понадобится через два года, сегодня увеличивает смету и усложняет поддержку.
- Забыли про контент. Дизайн готов, программирование готово, а тексты и фото ещё не начинали. Определите в ТЗ, кто и к какому сроку готовит материалы.
- Нет мобильной версии. Её описывают одной фразой «сайт должен быть адаптивным», а потом выясняется, что таблица цен на телефоне не читается.
- Не указаны доступы. Домен и хостинг, оформленные на исполнителя, - частая причина проблем при смене подрядчика.
- Нет критериев приёмки. Без них сдача проекта превращается в обсуждение вкусов.
Шаблон ТЗ на сайт
Мы подготовили шаблон технического задания с разделами из этой статьи и подсказками, что писать в каждом. Его можно заполнить самостоятельно или вместе с разработчиком.
Скачать шаблон ТЗ на сайт (DOCX)
Перед отправкой техзадания подрядчику проверьте его по короткому чек-листу:
- у сайта есть измеримая цель;
- перечислены все страницы, а у каждого шаблона страницы описаны блоки;
- у каждой формы указано, куда уходит заявка;
- понятно, кто готовит тексты и фото и к какому сроку;
- указано, на кого оформляются домен, хостинг и доступы;
- описан переезд со старого сайта, если он есть;
- есть этапы, сроки и критерии приёмки.
Если ТЗ пока писать не хочется, начните с брифа на создание сайта: по нему мы подготовим структуру и оценку проекта. Состав работ и цены по типам сайтов - на страницах корпоративного сайта, интернет-магазина и лендинга.
Частые вопросы
Можно ли сделать сайт без ТЗ?
Можно, если это небольшой сайт-визитка или лендинг и вы доверяете исполнителю. Но даже тогда стоит записать структуру, список функций и порядок приёмки хотя бы на одной странице. Чем больше проект, тем дороже обходится отсутствие ТЗ.
Сколько страниц должно быть в ТЗ?
Столько, сколько нужно, чтобы не осталось двусмысленностей. Для лендинга хватает 3-5 страниц, для корпоративного сайта обычно 10-20, для интернет-магазина с интеграциями - 30 и больше.
ТЗ - часть договора?
Обычно да: его подписывают как приложение к договору. Тогда работу принимают по его пунктам, а изменения оформляются дополнительным соглашением.
Можно ли менять ТЗ в процессе работы?
Можно, но каждое изменение стоит согласовать письменно и сразу обсудить, влияет ли оно на сроки и цену. Мелкие уточнения обычно укладываются в проект, новые функции - нет.
Чем ТЗ на сайт отличается от ТЗ на дизайн?
ТЗ на дизайн описывает только внешний вид: стиль, цвета, шрифты, макеты страниц. ТЗ на сайт шире: в нём кроме дизайна есть структура, функции, интеграции, техника, SEO и порядок приёмки.