Reels & TikTok Safe-Zone-Vorschau: Vertikales 9:16 Framing, UI-Overlay-Kollisionen & sauberer Export
Vertikale Kurzvideo- und Story-Formate auf Instagram Reels, Instagram Stories und TikTok nutzen ein standardisiertes Seitenverhältnis von 9:16 (typischerweise 1080×1920 Pixel). Native mobile Apps blenden jedoch auffällige Schnittstellenelemente ein – darunter Profil-Avatare, Folgen-Schaltflächen, Interaktionsleisten (Gefällt mir/Kommentar/Teilen), Videobeschreibungen, Audiosymbole und Systemstatusleisten –, die direkt über dem Videoinhalt liegen. Wichtige Texte, Handlungsaufforderungen (CTAs) oder Markenlogos, die zu nah an den Bildschirmrändern platziert sind, laufen Gefahr, vollständig verdeckt zu werden. Die Reels & TikTok Safe-Zone-Vorschau bietet eine clientseitige geometrische Validierung, um sicherzustellen, dass wesentliche visuelle Elemente sowohl im organischen Feed als auch bei gesponserten Anzeigen gut lesbar bleiben.
Praktisches Implementierungsszenario: Ein Content Creator gestaltet eine 1080×1920-Ankündigungsgrafik oder einen Kurzclip mit Untertiteln im unteren Drittel. Beim Hochladen in das Vorschautool berechnet die clientseitige Engine die Schnittmengen der Begrenzungsrahmen anhand der offiziellen Meta-Richtlinien (14 % oben, 35 % unten und 6 % an den Seiten frei von kritischem Text) sowie der TikTok In-Feed-Anzeigenspezifikationen. Platziert der Creator sein Logo bei Y=1650px, meldet die Engine sofort eine Kollision mit den unteren Beschreibungs- und Audio-Overlays. Durch Umschalten zwischen den Darstellungsmodi „Einpassen“ (Letterbox) und „Ausfüllen“ (Zuschneiden) oder durch vertikales Verschieben positioniert der Creator den Fokuspunkt vor der Veröffentlichung sicher in der Safe Zone.
Alle Medien-Renderings, das Scrubbing auf der Video-Zeitleiste, Frame-Extraktionen und Bildexporte erfolgen zu 100 % lokal im Browserspeicher mittels HTML5 Canvas und HTMLVideoElement APIs. Ihre Quelldateien werden niemals auf GoToolstack-Server oder externe Plattformen übertragen. Beim Exportieren wird Ihre Datei sauber und ohne Smartphone-Mockups, Overlays oder Wasserzeichen ausgegeben.
Kernarchitektur & Mathematische Formel
Safe Box = [X: W × m_left, Y: H × m_top, W_safe: W × (1 - m_left - m_right), H_safe: H × (1 - m_top - m_bottom)]
Achsenausgerichtete Bounding-Box-Schnittmengentests (AABB) gegen normalisierte Layout-Koordinaten auf einer 1080×1920-Design-Leinwand.
Best Practices & Wichtige Richtlinien
- Untertitel über den unteren Aktionsrändern halten: Platzieren Sie Untertitel und Handlungsaufforderungen zwischen Y=650px und Y=1350px, um eine Verdeckung durch Beschreibungen, Interaktions-Buttons und Sponsoren-Links zu vermeiden.
- Rechte Interaktionsleiste berücksichtigen: Auf TikTok und Reels nehmen Buttons für Likes, Kommentare und Teilen die rechten 120–140 Pixel ein; vermeiden Sie rechtsbündige Logos in diesem vertikalen Streifen (bei arabischen RTL-Layouts wechselt diese Leiste nach links).
- Organische Feeds von gesponserten Werbeanzeigen unterscheiden: Gesponserte Werbeanzeigen verfügen über größere dauerhafte CTA-Banner am unteren Rand; prüfen Sie sowohl organische als auch Anzeigen-Vorlagen, wenn Sie bezahlte Kampagnen schalten.
- Saubere Quelldateien ohne eingebettete Mockups exportieren: Stellen Sie sicher, dass exportierte Dateien ausschließlich Ihre kalibrierten Medien enthalten, um die ursprüngliche Pixelgenauigkeit für den nativen Upload zu bewahren.