Технічне завдання на розробку сайту: що в ньому має бути

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

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

Що таке ТЗ і чим воно відрізняється від брифу

Ці два документи часто плутають, хоча вони про різне:

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

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

Навіщо ТЗ замовнику, а не лише розробнику

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

• Фіксує обсяг і ціну. Коли обсяг робіт описаний, підрядник не може «згадати» посеред проєкту, що ця функція коштує окремо. І навпаки — ви не додаєте нескінченні хотілки, які зривають терміни.
• Прибирає суперечки «ми домовлялися інакше». Усе, про що домовились, — у документі. Немає простору для різного тлумачення на здачі.
• Дає змогу порівняти підрядників. З одним ТЗ ви отримуєте зіставні пропозиції від кількох команд, а не «в одного 20 тисяч, в іншого 120» без розуміння, за що. Як обрати виконавця за такими пропозиціями, ми розібрали в матеріалі про те, як вибрати підрядника для сайту.
• Економить бюджет. Кожна правка після старту розробки коштує дорожче, ніж узгодження на папері. ТЗ переносить рішення на найдешевший етап — до написання коду.

Що має містити технічне завдання

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

Для сайту-візитки цей документ короткий, для інтернет-магазину чи сервісу з кабінетом — детальний, зі сценаріями користувача й описом ролей. Головне — щоб кожен пункт можна було однозначно перевірити на здачі: «зроблено / не зроблено», без місця для трактувань.

Опис сторінок і сценаріїв: серце ТЗ

Найважливіша частина ТЗ — не список функцій, а те, як користувач ними користується:

• Структура й навігація. Скільки сторінок, як вони повʼязані, що в меню. Тут вирішується, буде це односторінковий лендинг чи багаторівневий сайт — про різницю ми писали в статті лендинг чи багатосторінковий сайт.
• Блоки кожної сторінки. Що саме на головній, у каталозі, на сторінці послуги — у якому порядку й з якою метою.
• Сценарії дії. Що відбувається, коли клієнт натискає «Замовити»: куди йде заявка, що бачить користувач, яке повідомлення приходить вам. Саме тут ховаються приховані обсяги робіт.
• Інтеграції. Оплата, CRM, доставка, розсилки — усе, що сайт має «стикувати» із зовнішніми системами.

У технічних вимогах варто окремо зафіксувати й платформу, на якій робиться сайт: від неї далі залежать і швидкість, і можливості розвитку — аргументи за кожен варіант ми зважили в порівнянні WordPress і Next.js.

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

Шаблон технічного завдання: готова структура

Нижче — каркас, який можна скопіювати й заповнити під свій проєкт. Для візитки достатньо пунктів 1–5, для магазину чи сервісу знадобляться всі.

1. Про проєкт. Компанія, сфера, що продаєте, чим відрізняєтесь від конкурентів.
2. Цілі сайту. Одна головна дія (заявка, дзвінок, замовлення) і як ви рахуватимете результат.
3. Аудиторія. Хто клієнт, з якого пристрою заходить, що йому важливо вирішити.
4. Структура. Перелік усіх сторінок списком, з рівнями вкладеності.
5. Опис кожної сторінки. Блоки згори вниз, що в кожному, яка кнопка веде далі.
6. Функціонал. Форми й поля, каталог і фільтри, кошик, кабінет, оплата, мови.
7. Інтеграції. CRM, платіжна система, служба доставки, аналітика, месенджери.
8. Дизайн. Приклади сайтів, які подобаються, і чим саме; фірмові кольори, шрифти, логотип.
9. Технічні вимоги. Платформа, адаптивність, швидкість, базове SEO, хостинг і домен.
10. Контент. Хто дає тексти й фото, у які терміни, що робимо з тим, чого немає.
11. Етапи й терміни. Що здається на кожному етапі і як приймається.
12. Критерії приймання. Перелік перевірок, за якими сайт вважається зданим.

Останній пункт пропускають найчастіше, а він найдієвіший: саме він перетворює суперечку «мені не подобається» на перевірку за списком.

Приклад опису сторінки в ТЗ

Абстрактні формулювання — головна проблема самописних ТЗ. Порівняйте.

Погано: «Сторінка послуги з описом і сучасним дизайном».

Добре: «Сторінка послуги. Блоки згори вниз: (1) заголовок + коротке пояснення + кнопка «Отримати розрахунок»; (2) три вигоди іконками; (3) що входить у роботу — список із 6–8 пунктів; (4) ціна: три пакети з переліком робіт; (5) етапи роботи з термінами; (6) 4 питання-відповіді; (7) форма заявки (імʼя, телефон, коментар). Кнопка «Отримати розрахунок» веде до форми в п.7 і підсвічує її».

Другий варіант можна однозначно перевірити на здачі. Перший — ні, і саме через такі рядки народжуються переробки за ваш рахунок.

Як ТЗ впливає на ціну й терміни

ТЗ не робить сайт дорожчим — воно робить ціну чесною й передбачуваною:

• Точна оцінка замість «вилки». За описаним обсягом підрядник називає реальну ціну, а не діапазон «від і до». З чого вона складається, ми розклали в матеріалі про вартість розробки сайту.
• Менше переробок. Кожне непорозуміння, спіймане в ТЗ, — це переробка, яка не сталася в коді. А переробка коду коштує в рази дорожче за правку в документі.
• Захист від зривів термінів. Коли етапи й критерії приймання зафіксовані, проєкт не «пливе» нескінченно. Ця сама логіка працює і при редизайні наявного сайту, де без ТЗ легко переробити половину зайвого.

Що робити, якщо ТЗ немає

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

1. Почніть з брифу. Опишіть бізнес, аудиторію, цілі й приклади сайтів, які подобаються. Це вхідні для ТЗ.
2. Замовте ТЗ як окремий етап. Хороша команда оформить структуру, опис сторінок і функціонал у документ, який лишається вашим — навіть якщо робити сайт ви підете до іншого підрядника.
3. Не пропускайте узгодження. Перечитайте ТЗ так, ніби ви приймальник: чи все зрозуміло, чи немає розмитих формулювань на кшталт «сучасний дизайн» без критеріїв.

Навіть для простого сайту-візитівки для сфери послуг короткий структурований опис заощадить вам і час, і нерви.

ТЗ — це найдешевша страховка проєкту

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

Етапи роботи, склад робіт і орієнтовні ціни зібрані на сторінці розробка сайту під ключ.

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