Безопасные зоны Instagram Stories и Reels: разбор
Где интерфейс Instagram закрывает вашу Story или Reel: оставляйте свободными 14% сверху, 35% снизу и 6% по бокам, точные отступы в пикселях для 1080 x 1920.
Meta советует оставлять верхние 14% и нижние 35% Story или Reel свободными, плюс примерно 6% с каждой стороны, чтобы интерфейс приложения не закрывал ваше сообщение. Держите каждое слово, логотип и лицо, которые людям нужно увидеть, внутри оставшейся области: при 1080 x 1920 px это примерно 950 px в ширину и 979 px в высоту.
Именно такие цифры приведены в спецификациях Meta для каруселей в Stories, спецификациях для видео в Stories и спецификациях для изображений в Reels. Все три страницы дают одни и те же отступы. Обратите внимание: это рекламные спецификации. Meta публикует отступы для рекламы, а применение их к органическим Stories и Reels: наш вывод, потому что там появляются та же иконка профиля и те же кнопки. Дальше в этой статье мы переводим их в пиксели, которыми можно пользоваться.
Какие безопасные зоны у Story и Reel в пикселях?
Meta задает отступы в процентах от всего кадра: примерно 14% сверху, 35% снизу и 6% с каждой стороны. Мы пересчитали их для стандартного холста 1080 x 1920 и для размера 1440 x 2560, который Meta указывает для видео в Stories и изображений в Reels.
| Край | Доля кадра | При 1080 x 1920 | При 1440 x 2560 |
|---|---|---|---|
| Верх | 14% | 269 px | 358 px |
| Низ | 35% | 672 px | 896 px |
| Слева | 6% | 65 px | 86 px |
| Справа | 6% | 65 px | 86 px |
| Полезная ширина | 88% | 950 px | 1,268 px |
| Полезная высота | 51% | 979 px | 1,306 px |
Округляйте значения вверх, если хотите вписать в шаблон круглое число: 270 px сверху, 675 px снизу, 65 px по бокам. По-настоящему ваша лишь примерно половина кадра, и именно поэтому макет навылет с заголовком, прижатым к низу, так часто не работает.
Что на самом деле закрывает интерфейс?
Meta говорит, что отступы защищают ваш креатив от обрезки или перекрытия иконкой профиля и кнопкой призыва к действию. Это единственные два элемента, которые названы на ее страницах. По нашим наблюдениям, приложение также показывает подпись и элементы ответа внизу, и они могут меняться от версии к версии, поэтому оставляйте запас, а не рассчитывайте все до пикселя.
Боковой отступ 6% невелик. Наше предположение: он защищает от обрезки по краям на телефонах с другим соотношением сторон экрана; Meta об этом не говорит.
Отличается ли безопасная зона Reels от зоны Stories?
В актуальном рекламном гайде Meta нет: страницы Stories и Reels указывают те же 14%, 35% и 6%. Если вы строите макет под большие значения, ваш дизайн безопасен в обоих размещениях, и две версии вам никогда не понадобятся.
Какого размера должен быть холст?
Используйте 9:16. Страница Meta о каруселях в Stories указывает 1080 x 1920 px как минимум, а страница о видео в Stories и страница об изображениях в Reels указывают разрешение 1440 x 2560 px. Пропорция одна и та же, поэтому отступы остаются соразмерными. Страница об изображениях в Reels также называет форматы JPG или PNG с лимитом 30 MB. Размеры для ленты смотрите в нашем гайде по размерам постов в Instagram, а для всех платформ: в шпаргалке по размерам изображений для соцсетей.
Как выглядит безопасный макет?
Наш движок не умеет рисовать наложение интерфейса поверх шаблона, поэтому вот рендер 1080 x 1920, который можно сверить с таблицей. Тег и заголовок расположены примерно между 355 px и 810 px от верха, глубоко внутри безопасной полосы (от 269 px до 1,248 px). Маленькая строка около 1,485 px: намеренная ошибка. Она попадает в нижние 35%, где ее закрыли бы подпись и кнопки.
Две привычки делают это воспроизводимым. Ставьте заголовок в верхнюю среднюю полосу и держите логотип или призыв к действию выше нижнего отступа в 672 px. В Chikaboom владелец шаблона задает позиции слотов один раз, текст уменьшается внутри своего блока, а не вылезает в зону интерфейса, и вся команда это наследует. Попробовать можно в живом демо.
Почему нижний отступ настолько больше верхнего?
Meta не объясняет разницу. Наше прочтение: внизу, скорее всего, больше интерфейса, чем вверху, поэтому заголовок, прижатый к низу кадра, как во многих макетах для ленты, закрывается первым. Поднять его ничего не стоит.
Чек-лист безопасных зон перед публикацией
- Холст 1080 x 1920 px (или 1440 x 2560), 9:16.
- Никакого текста или логотипа в верхних 269 px и нижних 672 px.
- Ничего важного ближе 65 px к левому или правому краю.
- Заголовок достаточно короткий, чтобы прочитать за две секунды; фоновое изображение может идти навылет.
- Просмотрите пост на телефоне до выхода: это единственная настоящая проверка перекрытия.
- Используете вертикальное видео как обложку? Сверьте кадрирование с сеткой из гайда по размеру обложки TikTok, у которого свои отступы.
Вопросы и ответы
Какая безопасная зона у Instagram Stories?
Meta советует оставлять примерно 14% сверху, 35% снизу и 6% с каждой стороны свободными от текста и логотипов. При 1080 x 1920 px это около 269 px сверху, 672 px снизу и 65 px с каждого бока.
Отличается ли безопасная зона Reels от зоны Stories?
В актуальном рекламном гайде Meta цифры одинаковые для обоих форматов: 14% сверху, 35% снизу, 6% по бокам. Наша рекомендация: сделайте один макет под больший нижний отступ и используйте его для обоих.
Какого размера должна быть Story или Reel?
Делайте макет 1080 x 1920 px в пропорции 9:16. В рекламных спецификациях Meta 1080 x 1920 указан как минимум для каруселей в Stories, а для видео в Stories и изображений в Reels указан 1440 x 2560, то есть та же пропорция 9:16.
Действуют ли безопасные зоны для органических постов или только для рекламы?
Meta публикует эти отступы только в рекламных спецификациях. Применение их к органическим Stories и Reels: наш вывод, потому что там появляются та же строка профиля и те же кнопки. Наша рекомендация: использовать те же отступы.