透明背景のアプリ動画 — どんな背景にもそのまま重ねられる

多くのアプリ動画は、背景が映像に焼き込まれた状態で書き出されます。エディタの中では美しく見えたグラデーションが、ランディングページの配色とぶつかり、スライドのテンプレートと喧嘩し、デバイスを四角い枠に閉じ込めてしまう——そんな経験はないでしょうか。背景が本当に透明な動画なら、この問題は起こりません。デバイスは自由に浮かび、その背後にあるもの——ヒーローセクションも、プレゼン資料も、編集中のタイムラインも——がそのまま透けて見えます。

ただし大きな落とし穴があります。動画で本物の透明を実現するのは、実はとても難しいのです。ブラウザに組み込まれたエンコーダーは、アルファチャンネルをそもそも運べません。この記事では、それでも透過書き出しに価値がある理由、つまずきやすいポイント、そして Mockpose がブラウザを離れずに本物のアルファ付きファイルを届ける仕組みをご紹介します。

ひとつの素材が、あらゆる背景で使える

透明背景のデバイス動画は、アプリを周囲から切り離せるという点で、もっとも使い回しの効くマーケティング素材です。一度レンダリングすれば、どこでも再利用できます。

• ヒーローに浮かぶデバイス。 ランディングページ自身のグラデーションやブランドカラーの上に動画を重ねられます。来期にページをリニューアルしても動画はそのまま使えて、再書き出しは不要です。
• ピクチャインピクチャのデモ。 ローンチ動画やチュートリアルなど、より大きな編集の中に、色付きの枠なしでアプリを組み込めます。
• スライドやプレゼン資料。 テーマが何であれ、デバイスはテンプレートの上に直接載ります。
• SNS 向けの切り抜き。 四角い矩形を貼り付けるのではなく、デバイスをデザインに溶け込ませられます。

浮かぶヒーローデバイスに興味を持った方には、ランディングページのためのデバイスモックアップのガイドもおすすめです。

動画の透明はなぜ難しいのか

Mockpose のエディタでシーンを透明にするのはワンクリックです。背景パネルを開き、背景を「透明」に設定するだけ。静止画ならこれで話は終わりで、PNG 書き出しは完全なアルファ透過を保持します。しかも無料プランに含まれています。

動画は事情が違います。ブラウザがローカルで生成できるエンコード——H.264 の MP4 と WebM(VP9)——には、アルファチャンネルがまったくありません。透明なシーンをそのまま通すと、透けているはずのピクセルはすべて黒く塗りつぶされます。これは Mockpose の制限ではなく、これらのフォーマットが Web 全体でそう振る舞う、という話です。

だからこそ Mockpose が見張り役になります。シーンの背景が透明なら、書き出しダイアログがそれを検知して警告し、アルファを実際に運べるエンコードをあらかじめ選択します。

本物のアルファを持つ 2 つのフォーマット

本物のアルファ付き動画は、プレミアムのサーバーレンダリングから生まれます。GPU 上で非同期に動くため、レンダリング中もエディタで作業を続けられ、完成したファイルは書き出し一覧に届きます。フォーマットは 2 つです。

• ProRes 4444 — 映像編集の標準フォーマット。Final Cut Pro、Premiere Pro、DaVinci Resolve、After Effects にそのまま読み込め、本物のアルファ付きでコンポジットに使えます。
• WebM alpha(VP9) — Web 向けの選択肢。Chrome、Firefox、Edge で完全な透過付きで再生されます。

Web で使う場合の注意点がひとつあります。Safari は WebM alpha を再生できません(HEVC alpha が必要ですが、まだ利用できません)。Safari の訪問者向けには、同じ動画を背景付きでレンダリングした MP4 をフォールバックとして用意しておけば、誰の画面でもヒーローが壊れずに済みます。

透過アプリ動画を書き出す 4 ステップ

1. シーンを組み立て——シネマティックなカメラワークもキーフレームタイムラインもすべてブラウザ内です——背景を「透明」に設定します。
2. デバイスをアニメーションさせるか、100 以上のテンプレートから選びます。
3. 書き出しで ProRes 4444(編集用)または WebM alpha(Web 用)を選択します。
4. できあがったファイルを好きな背景の上に置きます。ヒーローセクションでも、スライドでも、編集タイムラインでも。

長いレンダリングの前の簡単な確認方法:まず透明な PNG 静止画を書き出してみてください。完全なアルファ付き、ワンクリック、無料プランで使えます。

Mockpose のエディタは無料で使えます(書き出しは 720p まで、小さなウォーターマーク付き)。プレミアムにすると 4K、ウォーターマークなしの書き出し、そして本物のアルファ動画を可能にするサーバーレンダリングが解放されます。app.mockpose.com を開いて背景を「透明」に設定し、あなたのアプリが浮かぶ様子を確かめてください。