ТЗ і бриф на розробку сайту: шаблон і приклад

Бриф і ТЗ: чим вони відрізняються

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

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

Для невеликого сайту (візитка, лендінг, сайт на 10 сторінок) окреме товсте ТЗ не потрібне. Хорошого брифу на одну-дві сторінки плюс списку сторінок і критеріїв приймання достатньо. Велике ТЗ потрібне для складних систем: кабінетів, оплати, інтеграцій. Такі проєкти у нас починаються з платної архітектурної сесії за €3 500, де ТЗ і кошторис перетворюються на карту продукту, а сума зараховується в проєкт.

Навіщо все це вам? Бриф економить гроші та нерви. Підрядник, який розуміє задачу, менше перепитує, швидше надсилає першу версію й рідше переробляє. А ще за якістю питань підрядника видно, наскільки він вникає: більше про це в статті «Як обрати веб-студію й не помилитися».

Шаблон брифу на сайт

Нижче шаблон, який можна скопіювати й заповнити. У відкритих шаблонах брифів (наприклад, в Atlassian) загальна логіка одна: мета, аудиторія, зміст, обмеження, терміни та відповідальні. Ми доповнили її питаннями про сайт.

1. Про компанію

• Назва, форма, країна, сайт і соцмережі, якщо є.
• Чим займаєтеся, у двох-трьох реченнях.
• Чим ви відрізняєтеся від найближчих конкурентів?

2. Навіщо сайт

• Головна мета однією фразою: заявки, продажі, імідж, перевірка банком, запис.
• Що має зробити відвідувач на сайті (зателефонувати, залишити заявку, купити)?
• Як ви зрозумієте, що сайт працює: скільки заявок на місяць вважаєте успіхом?

3. Для кого

• Хто ваш клієнт: вік, країна, місто, чим займається.
• Що він шукає і чого боїться під час вибору?
• З якого пристрою частіше заходить: телефон чи комп’ютер?

4. Що на сайті

• Список сторінок чи розділів (докладніше нижче).
• Чи потрібні форми, оплата, запис, особистий кабінет, блог, мови.
• Куди надходять заявки: на пошту, в CRM, у месенджер.

5. Стиль і приклади

• Чи є логотип і фірмові кольори?
• Три сайти, які вам подобаються, і що саме. І два, які не подобаються.
• Тон: строгий, дружній, експертний.

6. Матеріали

• Що є: тексти, фото, відео, презентації, відгуки, реквізити.
• Що потрібно підготувати підряднику.

7. Терміни, бюджет, відповідальні

• Коли сайт має бути готовий і чому саме до цього терміну?
• Бюджет або вилка.
• Хто ухвалює рішення з вашого боку і як швидко відповідає?

Для невеликого проєкту відповідайте коротко: на кожне питання вистачить однієї фрази. Заповнивши бриф, перевірте його за чек-листом нижче: він покаже, яких відповідей бракує. А якщо ви поки обираєте, який формат сайту вам потрібен, почніть зі статті «Як зробити сайт для бізнесу».

Приклад технічного завдання на сайт

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

Проєкт: сайт для студії інтерʼєрного дизайну «Приклад Студіо»

1. Мета. Отримувати 15–20 заявок на місяць на безкоштовну консультацію з пошуку та реклами.
2. Аудиторія. Власники квартир 30–50 років в одному місті, заходять переважно з телефона.
3. Структура. Головна, Послуги (3 сторінки: проєкт квартири, проєкт будинку, авторський нагляд), Портфоліо, Про студію, Блог, Контакти.
4. Функції. Форма заявки (імʼя, телефон, тип обʼєкта), заявки надходять на пошту й у таблицю; фільтр у портфоліо; блог із рубриками; кнопка месенджера.
5. Мови. Українська та англійська.
6. Дизайн. Світлий, спокійний; логотип і палітру передано; приклади сайтів додано.
7. Технічні вимоги. Адаптивна верстка; захищене зʼєднання; сторінки відкриваються швидко (орієнтир Google — основний контент завантажується за 2,5 секунди й швидше); базове SEO-налаштування (заголовки, описи, мапа сайту).
8. Юридичне. Політика конфіденційності, згода на cookie, реквізити. Тексти перевіряє юрист замовника.
9. Етапи й терміни. Структура — 2 дні; дизайн головної — 3 дні; збірка — 5 днів; наповнення й перевірка — 3 дні; запуск. Термін відраховується з отримання матеріалів.
10. Приймання. Див. критерії нижче.

Для такого проєкту за нашим прайсом підійде сайт для бізнесу за €2 490: до 10 сторінок, блог, 2 мови й SEO-налаштування. Скільки коштують інші варіанти, дивіться в статті «Скільки коштує сайт у 2026 році».

Як описати структуру сайту

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

• Головна. Хто ви, що пропонуєте, головна кнопка, докази.
• Послуги чи товари. Сторінка на кожну послугу, яку люди шукають окремо. Це важливо для пошуку.
• Про компанію. Команда, історія, реквізити: на цю сторінку дивляться банки та партнери.
• Кейси чи портфоліо. Лише справжні роботи.
• Блог. Корисні статті під питання клієнтів.
• Контакти. Пошта, телефон, адреса, форма, мапа.
• Юридичні сторінки. Політика конфіденційності, умови, cookie.

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

Технічні та юридичні вимоги: що варто прописати

Навіть якщо ви не розбираєтеся в техніці, у ТЗ варто включити кілька пунктів. Вони захищають вас від «гарного, але непрацюючого» сайту.

1. Мобільна версія. Сайт має нормально виглядати й працювати на телефоні.
2. Швидкість. Google орієнтується на метрики Core Web Vitals: основний контент має завантажуватися за 2,5 секунди або швидше (LCP), сторінка має швидко реагувати на натискання (INP не більш як 200 мілісекунд) і не «стрибати» під час завантаження (CLS не більш як 0,1). Запишіть це як мету, а не як зобовʼязання підрядника гарантувати цифри на будь-якому телефоні.
3. Захист. Захищене зʼєднання (HTTPS), захист форм від спаму, доступи з двофакторним захистом.
4. Юридичні сторінки. Які потрібні у вашій країні. Для сайтів у ЄС зазвичай це політика конфіденційності, згода на cookie та реквізити компанії, для Німеччини й Австрії ще й Imprint. Тексти на основі шаблонів має перевірити ваш юрист.
5. Володіння. Домен, код і акаунти оформлюються на вас; після запуску ви отримуєте всі доступи.
6. Редактор. Які тексти й блоки ви правите самі.
7. Аналітика. Що рахуємо: заявки, джерела, цілі.

Про SEO-вимоги не потрібно писати докладно. Достатньо вимагати унікальні заголовки й описи сторінок, зрозумілі адреси, мапу сайту та підключення Search Console (безкоштовний сервіс Google, де видно, як сайт показується в пошуку). Позиції в пошуку не прописуйте як зобовʼязання: ніхто чесно не може їх гарантувати.

Критерії приймання: коли сайт вважається готовим

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

• Усі сторінки зі списку створені й відкриваються.
• Сайт коректно виглядає на телефоні, планшеті та комп’ютері в сучасних браузерах.
• Форма надсилає заявку вам, а клієнт отримує підтвердження. Перевірено тестовою заявкою.
• Юридичні сторінки на місці, реквізити вказано.
• Метрики швидкості в межах цілей із ТЗ (перевірка в PageSpeed Insights).
• Аналітика збирає цілі, Search Console підключено.
• Доступи передано вам, домен і акаунти оформлено на вас.
• Є коротка інструкція, як змінювати тексти й фото.

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

Пʼять помилок у брифі та ТЗ

1. «Зробіть красиво». Без прикладів і критеріїв це неможливо перевірити. Принесіть три сайти, які подобаються, і поясніть, чим.
2. Немає мети. «Потрібен сайт, як у всіх» — не задача. Задача: «хочу отримувати 20 заявок на місяць».
3. Усі сторінки одразу. Почніть із головного, решту додавайте після запуску.
4. Матеріали «потім». Тексти й фото затримують проєкт найбільше. Або підготуйте їх до старту, або замовте окремо.
5. Немає відповідального. Якщо з вашого боку відповідають пʼятеро людей, проєкт буксує. Призначте одного.

Якщо всі пʼять пунктів вам знайомі, не страшно: підрядник поставить уточнювальні питання. Але чим краще підготовлено бриф, тим менше ви заплатите за переробки.

Окрема порада щодо мови документа. Пишіть так, як говорите: «на головній має бути кнопка “Записатися”, яка відкриває форму з трьох полів». Таку фразу неможливо зрозуміти двозначно. Фраза «зручна і сучасна головна» залишає підряднику право вирішувати за вас, і потім ви сперечатиметеся, що малося на увазі. Чим конкретніше формулювання, тим простіше прийняти роботу й тим менше правок.

Що обрати у вашій ситуації

• Якщо сайт потрібен терміново, за 24 години, достатньо спрощеної анкети: компанія, чим займаєтеся, контакти, реквізити, домен. Решту ми уточнимо самі. Це «Сайт за 24 години» за €599.
• Якщо у вас невелика компанія й сайт до 5–10 сторінок, заповніть бриф за шаблоном вище, це займе годину-дві. Повне ТЗ не потрібне.
• Якщо ви робите сайт для локальної послуги у вашому місті, додайте в бриф мапу, адреси, години роботи й відгуки клієнтів.
• Якщо потрібні кабінети, оплата та інтеграції, краще не писати ТЗ самому. Замовте архітектурну сесію: на виході буде карта продукту й кошторис, і вони залишаться у вас у будь-якому разі.
• Якщо нічого не готове й ви не знаєте, з чого почати, почніть із цілі та прикладів сайтів, які подобаються, а решту разом уточнить підрядник.

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