Техническое задание на создание одностраничного сайта

Создать ТЗ в 1 клик

1. Общие сведения

Нужен одностраничный сайт (one-page): вся информация об услуге, продукте или компании на одной странице с якорной навигацией.

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

Цели проекта

Привести посетителя к одному действию: заявке, звонку, покупке.
Объяснить предложение за 1–2 минуты прокрутки.
Быстро запустить сайт и менять его без разработчика.
Подойти под рекламный трафик.

Целевая аудитория

Холодная аудитория из рекламы.
Клиенты по рекомендациям, проверяющие специалиста.
Участники мероприятий.

Как поймём, что сайт работает

Цифры ниже — ориентиры для обсуждения. Точные значения фиксируются на старте проекта по данным Яндекс Метрики и CRM заказчика, а замеряются через 1, 3 и 6 месяцев после запуска.

Конверсия страницы в целевое действие.
Глубина прокрутки по блокам.
Стоимость целевого действия.
Время загрузки.

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

Ниже — страницы первой версии сайта и то, что должно быть на каждой. Глубина вложенности — не больше трёх кликов от главной до любой целевой страницы.

Блок 1: первый экран

Главное предложение, подзаголовок, кнопка действия, меню с якорями.

Блок 2: проблема и решение

Какую проблему решает продукт или услуга и как.

Блок 3: что получает клиент

Состав услуги или продукта, преимущества, чем отличаетесь.

Блок 4: как это работает

3–5 шагов до результата.

Блок 5: доказательства

Кейсы, отзывы, цифры, сертификаты, логотипы клиентов.

Блок 6: цены или тарифы

Таблица тарифов или «от» + что входит.

Блок 7: вопросы и ответы

5–8 вопросов, которые снимают возражения.

Блок 8: финальная форма и контакты

Форма заявки, телефон, адрес, мессенджеры.

3. Функциональные требования

Формы

Форма в нескольких местах страницы; одна и та же цель, разные тексты кнопок.

Скорость

Вес страницы до 1,5 МБ, LCP до 2 секунд на мобильном.

Формы и заявки

Каждая форма содержит не больше трёх обязательных полей: имя, телефон, комментарий. Остальное — необязательное.
Маска телефона, проверка адреса почты, защита от спама без капчи, которая мешает человеку (скрытое поле-ловушка, ограничение частоты отправки).
Обязательный чекбокс согласия на обработку персональных данных со ссылкой на политику; чекбокс не отмечен по умолчанию.
После отправки — понятное сообщение на странице и цель в Яндекс Метрике; заявка приходит на почту ответственного сотрудника и дублируется в CRM или мессенджер.
Заявка сохраняется в админке сайта, даже если почта в этот момент недоступна.

4. Дизайн и удобство

Один сильный образ на первом экране и ритм блоков с разным фоном, чтобы прокрутка не превращалась в однообразную ленту.
Каждый блок решает один вопрос посетителя и заканчивается переходом к следующему или к действию.
Дизайн делается под три основные ширины: 360, 768 и 1440 пикселей; промежуточные размеры проверяются на этапе вёрстки. Первым рисуется мобильный экран — на него приходится большая часть трафика.
Основное действие страницы (позвонить, оставить заявку, купить) видно на первом экране без прокрутки и повторяется после каждого смыслового блока.
Размер основного текста не меньше 16 px, контраст текста и фона не ниже уровня AA по WCAG 2.1, кнопки и ссылки не меньше 44 × 44 px на телефоне.
Заказчик получает макеты ключевых страниц в Figma; правки согласуются в два круга на каждый макет.

5. Контент

Сайт работает на материалах, которые знает только заказчик. Список ниже согласуется до начала вёрстки; срок готовности материалов записывается в план, потому что именно он чаще всего сдвигает запуск.

Основное предложение и 3–5 преимуществ в числах.
Фото и видео продукта/услуги, отзывы, цены.
Юридическая информация, политика данных.

6. Технические требования

Платформа и разработка

Рекомендуемая платформа — Tilda или кастомная вёрстка на HTML/CSS/JS с минимальной админкой.
Админка на русском языке: менеджер без навыков программирования сам правит тексты, цены, контакты, добавляет страницы и материалы.
Семантическая вёрстка HTML5, один h1 на странице, логичная иерархия заголовков, у всех изображений заполнены alt.
Адаптивность без горизонтальной прокрутки на экранах от 320 до 2560 px. Поддержка двух последних версий Chrome, Safari, Firefox, Edge и Яндекс Браузера.

Скорость

Largest Contentful Paint не больше 2,5 секунды, Cumulative Layout Shift не больше 0,1, Interaction to Next Paint не больше 200 мс — по данным PageSpeed Insights для мобильных.
Изображения в WebP или AVIF с ленивой загрузкой, размеры заданы в разметке; шрифты хранятся на сайте, не больше двух начертаний.
Скрипты аналитики и чатов загружаются после основного контента и не блокируют отрисовку.

Безопасность и закон

Сайт работает только по HTTPS, http перенаправляется на https одним редиректом.
Ежедневная резервная копия сайта и базы данных, хранение не меньше 14 дней, проверка восстановления на этапе запуска.
Пароли администраторов — длинные и уникальные, вход в админку защищён ограничением числа попыток; доступы передаются заказчику в день приёмки.
Политика обработки персональных данных (152-ФЗ) и баннер cookie: метрика и сторонние скрипты не запускаются до согласия там, где это требуется.

7. Интеграции

Формы в CRM или почту/Telegram.
Метрика и цели, пиксели рекламных систем.
Онлайн-оплата при продаже товара или записи.

8. SEO-требования

Поисковая оптимизация закладывается при проектировании структуры, а не добавляется после запуска. Что делаем в рамках разработки:

Собираем семантику и распределяем запросы по страницам до утверждения структуры. Ключевые направления: основной запрос по услуге + город; вопросы клиентов (FAQ); бренд и персона.
Уникальные title, description и H1 для каждой страницы; человекопонятные адреса без служебных параметров; хлебные крошки на внутренних страницах.
Микроразметка schema.org: Organization, Service / Product, FAQPage.
XML-карта сайта и robots.txt, канонические адреса, страница 404 с полезными ссылками, склейка адресов с www и без, со слэшем и без.
Если у заказчика уже есть сайт: выгрузка старых адресов, таблица соответствия и постраничные 301-редиректы до выкладки, чтобы не потерять позиции и трафик.
Подключение Яндекс Метрики и Вебмастера, настройка целей: отправка формы, звонок по клику на номер, клик по мессенджеру, переход к ключевым страницам.

9. На что обратить внимание в этом проекте

Одна страница — одна цель. Если нужно два разных предложения, это два лендинга.
SEO для одностраничника ограничено: продвижение идёт в основном через рекламу и ссылки.

10. Этапы и сроки

Сроки считаются в рабочих неделях с момента, когда подписан договор, внесена предоплата и получены доступы и материалы, перечисленные выше. Этапы идут частично параллельно.

Бриф и структура — 2 дня. Результат: согласованный результат этапа
Дизайн — 5 дней. Результат: согласованный результат этапа
Вёрстка и формы — 5 дней. Результат: согласованный результат этапа
Тестирование и запуск — 2 дня. Результат: согласованный результат этапа

11. Порядок приёмки

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

12. Что получает заказчик

Работающий сайт на боевом домене и доступ в админку.
Исходные файлы дизайна в Figma, исходный код и документацию по структуре и развёртыванию.
Короткую инструкцию и видеоурок: как править страницы, добавлять материалы, смотреть заявки.
Настроенные Метрику, Вебмастер и цели, доступы к ним на аккаунт заказчика.
Рекомендации по продвижению на первые три месяца: что публиковать, какие страницы расширять.