テンプレート作成の解像度問題を解決!
はじめに
DaVinci Resolve で Fusion テンプレートを制作する際、多くの制作者が直面する問題があります。
FHD (1920×1080) で完璧に見えるテンプレートが、4K (3840×2160) に切り替えると、すべての要素が半分のサイズになってしまう。
YouTubeで公開されているチュートリアルでは、この問題はほぼ触れられません。なぜなら、個人用のテンプレートを作る場合は、自分の制作環境に合わせて作ればそれで問題ないからです。しかし、複数のプラットフォームで販売するテンプレートを作る場合、この問題は致命的です。
本記事では、私が実務で直面したこの問題と、その確実な解決策を具体的に解説します。
---1. なぜ FHD ベースのテンプレートは 4K で小さくなるのか
Fusion でテンプレートを作成する際の標準的なワークフローは、以下の通りです:
1. プロジェクト設定で解像度を決定する(例:1920×1080) 2. Background ノードで背景を作成する 3. Text ノード、Polygon ノード、Transform ノードで要素を配置する 4. 各ノードのパラメータに直接数値を入力する
問題は、この時点では すべてが FHD 基準の絶対値 で記述されているということです。
例えば、タイマー表示のテキストボックスを「X: 960、Y: 540、Width: 300、Height: 150」と設定したとします。これは、FHD の画面中央に、特定サイズで配置されるように計算された値です。
ところが、このテンプレートを 4K プロジェクトにコピーして使うと、どうなるでしょう。プロジェクト設定が 3840×2160 に変わったとき、これらのパラメータは変わりません。つまり、FHD 基準の値のまま、4K キャンバスに配置されるのです。
結果として:
- 画面幅が2倍(1920→3840)なのに、テキストボックスの幅は 300 のまま
- 画面高さが2倍(1080→2160)なのに、テキストボックスの高さは 150 のまま
- 相対的に、テキストボックスは 1/4 のサイズに見える
2. 初心者が陥りやすい誤った対策
この問題を認識した多くの制作者は、以下のような対策を試みます。
誤った対策1:解像度ごとにテンプレートを分ける
「FHD 用」「4K 用」「ポートレート用」と、解像度ごとに異なるテンプレートを作成する。
これは確実に機能しますが、以下の問題があります:
- ファイル管理が複雑になる
- 機能追加・修正時に、すべてのバージョンで対応する必要がある
- ユーザーが「自分の解像度用」を選ぶという操作負荷が増える
- 販売数が分散する(1つのテンプレートではなく、複数の商品になってしまう)
「4K を使う場合は、すべての値を2倍にしてください」というドキュメントを付ける。
これはユーザーの手作業を大幅に増やすため、製品体験として劣ります。購入者からの「これの値をいくつに変更すればいいのか」という問い合わせが絶えなくなります。
正解:Expression による動的スケーリング
テンプレートが使用されるプロジェクトの解像度を自動検知し、それに応じてすべての要素を動的にスケーリングする。これが、プロフェッショナルな テンプレートの必須要件です。
---3. Background ノードから解像度情報を取得する
Expression によるスケーリングを実装するには、まず 現在のプロジェクト解像度を取得 する必要があります。
Fusion では、comp.RenderStart や comp.RenderEnd といった組み込み変数で、フレーム情報にアクセスできます。しかし、プロジェクト解像度の取得は直接的な方法がない というのが落とし穴です。
ここで活躍するのが Background ノード です。
Background ノードを使って、明示的に解像度を指定します。以下の手順です:
1. Background ノードを作成 - テンプレートの最上位階層に配置 2. Background の出力解像度を、プロジェクト解像度に同期 3. 他のすべてのノードが、Background の解像度を参照
こうすることで、Background のサイズ情報が、プロジェクト解像度の「真実のソース」になります。
背景に実際の画像を配置する必要はありません。透明な Background でも機能します。重要なのは、解像度情報を一元化する という設計思想です。
---4. Expression で相対サイズを計算する
Background から解像度情報を取得したら、次は 各要素のサイズを相対値で計算 します。
具体的な例として、「FHD を基準に、テキストボックスを画面中央に配置し、常に画面幅の30%を占める」というシナリオを考えます。
手順1:参照値の設定
Background ノード(例:Background1)の出力から、以下の情報を取得します:
`
BaseWidth = Background1.Output.ImageFiltering.Width
BaseHeight = Background1.Output.ImageFiltering.Height
`
手順2:スケーリング係数の計算
FHD (1920×1080) を基準とした場合、短辺を基準にスケーリング係数を算出します:
`
ScalingFactor = math.min(BaseWidth, BaseHeight) / 1080
`
これにより、以下の対応が実現されます:
- FHD (1920×1080) → ScalingFactor = 1080 / 1080 = 1.0
- 4K (3840×2160) → ScalingFactor = 2160 / 1080 = 2.0
- HD (1280×720) → ScalingFactor = 720 / 1080 ≈ 0.67
Text ノード(例:Text1)の Size パラメータに、以下の Expression を設定します:
`
BaseSize = 72
BaseSize * ScalingFactor
`
これにより、FHD では 72pt のテキストが、4K では自動的に 144pt に拡大されます。
手順4:位置座標も相対値で計算
さらに精密に対応させるには、X・Y 座標も相対値で指定します。
例えば、「画面中央より右に、画面幅の20%のオフセット」という配置は:
`
CenterX = BaseWidth / 2
OffsetX = BaseWidth * 0.2
FinalX = CenterX + OffsetX
`
このように記述することで、どの解像度でも同じ相対位置に配置されます。
(※Expression の細かな文法は、DaVinci Resolve のドキュメントで詳しく記載されています。基本的には Lua ベースの構文です)
---5. 実装のベストプラクティス
すべての要素に Expression を手作業で記述するのは非効率です。私が実際に導入している方法を紹介します。
方法1:BaseSize を InstanceInput として公開
Fusion では、テンプレート内の計算値を「外部パラメータ」として公開できます。Publish & Instantiate 機能を使用します。
1. ScalingFactor を計算する専用ノード(例:Math1)を作成
2. そのノードを右クリック → Publish & Instantiate
3. ScalingFactor という名称で公開
これにより、テンプレート全体で一つの ScalingFactor 値を参照できるようになります。もし計算ロジックを修正する場合、この一箇所だけ変更すれば、すべての要素に反映されます。
方法2:複数の Text ノード間でサイズ比率を保つ
テンプレート内に「メインタイトル」「サブタイトル」があるとします。これらのサイズ比率(例:メイン 1.2 : サブ 0.8)を常に保ちたい場合:
`
MainTitleSize = BaseSize * 1.2 * ScalingFactor
SubTitleSize = BaseSize * 0.8 * ScalingFactor
`
この書き方なら、BaseSize を変更すると、自動的に両者の比率を保ちながらスケーリングされます。
方法3:条件分岐を使った柔軟な対応
例えば、「4K の場合だけ、細かい装飾を表示したい」という要件があります:
`
IsHighResolution = ScalingFactor >= 1.5
Opacity = IsHighResolution ? 1.0 : 0.0
`
このように条件分岐を記述することで、解像度に応じた表示・非表示の切り替えが可能です。
---6. テストと検証
Expression が正しく機能しているかどうかは、実際に複数の解像度でテストすることでしか確認できません。
テスト手順:
1. FHD プロジェクトで動作確認 - テンプレートが意図した形で表示されるか 2. 4K プロジェクトにテンプレートを移行 - スケーリング係数が正しく計算されているか 3. その他の解像度(HD、5K など)で確認 - 例外ケースがないか
特に確認すべき項目:
- テキストサイズが適切にスケールしているか
- 配置位置(X・Y 座標)が相対的に保持されているか
- 画像やグラフィックの縦横比は変わっていないか
- フォントのレンダリングが破綻していないか
1. Background ノードが正しく解像度を認識しているか 2. ScalingFactor の計算式が間違っていないか 3. 各ノードが ScalingFactor を参照しているか
---終わりに
FHD から 4K への対応は、テンプレート制作の初期段階では見落とされやすい課題です。しかし、複数解像度に対応したテンプレートは、そうでないテンプレートと比べて、購入者の満足度が圧倒的に高い というのが実体験です。
なぜなら、購入者は自分の制作環境が異なるかもしれないからです。YouTube・TikTok・Instagram・Twitter など、プラットフォームごとに異なる解像度が求められます。「このテンプレートは、どの解像度でも完璧に機能する」という信頼感は、販売数にも直結します。
Expression による自動スケーリングは、一度設計してしまえば、その後の改良も容易です。むしろ、後から対応しようとするほうが手間がかかります。テンプレート制作の最初の段階で、必ず組み込むべき要素です。
今回解説した方法は、複雑に見えるかもしれません。しかし実装してみると、その効率性と柔軟性に気づくはずです。あなたのテンプレートが、より多くのユーザーに信頼されるステップになればと思います。
