# Как показать сайт в вертикальном ролике: безопасные зоны, читаемые цифры и кадры до текста

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

URL: https://posts.danashkin.ru/guides/sayt-v-vertikalnom-rolike
Обновлено: 2026-10-17

---

## Коротко

**Главное**

- Скриншот сайта в вертикальном ролике часто не читается: страница сделана под широкий экран, а кадр узкий и высокий. Целую страницу, ужатую в ширину кадра, на телефоне не прочитать.
- В вертикальном кадре 1080 на 1920 точек сверху и снизу лежит интерфейс площадки. На моём видеозаводе безопасная зона - 270 точек сверху, 670 снизу и по 65 по бокам.
- Если смысл реплики в цифре, снимать надо узкий кусок экрана во всю ширину кадра. Цифры высотой около 18 точек на телефоне не видны.
- Витрина сайта меняется за часы. Сначала снимаются кадры, потом под снятое пишется текст, иначе голос будет описывать то, чего на экране уже нет.
- Кадры проверяются стоп-кадрами до озвучки: это бесплатно, а переозвучка и пересборка стоят времени.

## Почему скриншот сайта в ролике часто не читается?

**Главное**

Сайт свёрстан под широкий экран, где строка текста занимает тысячу и больше точек. В вертикальном ролике ширина кадра - 1080 точек, а полезная ширина ещё меньше. Ужатая страница превращается в мелкий узор: зритель видит, что там сайт, но не видит, что на нём написано.

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

Ошибка новичка - показывать страницу целиком. Кажется, что так зритель увидит всё. На деле на экране телефона он увидит серую рябь и логотип. Глаз за две секунды кадра не успевает найти, куда смотреть.

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

Это правило полезно и тем, кто снимает ролики без всякого конвейера, на телефон и в обычном редакторе. Перед каждым кадром задай себе вопрос: что зритель должен прочитать за эти две-три секунды? Если ответ - «всю страницу», кадр не получится. Если ответ - «одну кнопку и цифру рядом с ней», кадр почти готов: осталось увеличить этот кусок и убрать соседей.

## Безопасные зоны вертикального кадра

**Главное**

Сверху и снизу вертикального ролика площадка рисует свой интерфейс: имя автора, подпись, кнопки, полосу прокрутки. Всё важное на кадре должно стоять внутри безопасной зоны. На заводе я держу отступы 270 точек сверху, 670 снизу и 65 по бокам от кадра 1080 на 1920.

| Зона кадра | Размер на заводе | Что там |
|---|---|---|
| Верх | 270 точек | Плашка с названием, водяной знак, интерфейс площадки |
| Низ | 670 точек | Подпись, кнопки площадки, три строки субтитров над ними |
| Бока | по 65 точек | Поля, чтобы текст не прилипал к краю |
| Зона скриншота | от 320 до 1030 точек по высоте | Экран сайта, ужатый до ширины 950 точек |

Нижний отступ самый большой не случайно. Внизу у площадок много интерфейса, а над ним идут субтитры. Если положить туда экран сайта, его закроют подпись к ролику и текст субтитров одновременно.

Зону скриншота пришлось поднять отдельно. Когда экран стоял в общей зоне объектов ниже, после ужатия до 950 точек текст сайта становился нечитаемым. Поднял экран выше, под водяной знак, и дал ему больше высоты - текст вернулся.

## Как снять экран, чтобы цифры читались?

**Главное**

Узким куском во всю ширину кадра. Если реплика про цифру, в кадре должна быть строка с этой цифрой, увеличенная на всю ширину, а не вся таблица. И якорем кадра лучше делать кнопку или заголовок, а не само число: число мельче, и его легко потерять.

На серии про Zaletai я на этом споткнулся. Первые кадры ленты сервиса были сняты высокими: экран целиком, с несколькими карточками роликов и цифрами просмотров. На стоп-кадрах цифры вышли высотой около 18 точек. На телефоне это нечитаемо, а реплика как раз была про цифры.

Кадры пересняли узким куском: одна карточка, ширина во весь кадр. Цифры стали крупными, и зритель видит то, о чём говорит голос.

Два правила я вынес из этой истории, третье к ним напрашивается:

1. **Если цифра - смысл реплики, кадр узкий.** Строка или карточка во всю ширину, без соседей.
2. **Якорь - кнопка или заголовок.** Зритель сначала находит крупный элемент, потом рядом с ним цифру.
3. **Масштаб страницы - до съёмки.** Снимать страницу с увеличенным масштабом браузера, чтобы текст был крупнее ещё до ужатия в кадр.

Про то, что ещё делает кадр читаемым - субтитры по словам и паузы, - я писал в статье [монтаж коротких видео нейросетью](/guides/montazh-korotkih-video-neyrosetyu).

## Сначала кадры, потом текст

**Главное**

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

Для сайтов с постоянной витриной это не так заметно. А для сервиса вроде Zaletai, где лента трендов обновляется постоянно, это правило решающее. Утром в ленте один ролик с большими цифрами, к вечеру его вытеснил другой. Сценарий «смотрите, этот ролик набрал в пять раз больше обычного» к вечеру врёт.

Порядок на заводе такой:

1. Снять кадры для всех реплик сразу, за один заход.
2. Посмотреть стоп-кадры и выписать, что реально видно на каждом.
3. Написать или поправить реплики под снятое: цифры и названия - ровно с экрана.
4. Только потом озвучивать.

Тексты кнопок и подсказок в реплики стоит переносить дословно. Зритель сверяет ролик с экраном, и расхождение в одном слове заставляет его споткнуться.

## Как показать окно, кнопку или всплывающую подсказку?

**Главное**

Снимать состояние страницы после действия: нажать кнопку, дождаться окна и только потом делать кадр. Чтобы взгляд попал куда нужно, всё вокруг нужного элемента можно размыть. Так зритель видит и контекст страницы, и тот элемент, о котором говорит голос.

Инструмент съёмки на заводе я научил трём вещам, без которых продуктовый ролик не собрать:

- **Нажать перед съёмкой.** Кадр делается после клика по кнопке, когда открылось окно или подсказка.
- **Снять закреплённый элемент.** Шапки и плавающие кнопки, которые прилипают к экрану при прокрутке, иначе выпадают из кадра или дублируются.
- **Размыть всё, кроме нужного.** Страница остаётся узнаваемой, но взгляд идёт в одну точку.

Снимает это всё [ИИ-агент](/concepts/ai-agent) по описанию из сценария: какую страницу открыть, куда нажать, какой элемент оставить резким. Мне остаётся проверить кадры.

Если экраны недоступны без входа в учётную запись, их лучше показать схемой, чем снимать чужой кабинет. Об этом и о роликах для окна знакомства с сервисом - в статье [видеоинструкция к сервису](/guides/videoinstrukciya-k-servisu).

## Как проверить кадры до озвучки?

**Главное**

Вынуть стоп-кадры на каждую реплику и посмотреть их на экране телефона: читается ли главное, не закрыто ли интерфейсом площадки и субтитрами, совпадает ли картинка с репликой. Это бесплатно и занимает минуты. Ошибка, найденная после озвучки, стоит переозвучки и пересборки.

На заводе стоп-кадры собираются автоматически: по одному на каждую реплику, в тот момент, где реплика звучит. Я смотрю их до того, как запускать платную озвучку. Мелкие цифры на серии Zaletai поймались именно так, до оплаты голоса.

Проверка после сборки тоже нужна, но другая: кадры вынимаются уже из готового видео, чтобы убедиться, что субтитры и плашки легли правильно. Как устроена озвучка и почему её проверяют расшифровкой, я разбирал в статье [озвучка ролика нейросетью](/guides/ozvuchka-rolika-neyrosetyu).

**Проверочный список кадра**

Главный объект читается на телефоне с вытянутой руки. Ничего важного в верхних 270 и нижних 670 точках. Цифра в кадре совпадает с цифрой в реплике. Текст кнопки в кадре совпадает с текстом в реплике. Кадр не устарел: снят после последнего обновления витрины.

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

**Главное**

Спрашивают, можно ли записывать экран видео вместо скриншотов, нужно ли показывать в ролике лицо, какие размеры кадра брать для разных площадок и сколько экранов помещается в один ролик.

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

**Можно ли записать экран видео вместо скриншотов?**

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

**Нужно ли показывать в продуктовом ролике лицо?**

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

**Какие безопасные зоны брать для разных площадок?**

У площадок интерфейс разный и меняется. Мои отступы 270 сверху и 670 снизу - с запасом, чтобы один ролик подходил под несколько площадок. Перед серией стоит проверить кадр с живым интерфейсом площадки, на которую он пойдёт.

**Сколько экранов помещается в один ролик?**

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

## Главный вывод

**Главное**

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

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

Практический шаг: открой свой сайт на компьютере, увеличь масштаб и найди один элемент, который объясняет продукт лучше всего. Это первый кадр твоего ролика.

Какой экран твоего продукта зритель должен увидеть в первые три секунды ролика?

### Источники

- [Vertical video - вертикальное видео и его распространение, Wikipedia](https://en.wikipedia.org/wiki/Vertical_video)
- [Safe area (television) - безопасная зона кадра, Wikipedia](https://en.wikipedia.org/wiki/Safe_area_%28television%29)
- [Снимок экрана - как устроен скриншот, Википедия](https://ru.wikipedia.org/wiki/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0)
- [Creating a new project - документация Remotion, сборка видео программным кодом](https://www.remotion.dev/docs/)