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

Технічне завдання (ТЗ) на розробку сайту — це документ, у якому замовник і розробник фіксують, що саме буде зроблено: які сторінки, що на кожній, як працюють форми й каталог, з якими системами сайт зв’язаний і за якими критеріями роботу вважають готовою. Добре ТЗ дає точну ціну й строки ще до старту і прибирає головне джерело суперечок при здачі: «я мав на увазі інше».

Нижче — чим ТЗ відрізняється від брифу, з яких розділів воно складається, як писати вимоги так, щоб їх не можна було зрозуміти інакше, приклад фрагмента ТЗ і шаблон для завантаження (Word, 12 розділів з підказками).

Навіщо ТЗ замовнику

Здається, що ТЗ потрібне розробнику. Насправді воно захищає передусім вас.

• Точна ціна. Без опису функцій студія оцінює «на око» і закладає запас на невідомість — або називає низьку ціну, а потім доплата за кожну «несподіванку».
• Чесне порівняння пропозицій. Коли три студії рахують за одним документом, ви порівнюєте ціни за однаковий обсяг, а не різні продукти під однією назвою «сайт».
• Спокійне приймання. Готовим вважається те, що відповідає ТЗ. Не «подобається — не подобається», а конкретні пункти.
• Незалежність від підрядника. Якщо доведеться змінити студію посеред проєкту, новій команді не треба все з’ясовувати з нуля.

Бриф і ТЗ: у чому різниця

Звичайний порядок такий: ви заповнюєте бриф або описуєте задачу на зустрічі, студія ставить уточнювальні питання, а потім вони разом із вами перетворюються на ТЗ. Писати ТЗ самостійно з нуля не обов’язково. Але що більше ви знаєте про свою задачу, то точнішим воно вийде.

З чого складається ТЗ на сайт: 12 розділів

Ці розділи повторюють наш шаблон — можна заповнювати паралельно з читанням.

1. Про компанію і мету сайту

Чим займаєтеся, для кого, навіщо сайт: заявки, продажі, довіра партнерів, найм. І як зрозуміти, що він працює — наприклад, «20 заявок на місяць із сайту». Сюди ж — адреса нинішнього сайту й 2–3 конкуренти.

2. Аудиторія і цільові дії

Хто приходить на сайт, що шукає і що має зробити: залишити заявку, подзвонити, завантажити каталог, купити. Корисно виписати питання, які клієнти найчастіше ставлять менеджерам, — з них потім складаються блоки сторінок.

3. Структура сайту

Список сторінок. Однотипні — послуги, кейси, товари — описуються одним шаблоном, і це важливо для ціни: вартість залежить від кількості унікальних шаблонів, а не сторінок. Докладніше — у статті скільки коштує сайт.

4. Опис сторінок

Для кожного шаблону — блоки зверху вниз: що в блоці, звідки береться контент, яка дія. Це найкорисніша частина ТЗ: саме тут вирішується, чи знайде людина відповідь і кнопку заявки. Приклад такого опису — нижче.

5. Функціонал

Форми, каталог і фільтри, пошук, калькулятор, особистий кабінет, оплата. Для кожної функції — як вона працює і що відбувається після натискання. «Каталог товарів» — це не вимога. «Каталог авто з фільтрами за маркою, роком, ціною і типом кузова, сортування за ціною» — вимога. Саме такий каталог, до речі, був однією з ключових задач у проєкті A-Finance.

6. Дизайн

Брендбук або хоча б логотип і кольори. Референси — 2–3 сайти з поясненням, що саме в кожному подобається: «подобається, як на цьому сайті показані ціни», а не «подобається сайт». І що вам точно не підходить.

7. Контент

Хто готує тексти, фото, відео, переклади і до якої дати. Контент — найчастіша причина, чому готовий сайт тижнями не запускається. Як його підготувати — у статті про створення контенту для сайту.

8. Інтеграції та аналітика

Куди йдуть заявки: CRM, пошта, робочий чат. Оплата, доставка, облікова система, телефонія. Які дії рахуються як конверсії в Google Analytics. Наприклад, для лендінгу Beauty International School в задачі одразу стояли збір заявок у CRM і відстеження всіх цільових дій — тому заявки йдуть у KeyCRM по API з першого дня. Детальніше — у статті про інтеграцію сайту з CRM.

9. Технічні вимоги

Система керування, мовні версії, адаптивність, браузери, домен і хостинг (на кого оформлені), резервні копії, захист адмінки. Сюди ж — вимоги до швидкості в цифрах, про них нижче.

10. SEO

Окремі заголовки й описи для кожної сторінки, які можна редагувати в адмінці, карта сайту, зрозумілі адреси сторінок. Якщо у вас уже є сайт — обов’язково список старих адрес і редиректи на нові, інакше позиції в Google можна втратити. Чому це критично — у статті про редизайн сайту.

11. Етапи й строки

Структура й прототипи, дизайн, розробка, наповнення, тестування, запуск — з датами й тим, що ви отримуєте на кожному етапі і коли маєте дати відповідь.

12. Приймання роботи

Список того, що перевіряєте перед запуском: усі сторінки заповнені, сайт коректно працює на телефоні, тестові заявки дійшли, швидкість відповідає вимогам, індексацію дозволено, доступи до адмінки, хостингу й домену передано вам.

Хто пише ТЗ і скільки це займає

Найкраще ТЗ пишеться вдвох. Від замовника — знання бізнесу: клієнти, послуги, ціни, процеси продажу. Від студії — досвід, що саме треба уточнити і як це реалізувати: аналітик або менеджер проєкту ставить питання, пропонує рішення й записує домовленості.

Варіанти, які трапляються на практиці:

• ТЗ пише замовник сам. Можливо, якщо у вас є досвід таких проєктів. Ризик — описати рішення («потрібен слайдер на головній») замість задачі («показати три головні послуги»).
• ТЗ пише студія за брифом і зустрічами. Найпоширеніший шлях: це етап аналітики на початку проєкту, його результат ви погоджуєте перед дизайном.
• ТЗ замовляють окремо в незалежного аналітика — щоб потім розіслати кільком студіям і порівняти ціни.

За часом це від кількох днів для лендінгу до кількох тижнів для магазину з інтеграціями. Затримується ТЗ зазвичай не через обсяг, а через відповіді: що швидше замовник погоджує пункти, то швидше старт.

Приклад: фрагмент ТЗ для сторінки послуги

Ось як може виглядати розділ «Опис сторінок» для умовної компанії, що монтує вентиляцію. Приклад вигаданий, але рівень деталізації — робочий.

Шаблон «Послуга» (6 сторінок: вентиляція складів, виробництв, офісів, ресторанів, кондиціювання, обслуговування).

1. Перший екран. Заголовок: назва послуги + для кого («Монтаж вентиляції для складів»). Підзаголовок до 20 слів: що робимо і в які строки. Кнопка «Розрахувати вартість» відкриває форму (п. 7). Фото з реального об’єкта.

2. Що входить. 4–6 пунктів з іконками: проєкт, обладнання, монтаж, пусконалагодження, гарантія.

3. Ціни. Таблиця: тип об’єкта — ціна від, грн за м² — строк. Під таблицею: «Точна ціна — після безкоштовного виїзду на замір».

4. Етапи роботи. 5 кроків від заявки до здачі, у кожного — строк.

5. Кейси. 3 картки: фото, назва об’єкта, площа, строк. Ведуть на сторінки кейсів. Керуються з адмінки: у кожній послузі обираємо, які кейси показати.

6. Питання й відповіді. 5–7 питань, редагуються в адмінці.

7. Форма. Поля: ім’я, телефон (обов’язкові), площа приміщення, коментар. Після надсилання — повідомлення «Дякуємо, передзвонимо протягом робочої години». Заявка потрапляє в CRM у воронку «Сайт» з назвою послуги й UTM-мітками, копія — на пошту відділу продажів. Надсилання форми рахується як конверсія в Google Analytics.

Зверніть увагу: розробник, дизайнер і ви розумієте цей текст однаково. Саме цього й досягає добре ТЗ.

Що додати в ТЗ для інтернет-магазину

Для магазину до 12 розділів додається окремий блок про продаж. Саме тут найчастіше з’являються «несподівані» доплати, тож його варто описати найдетальніше:

• Картка товару: які поля (ціна, стара ціна, наявність, характеристики), скільки фото, чи є варіанти — розмір, колір, комплектація.
• Каталог: категорії, фільтри за характеристиками, сортування, пошук.
• Кошик і оформлення: кроки, обов’язкові поля, чи можна купити без реєстрації.
• Оплата й доставка: які способи оплати й служби доставки, як рахується вартість доставки.
• Обмін даними: звідки беруться товари, ціни й залишки — облікова система, таблиця, ручне введення; чи потрібні вивантаження на маркетплейси.
• Після замовлення: статуси, листи й повідомлення клієнту, куди замовлення потрапляє в CRM.
• Акції: промокоди, знижки, подарунки, накопичувальна знижка.

Недопрацьоване оформлення замовлення — одна з головних причин, чому люди кидають кошик. Що ще до цього призводить, розбираємо в статті про покинутий кошик.

Як писати вимоги, щоб їх не зрозуміли інакше

Головна проблема більшості ТЗ — оцінні слова, які кожен читає по-своєму. Замінюйте їх на перевірювані факти:

Цифри для швидкості — це пороги Core Web Vitals, за якими Google оцінює сторінки. Що вони означають, пояснюємо в статті про швидкість завантаження сайту.

Типові помилки в ТЗ

1. Оцінні слова замість вимог — «гарно», «зручно», «сучасно». Див. таблицю вище.
2. Немає мобільної версії. Якщо в ТЗ описаний лише десктоп, мобільний вигляд вирішуватиме верстальник — і не обов’язково так, як хотіли б ви.
3. Функції «на майбутнє». Особистий кабінет, який «колись знадобиться», подвоює ціну сьогодні. Краще запустити основне, а розширювати за реальними даними.
4. Не визначено, хто готує контент. У підсумку дизайн готовий, розробка готова, а сайт стоїть без текстів.
5. Немає критеріїв приймання. Тоді «готово» — це коли підрядник вважає, що готово.
6. ТЗ не оновлюють. Зміни в процесі нормальні, але кожну варто вносити в документ — разом із тим, як вона впливає на ціну й строки.

Ширший перелік дорогих рішень, які варто зважити до старту, — у статті про помилки при створенні сайту.

Шаблон ТЗ на розробку сайту

Ми зібрали всі 12 розділів в один документ Word: таблиці для заповнення, підказки до кожного пункту й чекліст приймання наприкінці.

Завантажити шаблон ТЗ (.docx, 14 КБ)

Не обов’язково заповнювати все. Навіть перші три розділи — мета, аудиторія, структура — дають студії достатньо, щоб назвати реалістичну вилку ціни й строків на першій розмові. Решту зручно доповнити разом.