Как составить грамотное ТЗ на создание сайта: примеры и частые ошибки

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

А на вашем сайте техничка в порядке?

• Подарим чек-лист по внутренней оптимизации
• Проконсультируем по SEO-вопросам

Получить чек-лист

Зачем составлять ТЗ на сайт

Обойтись без технического задания на разработку сайта можно, но нецелесообразно. Честно говоря, мало кто работает без ТЗ, особенно в сложной сфере веб-разработки.

Грамотное техзадание упрощает жизнь заказчику сайта, потому что:

1. Позволяет узнать предварительную стоимость разработки.
2. Ускоряет согласование базовых вопросов.
3. Уточняет, как именно должен работать и выглядеть будущий сайт.
4. Позволяет собрать все пожелания и требования по проекту в одном документе.
5. Дает возможность сверять промежуточные этапы исходя из первоначального плана и вносить изменения в любой компонент.

...и подрядчику-исполнителю:

1. Ускоряет разработку проекта.
2. Дает четкое понимание главной задачи.
3. Дает страховку от выполнения несогласованных задач и формирует хороший базис для будущего развития проекта.

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

Как составлять ТЗ на разработку сайта и кто это делает

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

Заказчик может сильно помочь исполнителю, если заполнит бриф на создание сайта. В этом документе нужно дать ответы на базовые вопросы о том, каким вы видите свой проект.

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

Фиксируйте изменения через Change Log: дата, версия, что изменилось, согласовано кем. Версия ТЗ указывается в шапке документа и в договоре (как приложение). Этот процесс снижает риск переделок и конфликтов на приемке.

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

Техническое задание состоит из нескольких разделов. Их названия могут различаться, но смысл одинаков.

Организационные вопросы

Срок сдачи и объем работ зависят от сложности проекта. Ориентировочные сроки по типам сайтов:

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

5 классных SEO-кейсов

Круче, чем Гудини: как мы вырастили трафик в 2,2 раза

Все вы прекрасно знаете Гарри Гудини: этот фокусник мог выбраться из закрытой бочки, брошенной в воду. Примерно в таких же рамках оказались и мы, начиная работу с сайтом Eurorepar. Узкий функционал, жесткие требования. Но мы справились без магии, увеличив трафик х2!

Читать кейс

Читать кейс

Как выжать максимум из двадцатилетнего сайта

Можно ли выжать максимум из 20-летнего сайта и докрутить его до современных стандартов? А если есть отягчающие обстоятельства — накрутка поведенческих факторов, антиботы, да еще и админка капризничает и сама удаляет категории?

Читать кейс

Читать кейс

Долгая дорога в SEO и мощный прорыв

Наш клиент — интернет-магазин B2B промышленной тематики. Он достался нам после предыдущих подрядчиков, и первые год-два мы исправляли их ошибки. А потом началась долгая кропотливая работа, которая в итоге принесла желанный результат.

Читать кейс

Читать кейс

Qugo: вырастили трафик из блога платформы b2b в 9,7 раз!

Молодой сайт, сложная тематика b2b, крупные конкуренты — с такими вводными трафик и позиции оставляли желать лучшего. Но бы добились цели: повысили трафик и позиции, улучшили узнаваемость бренда

Читать кейс

Читать кейс

Эффективное ссылочное продвижение для федеральной аптечной сети

Федеральная аптечная сеть пришла в Kokoc Performance (входит в Kokoc Group) за ссылочным продвижением. Интересно, что в компании есть своя in-house команда по SEO, которая подготовила ссылочную стратегию, а за ее реализацией обратилась к нам.

Читать кейс

Читать кейс

1/5

Требования к сайту

• Сценарии использования сайта.
• Требования к структуре.
• Требования к навигации.
• Требования к дизайну.
• Требования к юзабилити сайта.
• Требования к функциональным возможностям.
• Требования к технологиям.

KPI и критерии приемки (как проверяем)

Все требования ТЗ принимаются по измеримым критериям ниже (минимальный набор). Это делает проект проверяемым и снижает количество доработок.

Посмотрите образец ТЗ на разработку сайта. А так выглядит фрагмент ТЗ на создание сайта в формате юридического договора:

А вот еще один пример технического задания на разработку сайта, регламентирующий отображение главной страницы:

Примеры ТЗ на создание сайта

Далее подробно рассмотрим главные пункты технического задания на разработку сайта.

Движок

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

• SaaS-платформа: Wix, Tilda;
• самописный движок;
• фреймворк;
• CMS (Wordpress, Drupal, OpenCart).

Чтобы помочь исполнителю подобрать правильный движок, обязательно ответьте на три вопроса:

1. Кто будет заниматься администрированием сайта: профессиональный вебмастер или человек со стороны заказчика?
2. Кто будет заниматься публикацией контента?
3. Кто будет обслуживать сайт и осуществлять его техническую поддержку: разработчик или человек со стороны заказчика?

Если в штате компании нет разработчиков, разумнее выбрать коробочную CMS. SaaS-сервисы рекомендовать сложнее, так как они имеют своеобразную, всегда закрытую архитектуру и подходят для воплощения сайтов с ограниченным функционалом.

Дизайн

На бумаге описать дизайн сайта сложно. Здесь работает одно простое правило: откажитесь от субъективизма. Никаких «стильный», «красивый», «необычный» и уж тем более — «продающий». Гораздо легче подходить к дизайну, когда у вашей компании уже есть разработанный брендбук.

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

• Главные и второстепенные шрифты.
• Тематика изображений.
• Основные и вспомогательные цвета.
• Допустимые и недопустимые цветовые сочетания.
• Компоновка элементов интерфейса и визуального пространства.
• Доступность: контраст ≥ 4.5:1, видимый фокус, управление с клавиатуры (WCAG 2.2 AA).

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

Основные разделы сайта

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

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

Вот полезные наблюдения по структуре, подходящие для сайтов практически любых типов:

• Избегайте чрезмерного усложнения в навигации.
• Соблюдайте строгую иерархичность всех разделов.
• Слишком длинные ссылки лучше заменить простыми.
• Ссылка на главную страницу должна быть доступна с любой страницы.
• У каждого документа должен быть свой уникальный URL-адрес.

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

Содержание страниц и описание их элементов

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

К элементам страницы относятся не только кнопки, но и шапка сайта, футер и сайдбар. Для коммерческих сайтов большое значение имеют фильтры.

Для элементов страницы нужно предусмотреть максимально точное и подробное описание. Например: шапка и футер должны быть идентичны на каждой странице, они должны растягиваться по ширине экрана, шрифты в шапке и футере: Comfortaa, кегль от 9 до 16.

Генерация страниц

В этом пункте желательно указать особенности формирования служебных страниц, например 404-й:

Полезно поговорить с разработчиком и попросить его составить чек-лист по генерации страниц — уже с учетом особенностей будущего сайта. Самые капризные, как правило, страницы фильтров.

Фильтры

Страницы фильтров часто страдают от неконтролируемой перезагрузки, сброса ранее выбранных значений и, кроме того, плохо индексируются. У всех этих методов генерации фильтров — Ajax, GET-параметры, статические ссылки — есть свои недостатки. Лучше заранее проконсультироваться с разработчиками и учесть их советы по генерации страниц-фильтров.

Важно правильно выбрать наиболее подходящий метод формирования страниц-фильтров. Сравните основные варианты:

В техническом задании по разработке сайтов, если речь идет об интернет-магазине, обязательно прописывайте оптимизацию фильтров. Так выглядит примерный список требований к страницам-фильтрам:

1. Для страниц-фильтров первого уровня и пересечения более двух параметров должны быть задействованы исключительно статические ссылки (обязательно семантический URL). Также для таких страниц обязательной является возможность самому настроить теги: Title, заголовки H1–H6, Description.
2. В формировании URL фильтров изначально должен быть предусмотрен порядок, иначе получите ошибки или просто неработающие параметры.
3. Полезно настроить индексирование страниц-фильтров и сделать корректную перелинковку внутри сайта.

Наличие контента

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

1. Контент предоставляет заказчик.
2. Контент предоставляет исполнитель.

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

Поддерживаемые технологии

Технические требования к сайту разумнее давать отдельным списком. Рекомендуемые требования включают:

1. Адаптивная верстка для основных брейкпоинтов (mobile-first), кроссбраузерная совместимость.
2. Соответствие сайта «зеленой» зоне системы оценки пользовательского опыта Google Core Web Vitals:
   • LCP (скорость загрузки основного контента) — менее 2,5 секунд;
   • CLS (показатель смещения элементов во время загрузки страницы) — менее 0,1 балла;
   • INP (Interaction to Next Paint, p75) — ≤ 200 миллисекунд.
3. Первоначальная поисковая оптимизация главных страниц.
4. Код ответа сервера должен быть корректным для всех страниц.
5. Доступ по защищенным протоколам (SSH/SFTP). На сайте — HTTPS по всем страницам.
6. Наличие семантического URL.
7. Настроенный стандарт исключений для роботов в файле robots.txt.
8. Наличие карты сайта — пользовательской и XML.

Доменное имя и доменная зона

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

Если понравившееся имя уже занято, попробуйте найти его не в зоне .ru. Чтобы помочь исполнителю выбрать правильное имя, разумно предоставить небольшой чеклист с требованиями к доменному имени:

• Наличие продающих слов внутри имени: kupivip.ru или saletennis.com.
• Наличие названия компании внутри доменного имени: dom.ru или megafon.ru.
• Наличие ключевого слова — желательно предоставить список отдельных слов, которые могут присутствовать в доменном имени: например, «clothes» или «одежда».
• Доменная зона: .RU, .COM, .DE, .UK, .ORG и т. д.
• Тематика или категория доменного имени: спорт, общество или реклама.

Исполнитель должен предложить несколько наилучших вариантов, наиболее отвечающих запросу заказчика. Подробнее о доменном имени мы писали в блоге.

Эффективное SEO

• Гарантия результатов
• Комплексное развитие
• При любом тарифе отслеживаем динамику заявок и звонков с сайтов
• Регулярный пересмотр семантического ядра

Узнать больше

Требования к хостингу-провайдеру

От хостинга зависит доступность вашего сайта в интернете и бесперебойность его работы. В ТЗ укажите следующие параметры:

• Тип хостинга: виртуальный, VPS, серверы. Подробнее о том, как выбрать хостинг, вы можете узнать в нашем блоге.
• Возможность быстрой установки CMS.
• Поддержка необходимых технологий: доступ по SSH, защита от DDoS-атак, возможность бекапов.
• Минимальная дисковая квота.
• Планируемая статическая нагрузка в аккаунте.
• Планируемый трафик: ориентировочное количество пользователей на вашем сайте за одни сутки.
• Наличие встроенного файлового менеджера.
• Возможность бесплатного переноса сайта.

Топ-7 ошибок при формировании ТЗ на разработку сайта

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

1. Не указывается тип сайта. При разработке исполнитель будет ошибочно ориентироваться на определенный тип сайта: блог, магазин, корпоративный сайт. Верное же видение должно быть уже на старте работ.
2. Не указываются целевые действия. Если заказчик не уточнил, какие ключевые действия для него главные (приводящие к продажам), могут возникнуть сложности при первоначальной настройке аналитики. Лучше сделать это еще на старте.
3. Нет примеров сайтов. Если заказчик не предоставил референсы, или примеры сайтов, которые считает наиболее подходящими, исполнителю будет сложно понять, в каком направлении работать.
4. Не прописаны пользовательские сценарии. . Это к вопросу о целевой аудитории: перед составлением технического задания вы должны четко представлять, кто ваши посетители и зачем они вообще могут заходить на сайт.
5. Не оговорен вопрос установки счетчиков веб-аналитики. Минимальный набор — «Яндекс Метрика» и Google Search Console.
6. Не регламентируется семантическая разметка сайта. Семантическая разметка помогает поисковой системе лучше понимать контент, публикуемый на странице. Особенно наличие семантической разметки важно для коммерческих сайтов.
7. Пространные требования. В техническом задании недопустимы сравнительные и обтекаемые пожелания, такие как «красивый» или «стильный». ТЗ — это технический документ, и вместо «красивый» / «стильный» лучше прописать конкретику, например — «дизайнерский шаблон, близкий тематике “аксессуары для смартфонов”».

Шаблон ТЗ и чек-лист готовности технического задания

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

Скачать материалы:

• Шаблон ТЗ (.DOCX)
• Пример ТЗ №1 (.DOCX) | Пример ТЗ №2 (.DOCX)

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