Как написать ТЗ на сайт — чтобы разработчик понял с первого раза
Техническое задание (ТЗ) — это мост между вашей идеей и готовым сайтом. Без него каждый участник проекта понимает задачу по-своему. По статистике Института управления проектами (PMI), 70% проблем в IT-проектах возникают из-за нечётко сформулированных требований. Это сорванные сроки, перерасход бюджета в 1,5–2 раза и испорченные отношения с разработчиком.
Хорошее ТЗ — это не «бумажка для галочки», а рабочий документ, который экономит 30–50% бюджета. Фрилансеру не нужно додумывать — он просто берёт и делает. Заказчику не нужно переделывать — он получает именно то, что заказал. Разбираемся, как составить такое ТЗ, с какими разделами и деталями.
Почему ТЗ — самый важный документ в проекте
Представьте, что вы просите архитектора построить дом, показывая фотографию из Pinterest: «Хочу примерно такое». Архитектор начинает строить — выясняется, что вам нужен второй этаж, а фундамент уже залит. Переделывать — дорого и долго. С сайтом то же самое.
Исследование CB Insights показало, что 37% стартапов проваливаются из-за отсутствия рыночной потребности. Но даже если потребность есть — плохое ТЗ приводит к тому, что продукт не решает задачу пользователя. Разработчик делает так, как понял, а понял он не то, что вы имели в виду.
Вот три главные проблемы, которые решает ТЗ:
Проблема 1: Разное понимание. Вы говорите «сделайте красиво», разработчик делает в своём стиле. Вы говорите «форма обратной связи» — разработчик делает три поля. А вам нужно пять.
Проблема 2: Нет базы для спора. Вы считаете, что кнопка должна быть зелёной, а разработчик — что синей. В ТЗ написано: «Кнопка #10B981, скругление 12px, тень при наведении». Спорить не о чем.
Проблема 3: Бесконечные правки. Без ТЗ проект идёт по кругу: сделали → показали → не нравится → переделали → опять не нравится. С ТЗ каждый этап чётко определён, и правки вносятся в рамках согласованного бюджета.
Хорошее ТЗ можно передать трём разным разработчикам и получить три сопоставимые цены. Плохое ТЗ — три цены с разницей в 10 раз и непонятно, что в итоге получите.
Полный шаблон ТЗ на сайт
Ниже — структура ТЗ, которая подходит для любого сайта: от лендинга до интернет-магазина. Вы можете убрать лишние разделы или добавить свои. Главное — не пропускать разделы, которые кажутся очевидными. «Очевидное» для вас может быть совершенно неочевидным для разработчика.
Раздел 1: Описание проекта и цели
Этот раздел отвечает на вопрос «ЗАЧЕМ?». Если нет чёткой цели — нет критериев успеха. Без них вы никогда не скажете «готово».
Что написать:
— Бизнес-цели: «Получать 50 заявок в месяц с сайта» или «Увеличить продажи на 30% за полгода».
— KPI: конверсия (какой % посетителей должен оставить заявку), средний чек, количество визитов в день.
— Целевая аудитория: кто придёт на сайт (возраст, профессия, боли, потребности). «Владельцы малого бизнеса 30–50 лет, которые хотят заказать сайт, но боятся дороговизны».
— Проблема, которую решает сайт: «Люди не знают, сколько стоит сайт, и боятся звонить. Сайт должен дать прозрачные цены и портфолио».
— Конкуренты: 2–3 сайта конкурентов, чем вы будете лучше.
Пример плохо: «Нужен сайт для компании».
Пример хорошо: «Сайт-портфолио для веб-студии. Цель — получение заявок на разработку сайтов. KPI: конверсия 3%. ЦА: владельцы бизнеса 28–50 лет. Проблема: не понимают, зачем платить 100 000, когда можно за 10 000 — надо показать разницу в качестве. Основные конкуренты: site1.ru, site2.ru».
Раздел 2: Функциональные требования
Этот раздел — самый объёмный. Здесь описывается каждая функция сайта. Не «сделайте как у всех», а «вот как должно работать».
| Функция | Что описать |
|---|---|
| Регистрация / авторизация | Через email, телефон или соцсети? Восстановление пароля? Подтверждение email? Личный кабинет после входа? |
| Формы | Какие поля (имя, телефон, email, комментарий), маска ввода телефона, валидация, куда отправляются данные, что показывается после отправки (спасибо, письмо, редирект) |
| Личный кабинет | Какие разделы: история заказов, избранное, настройки профиля, бонусный счёт? Что видит обычный пользователь, что — администратор? |
| Поиск | Поиск по сайту: по каким полям ищет, выдаёт ли подсказки, есть ли фильтры в результатах, как отображаются пустые результаты? |
| Фильтры и каталог | Категории, подкатегории, фильтры по цене, по характеристикам, сортировка (по цене, по популярности, по новизне), пагинация (по 12 / 24 / 48 товаров) |
| Корзина и заказ | Добавление в корзину без перезагрузки (AJAX), изменение количества, удаление, расчёт доставки, промокоды, способы оплаты |
| Админ-панель | Управление товарами, заказами, пользователями, контентом. Кто имеет доступ, какие роли (админ, менеджер, контент-менеджер)? |
| Интеграции | CRM (amoCRM, Bitrix24), email-рассылки (Unisender, SendPulse), платёжные системы (ЮKassa, Sberbank), соцсети, аналитика (Яндекс.Метрика, Google Analytics) |
Совет: опишите пользовательский сценарий. «Посетитель заходит на главную → видит акцию → переходит в каталог → выбирает товар → добавляет в корзину → оформляет заказ → получает письмо с подтверждением». Если сценарий работает — функции правильные.
Раздел 3: Технические требования
Этот раздел для разработчика. Здесь вы указываете ограничения и пожелания по технологиям, хостингу, безопасности.
Что указать:
— CMS: WordPress, OpenCart, 1С-Битрикс, Tilda — или кастомная разработка без CMS. Если не знаете — напишите «рекомендуйте оптимальный вариант под мои задачи». Обычно для лендингов — Tilda/Readymag, для магазинов — OpenCart/WooCommerce, для сложных проектов — кастом.
— Хостинг: кто обеспечивает (вы или разработчик), требования к серверу (PHP 8.x+, MySQL 8, Nginx, SSD). Надёжные хостинги: Beget, Timeweb, Reg.ru, или VPS для высоконагруженных проектов.
— Стек технологий: если есть особые пожелания — React/Vue, Node.js/PHP/Python, база данных PostgreSQL/MySQL. Если не знаете — доверьтесь разработчику, но запишите в ТЗ, что используете.
— Безопасность: HTTPS (SSL-сертификат обязателен), защита от SQL-инъекций и XSS-атак, шифрование паролей, капча на формах, регулярное бэкапирование (ежедневное, хранить 30 дней), защита от DDoS.
— Адаптивность: сайт должен работать на телефонах, планшетах, ноутбуках, больших экранах. Конкретные брейкпоинты: 320px, 768px, 1024px, 1440px.
— Скорость: загрузка страницы не более 2–3 секунд, PageSpeed Insights — 90+ баллов для мобильных.
— SEO: ЧПУ (человеко-понятные URL), возможность редактировать мета-теги, sitemap.xml, robots.txt, микроразметка Schema.org (для товаров — Product, для статей — Article, для компании — Organization).
Раздел 4: Дизайн и UX
Описание дизайна — самая частая причина споров. Без конкретики разработчик рисует «как красиво» в своём понимании. А вам может не понравиться. Решение — референсы.
Что включить:
— Референсы: ссылки на 3–7 сайтов, которые вам нравятся. Для каждого напишите, что именно привлекло: «нравится воздушность на сайте A, цветовая гамма сайта B, анимация при скролле на сайте C». Без референсов — как угадать ваш вкус вслепую.
— Цветовая схема: основные цвета (обычно 2–4). Укажите точные коды HEX: например, первичный цвет #4F46E5 (фиолетовый), вторичный #10B981 (зелёный), фоновый #F8FAFC, текстовый #1E293B. Можно приложить палитру из Coolors или Adobe Color.
— Шрифты: какой шрифт для заголовков (Inter, Montserrat, Playfair Display), какой для текста (Open Sans, Roboto, Golos Text). Размеры: H1 — 48px, H2 — 32px, текст — 16–18px, мелкий текст — 14px. Межстрочный интервал — 1.4–1.6.
— Прототипы: схема расположения блоков на каждой странице. Можно нарисовать от руки на бумаге, можно в Figma / Miro / draw.io. Достаточно 6–8 блоков на страницу: шапка → первый экран → преимущества → услуги → портфолио → отзывы → форма → подвал.
— Настроение: какие ассоциации должен вызывать дизайн. «Дорогой, строгий, минималистичный» или «яркий, молодёжный, дерзкий». Словами описать атмосферу.
Раздел 5: Структура сайта
Карта сайта (sitemap) — это список всех страниц и их вложенности. Разработчик должен видеть полную архитектуру до того, как начнёт верстать.
Пример карты для многостраничного сайта:
1. Главная
1.1. Шапка (логотип, меню, соцсети)
1.2. Первый экран (заголовок, подзаголовок, CTA-кнопка, фон)
1.3. Преимущества (3–6 карточек с иконками)
1.4. Услуги (3–6 карточек с ценами)
1.5. Портфолио (последние 3 работы с превью)
1.6. Отзывы (карусель или сетка)
1.7. Форма захвата (имя, телефон, кнопка)
1.8. Подвал (контакты, реквизиты, копирайт)
2. О нас
2.1. Текст о компании
2.2. Команда (фото + описание)
2.3. Сертификаты / награды
3. Услуги
3.1. Услуга 1 (страница с детальным описанием)
3.2. Услуга 2
3.3. Услуга 3
3.4. Калькулятор стоимости
4. Портфолио
4.1. Проект 1 (фото, описание, результат, отзыв клиента)
4.2. Проект 2
4.3. Проект 3
5. Контакты
5.1. Форма обратной связи
5.2. Карта (Яндекс.Карты или Google Maps)
5.3. Реквизиты
5.4. Соцсети
6. Блог (если есть)
6.1. Список статей
6.2. Страница статьи
Для каждой страницы укажите: цель страницы, основной призыв к действию, какие блоки на ней расположены. Если на странице несколько вариантов отображения (например, на телефоне блоки идут вертикально) — тоже отметьте.
Раздел 6: Контент
Самый недооценённый раздел. Часто заказчик думает «контент — это мелочь, потом заполню». И сайт стоит месяц, а то и два, потому что тексты не готовы, фотографий нет, а логотип в кривом разрешении.
Кто готовит контент:
— Тексты: заказчик, копирайтер или разработчик (обговаривается отдельно). Если тексты пишете не вы — наймите копирайтера заранее. Средняя стоимость текста для страницы — 1000–3000 рублей, в зависимости от объёма.
— Фото и видео: стоковые фото (Unsplash, Shutterstock, Depositphotos), свои фотографии (закажите предметную съёмку), видео с производства / офиса. Не используйте картинки из поиска Google — это нарушение авторских прав.
— Логотип: векторный .svg или .eps, минимум 500×500 px. Не .jpg.
— Иконки: можно из Font Awesome, Bootstrap Icons, Heroicons — или заказать уникальные.
Что приложить к ТЗ:
— Тексты для каждой страницы в формате .docx или Google Docs (не в письме, не в Telegram).
— Папку с изображениями (каждое фото переименовано: glavnaya-fon.jpg, o-komande-1.jpg).
— Логотип в векторном формате.
— Если контента нет — укажите: «контент будет предоставлен через 2 недели после начала работ». Разработчик поставит заглушки, а когда придут тексты — просто подставит их.
Важно: не задерживайте контент. Пока вы собираете тексты, разработчик простаивает. Простой обычно не входит в стоимость — вы платите за время или сроки сдвигаются.
Раздел 7: Сроки и этапы
Проект нужно разбить на этапы с чёткими дедлайнами. Каждый этап — это milestone, после которого можно принять работу и, если всё хорошо, оплатить.
Типовые этапы разработки сайта:
| Этап | Что делаем | Срок | Результат |
|---|---|---|---|
| 1. Аналитика и ТЗ | Сбор требований, изучение конкурентов, подготовка ТЗ | 3–7 дней | Готовое ТЗ, подписанное обеими сторонами |
| 2. Прототип | Схема расположения блоков на каждой странице | 2–5 дней | Прототипы всех страниц (Figma, Miro) |
| 3. Дизайн | Визуальное оформление: цвета, шрифты, графика | 5–10 дней | Макеты всех страниц в Figma |
| 4. Вёрстка | HTML/CSS/JS — превращение макетов в код | 5–14 дней | Готовые страницы (можно открыть в браузере) |
| 5. Программирование | Настройка CMS, форм, интеграций, админки | 7–14 дней | Сайт с рабочим функционалом |
| 6. Контент | Заполнение текстами, фото, видео | 2–5 дней | Сайт с контентом (не «рыба») |
| 7. Тестирование | Проверка всех функций, исправление багов, правки | 3–7 дней | Приёмочный протокол |
| 8. Запуск | Перенос на хостинг, настройка HTTPS, подключение аналитики | 1 день | Сайт в открытом доступе |
Совет: заложите 20% времени на форс-мажоры. Если разработчик говорит «сделаю за месяц» — в ТЗ пишите 5 недель. Лучше сдать раньше, чем опоздать.
Раздел 8: Бюджет и оплата
Прозрачность бюджета устраняет недопонимание. Что входит в стоимость, что — нет, как и когда платить.
Что включить в бюджет:
— Разработка сайта (все этапы из раздела 7).
— Дизайн (количество макетов, количество правок).
— Вёрстка и программирование.
— Наполнение контентом (если не сами).
— Настройка hosting + домен (обычно 1 год включён).
— SSL-сертификат.
— Техническая поддержка на месяц после запуска.
Что не входит (оплачивается отдельно):
— Дизайн логотипа, брендбук.
— Фото- и видеосъёмка.
— Написание текстов (копирайтинг).
— Реклама и SEO после запуска.
— Дополнительные страницы сверх согласованных.
— Срочность (если нужно быстрее — доплата за приоритет).
Схема платежей (рекомендуемая):
— 30% — предоплата (старт работ)
— 30% — после утверждения дизайна
— 30% — после готовности к тестированию
— 10% — после подписания акта приёма-передачи
Такая схема защищает обе стороны. Разработчик не остаётся без денег, заказчик контролирует качество на каждом этапе. Не платите 100% сразу — мотивация разработчика упадёт.
Раздел 9: Приёмка
Когда проект считается завершённым? Без чётких критериев приёмки вы будете править бесконечно, а разработчик — считать каждую правку вне рамок ТЗ.
Критерии готовности сайта:
— Сайт открывается по основному домену (не по временному адресу).
— Все страницы из карты сайта работают.
— Все формы отправляют данные (проверить на тестовых данных).
— Адаптив: сайт корректно отображается на iPhone 14, Samsung Galaxy S23, iPad, ноутбук 13", монитор 27".
— Скорость загрузки: PageSpeed Insights 90+ (мобильные) и 95+ (десктоп).
— SSL-сертификат установлен, HTTPS работает.
— Настроена 301-редирекция с www на без www (или наоборот).
— Яндекс.Метрика и/или Google Analytics установлены и считают.
— Microdata (Schema.org) проставлена для контактов, товаров, статей.
— Нет ошибок в консоли браузера (F12 → Console).
— Передан доступ к админ-панели, хостингу, домену, исходным кодам.
Процесс приёмки:
1. Разработчик сообщает, что сайт готов к тестированию.
2. Заказчик в течение 3–5 рабочих дней проверяет по чек-листу.
3. Обнаруженные ошибки фиксируются (в таблице: страница, что не работает, приоритет).
4. Разработчик исправляет ошибки в течение согласованного срока (обычно 3–5 дней).
5. После исправлений — повторная проверка.
6. Если всё ок — подписание акта и финальный платёж.
Гарантия: обычно 30–90 дней. За этот период разработчик бесплатно исправляет баги, которые не были замечены при приёмке. Контентные правки, доработки и новый функционал в гарантию не входят.
Как выглядит хорошее и плохое ТЗ
Пример плохого ТЗ:
«Нужен сайт для стоматологии. Сделайте красиво. Цены потом скажу. Дизайн — как в том шаблоне. Сроки — вчера. Бюджет — 30 тысяч.»
Результат: разработчик ставит шаблонный сайт на WordPress с готовой темой, вставляет логотип, заполняет текстами-рыбами. Клиент недоволен: «не то», «цвета не те», «а где корзина?». Начинаются бесконечные правки, которые выходят за бюджет.
Пример хорошего ТЗ:
«Сайт для стоматологической клиники "ЗубОК" (ООО "Здоровые зубы"). Цель: запись на приём онлайн. KPI: 200 записей в месяц через сайт. ЦА: жители Москвы 30–55 лет с доходом выше среднего. Проблема: сейчас запись только по телефону, теряем 40% клиентов.
Структура: 1) Главная (три экрана: шапка + кнопка "Записаться", услуги с ценами, форма записи), 2) Услуги (список с подробностями), 3) О клинике (врачи, лицензии), 4) Контакты с картой и реквизитами.
Функции: запись на приём (выбор даты, времени, врача), отправка напоминания в SMS, онлайн-оплата, личный кабинет с историей посещений.
Дизайн: ссылка на dribbble.com/... — нравится минимализм и голубой оттенок. Цвета: #1E40AF (синий), #F0FDF4 (светлый), шрифт Inter. Логотип, тексты, фото — прилагаются отдельным архивом.
Сроки: 4 недели (прототип — 3 дня, дизайн — 5 дней, вёрстка — 7 дней, программирование — 7 дней, тестирование — 5 дней). Бюджет: 180 000 руб. Оплата: 30/30/30/10. Гарантия 60 дней.»
Результат: разработчик даёт точную смету, сайт готов за 4 недели, клиент доволен. Правки — только по мелочам.
Как проверить ТЗ перед отправкой разработчику
Перед тем как отправить ТЗ исполнителю, пройдите по чек-листу:
☐ Сформулирована ли бизнес-цель? — Если нет, перепишите. «Сайт для компании» — не цель. «Получать 50 заявок в месяц» — цель.
☐ Описана ли целевая аудитория? — Разработчик должен понимать, для кого делает сайт. Дизайн для пенсионеров и для тинейджеров — принципиально разные.
☐ Есть ли карта сайта? — Все страницы должны быть перечислены. Если страницы нет в списке — разработчик её не сделает.
☐ Описан ли базовый функционал? — Формы, поиск, фильтры, регистрация. Если функция «очевидна» для вас — для разработчика она может быть не очевидна.
☐ Есть ли референсы? — 3–5 ссылок с пояснениями. Исключает споры о «красоте».
☐ Указаны ли цвета и шрифты? — Хотя бы основные. Если нет — разработчик выберет сам, и это может не понравиться.
☐ Реалистичны ли сроки? — Не «сделайте за 3 дня сайт как у Apple». Сверьтесь с типовыми сроками из раздела 7.
☐ Определён ли бюджет? — И схема оплаты. Обе стороны должны понимать, сколько и когда платить.
☐ Кто готовит контент? — Если контента нет сейчас — укажите дату, когда будете готовы.
Если на все пункты ответили «да» — ТЗ готово к отправке. Если на любой «нет» — лучше доработать.
Бесплатные шаблоны ТЗ
Чтобы не писать с нуля, возьмите готовый шаблон и адаптируйте под свой проект:
— Шаблон ТЗ на сайт от Wrike — универсальный, подойдёт для большинства проектов.
— Шаблон в Notion — удобно для командной работы и комментариев.
— Miro Board для ТЗ — визуальный формат с прототипами.
— Шаблон от Bitrix24 — ориентирован на интернет-магазины и корпоративные порталы.
Помните: ТЗ — живой документ. Оно может уточняться в процессе, но все изменения должны фиксироваться письменно (в том же документе или в чате). Устные договорённости — главный враг хорошего сайта. Договорились устно — напишите в ТЗ и попросите разработчика подтвердить.
Хорошее ТЗ — это инвестиция, а не трата времени. Потратив 2–3 дня на его написание, вы сэкономите недели и десятки тысяч рублей. Не пренебрегайте этим этапом — и ваш сайт получится именно таким, как вы задумали.