Як написати ТЗ на сайт: структура й приклади
Погане ТЗ = роздутий кошторис і переробки. Цілі, структура сторінок, функціонал, дизайн, інтеграції, вимоги до швидкості й SEO — зі зразком по пунктах.
Коротка відповідь: ТЗ — це не «хочу гарний сайт», а документ, за яким студія може назвати точну ціну і строк, а ви — прийняти роботу. Добре ТЗ відповідає на 8 блоків: цілі й метрики, аудит поточного сайту, структура сторінок, функціонал, контент, дизайн-очікування, інтеграції та технічні вимоги (швидкість, SEO, доступність), плюс критерії приймання. Нижче — як написати таке ТЗ самостійно.
Навіщо це вам
Чітке ТЗ економить 20–40% бюджету: підрядник не закладає «запас на невідомість», правок менше, строк передбачуваний. А ще за ТЗ видно, хто рахує, а хто «на око» — ненадійні студії зливаються на першому ж питанні про структуру.
Блок 1. Цілі й метрики, а не «гарно»
Почніть з бізнесу, а не з картинок. Запишіть:
- Навіщо сайт: збирати заявки, продавати товари, інформувати, виходити на новий ринок/мову.
- Одна головна метрика: заявок/міс, конверсія, дохід, частка органіки.
- Хто клієнт і що він має зробити на сайті (цільова дія).
Формулювання, що економить тижні
Погано: «сучасний стильний сайт». Добре: «сайт має приносити ≥ 40 заявок/міс з пошуку й реклами за конверсії ≥ 2%; головна дія — надіслати бриф на розрахунок». За таким ТЗ одразу видно, що важливіше: швидкість, форми чи каталог.
Блок 2. Аудит поточного сайту (якщо він є)
Що залишити, що полагодити, що прибрати: позиції й трафік із Search Console, слабкі сторінки, швидкість (Lighthouse), зручність на мобільному, що не працює в CRM-приймачі заявок. Це захищає від «з нуля все переписати», коли 70% можна зберегти. Повʼязане — редизайн без втрати SEO.
Блок 3. Структура сторінок
Пропишіть карту сайту і по одній цілі на сторінку:
| Сторінка | Задача | Обовʼязкові елементи |
|---|---|---|
| Головна | зачепити + перевести в послугу | оффер, переваги, кейси, CTA |
| Послуга / товар | конвертувати | склад, ціни «від», FAQ, форма |
| Кейси | довести | задача → рішення → цифра |
| Про компанію | довіра | команда, реквізити, сертифікати |
| Блог | трафік | категорії, пошук, підписка |
| Контакти | заявка | карта, клікабельний телефон, месенджери |
Блок 4. Функціонал: що має працювати
Перелічіть по пунктах, а не «і загалом усе»:
- форми (які поля, куди падають, спам-захист), онлайн-чат, зворотний дзвінок;
- калькулятор вартості, фільтри/пошук по каталогу, особистий кабінет;
- багатомовність і локалі (мови, валюти);
- оплата й доставка (для магазину);
- ролі й права в адмінці, хто й що редагує.
Блок 5. Контент і CMS
- Хто пише тексти і де фото — ви, студія чи копірайтинг у пакеті.
- Що редагуєте самі — тоді потрібна адмінка: правки сторінок і блоків без розробника. У нашій моделі це функція тарифу Стандарт (у Лайті правки робимо ми). Чому це важливо — у гайді headless vs WordPress та на сторінці корпоративного сайту.
- Перенесення старого контенту (обсяг сторінок, товари, статті) — окремим рядком.
Блок 6. Дизайн: очікування й референси
- 3–5 сайтів-референсів «подобаеться/не подобається» і чому.
- Бренд: чи є гайд, логотип, фірмові кольори.
- Стиль: мінімалізм/преміум/темна тема; чи потрібні анімації й 3D (це впливає на ціну й швидкість — див. анімації, які продають).
- Дизайн-концепція до коду: зафіксуйте, що ви її затверджуєте.
Блок 7. Технічні вимоги
Швидкість. Lighthouse 90+ і зелені Core Web Vitals (LCP ≤ 2,5 с, INP ≤ 200 мс, CLS ≤ 0,1) на ключових сторінках.
Адаптив. Ідеальна мобільна версія (mobile-first), підтримка пристроїв від 320 px.
SEO-база. ЧПУ-URL, canonical, sitemap, robots, метатеги, мікророзмітка, hreflang для багатомовності.
Інтеграції. CRM, телефонія, аналітика (GA4 + цілі), платіжки — з описом кожного контуру.
Доступність. Контраст, alt, клікабельні зони ≥ 44 px, prefers-reduced-motion.
Безпека й бекапи. HTTPS, автобекапи, розмежування прав.
Блок 8. Інтеграції (окремою таблицею)
| Система | Навіщо | Дані |
|---|---|---|
| CRM (Bitrix24/HubSpot/своя) | жодної втраченої заявки | контакт, угода, джерело |
| 1С/BAS | актуальні залишки й ціни | номенклатура, склад |
| Телефонія | запис дзвінків у картку | номер, тривалість |
| Оплата/доставка | прийом замовлень | статус, чек |
| GA4 + Search Console | міряти результат | події, запити |
Як це будується під капотом — інтеграція сайту з CRM і 1С.
Блок 9. Критерії приймання й строки
Прямо в ТЗ запишіть, що вважається «зроблено»:
- сторінки з версткою за затвердженим макетом, крос-браузерно;
- Lighthouse ≥ 90 на 3 ключових сторінках (додати звіт);
- форми доставляють заявку в CRM, цілі шлються в GA4;
- контент перенесено, метатеги заповнені, sitemap віддає 200;
- навчили редагувати, передали доступи й вихідники;
- гарантія на баги (наприклад, 6–12 місяців).
Що вбиває ТЗ
«Зробіть як у конкурента, але краще» без конкретики.
Немає цільових дій і метрик → незрозуміло, що тестувати.
Функціонал описаний словами «і загалом», «різне різне».
Не вказано, хто дає тексти й фото → проєкт стає на етапі наповнення.
Немає критеріїв приймання → суперечка «готово/не готово» в кінці.
Міні-зразок ТЗ (скопіювати й заповнити)
1. Проєкт: сайт компанії X. Ціль: ≥ N заявок/міс, конверсія ≥ Y%. 2. Аудит: поточний сайт — позиції, швидкість, проблеми. 3. Структура: головна, 4 послуги, кейси, про нас, блог, контакти. 4. Функціонал: форми → CRM, калькулятор, багатомовність (UK/EN), пошук. 5. Контент: тексти — студія, фото — замовник, перенесення 12 сторінок. 6. Дизайн: референси A/B/C, темна тема, GSAP-анімації, концепт до коду. 7. Техніка: Lighthouse 90+, CWV зелені, hreflang, GA4+цілі, мікророзмітка. 8. Інтеграції: CRM, телефонія, оплата. 9. Приймання: звіт Lighthouse, тест форм, передача доступів і вихідників, гарантія 12 міс. 10. Бюджет і етапи: фікс-кошторис, демо щотижня.
Я не розбираюся в технічній частині — навіщо мені тоді ТЗ?
ТЗ не зобовʼязане бути технічним трактатом. Достатньо описати цілі, структуру і «що має працювати». Хороша студія сама перетворить це на техзавдання і поставить розумні питання — за ними ви й зрозумієте, з ким маєте справу.
ТЗ робить замовник чи студія?
Ідеально — разом: ви даєте цілі й контекст бізнесу, студія оформлює в структуру, функціонал і критерії. Часто це безкоштовний етап перед договором. Ми в DEXA починаємо з 30-хвилинного брифу й самі фіксуємо кошторис і ТЗ.
Скільки коштує розробка за таким ТЗ?
Залежить від функціоналу. Орієнтири: лендінг від 29 000 ₴ (~$699), корпоративний сайт від 55 000 ₴ (~$1,325), магазин від 150 000 ₴ (~$3,614), кастомна CRM від 150 000 ₴ (~$3,614). Розрахунок під ваше ТЗ — на сторінці тарифів та в гайді скільки коштує сайт у 2026.
Що важливо у продакшені
Гарне ТЗ — це переклад бізнес-цілі на мову сторінок, функцій і критеріїв приймання. Заповніть 9 блоків вище — і ви отримаєте точний кошторис, передбачуваний строк і сайт, що вирішує задачу, а не «просто є».
Отримати ТЗ і кошторис під ваш сайт → — на безкоштовному брифі допоможемо оформити цілі в техзавдання і назвемо фіксовану ціну. Читайте також: як обрати веб-студію та лендінг чи сайт.
корпоративний · Лайт від 55 000 ₴ (~$1,325) · корпоративний · Стандарт від 89 000 ₴ (~$2,145) · корпоративний · Преміум від 145 000 ₴ (~$3,494)
Потрібне таке саме рішення для вашого бізнесу?
Сайт компанії з авторським дизайном і анімаціями: послуги, кейси, команда, мови й адмінка. Структуру будуємо під запити клієнтів у Google.
- Від 5 сторінок: послуги, кейси, команда, ціни
- Лайт — індивідуальний макет без складних анімацій
- Стандарт — авторський дизайн, GSAP, дві мови, адмінка
Отримайте безкоштовний аудит сайту за 48 годин
Швидкість, SEO, конверсія — звіт на 12 сторінок із пріоритезованим планом поліпшень. Без зобовʼязань і спаму: ми покажемо, що виправити, навіть якщо ви не станете нашим клієнтом.
