Полный жизненный цикл разработки сайта

01Главная идея пособия

Сайт не является самоцелью. Сайт — это инструмент бизнеса. Его задача не просто быть красивым и не просто существовать в интернете. Его задача — производить измеримый результат.

Поэтому сайт нужно рассматривать не как отдельный файл с HTML, CSS и картинками, а как систему привлечения, убеждения, измерения и улучшения.

Главная формула пособия

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

02Что студент должен уметь после изучения

1. Объяснить, зачем бизнесу нужен сайт.
2. Отличать сайт-проект от сайта-продукта.
3. Формулировать бизнес-цель сайта одной понятной фразой.
4. Определять целевое действие сайта: заявка, звонок, клик, регистрация.
5. Строить простую воронку сайта.
6. Подбирать метрики для каждого этапа воронки.
7. Составлять структуру лендинга или многостраничного сайта.
8. Формулировать техническое задание для AI coding agent.
9. Проверять сайт перед запуском по чек-листу.
10. Понимать базовую логику GA4, GTM, Яндекс.Метрики и UTM-меток.
11. Планировать контекстную рекламу как проверяемую гипотезу.
12. Улучшать сайт на основе данных, а не вкусовых споров.
13. Понимать, где ИИ реально помогает, а где решение остаётся за человеком.

03Сайт как продукт, а не как разовый проект

Сайт как проект

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

• откуда придут посетители;
• почему они должны доверять компании;
• какие действия они должны совершить;
• как мы узнаем, что сайт работает;
• что делать, если заявок нет;
• какие блоки страницы мешают конверсии;
• какой канал трафика приносит клиентов дешевле.

Сайт как продукт

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

04Три AI-эксперта в жизненном цикле сайта

В учебном процессе удобно представить работу не как один общий «ИИ», а как три разных экспертных режима — три роли, в которых может работать один AI-инструмент.

05Общая карта жизненного цикла

Жизненный цикл сайта делится на три большие стадии.

06Фаза 0. Постановка бизнес-задачи

Цель фазы — понять, зачем сайт нужен бизнесу.

Что нужно выяснить

1. Что продаёт бизнес?
2. Кто покупатель?
3. Какая проблема у покупателя?
4. Почему покупатель должен доверять компании?
5. Какое действие должен совершить посетитель?
6. С какого устройства он чаще всего зайдёт на сайт?
7. Какой канал привлечения будет первым: реклама, поиск, соцсети, рекомендации?

Возможный результат по типу сайта

Ворота перехода к следующей фазе

Сайт нужен, чтобы [результат] для [аудитория] через [целевое действие].

Если этой фразы нет, проект нельзя передавать в дизайн и разработку.

07Фаза 1. Стратегия, воронка и метрики

Цель фазы — превратить бизнес-задачу в измеримую систему.

Воронка сайта

• Показ рекламыметрика: показы
• Переход на сайтметрика: CTR
• Просмотр первого экранаметрика: время, отказ, скролл
• Скролл до услуг и блока доверияметрика: сессии
• Клик WhatsAppметрика: CTR кнопки
• Сообщение менеджеруметрика: конверсия, ROI

Минимальный набор метрик

1. Количество посетителей.
2. Источник трафика.
3. Количество кликов по WhatsApp / форме / телефону.
4. Конверсия сайта.
5. Цена заявки.
6. Качество заявки.
7. Доля заявок, которые стали продажами.

Гипотеза

Хорошая гипотеза содержит изменение, ожидаемый результат, метрику, срок проверки и минимальный объём данных.

08Фаза 2. Проектирование сайта

Цель фазы — превратить стратегию в структуру сайта.

Типовая структура лендинга

1. Навигация
2. Первый экран / Hero
3. Кому подходит услуга
4. Проблема клиента
5. Решение
6. Услуги / пакеты
7. Процесс работы
8. Кейсы / портфолио
9. О компании / эксперте
10. Преимущества
11. FAQ
12. Контакты
13. Footer

Функция каждого блока

Если блок не выполняет функцию, его лучше убрать или переработать.

09Фаза 3. Сборка сайта с помощью AI coding agent

AI coding agent — это ИИ-инструмент, который помогает работать с кодом: читать проект, изменять файлы, писать функции, исправлять ошибки, запускать команды и объяснять структуру программы. Используется как технический исполнитель — он не придумывает бизнес за заказчика.

Базовая структура проекта

site-project/
├── index.html
├── css/
│   └── style.css
├── js/
│   ├── main.js
│   └── data.js
├── images/
├── robots.txt
├── sitemap.xml
└── README.md

Таблица событий аналитики

Что обязательно проверяет человек

• правильность текстов;
• реальные контакты;
• юридические формулировки;
• цены и гарантии;
• корректность аналитических ID;
• соответствие бренду.

10Фаза 4. Тестирование до запуска

Ошибка в WhatsApp-ссылке, форме или аналитике может сделать весь сайт коммерчески бесполезным.

Семь типов проверки

Чек-лист перед запуском

• Функциональность
• Все ссылки работают
• WhatsApp открывается
• Форма отправляется
• Нет ошибок в консоли
• Аналитика
• GA4 / Метрика установлены
• Клик WhatsApp фиксируется
• UTM-метки сохраняются

11Фаза 5. Запуск и деплой

Запуск — это не финал. Это момент, когда сайт впервые сталкивается с реальными пользователями.

Варианты деплоя

Что проверить после публикации

• сайт открывается по домену, HTTPS работает;
• www и non-www не конфликтуют;
• формы и WhatsApp работают;
• события приходят в аналитику;
• sitemap доступен, robots.txt не блокирует важные страницы.

12Фаза 6. Оперирование сайта после запуска

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

Пример рекламной гипотезы

Если запустить Google Ads по запросам «автоматизация WhatsApp для бизнеса Алматы»,
то можно получить заявки дешевле 8 000 ₸ за лид в течение 14 дней.

13Фаза 7. Оптимизация и цикл улучшений

Примеры проблем и гипотез

Тестировать нужно одно существенное изменение за раз. ИИ не должен выдавать корреляцию за причину — нужны контроль, объём данных и осторожная интерпретация.

14Сквозной слой. Непрерывное тестирование

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

Регрессионное тестирование — повторная проверка старых функций после внесения новых изменений, даже если их не трогали напрямую.

15Сквозной слой. Где ИИ помогает, а где нет

Где ИИ ограничен

• ставить бизнес-цель;
• утверждать позиционирование;
• придумывать несуществующие кейсы;
• обещать гарантии;
• интерпретировать слабые данные как доказательство;
• принимать финансовые решения вместо владельца.

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

16Мини-кейс: сайт для услуги малого бизнеса

Компания внедряет простую автоматизацию для малого бизнеса: WhatsApp Business, CRM, Google Sheets, сайт, базовую аналитику. Проблема: заявки теряются в переписках, менеджеры забывают отвечать, нет общей таблицы клиентов.

Фаза 0 → Фаза 7

• Фаза 0. ЦельЗаявки в WhatsApp от владельцев малого бизнеса в Алматы
• Фаза 1. МетрикиCTR кнопки WhatsApp, конверсия, цена лида
• Фаза 2. СтруктураHero → Боль → Решение → Пакеты → Процесс → Доверие → FAQ
• Фаза 3. ТЗ агентуHTML/CSS/JS, события click_whatsapp / submit_form
• Фаза 4–5. Проверка и запускWhatsApp, форма, HTTPS, аналитика, sitemap
• Фаза 6. ОперированиеGA4, Метрика, UTM, таблица заявок, отчёт
• Фаза 7. Вывод через 2 недели«Получить расчёт внедрения» вместо «Написать»

17Шаблоны для практической работы

Бизнес-бриф

# Бизнес-бриф сайта

## 1. Проект
Название:
Сфера:
Город / рынок:

## 2. Продукт или услуга
Что продаём:
Средний чек:

## 3. Клиент
Кто покупатель:
Какая у него проблема:

## 4. Цель сайта
Главное целевое действие:

## 7. Метрики успеха
Главная метрика:

ТЗ для AI coding agent

# ТЗ на сборку сайта

## Роль
Ты работаешь как AI coding agent и фронтенд-разработчик.

## Цель сайта
[описать бизнес-цель]

## Главное целевое действие
[например: клик WhatsApp]

## Аналитика
События: click_whatsapp, click_phone, submit_form

## Ограничения
- Не использовать выдуманные кейсы
- Не обещать юридически спорные гарантии
- Оставить TODO только там, где не хватает реальных данных

Карточка эксперимента

Название:
Проблема по данным:
Гипотеза: Если ..., то ..., потому что ...
Главная метрика:
Условие успеха:
Срок проверки:
Результат:
Решение: Оставить / Откатить / Запустить новый тест

18Глоссарий терминов

A/B-тест

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

AEO

Оптимизация под ответные системы и языковые модели.

AI coding agent

ИИ-инструмент, который помогает писать, читать, менять, запускать и объяснять код.

CTA

Призыв к действию: «Получить консультацию», «Написать в WhatsApp».

CTR

Доля кликов от числа показов.

GA4

Google Analytics 4, система веб-аналитики, построенная вокруг событий.

GTM

Google Tag Manager, инструмент управления тегами без правки кода сайта.

JSON-LD

Формат структурированных данных для поисковых систем.

SEO

Поисковая оптимизация сайта.

Session Replay / Вебвизор

Запись пользовательских сессий для анализа поведения.

UTM-метки

Параметры в ссылках, показывающие источник, канал и кампанию трафика.

Воронка

Последовательность шагов пользователя от первого контакта до целевого действия.

Конверсия

Доля пользователей, совершивших целевое действие.

Лид

Потенциальный клиент, проявивший интерес.

Регрессионное тестирование

Повторная проверка старых функций после новых изменений.

Целевое действие

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

19Контрольные вопросы

20Источники и справочные материалы

1. Исходный план: «Полный жизненный цикл разработки сайта» — загруженный Markdown-файл пользователя.
2. OpenAI. Codex, официальный сайт продукта: openai.com/codex
3. OpenAI Developers. Codex documentation: developers.openai.com/codex
4. Google Analytics Help. About events: support.google.com
5. Google Search Central. Core Web Vitals: developers.google.com
6. Yandex Metrica Help. Session Replay: yandex.com/support
7. Yandex Metrica Help. Sending goal and event data: yandex.com/support