概要
After Effectsで制作した結婚式ムービーテンプレートをLottie（JSON）に変換し、ブラウザ上で写真やテキストを差し替えるだけでオリジナルのウェディングムービーを生成できるSaaSです。
なぜ作ったのか
結婚式ムービーの制作は、従来であればAfter Effectsなどの映像編集ソフトを扱えるクリエイターに依頼するか、自分でソフトの使い方を覚えて作るしかありませんでした。テンプレートを買ったとしても、AEの操作自体が初めてという方にはハードルが高い。
自分がこれまで何千本と作ってきたAEテンプレートの資産を、「ブラウザだけで誰でも使える形」に変換できたら、クリエイターに依頼する時間もコストも大幅に削減できるのではないか。そう考えたのがきっかけです。
もう一つの動機は、AEテンプレートの販売モデルからの転換です。テンプレートを売り切りで販売するのではなく、SaaSとして継続的に価値を提供するモデルに変えたかった。ユーザーにとっても「ソフトを買わなくていい」「操作を覚えなくていい」というメリットがあります。
技術的な仕組み
まず、After Effectsで制作したモーションテンプレートをLottie（JSON形式）に変換します。ここが最も工夫が必要なところで、AEの機能をそのままLottieにできるわけではありません。Lottieがサポートしていないエフェクトやエクスプレッションは事前に別の方法で再現する必要があります。
変換されたLottieテンプレートは、フロントエンド（React）上でリアルタイムプレビューとして動作します。ユーザーがブラウザ上で写真をアップロードしたりテキストを入力すると、即座にプレビューに反映される仕組みです。この「触りながら確認できる」体験が、従来のテンプレート販売と大きく異なる点です。
編集が完了したら、サーバーサイドでRemotionを使って最終的な動画をレンダリングします。RemotionはReactベースの動画生成フレームワークで、Lottieテンプレートにユーザーが指定した素材を組み込んだ状態で、フルHDのMP4として書き出します。
レンダリング処理はAWS上で実行しています。結婚式の準備期間中にアクセスが集中することもあるため、負荷に応じてスケールできる構成にしています。レンダリングの進捗はリアルタイムでユーザーに通知され、完了後すぐにダウンロードできます。
工夫したポイント
AE→Lottie変換の品質維持: After Effectsの全機能がLottieに対応しているわけではないため、テンプレート設計の段階からLottie変換を前提にした作り方をしています。20年近くAEを触ってきた経験が、「何がLottieで再現できて、何ができないか」の判断に直結しています。
プレビューと最終出力の一致: ブラウザ上のLottieプレビューとRemotionで生成する最終動画の見た目が一致するように、かなり細かい調整をしています。プレビューで見た通りのものが出てこないと、ユーザーの信頼を失います。
非クリエイター向けのUI設計: After Effectsを触ったことがない人が、迷わず操作できることを最優先にしています。専門用語は極力使わず、「写真を選ぶ」「文字を入れる」「動画を作る」の3ステップで完結するようにしています。
リンク
NONNOFILM App – ブライダルムービー自動生成サービス
ツール導入で終わらない「本当のDX」を、一緒に作りませんか
AE→Lottie→Remotionの動画自動生成から、業務プロセス全体の自動化まで。
自分で作って動かしている仕組みを、あなたのビジネスにも実装します。