Erklärvideo selber machen: wie unser Film aus Code entstanden ist

Für unsere Startseite haben wir einen Erklärfilm von 81 Sekunden gebaut. Er ist nicht in einem Videoprogramm geschnitten, sondern als Webseite programmiert und dann Bild für Bild aufgenommen. Hier ist, wie das ging.

Warum aus Code und nicht aus einer Video-App

Für ein Erklärvideo gibt es drei Wege. Eine Vorlagen-App mit animierten Figuren und Textbausteinen ist schnell, aber sieht aus wie viele andere. Ein Motion-Designer mit After Effects liefert jedes Aussehen, kostet aber bei jeder Änderung wieder Zeit. Und es gibt KI-Videogeneratoren, die aus einem Bild und einem Satz einen Clip erzeugen; was sie können und wo sie scheitern, haben wir im Test KI-Videos erstellen für KMU beschrieben. Für einen Film, der genau unsere Leistungen, echte Referenz-Screenshots und eine belegte Kennzahl zeigen muss, taugen Generatoren nicht: Sie erfinden Details.

Wir haben einen vierten Weg gewählt. Der Film ist eine HTML-Seite mit einer Zeichenfläche (Canvas). Eine Funktion nimmt eine Zeit in Sekunden und zeichnet das Bild, das zu dieser Zeit gehört. Nichts hängt vom Zufall oder von der Rechnergeschwindigkeit ab. Ein Aufnahmeprogramm ruft diese Funktion 60-mal pro Sekunde Film auf und speichert jedes Bild. Den Code dafür haben wir mit Claude Code geschrieben, unserem KI-Werkzeug für Programmierung, und die Werkzeuge zum Rendern aus einem früheren Videoprojekt übernommen.

Der Vorteil zeigte sich eine Woche später: Als die Aussprache korrigiert und ein Referenzbild ausgetauscht werden musste, waren das ein paar geänderte Zeilen und ein neuer Render. Kein Projekt in einer Schnittsoftware, das jemand wieder öffnen und durchklicken musste.

Der Ablauf in sechs Schritten

Die Wortzeiten sind der Trick, der alles zusammenhält. Weil die Stimme zuerst entsteht, richtet sich der Film nach ihr. Wenn die Stimme sagt «Immer mehr Menschen fragen ChatGPT», erscheint der KI-Assistent genau beim Wort, nicht eine halbe Sekunde davor. Und die Untertitel stimmen automatisch, weil sie aus denselben Zeiten gebaut sind. Wie gut die KI-Stimme dabei war und welche Wörter sie falsch las, beschreiben wir ausführlich im Erfahrungsbericht zu ElevenLabs auf Deutsch.

Zwei Fassungen in einer Woche

Fassung 1 hatte ein Problem, das man nur hört: Die Abkürzungen klangen falsch. Wir hatten sie der Stimme buchstabiert gegeben, etwa «S-E-O», und das Ergebnis klang englisch und abgehackt. Nach einer Hörprobe mit mehreren Varianten wurde festgelegt, wie jede Abkürzung klingen soll, etwa «Es-E-O» deutsch buchstabiert, ChatGPT dagegen englisch, wie es alle sagen. Seither wird der Sprechertext nie mehr von Hand buchstabiert, sondern von einem Skript aus dem Untertitel abgeleitet. Fassung 2 war nach einem Tag fertig, weil nur die geänderten Zeilen neu vertont und der Film neu gerendert werden mussten.

Der zweite Änderungsgrund war inhaltlich: Ein Referenzbild in der Website-Szene wurde ausgetauscht. Im Code ist das eine Zeile. In einem klassischen Schnittprojekt hätte es geheissen, die Szene neu zu animieren.

Was im Film steht und was nicht

Ein Erklärfilm ist Werbung, und für Werbung gelten bei uns dieselben Regeln wie für die Website. Jede Referenz im Film stammt aus unserer Referenzliste, mit dem Leistungsumfang, den der Kunde bestätigt hat. Die Screenshots sind echte Aufnahmen der Live-Websites. Es gibt genau eine Kennzahl, und sie steht mit Zeitfenster und Quelle im Bild, so wie in der Fallstudie auf unserer Website. Alles andere, was nach Daten aussieht, ist gezeichnet und als Beispiel erkennbar: das Formular, das Suchergebnis, die Antwort des KI-Assistenten, die Web-AppEine Web-App ist eine Anwendung, die im Browser läuft und sich wie ein Programm bedienen lässt — mit Login, Eingaben, gespeicherten Daten und Abläufen. Anders…Mehr erfahren → mit Demo-Daten.

Diese Regeln stehen im Drehbuch als eigene Spalte, nicht als Nachgedanke. So konnte jede Szene geprüft werden, bevor sie animiert wurde. Das spart die schlimmste Art von Korrektur: eine fertig animierte Szene, die inhaltlich nicht stimmen darf.

Was nicht glatt lief

Lange Aufnahmen in Chrome brachen ab. Ein Durchgang über die ganze Länge des Films lief nach etwa einer Viertelstunde in einen Fehler. Die Lösung war das Rendern in kurzen Abschnitten, die sich einzeln wiederholen lassen. Das klingt nach Kleinkram, hat aber einen halben Tag gekostet.

Auch die Länge war ein Kampf. Wer sechs Leistungen, Referenzen und eine Kennzahl in einem Film zeigen will, ist versucht, die Stimme schneller zu machen. Unsere Regel war umgekehrt: Sätze kürzen, nicht die Stimme beschleunigen. Am Ende sind es 129 Wörter in knapp 70 Sekunden reiner Sprechzeit.

Und es gibt eine ehrliche Grenze: Der Film ist viel Code. Wer keinen Zugang zu Programmierung oder einem KI-Assistenten für Code hat, kommt mit diesem Weg nicht weit. Für ein KMU, das einmalig ein kurzes Video braucht, ist eine Vorlagen-App oder ein Motion-Designer die vernünftigere Wahl.

Und Reels im Hochformat?

Ein Erklärfilm im Querformat für die Website und ein Reel für Instagram oder TikTok teilen nur die Technik. Die Dramaturgie ist eine andere. Eine Hochformat-Fassung unseres Films gibt es noch nicht. Die Regeln, die wir dafür anwenden, stehen aber fest, und sie unterscheiden sich in vier Punkten.

Am meisten Fehler entstehen bei den Zonen. Im Hochformat legt die AppEine App, kurz für Applikation oder Anwendung, ist ein Programm, das eine bestimmte Aufgabe für seine Nutzenden erledigt. Im Alltag meint man damit meist eine…Mehr erfahren → oben die Reiter, unten Name und Beschreibung und rechts die Knöpfe für Gefällt mir, Kommentar und Teilen über das Video. Unsere Arbeitsregel für 1080 × 1920 Pixel ist: oben rund 260 Pixel frei, unten rund 420, rechts ab der Bildmitte rund 140. Die genauen Masse ändern sich mit jeder App-Version, darum lieber grosszügig planen. Die Untertitel laufen Wort für Wort im Takt der Stimme, höchstens zwei Zeilen, das Schlüsselwort hervorgehoben.

Technisch ist der Weg aus Code für Reels sogar besonders gut geeignet: Dieselbe Szene lässt sich mit anderem Bildausschnitt und anderem Einstieg ein zweites Mal rendern, ohne neu zu animieren. Wer Reels als Werbung einsetzt, findet die Einordnung zu Kampagnen auf unserer Seite zu Facebook- und Instagram-Werbung.

Lohnt sich das für ein KMU?

Ein Film aus Code ist kein Ersatz für gute Gestaltung, sondern eine andere Art, sie umzusetzen. Er lohnt sich, wenn ein Video Teil eines Systems ist: wenn es Referenzen zeigt, die wechseln, Zahlen, die aktualisiert werden, oder Fassungen für Website, Präsentation und Social Media braucht. Dieselbe Arbeitsweise mit KI-Assistenten nutzen wir für Websites und Web-Apps, siehe KI-gestützte Entwicklung. Wer Videos als Teil seiner Inhalte plant, findet bei unserer Content-Marketing-Agentur den Rahmen dafür, und für die Website, auf der der Film am Ende läuft, ist Webdesign der Ausgangspunkt.

Fazit

Unser Erklärfilm ist eine Webseite, die sich selbst aufnimmt. Das klingt umständlich und ist es beim ersten Mal auch. Der Lohn kam bei der ersten Korrektur: neue Aussprache, neues Bild, ein Tag statt einer Woche. Die wichtigste Lehre war aber keine technische. Die Stimme bestimmt den Film, und eine Stimme muss man anhören, nicht nur lesen. Für Reels im Hochformat gelten eigene Regeln, und genau dort spielt die Methode ihre Stärke aus, weil dieselben Szenen ein zweites Mal im anderen Format entstehen können.