Коротко
Почему скриншот сайта в ролике часто не читается?
Продуктовые ролики про сайты и сервисы я собираю на своём видеоконтент-заводе: конвейер берёт сценарий, снимает скриншоты живого сайта, озвучивает реплики и собирает вертикальный ролик. Первым был ролик про сервис замера видимости бренда в нейросетях, потом серия про Zaletai. На каждом из них главная работа с картинкой оказалась не в монтаже, а в том, как снять экран.
Ошибка новичка - показывать страницу целиком. Кажется, что так зритель увидит всё. На деле на экране телефона он увидит серую рябь и логотип. Глаз за две секунды кадра не успевает найти, куда смотреть.
Правило, к которому я пришёл: в кадре должен быть один объект, который поясняет реплику. Кнопка, цифра, строка таблицы, заголовок. Всё остальное либо вырезается, либо уходит в размытие.
Это правило полезно и тем, кто снимает ролики без всякого конвейера, на телефон и в обычном редакторе. Перед каждым кадром задай себе вопрос: что зритель должен прочитать за эти две-три секунды? Если ответ - «всю страницу», кадр не получится. Если ответ - «одну кнопку и цифру рядом с ней», кадр почти готов: осталось увеличить этот кусок и убрать соседей.
Безопасные зоны вертикального кадра
| Зона кадра | Размер на заводе | Что там |
|---|---|---|
| Верх | 270 точек | Плашка с названием, водяной знак, интерфейс площадки |
| Низ | 670 точек | Подпись, кнопки площадки, три строки субтитров над ними |
| Бока | по 65 точек | Поля, чтобы текст не прилипал к краю |
| Зона скриншота | от 320 до 1030 точек по высоте | Экран сайта, ужатый до ширины 950 точек |
Нижний отступ самый большой не случайно. Внизу у площадок много интерфейса, а над ним идут субтитры. Если положить туда экран сайта, его закроют подпись к ролику и текст субтитров одновременно.
Зону скриншота пришлось поднять отдельно. Когда экран стоял в общей зоне объектов ниже, после ужатия до 950 точек текст сайта становился нечитаемым. Поднял экран выше, под водяной знак, и дал ему больше высоты - текст вернулся.
Как снять экран, чтобы цифры читались?
На серии про Zaletai я на этом споткнулся. Первые кадры ленты сервиса были сняты высокими: экран целиком, с несколькими карточками роликов и цифрами просмотров. На стоп-кадрах цифры вышли высотой около 18 точек. На телефоне это нечитаемо, а реплика как раз была про цифры.
Кадры пересняли узким куском: одна карточка, ширина во весь кадр. Цифры стали крупными, и зритель видит то, о чём говорит голос.
Два правила я вынес из этой истории, третье к ним напрашивается:
- Если цифра - смысл реплики, кадр узкий. Строка или карточка во всю ширину, без соседей.
- Якорь - кнопка или заголовок. Зритель сначала находит крупный элемент, потом рядом с ним цифру.
- Масштаб страницы - до съёмки. Снимать страницу с увеличенным масштабом браузера, чтобы текст был крупнее ещё до ужатия в кадр.
Про то, что ещё делает кадр читаемым - субтитры по словам и паузы, - я писал в статье монтаж коротких видео нейросетью.
Сначала кадры, потом текст
Для сайтов с постоянной витриной это не так заметно. А для сервиса вроде Zaletai, где лента трендов обновляется постоянно, это правило решающее. Утром в ленте один ролик с большими цифрами, к вечеру его вытеснил другой. Сценарий «смотрите, этот ролик набрал в пять раз больше обычного» к вечеру врёт.
Порядок на заводе такой:
- Снять кадры для всех реплик сразу, за один заход.
- Посмотреть стоп-кадры и выписать, что реально видно на каждом.
- Написать или поправить реплики под снятое: цифры и названия - ровно с экрана.
- Только потом озвучивать.
Тексты кнопок и подсказок в реплики стоит переносить дословно. Зритель сверяет ролик с экраном, и расхождение в одном слове заставляет его споткнуться.
Как показать окно, кнопку или всплывающую подсказку?
Инструмент съёмки на заводе я научил трём вещам, без которых продуктовый ролик не собрать:
- Нажать перед съёмкой. Кадр делается после клика по кнопке, когда открылось окно или подсказка.
- Снять закреплённый элемент. Шапки и плавающие кнопки, которые прилипают к экрану при прокрутке, иначе выпадают из кадра или дублируются.
- Размыть всё, кроме нужного. Страница остаётся узнаваемой, но взгляд идёт в одну точку.
Снимает это всё ИИ-агент по описанию из сценария: какую страницу открыть, куда нажать, какой элемент оставить резким. Мне остаётся проверить кадры.
Если экраны недоступны без входа в учётную запись, их лучше показать схемой, чем снимать чужой кабинет. Об этом и о роликах для окна знакомства с сервисом - в статье видеоинструкция к сервису.
Как проверить кадры до озвучки?
На заводе стоп-кадры собираются автоматически: по одному на каждую реплику, в тот момент, где реплика звучит. Я смотрю их до того, как запускать платную озвучку. Мелкие цифры на серии Zaletai поймались именно так, до оплаты голоса.
Проверка после сборки тоже нужна, но другая: кадры вынимаются уже из готового видео, чтобы убедиться, что субтитры и плашки легли правильно. Как устроена озвучка и почему её проверяют расшифровкой, я разбирал в статье озвучка ролика нейросетью.
Главный объект читается на телефоне с вытянутой руки. Ничего важного в верхних 270 и нижних 670 точках. Цифра в кадре совпадает с цифрой в реплике. Текст кнопки в кадре совпадает с текстом в реплике. Кадр не устарел: снят после последнего обновления витрины.
Частые вопросы
Частые вопросы
Главный вывод
Почти все ошибки здесь видны на стоп-кадре за секунду. Их дорого находить только тогда, когда стоп-кадров не смотрят.
Практический шаг: открой свой сайт на компьютере, увеличь масштаб и найди один элемент, который объясняет продукт лучше всего. Это первый кадр твоего ролика.
Какой экран твоего продукта зритель должен увидеть в первые три секунды ролика?