SVGをMotion 6.3に読み込んだのに、文字や画像が欠けたり画面が空白になったりします。 最短の解決策は、Windowsで静的SVGを自己完結した素材に整理し、Motion 6.3ではアニメーションとテンプレート公開を作り直すことです。SVG内のアニメーション、カスタムフォント、外部画像参照は、そのまま持ち込める前提で扱わないでください。
対象になる制作担当者
Windowsでベクター素材を作り、Motion 6.3で映像用の動きを付けたいデザイナー向けです。ブランドロゴ、字幕バー、番組用の角飾り、インフォグラフィックをFinal Cut Proテンプレートとして渡したい場合にも使えます。
Motionを実行できるMac環境がない場合は、Windows側を素材準備に限定し、Mac側でアニメーション、公開、Final Cut Proでの呼び出しまで行う分担が安全です。MACGPUのMac環境を検討する場合も、先に代表素材で検収条件を決めてください。
最終更新日：2026年9月6日。Motion 6.3の公開日とSVG対応範囲は、AppleのMotion 6.3リリースノートおよびSVGファイルの制限に関する公式ガイドで確認しています。
SVG導入前の素材設計
Motion 6.3ではSVGを読み込めますが、「SVG形式ならすべての内容が保持される」という意味ではありません。Appleは、アニメーションSVG、カスタムフォント、JavaScript、埋め込みリンク、外部画像参照、一部の透明度表現に制限があると案内しています。対応範囲はAppleのSVG制限説明で確認できます。
Windows側では、次の順で素材を整理します。
- 画板の範囲を確認する
- 透明領域を確認する
- 文字の扱いを決める
- 外部画像を埋め込むか除外する
- 静止画として確認する
素材方式の比較
| 素材の作り方 | Motionでの扱いやすさ | Final Cut Proテンプレートへの適性 | 判断 |
|---|---|---|---|
| 単純な静的SVG | 高い。ただし透明度やフォントは確認が必要 | ロゴ、アイコン、図形に向く | 最初の検証に選ぶ |
| アニメーションSVG | SVG内の動きをそのまま前提にできない | Motion側で動きを作り直す | 再構成が必要 |
| 外部画像を参照するSVG | 画像欠落や空白を確認しにくい | 関連メディアを別途管理 | 自己完結化または分離 |
| カスタムフォントを含むSVG | フォント環境により外観が変わる可能性 | 固定ロゴはアウトライン化が安全 | 文字の用途で分ける |
ブランド素材のアニメーション
ロゴやアイコンは、SVGの拡大縮小を活かしやすい素材です。動画包装では、解像度の異なる画面へ配置する可能性があるため、ビットマップだけで作った素材よりも輪郭を保ちやすい場面があります。ただし、読み込み後の外観が元のデザインソフトと完全に一致するとは断定できません。
Motionでは、SVGを素材として配置した後、位置、拡大縮小、回転、マスク、表示タイミングなどを組み立てます。SVGファイル内の動きやスクリプトを再生するのではなく、Motionのタイムラインとビヘイビアで作る考え方です。
ブランド案件では、次の3種類を別々に確認します。
- ロゴ単体の出現と退場
- ロゴと背景図形を組み合わせたタイトル表示
- 小さい画面でも識別できるアイコンの配置
字幕バーと番組包装
Windowsで作ったボタン、角飾り、帯状の装飾を字幕バーにまとめる場合、Motion側で「固定される部分」と「Final Cut Proで変更させる部分」を分けます。背景の図形や装飾は固定し、タイトル文字、色、位置などを公開する設計にすると、編集者が触る範囲を限定できます。
MotionからFinal Cut Proへ公開できるのは、明示的に公開したコントロール項目です。Appleの公開コントロールに関する公式ガイドでも、パラメータを公開してFinal Cut Pro側から調整する流れが説明されています。
ここで注意したいのは、Motionのキャンバスで見栄えが良くても、テンプレートとして使いやすいとは限らない点です。文字が長くなったときの折り返し、タイトルを空欄にしたときの余白、色を変更したときのコントラストをFinal Cut Pro上で確認します。
Motionテンプレートの種類や保存先も、納品前に整理してください。Motionのテンプレートワークフローとテンプレート保存場所の公式説明を参照し、プロジェクトファイル、関連メディア、公開済みテンプレートを混同しないようにします。
インフォグラフィックの表示確認
工程図、グラフ、画面注釈のように複数の図形を含むSVGでは、単一のロゴよりも確認項目が増えます。特に、透明度の重なり、グラデーション、細い線、画面端の配置を別々に見ます。
読み込み後に明るく見える、図形の一部が欠ける、何も表示されないという場合は、次の順で切り分けます。
- SVGを単独で開き、外部画像がなくても成立するか確認する
- 使用フォントを確認し、必要なら文字をアウトライン化する
- 透明度を減らした簡易版を作り、原因が合成処理か確認する
- 画面端から離した位置に配置し、画板外の要素を疑う
- 最初のフレームで透明になっていないか確認する
Final Cut Proテンプレートの検収
SVGをMotionへ取り込んだ後は、普通の動画を書き出すのか、再利用できるFinal Cut Proテンプレートにするのかを分けます。テンプレートにする場合は、タイトル、エフェクト、トランジション、ジェネレーターのどの種類で保存するかを先に決めます。
実作業は次の5段階で進めます。
- WindowsでSVGを整理し、ファイル名、版数、用途をそろえます。
- Mac側のMotionで代表的なSVGだけを読み込み、外観と透明部分を確認します。
- SVG内の動きに頼らず、Motionでアニメーションを作成します。
- Final Cut Proで変更させる項目だけを公開し、テンプレートとして保存します。
- 新しいFinal Cut Proプロジェクトでテンプレートを呼び出し、長い文字、空欄、色変更、別素材への置換を確認します。
FAQ：SVG交接とテンプレート公開
Motion 6.3でSVGを読み込んだのに画面が空白になる場合
外部画像への参照、カスタムフォント、JavaScript、埋め込みリンク、透明度の表現などが原因になり得ます。SVGを単独で表示できても、Motion内で同じ状態になるとは限らないため、素材を自己完結させ、単純な代表データで先に確認してください。
SVGのフォントやグラデーションが変わる場合
変わる可能性があります。MotionのSVG対応にはフォントや透明度に関する制限があるため、文字をアウトライン化した素材と、重要な色を確認できる簡易版を用意すると切り分けやすくなります。最終判断は実際のプロジェクト上で行ってください。
Windowsで作ったSVGをMotionのアニメーションに使う場合
Windows側で画板、透明部分、文字、外部参照を整理し、関連ファイルをまとめて保存します。その後、Mac側のMotionで代表的な1素材を読み込み、外観を確認してから、位置、拡大縮小、出現、マスクなどの動きをMotion内で作成します。
MotionのSVG素材をFinal Cut Proテンプレートにする場合
できますが、SVGを置いただけでは編集可能なテンプレートになりません。Motionでタイトル、エフェクト、トランジション、ジェネレーターの種類を決め、Final Cut Proで変更させたいパラメータだけを公開してから、別のプロジェクトで呼び出し結果を確認します。
WindowsとリモートMacの分担
Windows側では、ベクター制作、命名、不要な外部参照の整理、素材の版管理を行います。Mac側では、Motion 6.3への読み込み、アニメーション、公開コントロールの設定、Final Cut Proでのテンプレート検収を担当させます。
この分担は、素材準備とアニメーション作業を別の場所で進めたい場合に適しています。一方、リモート操作では回線品質や表示遅延が発生する可能性があり、ゼロ遅延や絶対的な色再現を前提にしてはいけません。色の最終判断が重要な案件では、管理された表示環境で別途確認します。
接続環境を検討するときは、利用するMacの条件と作業期間を先に整理してください。MACGPUのMac環境に関する案内を確認し、必要なアプリ、保存方法、納品形式が実際の作業に合うかを照合します。地域や接続条件を確認する場合は、M4 Macの利用案内も候補になります。
案件ごとの判断
SVGを数点使った単発の字幕包装であれば、Windowsで素材を準備し、必要な期間だけリモートMacでMotionとFinal Cut Proの検収を行う方法が現実的です。反対に、毎週大量のテンプレートを更新する、物理ディスプレイで色を厳密に合わせる、外部機器を接続して収録する場合は、固定した本地のMac環境の方が管理しやすい場合があります。
現在のWindowsだけの構成では、Motion 6.3を直接実行できず、SVGを別ソフトで再現してから再確認する手間が発生します。代替ソフトへ移す場合も、公開パラメータ、テンプレート構造、Final Cut Proでの呼び出し結果が同じになるとは限らず、納品前の変換確認が増えます。
そのため、まず実際のブランドロゴまたは字幕テンプレートを1つ選び、SVGの読み込み、Motionでのアニメーション、Final Cut Proでの呼び出しを一通り検証してください。3段階が要件を満たした時点で、MACGPUのMac環境を案件単位で借りるか、継続利用するかを決めると、不要な長期契約や互換性の見落としを避けられます。