Перший екран мобільного лендингу: що залишити, що прибрати

Більше 85% трафіку з Facebook і TikTok приходить із телефонів. Але більшість лендингів досі збирають під десктоп і «просто стискають» під мобільний. Результат — лід по 180–220 ₴ замість 90–110 ₴ і апрув, який не рятує жодна команда КЦ. У цій статті — конкретний чекліст: що має бути на першому екрані адаптивного лендингу, а що треба безжально прибрати ще до запуску.

Чому перший екран вирішує все

Користувач із TikTok або Facebook Reels приходить «гарячим» — він щойно бачив відео з товаром і тапнув. У нього є 3–4 секунди, поки не закрив вкладку. За цей час він не читає — він сканує. Якщо перший екран не відповів на питання «що це, скільки коштує і що мені робити далі» — людина пішла. CR падає, ціна ліда росте.

Для лендингу для мобільного трафіку товарки це означає одне: перший екран має вміщатись у висоту одного тапу прокрутки і давати відповіді без зусиль.

Що обов'язково залишити

1. Заголовок — одне речення, один біль або один результат.
Не «Інноваційний масажер для спини», а «Знімає біль у спині за 15 хвилин». Максимум 8–10 слів. На смартфоні шрифт має бути від 22px — менше не читається на ходу.

2. Фото товару великим планом, без зайвого фону.
Одне фото на весь екран або фото на 60% ширини поряд із заголовком. Людина має впізнати товар із відео, яке щойно бачила. Колаж із 4 зображень на першому екрані — зайвий.

3. Ціна або знижка — відразу.
Якщо товар за 890 ₴ замість 1 490 ₴ — це має бути видно без прокрутки. Ціна без знижки знижує конверсію: людина не розуміє, чи вигідно це.

4. Одна CTA-кнопка — велика, контрастна, зрозуміла.
«Замовити за 890 ₴», «Отримати зі знижкою», «Хочу спробувати» — конкретно. Кнопка має бути мінімум 48px у висоту, щоб легко тапалась великим пальцем. Дві кнопки на першому екрані — це вже вибір, а вибір гальмує.

5. Один соціальний доказ — мікро.
Зірки + кількість замовлень або одна коротка цитата: «Вже 1 840 замовлень цього місяця» або «⭐⭐⭐⭐⭐ 4.8 — 620 відгуків». Не абзац тексту — один рядок.

Що прибрати без жалю

Навігаційне меню. На мобільному лендингу для товарки меню — це шлях до виходу. Людина тапає «Про нас» і більше не повертається. Прибирайте.

Слайдер із 5+ фото. Слайдери на мобільному гальмують, не всі свайпають, перше фото бачать усі — і все. Одне сильне фото краще за карусель.

Великий текстовий блок «Про товар». Три абзаци дрібним шрифтом до кнопки — читає 3% аудиторії. Решта закриє сторінку. Деталі — нижче, після першого екрану.

Кілька номерів телефонів і посилань. Кожне посилання — це вихід із воронки. Якщо є форма заявки — прибирайте прямий номер із першого екрану.

Анімації та відео з автозапуском. Вони жеруть трафік, гальмують завантаження і дратують. Швидкість завантаження мобільного лендингу товару — критична: кожна зайва секунда коштує 7–10% конверсії за оцінками практиків ринку.

Логотип великим розміром. Бренд у товарці рідко вирішує. Логотип 40×40px у кутку — максимум, якщо взагалі потрібен.

Реальна перевірка: тест на «великий палець»

Відкрийте свій лендинг на телефоні в режимі інкогніто. Дайте його людині, яка не знає, що це за товар. Запитайте: що це, скільки коштує, що треба зробити? Якщо вона відповіла за 5 секунд без прокрутки — перший екран працює.

Практичний орієнтир для перевірки: на зв'язках із Facebook на товари 590–1 490 ₴ (наколінники, масажери, товари для дому) перший екран із заголовком-болем + велике фото + ціна зі знижкою + одна кнопка дає CR 4–7% на холодному трафіку. Якщо менше 3% — проблема, швидше за все, саме тут.

A/B-тест першого екрану — не розкіш. Навіть зміна тексту кнопки з «Замовити» на «Замовити за 890 ₴» дає +0,5–1,5% до конверсії на обсязі від 500 візитів. На бюджеті 5 000 ₴/день це відчутно.

Як зробити це в LandEmpire

1. Відкрийте розділ «Лендинги» → «Лендинг по ссылке на товар» — вставте посилання з Rozetka або Prom, натисніть «Собрать лендинг». Фото, ціна і назва підтягнуться автоматично, перший екран вже адаптивний під смартфон.
2. Щоб відредагувати заголовок або кнопку — клікніть на блок у редакторі, введіть свій текст. Меню навігації в шаблонах товарки за замовчуванням вимкнено.
3. Через панель «Добавить блок» (клавіша «/») додайте блок «Осталось N» або «Лента заказов» — соціальний доказ одним рядком одразу під CTA.
4. Щоб перевірити, як виглядає перший екран на телефоні — натисніть іконку смартфона у верхній панелі редактора перед публікацією.
5. Підключіть Facebook Pixel: карточка лендингу → «⋯» → «Настройки лендинга» → вкладка «Реклама» → поле «Facebook Pixel ID». Так події з першого екрану підуть у рекламний кабінет одразу.
6. На тарифі Pro запустіть A/B-тест: карточка → «⋯» → «A/B-тест» → «Создать вариант» — протестуйте два варіанти першого екрану і оголосіть переможця за статистикою.

Підсумок

• Перший екран мобільного лендингу — заголовок із болем або результатом, одне велике фото, ціна зі знижкою, одна CTA-кнопка, мікродоказ.
• Прибирайте: меню, слайдери, довгі тексти, кілька посилань, автовідео, великий логотип.
• Перевіряйте тестом «великий палець»: 5 секунд — три відповіді без прокрутки.
• A/B-тест першого екрану на обсязі від 500 візитів дає відчутний приріст CR навіть від зміни тексту кнопки.
• Зберіть адаптивний лендинг і одразу запустіть тест — створити лендинг безкоштовно.