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

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

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

Что такое техническое задание для сайта и зачем оно заказчику

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

Заказчику документ даёт три вещи:

• Цену по составу работ. Подрядчик считает смету по списку из ТЗ, а не по впечатлению от разговора.
• Точку сверки. На каждом этапе видно, сделано ли записанное.
• Защиту от «мы так поняли». Если функции нет в документе, спор о ней решается по тексту, а не по памяти.

Зачем писать документ до старта, Роман, руководитель Diple, объяснял на внедрении ИИ, но к разработке мысль подходит так же: «надо заранее строить цифровой фундамент учитывая то какой высоты будет итоговое здание». Лендинг под одну услугу и корпоративный сайт с каталогом — здания разной высоты, и фундамент у них разный.

Подготовка занимает время, и это нормально. О сроках внедрения автоматизации Роман пишет: «Чем сложнее задача, тем дольше аудит и предпроектная подготовка». Клиентам иногда кажется, что работа ещё не началась. По его словам, долгая подготовка — «признак здоровья» проекта, а не задержка.

Документ пишут до первого макета. Дальше — о том, кто его составляет.

Кто пишет ТЗ на разработку сайта: заказчик или подрядчик

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

Поэтому в нашей практике документ пишут вместе:

• заказчик отвечает на вопросы брифа и даёт материалы;
• подрядчик проводит исследование и предлагает состав страниц и функций;
• заказчик проверяет черновик и подписывает итоговую версию.

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

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

Из каких разделов состоит документ, разберём по порядку.

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

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

Цель сайта и действие посетителя

Цель — действие, которое должен совершить посетитель: заявка, звонок, скачанный прайс. Внешний вид целью не считается: его не измерить. Для промышленного оборудования полезное действие — скачанный каталог в PDF: его распечатают и обсудят у клиента.

Цель вытекает из того, кто покупает. Роман говорит, что точка, с которой надо начинать работу по сайту, чаще находится раньше — «в неотработанных базовых этапах системного маркетинга». Сначала понять аудиторию, потом писать требования к страницам.

Как это записано в ТЗ: «Цель — заявка через форму расчёта и звонок. Дополнительное действие — скачивание каталога в PDF».

Страницы и структура сайта

В этом разделе перечисляют страницы и пишут, на чей вопрос отвечает каждая. Частый случай — сайт-витрина, где компания рассказывает, чем занимается. Роман описывает такую витрину как визитку, где «никак не проработана целевка», то есть не разобрано, кто покупатель. В итоге компания говорит то же, что и конкуренты.

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

Мы проверяем список страниц исследованием из трёх частей: интервью с отделом продаж, анализ конкурентов, разбор поисковых запросов. Для оптовой компании по полимерным трубам вместо заголовка «Каталог продукции» появился «Производим все виды полимерных труб диаметром от 16 до 1600 мм»: так ищет закупщик.

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

Функции и формы

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

Как это выглядело у Снаб Пром. Компания продаёт стальные трубы и производит ППУ-изолированные. На её посадочных страницах пять форм захвата по всей длине страницы. Отдельная форма «до 5 тонн» отделяет мелкие заказы: розничные обращения автоматически уходят в отдельный поток в Битрикс 24. В формах «можно прикрепить файл — снабженцы работают со спецификациями в Excel». Для тех, кому проще написать, есть WhatsApp.

В ТЗ это одна строка на каждую форму: где стоит, какие поля, куда уходит заявка.

Требования к дизайну

ТЗ на дизайн сайта описывает не вкус, а что показать и из каких материалов. «Современный и стильный» проверить нельзя. «Показать разрез продукции и производство» — можно.

На проекте для KazUnion Group, завода полиэтиленовых труб, вместо одинаковых фото из Google Картинок сделали 3D-разрез стенки трубы — «как техническая иллюстрация для презентации, а не как схема из учебника». Клиент записал видео с завода, и на странице появился видеоблок — тур по производству. В задании это выглядит так: «Продукция — 3D-разрез; производство — видео заказчика; фото со стоков не используем».

Что ещё записать: фирменные цвета и логотип, страницы-образцы, которые нравятся, и чем именно. Как готовят и согласуют макет сайта, — отдельная статья.

Тип сайта и технология

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

Технологию тоже пишут в задании, чтобы знать, кто и как будет вносить правки. Мы делаем все сайты на статике: HTML, JavaScript, при необходимости React. Строка в ТЗ: «Технология — статика; исходный код передаётся заказчику».

Интеграции и аналитика

Этот раздел отвечает на вопрос, что будет известно о посетителях после запуска. О рекламе Роман говорит: «мы про этих людей знаем огромное количество информации». Без счётчиков этих данных нет.

В ТЗ перечисляют:

• счётчики аналитики и цели — какие действия считать;
• запись сессий — как посетители кликают и прокручивают страницы;
• сквозную аналитику — путь от первого касания в рекламе до покупки;
• передачу заявок в CRM — какие поля и в какую воронку.

Интеграция с CRM у нас — дополнительная услуга, поэтому её стоит записать отдельной строкой: так она попадёт в смету.

Тексты и материалы

Здесь решают, кто пишет тексты и кто даёт фото. Обычно до старта собирают:

• тексты или исходные данные для них;
• фото продукции и команды;
• логотип и фирменные цвета;
• частые вопросы клиентов менеджерам.

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

Домен, хостинг и доступы

Раздел фиксирует, кому принадлежит сайт. У нас хостинг и домен всегда оформлены на клиента, все доступы мы отдаём. В ТЗ записывают, на кого оформлены домен и хостинг, кто получает доступы к сайту, к аналитике и к рекламным кабинетам.

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

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

• форма отправляет заявку на почту и в CRM;
• страница открывается на телефоне без горизонтальной прокрутки;
• счётчик записывает отправку формы как цель.

Если пункт нельзя проверить, его переписывают до подписания.

Теперь — как эти девять разделов выглядят в одном документе.

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

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

Ячейки короткие намеренно: на совещании проще обсуждать строку, чем абзац. Для одностраничного проекта часть строк упрощается — об этом следующий раздел.

ТЗ на лендинг: что меняется

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

Что меняется в задании:

• Первый экран под запрос. Посетитель искал «трубы ПНД 110 мм оптом» — и видит этот заголовок, а не общее «Полимерные трубы».
• Техническая обвязка из шести частей: счётчики аналитики, учёт звонков — коллтрекинг, подмена заголовка под поисковый запрос, всплывающие формы, обратный звонок и чат.
• Подмена первого экрана для разных кампаний. У ЦСС Кабель был многостраничник с каталогом на 10 000 позиций. Для рекламы сделали мультилендинг: каждая кампания ведёт на одну и ту же страницу с параметром в ссылке, и скрипт собирает первый экран под запрос — заголовок, изображение товара, предложение. Многостраничник остался для поиска.

Пример ТЗ на один экран для условной компании, которая продаёт бетон с доставкой:

• Цель: заявка на расчёт доставки.
• Заголовок: подставляется из запроса; по умолчанию — «Бетон с доставкой на объект».
• Под заголовком: марки бетона, зона доставки, кнопка «Рассчитать».
• Форма: объём, адрес, телефон; заявка уходит в CRM.
• Ниже первого экрана: обратный звонок, чат, счётчики и коллтрекинг.

Посадочная страница под рекламу — отдельная работа со своей логикой. Подробно о ней — как мы делаем лендинги.

Список того, что проверить перед подписанием, — в следующем разделе.

Чек-лист: что должно быть в ТЗ на разработку сайта

Вместо шаблона ТЗ для сайта — чек-лист: шаблон чужого проекта приходится переписывать, а по списку видно, чего не хватает в вашем. Его удобно распечатать и пройти на совещании с подрядчиком.

• Цель сайта записана как действие посетителя
• Для каждой страницы указан вопрос покупателя, на который она отвечает
• Описаны все формы: место, поля, куда уходит заявка
• Требования к дизайну проверяемы: что показать и из каких материалов
• Выбран тип сайта, названа технология, решено, кому передаётся код
• Перечислены счётчики, цели и подключения, в том числе CRM
• Решено, кто пишет тексты и кто даёт фото
• Домен и хостинг оформлены на заказчика, доступы передаются
• Работа разбита на этапы, у каждого есть проверяемый результат
• Отдельно записано, что в работу не входит

Последний пункт чаще всего пропускают. О нём — дальше.

Что не вошло в ТЗ, оплачивается отдельно: ТЗ и договор

ТЗ — приложение к договору. Подрядчик считает цену по его составу, и всё, чего в документе нет, в цену не входит. Новая страница, интеграция или тексты, о которых вспомнили в середине работы, — это дополнительная смета.

Роман говорил о проектах с ИИ, что все расчёты и раньше шли «от тз», а теперь это «просто без вариантов». С разработкой то же: задание — основа сметы.

Внедрение по шагам без общего плана он описывает так: «Иначе это путь долгостроя бесконечного а это больно очень и главное сильно дороже». И ещё: «Подушки то нет как правило, все на грани рентабельности». Для малого бизнеса неучтённая работа — это не только переплата, но и кассовый разрыв.

Что чаще всего забывают записать:

• тексты и фото, если их готовит подрядчик;
• интеграцию с CRM, если её нет в разделе подключений;
• страницы, которые появились после согласования прототипа;
• оплату домена и хостинга.

Коммерческое предложение на разработку сайта показывает состав работ, порядок этапов, срок и цену; ТЗ раскрывает, что именно стоит за каждой строкой.

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

Вопросы и ответы

Что писать в техническом задании?

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

Как выглядит ТЗ для сайта?

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

В чем разница между ТЗ и ЧТЗ?

ЧТЗ — частное техническое задание: оно детализирует одну часть большой системы внутри общего ТЗ; термин пришёл из государственных стандартов. Компании обычно хватает одного техзадания на разработку сайта.

Сколько по времени занимает разработка сайта?

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

Сколько берут за создание сайта?

За создание сайта в Diple лендинг стоит от 400 000 тенге, корпоративный сайт — от 600 000 тенге; точная стоимость зависит от объёма задач, то есть от ТЗ. Клиенты говорят Роману, что не понимают, чем подрядчики отличаются: на сайтах написано одно и то же, а цены кардинально разные. Сравнивать стоит состав работ по заданию. Подробнее — сколько стоит сайт.

Заключение

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

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