4.3: Лендинг, который продаёт

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

Обзор

У тебя есть 3-5 секунд. Именно столько времени средний пользователь тратит на решение: остаться на сайте или закрыть вкладку. За эти секунды лендинг должен ответить на три вопроса: «Что это?», «Зачем мне это?» и «Что делать дальше?». Если лендинг не справляется -- пользователь уходит, и ты платишь за привлечение человека, который ничего не сделал.

Лендинг (landing page) -- это одностраничный сайт, созданный с одной целью: конвертировать посетителя в клиента, подписчика или лида. В отличие от обычного сайта с множеством разделов и страниц, лендинг ведёт пользователя по единому маршруту: от интереса к действию. Это воронка, спроектированная с хирургической точностью.

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

Главная ошибка начинающих фаундеров -- начинать с дизайна. «Хочу красивый сайт» -- это не цель. Цель -- «хочу, чтобы 5% посетителей оставили заявку». Красота помогает, но без правильной структуры и текста даже самый красивый лендинг будет иметь нулевую конверсию. В этом уроке мы начнём с текста и структуры, а дизайн добавим с помощью vibe coding.

Чему научишься

Анатомия конвертирующего лендинга

Каждый успешный лендинг состоит из одних и тех же блоков, расположенных в определённом порядке. Этот порядок не случаен -- он следует психологической модели принятия решений AIDA: Attention (внимание) --> Interest (интерес) --> Desire (желание) --> Action (действие).

Вот полная структура лендинга, которую ты создашь:

Каждый блок -- это ответ на конкретный вопрос в голове пользователя. Если убрать любой блок, в воронке образуется дыра, и часть пользователей «вытечет» через неё.

Hero-секция: первое впечатление

Hero -- самый важный блок лендинга. Это то, что пользователь видит без прокрутки (above the fold). У Hero три обязательных элемента:

Заголовок -- одно предложение, которое объясняет ценность продукта. Не «Платформа для автоматизации», а «Экономьте 10 часов в неделю на рутинных задачах». Заголовок отвечает на вопрос «Что я получу?», а не «Что это такое?». Формула хорошего заголовка: [Результат] + [для кого] + [без чего/с чем].

Подзаголовок -- 1-2 предложения, которые уточняют заголовок. Здесь можно объяснить, как именно продукт работает. «AI-ассистент анализирует ваши задачи и автоматически расставляет приоритеты. Начните бесплатно за 30 секунд.»

CTA-кнопка -- конкретное действие. Не «Узнать больше», а «Попробовать бесплатно» или «Начать за 30 секунд». Кнопка должна быть контрастной, заметной и содержать глагол действия.

Дополнительно в Hero можно добавить: скриншот или демо продукта, социальное доказательство («500+ компаний уже используют») и визуальный элемент, передающий суть продукта.

Блок проблемы: попади в боль

После Hero пользователь понял, что ты предлагаешь. Теперь нужно усилить мотивацию -- показать, что без твоего продукта ему плохо. Это не манипуляция -- это эмпатия. Ты показываешь, что понимаешь его ситуацию.

Блок проблемы строится по формуле: «Знакомо?» + описание конкретных болей + последствия бездействия.

Пример для FlowAI (AI-ассистент для задач):

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

Здесь важно использовать конкретные детали из твоего исследования клиентов (модуль 1). Чем точнее описание боли, тем сильнее резонанс. Абстрактное «у вас много задач» не работает. Конкретное «47 непрочитанных сообщений каждое утро» -- работает, потому что человек узнаёт себя.

Блок решения: покажи «после»

Теперь, когда пользователь чувствует боль, покажи ему, как будет выглядеть его жизнь с продуктом. Это контраст «до/после», который создаёт желание.

Структура блока решения:

1. Одно предложение: «[Продукт] решает это, потому что...»
2. 3-4 ключевых преимущества (не фичи, а результаты)
3. Визуализация: скриншот, GIF, видео или схема «как это работает»

Важное различие: фичи -- это что продукт делает («AI-анализ приоритетов»), а преимущества -- это что пользователь получает («Освобождаешь 2 часа в день для стратегических задач»). В блоке решения используй преимущества. Фичи оставь для следующего блока.

Написание текста с Claude

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

Напиши текст для hero-секции лендинга.

Продукт: [название и суть]
Целевая аудитория: [из исследования модуля 1]
Главная боль аудитории: [из интервью модуля 1]
Тон: [профессиональный/дружелюбный/дерзкий]
Ограничения: заголовок до 10 слов, подзаголовок до 25 слов,
текст CTA-кнопки до 4 слов

Предложи 3 варианта, для каждого объясни, какой
психологический триггер используется.

Ключ к хорошему копирайтингу с AI -- итерации. Первый вариант редко идеален. Попроси Claude доработать: «Сделай заголовок более конкретным», «Добавь цифру в подзаголовок», «Замени абстрактные слова на конкретные действия».

Также важно использовать данные из модуля 1. Если в интервью клиент сказал: «Я трачу полдня на разбор почты», -- используй эту фразу дословно. Реальные слова реальных людей резонируют сильнее, чем придуманный маркетинговый текст.

Создание лендинга с vibe coding

После того как тексты написаны и структура определена, пора строить. И здесь vibe coding из модуля 2 показывает свою силу. Ты описываешь каждую секцию Claude, а он создаёт код.

Промпт для создания лендинга:

Создай landing page с такой структурой:

1. Hero: [вставь текст]
2. Проблема: [вставь текст]
3. Решение: [вставь текст]
4. Фичи: [список]
5. Цены: [тарифы]
6. FAQ: [вопросы и ответы]
7. CTA: [финальный призыв]

Стиль: минимализм, тёмная тема, основной цвет #4A7C32,
акцентный #FF6B35. Шрифт Inter.
Адаптивный дизайн: mobile-first.

Claude создаст полноценную страницу с HTML, CSS и, если нужно, JavaScript. Ты проверяешь результат, корректируешь и итерируешь -- точно как в уроке 2.2.

OG-теги: как сайт выглядит при шаринге

Когда кто-то делится ссылкой на твой сайт в Telegram, WhatsApp, Twitter или Facebook, показывается превью: заголовок, описание и картинка. Это определяется OG-тегами (Open Graph) в HTML-коде страницы.

Без OG-тегов превью выглядит уныло: просто URL без описания. С правильными OG-тегами -- привлекательная карточка, которая увеличивает кликабельность в 2-3 раза.

Вот минимальный набор OG-тегов:

<meta property="og:title" content="FlowAI — AI-ассистент для продуктивности" />
<meta property="og:description" content="Экономьте 10 часов в неделю.
  AI расставляет приоритеты и автоматизирует рутину." />
<meta property="og:image" content="https://flowai.ru/og-image.png" />
<meta property="og:url" content="https://flowai.ru" />
<meta property="og:type" content="website" />

Изображение для OG должно быть 1200x630 пикселей. Это стандартный размер, который хорошо отображается на всех платформах. Claude может помочь создать промпт для генерации OG-изображения или создать его программно (с текстом и фоном).

Мобильная оптимизация

Более 70% трафика в России -- мобильный. Если лендинг не работает на телефоне, ты теряешь большинство потенциальных клиентов. Мобильная оптимизация -- не опциональна.

Ключевые принципы mobile-first дизайна:

Размер шрифта -- минимум 16px для основного текста. Мельче -- невозможно читать без зума. Заголовки -- 24-32px на мобильных.

Размер кнопок -- минимум 44x44 пикселей (рекомендация Apple). Палец крупнее курсора мыши, и кнопки должны быть достаточно большими, чтобы попасть с первого раза.

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

Загрузка -- на мобильных интернет медленнее. Оптимизируй изображения (WebP, сжатие), минимизируй JavaScript, используй lazy loading для картинок ниже первого экрана.

Горизонтальная прокрутка -- её не должно быть никогда. Если элемент не помещается по ширине экрана, он должен перестроиться (flex-wrap) или уменьшиться.

Концепция A/B тестирования

A/B тестирование -- это метод сравнения двух вариантов страницы, чтобы определить, какой работает лучше. Ты показываешь 50% посетителей вариант A (текущий) и 50% -- вариант B (с изменением). Через неделю смотришь, какой вариант дал больше конверсий.

На стадии MVP полноценное A/B тестирование обычно избыточно -- тебе нужно достаточно трафика для статистической значимости (минимум 100-200 конверсий на каждый вариант). Но понимать концепцию важно, потому что это основа data-driven подхода к маркетингу.

Что можно A/B тестировать на лендинге:

• Заголовок -- самый мощный элемент. Изменение заголовка может увеличить конверсию на 30-50%
• Текст CTA-кнопки -- «Попробовать бесплатно» vs «Начать сейчас»
• Цвет CTA-кнопки -- контрастный vs неконтрастный
• Цена -- разные ценовые точки или способ подачи цены
• Социальное доказательство -- с отзывами vs без отзывов

Для первого запуска достаточно создать один хороший вариант лендинга, а A/B тестирование включить после того, как пойдёт стабильный трафик.

Что ты создашь

• Текст для каждой секции лендинга -- копирайтинг на основе данных из модуля 1, написанный совместно с Claude
• Полностью рабочий лендинг -- hero, проблема, решение, фичи, цены, FAQ, CTA -- созданный с помощью vibe coding
• OG-теги -- правильные мета-теги для красивого шаринга в соцсетях и мессенджерах
• Мобильная версия -- адаптивный дизайн, проверенный на реальных устройствах
• Документ с копирайтингом -- все тексты в одном файле для будущих итераций

Как это работает на практике

Шаг 1: Подготовка контента

Claude поможет собрать данные из модуля 1 (исследование рынка, интервью, анализ конкурентов) и на их основе написать тексты для каждой секции лендинга. Начнём с hero-заголовка и будем двигаться по структуре.

Шаг 2: Написание текстов

Для каждой секции Claude предложит несколько вариантов. Ты выберешь лучший или скомбинируешь. Важно: не торопись и вчитывайся. Хороший текст -- это 80% успеха лендинга.

Шаг 3: Создание лендинга через vibe coding

Когда тексты готовы, Claude создаст полноценную страницу: HTML-структура, стили, адаптивность. Ты будешь проверять в браузере и корректировать.

Шаг 4: Настройка OG-тегов

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

Шаг 5: Мобильная оптимизация

Проверяем лендинг на разных размерах экрана. Исправляем проблемы с отображением, размерами шрифтов и кнопок.

Шаг 6: Деплой и проверка

Пушим изменения на GitHub, Vercel деплоит автоматически. Проверяем на реальном домене, тестируем шаринг в Telegram.

Лучшие практики

• Один лендинг -- одно действие. Не предлагай одновременно «купить», «подписаться на рассылку» и «скачать PDF». Выбери одно главное действие и веди к нему. Всё остальное отвлекает и снижает конверсию.

• Используй реальные слова клиентов. Если в интервью человек сказал «я устал тратить полдня на разбор задач» -- используй эту фразу в блоке проблемы. Реальные формулировки резонируют сильнее маркетингового языка.

• Убирай всё лишнее. Каждый элемент на странице должен зарабатывать своё место. Если блок не ведёт к конверсии -- убери его. Меню навигации на лендинге? Убери. Ссылки на другие страницы? Убери. Длинное «о компании»? Убери. Фокус.

• CTA-кнопка должна быть видна без прокрутки. Первый CTA -- в hero-секции. Последний -- в финальном блоке. Между ними можно добавить ещё 1-2 CTA после особо убедительных секций (после отзывов, после цен).

• Тестируй на реальных людях. Покажи лендинг 3-5 людям из целевой аудитории и попроси описать, что они поняли за первые 5 секунд. Если ответы не совпадают с твоим намерением -- переделывай hero-секцию.

• Скорость загрузки критична. Каждая дополнительная секунда загрузки снижает конверсию на 7%. Оптимизируй изображения, используй современные форматы (WebP), минимизируй CSS и JavaScript.

• Социальное доказательство важнее, чем ты думаешь. Даже на стадии MVP найди 2-3 бета-пользователя и попроси отзыв. Или покажи цифры: «100 человек на waitlist», «3 компании в бета-тесте». Люди доверяют тому, что используют другие.

Частые вопросы

У меня нет отзывов и клиентов. Что писать в социальном доказательстве? На старте используй то, что есть: количество людей на waitlist, количество регистраций на бета-тест, упоминания в медиа, личный опыт фаундера в индустрии. Можно также показать логотипы технологий, которые используешь, или партнёров. Честность важнее -- не придумывай фейковые отзывы, это разрушит доверие.

Как понять, что лендинг «работает»? Средняя конверсия лендинга -- 2-5%. Это значит, из 100 посетителей 2-5 выполняют целевое действие. Если конверсия ниже 1%, лендинг нужно переделывать. Если выше 5% -- у тебя отличный результат. Но для начала нужно подключить аналитику (урок 4.5), чтобы вообще видеть эти цифры.

Сколько текста должно быть на лендинге? Зависит от продукта и цены. Чем дороже продукт -- тем больше текста нужно, чтобы убедить. Для бесплатного сервиса может хватить одного экрана. Для SaaS за $50/месяц -- нужна полноценная страница с фичами, ценами и FAQ. Правило: если у пользователя остаются вопросы после прочтения -- текста мало.

Нужно ли делать отдельные лендинги для десктопа и мобильных? Нет. Один лендинг с адаптивным (responsive) дизайном. CSS media queries позволяют перестраивать layout в зависимости от размера экрана. Claude создаст адаптивный дизайн по умолчанию -- тебе нужно только проверить и скорректировать.

Какой формат изображений использовать? WebP -- современный формат, который обеспечивает лучшее сжатие при том же качестве. Поддерживается всеми современными браузерами. Для OG-изображений используй PNG (лучшая совместимость). Для фотографий -- WebP с fallback на JPEG.

Как написать хороший текст для CTA-кнопки? Используй формулу: глагол + что получит пользователь. «Попробовать бесплатно», «Начать экономить время», «Получить доступ». Избегай абстрактного «Узнать больше» или «Отправить». Кнопка должна описывать результат, а не процесс.

Запуск

/start-4-3

Следующий урок: Подключение платежей -->