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

Одна страница или тридцать

Толщиной гордиться не стоит. ТЗ на сорок страниц, скачанное по шаблону из интернета, не дочитает ни заказчик, ни исполнитель. А строка «сайт должен быть современным» создаёт только видимость договорённости. Берите две страницы, каждую строку которых вы готовы подписать.

ТЗ не заменяет договор. В договоре цена, срок, оплата и права, в ТЗ — что именно делаем. Вопросы, которые стоит задать студии до подписи, разобраны в статье как выбрать веб-студию или разработчика. Здесь только то, что приносите вы.

Что написать в ТЗ: вопросы по разделам

Для лендинга нужны шесть разделов. Для сайта компании добавьте структуру страниц, для механики — условия из следующей части статьи. Отвечайте письменно, в одну–две строки на вопрос. «Не знаю» тоже ответ: с ним разберётесь на созвоне.

Цель и посетитель

Какого одного действия вы ждёте от посетителя: позвонить или записаться на время? Если получилось два, выберите главное, а второе пусть будет кнопкой поменьше. Кто приходит на страницу: из рекламы или по рекомендации, что ищет, из-за чего может уйти. Три фразы о вашем клиенте полезнее таблицы с «целевой аудиторией».

Страницы и блоки

Для лендинга — блоки по порядку и по строке о том, что каждый должен сказать: первый экран, услуги, как проходит работа, цены, вопросы, контакты. Для сайта компании — список страниц и меню. Вкус описывайте примерами: два–три сайта, которые нравятся, и по фразе о том, что именно нравится в каждом (крупная кнопка, спокойные фотографии). Добавьте и один сайт, который не нравится, с причиной. «Хочу как у них» студии ничего не говорит, «хочу такой первый экран» говорит.

Тексты и фотографии

Кто пишет тексты, кто их утверждает и к какой дате. Чьи фотографии: ваши, купленные или те, что подберёт исполнитель. Право ими пользоваться проверяют у того, кто снимал или продавал. Какие цены показываем на странице, а какие называем по запросу. И есть ли логотип файлом, а не картинкой из переписки.

Куда приходят заявки

Куда уходит заявка с формы: в Telegram, на почту, в таблицу или в CRM. Кто её получает и кто подменяет, когда первый занят. Какие поля в форме (для лендинга обычно хватает имени и способа связи) и что видит человек после отправки. Тише всего заявки теряются, когда форма пишет на старый ящик бывшего подрядчика: сайт работает, а заявок как будто нет. Как подключить форму и проверить, что заявка дошла, написано в статье про заявки с сайта в CRM.

Языки, домен и хостинг

Сколько языков и кто переводит. Есть ли домен, на чьё имя он оформлен и у кого логин. То же про хостинг. Запишите прямо: домен и доступы оформлены на вас. Если они остались у исполнителя, любой переход к другому превращается в переговоры.

Сроки и согласование

К какой дате нужен сайт и что это за дата: старт рекламы, сезон, открытие. Когда вы отдаёте тексты и фотографии: срок исполнителя считается от этого дня. Сколько кругов правок входит в цену и что считается новой работой, а не правкой (новый блок — новая работа, другой текст в готовом блоке — правка). И кто принимает результат с вашей стороны: человек должен быть один. Когда замечания приходят от трёх людей по очереди, срок растягивается, а каждый следующий отзыв отменяет предыдущий.

Вместо «красиво и современно»: условия и результат

«Красиво», «современно» и «чтобы вау» принять нельзя: нет момента, когда можно сказать «выполнено». Вместо прилагательного пишут условие и ожидаемый результат: когда человек делает это, на странице происходит вот это.

Покажем на нашей работе — сайте школы кайтсерфинга в Тарифе. Школа в Испании, поэтому сайт на испанском. Вся идея страницы в том, чтобы человек увидел, как ветер меняет море, и записался на урок в подходящий день. Строка «анимированное море» в ТЗ ничего бы не значила.

В ТЗ поведение этой страницы записывается так:

1. Ползунок «ветер, узлы» ходит от 8 до 35. Чем больше число, тем выше волны и больше пены на гребнях. Переключатель между восточным (levante) и западным (poniente) ветром меняет направление волн.
2. На шкале ветра отмечена зона «для начинающих» от 12 до 18 узлов.
3. Посетитель выбирает уровень, от «первый раз» до «хочу отточить технику». В прогнозе на семь дней бирюзовым подсвечены слоты, где ветер попадает в подходящую для этого уровня зону.
4. Если у посетителя в системе включено «уменьшить движение» (в вёрстке эта настройка называется prefers-reduced-motion) или устройство не тянет живую графику, вместо живого моря рисуется простое. Волны и пена по-прежнему меняются от ползунка, но само по себе ничего не движется.

У каждой строки есть то, чего нет у слова «красиво»: действие, результат и проверка за минуту. Двинули ползунок до упора вправо — волны должны стать выше. Выбрали «первый раз» — должны подсветиться слоты. Включили на iPhone «Уменьшение движения» — море перестаёт бегать само. Если хоть одна проверка не прошла, работа не принята, и спорить не о чем.

Критерии приёмки: как не спорить «это не то»

Критерии приёмки идут в ТЗ последним разделом. Это список проверок, после которых вы пишете «принято». У каждой есть действие и результат, как в примере выше. Для лендинга набирается строк шесть–восемь, вот основные:

Со скоростью сложнее, чем с остальными строками. В рекомендациях Google на web.dev хорошими названы три показателя. Крупнейшая картинка, видео или блок текста в видимой части экрана появляются не позже чем через 2,5 секунды после начала загрузки. Страница откликается на клик, касание и нажатие клавиши не дольше чем за 200 миллисекунд (как правило, берут самое медленное действие за визит). Содержимое не «прыгает» неожиданно: показатель сдвига не больше 0,1. Это ориентир для ТЗ, а не обещание.

Но замер замеру рознь. PageSpeed Insights показывает два вида данных: лабораторный замер на одном устройстве в заданных условиях и данные реальных посетителей. У нового сайта или сайта с малой посещаемостью реальных данных может просто не набраться, а если набрались, цифры двух замеров необязательно совпадут. Поэтому в ТЗ нужна строка о том, какой замер считать приёмочным: например, PageSpeed Insights, вкладка для телефонов, в день сдачи.

Приёмка письменная. «Принято такого-то числа» или «принято после правок из списка», а не «вроде нормально» в переписке.

Что проверить самому перед запуском

Приёмка проверяет сделанное по ТЗ. А многое в ТЗ могло и не попасть, потому что знаете это только вы:

1. Телефон, адрес, имя в Telegram и часы работы в контактах и подвале — ваши и сегодняшние.
2. Цены на странице совпадают с вашим прайсом. Прайс меняется, а сайт собирали месяц назад.
3. Заявка пришла с настоящего сайта, а не с тестового адреса. После переноса на домен отправьте ещё одну.
4. Если отправить ссылку на сайт себе в Telegram, подтянутся правильная картинка и правильный заголовок. Так её увидят ваши клиенты.
5. Логины домена и хостинга записаны у вас, а не остались в переписке с исполнителем.

Когда хватит созвона

Подробное ТЗ нужно не всегда. Если вы заказываете лендинг у студии, которая начинает с разговора, достаточно страницы с ответами: остальное выяснится на созвоне, и студия запишет его сама. Полный файл нужен в трёх случаях: вы собираете предложения у нескольких исполнителей и хотите сравнить цены на одно и то же; работаете с исполнителем только перепиской; на сайте есть механика, как в примере выше. В первом случае отправляйте всем один и тот же текст и не меняйте его по ходу, иначе вы сравниваете цены на разные сайты.

Если вы делаете сайт сами, ТЗ превращается в список задач для себя. Какие это задачи и сколько часов они занимают у новичка, написано в статье сделать сайт самому или заказать.

Что сделать сегодня

1. Запишите одним предложением, какого действия ждёте от посетителя, и кто этот человек. Если действий получилось два, оставьте главное.
2. Ответьте письменно на вопросы из шести разделов. Это около часа. Ответы «не знаю» выпишите отдельно: это повестка для разговора с исполнителем.
3. Выберите три сайта, которые нравятся, и один, который нет. Рядом с каждым — одна фраза: что именно.
4. Если на сайте будет механика, напишите для неё три строки вида «когда человек делает это, происходит вот это».
5. Назначьте одного человека, который принимает работу с вашей стороны.

Если хотите, сделаем это за вас

Лендинг стоит от €380, срок — 3–⁠7 дней. Вместо ТЗ у нас созвон перед стартом, он входит в пакет, а цену и срок мы фиксируем письменно до начала работы. Дальше собираем страницу: структуру под ваше предложение, дизайн под бренд, отдельный вид для телефона и для ноутбука, лёгкие анимации. Тексты под ключ: готовим и присылаем вам на проверку. Форма отправляет заявки в Telegram, на почту, в таблицу или в вашу CRM. Сайт публикуем на вашем домене; домен и хостинг оформляем на вас, платите за них напрямую. Правки до приёмки бесплатные, на ошибки после запуска гарантия три месяца.

Страницы с 3D и своей механикой, как у школы кайтсерфинга выше, обсуждаем отдельно.

Что входит в лендинг и как мы его делаем

С компаниями из России и Беларуси мы не работаем.

Обсудить задачу

Источники

Проверено 21.10.2026:

• web.dev: Core Web Vitals — «хорошие» значения: LCP не более 2,5 секунды после начала загрузки, INP не более 200 миллисекунд, CLS не более 0,1; измерять советуют по 75-му процентилю загрузок страницы отдельно для телефонов и компьютеров.
• web.dev: Interaction to Next Paint — INP оценивает отклик страницы на клики, касания и нажатия клавиш за время визита; как правило, берётся самое медленное действие (редкие выбросы не учитываются); хорошо — 200 миллисекунд или меньше.
• web.dev: Cumulative Layout Shift — CLS измеряет неожиданные сдвиги содержимого страницы; хорошо — 0,1 или меньше.
• web.dev: Largest Contentful Paint — LCP показывает время отрисовки самого крупного изображения, текстового блока или видео в видимой части экрана.
• PageSpeed Insights: о сервисе — отчёт для телефонов и компьютеров, данные реальных посетителей (CrUX) и лабораторный замер Lighthouse на одном устройстве в заданных условиях сети; у недавно опубликованной страницы или страницы с малым числом реальных посетителей данных может не хватать, тогда берутся данные всего сайта, а если и их нет, данные реальных посетителей не показываются; значения лабораторного замера и реальных посетителей могут отличаться.
• W3C: Media Queries Level 5, prefers-reduced-motion — признак, по которому страница узнаёт, что человек попросил систему уменьшить необязательное движение.
• Apple: уменьшение движения на iPhone — «Настройки» > «Универсальный доступ» > «Движение» > «Уменьшение движения»; для переходов и эффектов экрана используется наплыв вместо изменения масштаба или скольжения.

← Все статьи блога