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

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

Зачем нужно ТЗ

Без ТЗ заказчик и подрядчик держат в голове разные сайты. Заказчик думает, что калькулятор входит, подрядчик думает, что нет. Выясняется это на приёмке.

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

1. Фиксирует объём работ. Всё, что не описано, делается за отдельные деньги.
2. Даёт основу для приёмки. Работа принимается по пунктам ТЗ, а не по ощущениям.
3. Экономит время. Дизайнер и разработчик не гадают, а делают по документу.

Из чего состоит техническое задание на разработку сайта

Самый важный раздел: описание страниц

Большинство ТЗ пропускают его, ограничиваясь списком страниц. Из-за этого подрядчик сам решает, что показать. Пример описания одной страницы:

Пример ТЗ для сайта услуг (сокращённо)

Цель: 40 заявок в месяц на установку и обслуживание кондиционеров в Москве из Яндекс Директа и поиска.

Платформа: Тильда, тариф Personal, аккаунт и домен оформлены на заказчика.

Карта сайта:

• Главная
• Установка кондиционеров
• Обслуживание и чистка
• Заправка фреоном
• Ремонт
• Цены
• Работы и отзывы
• О компании
• Контакты
• Блог

Функции: калькулятор стоимости установки, формы заявок на каждой странице, кнопки звонка и мессенджеров в мобильной версии.

Интеграции: заявки в amoCRM и в Telegram-чат, Яндекс Метрика с целями на отправку форм и клики по телефону, Яндекс Карта в контактах.

SEO: уникальные Title, Description и H1 на каждой странице по списку запросов (приложение 2), понятные адреса страниц, alt у изображений, микроразметка Organization, Service, FAQPage, BreadcrumbList.

Приёмка: проверка на iPhone и Android последних двух поколений, Chrome, Яндекс Браузер и Safari, отправка тестовых заявок со всех форм, скорость загрузки мобильной версии по PageSpeed не ниже согласованного значения.

Передача: доступы к Тильде и домену, инструкция по правке текстов, 30 дней бесплатных исправлений ошибок.

Пример ТЗ на лендинг

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

Цель: заявки на бесплатный пробный урок из Яндекс Директа. Цель в Метрике: отправка формы.

Платформа: конструктор, аккаунт заказчика. Одна страница плюс страница «Спасибо» и политика конфиденциальности.

Что обязательно для лендинга под рекламу:

• UTM-метки передаются в заявку вместе с именем и телефоном;
• на странице «Спасибо» стоит цель Метрики, чтобы Директ учился на заявках;
• вес первого экрана ограничен, видео не грузится автоматически;
• номер телефона кликабельный, мессенджеры открываются в приложении.

Про требования к посадочной под Директ подробно писал в статье посадочная для Яндекс Директа.

Пример ТЗ на интернет-магазин

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

Цель: онлайн-заказы и заявки от оптовиков, трафик из поиска по товарным запросам и из товарных кампаний Директа.

Платформа: CMS для магазинов с поддержкой обмена с учётной системой. Выбор платформы подрядчик обосновывает в КП.

Каталог и карточка товара

Корзина, оплата и доставка

• Оформление заказа без обязательной регистрации.
• Способы оплаты: онлайн картой и СБП, счёт для юрлиц с автоматической генерацией PDF.
• Расчёт доставки по городам через службы доставки, самовывоз со склада.
• Минимальная сумма заказа и оптовые цены от определённого объёма.
• Письма и SMS клиенту о статусе заказа.

Интеграции и данные

• Двусторонний обмен с учётной системой: товары, цены, остатки, заказы. Частота обмена.
• Выгрузка товарного фида для Яндекса.
• Импорт каталога из Excel для первичного наполнения.
• Цели Метрики и электронная коммерция: просмотр товара, корзина, заказ.

Кто наполняет каталог

Самый дорогой пункт, который забывают. Фото, описания и характеристики 3 000 товаров это отдельная работа. В ТЗ пишут, кто её делает, в каком формате заказчик отдаёт данные и сколько товаров наполняет подрядчик. О рекламе магазина после запуска разбирал в статье Яндекс Директ для интернет-магазина.

SEO-требования в ТЗ: что прописать до разработки

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

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

Бриф на разработку сайта: 25 вопросов

О бизнесе

1. Чем занимается компания, какие услуги или товары главные?
2. В каких городах работаете?
3. Кто ваши клиенты: возраст, должность, что для них важно?
4. Средний чек и маржа?
5. Кто ваши главные конкуренты, чьи сайты нравятся и почему?
6. Чем вы отличаетесь от конкурентов, с фактами и цифрами?

О задаче

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

О дизайне и контенте

1. Есть ли логотип и фирменный стиль?
2. 3-5 сайтов, которые нравятся по дизайну, и что именно нравится?
3. Что точно не нравится?
4. Кто пишет тексты: вы или подрядчик?
5. Есть ли свои фото работ, команды, офиса?
6. Есть ли отзывы, кейсы, сертификаты?

Организационное

1. Сроки запуска и почему такие?
2. Бюджет на разработку?
3. Бюджет на продвижение после запуска?
4. Кто со стороны заказчика принимает решения?
5. Нужны ли поддержка и доработки после запуска?
6. На кого оформлять домен и аккаунты?

Шаблон ТЗ и брифа

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

Шаблон собирается из этой статьи за полчаса:

Отдельная колонка «Статус» с отметками «согласовано» и «в работе» спасает от споров о том, что уже утвердили.

Ошибки в ТЗ, из-за которых растут сроки и цена

1. Нет цели в цифрах. Невозможно понять, какой сайт нужен.
2. Только список страниц без описания. Каждый понимает содержание по-своему.
3. «Сделайте красиво». Без референсов дизайн переделывают по три раза.
4. Не указано, кто пишет тексты. В итоге сайт готов, а текстов нет месяц.
5. Нет требований к мобильной версии. Её делают в последнюю очередь.
6. Нет SEO-требований. Потом сайт приходится переделывать под продвижение.
7. Нет порядка приёмки. Правки идут бесконечно.
8. Домен и аккаунт не оговорены. Сайт оказывается на аккаунте подрядчика.

ТЗ и коммерческое предложение: как сравнивать КП

Запрос «коммерческое предложение разработки сайта» часто путают с ТЗ. КП присылает подрядчик: что сделает, сроки, цена. ТЗ детализирует, как именно. Хорошее КП уже опирается на бриф и даёт укрупнённую структуру. Если КП пришло без вопросов о вашем бизнесе, это шаблон, и цена в нём условная.

Как оценивать КП по ТЗ

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

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

ТЗ в закупках и тендерах

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

Документы при разработке сайта

По запросу «разработка сайтов документы» ищут, какие бумаги нужны на проект. Полный комплект выглядит так:

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

Чек-лист приёмки сайта по ТЗ

Приёмка идёт по пунктам ТЗ, а не по ощущению «нравится или нет». Этот список удобно приложить к ТЗ сразу, тогда подрядчик знает, как будут проверять.

Настройку Метрики и целей подробно описал в статье настройка Яндекс Метрики. Если какой-то пункт не проходит, в акте фиксируют замечание со ссылкой на пункт ТЗ, а не общее «переделайте».

Как ТЗ связано с договором

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

FAQ

Итог

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