← コラム一覧へ戻る
2026-07-10

横動画だけじゃなく、縦動画にも対応する！

はじめに

YouTube・TikTok・Instagram Reels・Twitter など、動画プラットフォームの多様化に伴い、テンプレートに求められる要件が変わりました。

もはや、16:9（横動画）のみの対応では不十分です。同じテンプレートで、9:16（縦動画）にも対応できることが、販売テンプレートの 必須要件 となっています。

しかし、この対応は想像以上に複雑です。単にキャンバスを縦にするだけでなく、テンプレート内のすべての要素の位置・サイズ・レイアウトを根本的に再設計する必要があります。

本記事では、私が実務で確立した「16:9 と 9:16 を同一テンプレートで完全対応させる方法」を、具体的に解説します。

---

1. アスペクト比対応が必須になった理由

私がテンプレートをマーケットプレイスで販売し始めた当初、対応していたのは 16:9 のみでした。なぜなら、YouTube・Vimeo といったプラットフォームがメインだったからです。

ところが、ユーザーからのリクエストが急速に増えました。

「TikTok 用に 9:16 で使いたいのに、使えない」

「Instagram Reels でも使いたい」

「同じテンプレートで複数のプラットフォームに対応してほしい」

こうしたニーズに対応できないテンプレートは、市場での競争力を失います。実際に、競合製品の多くが「複数アスペクト比対応」を謳っていました。

ただし、対応するなら 半端な対応は避ける べきです。単に「9:16 でも使えます」では不十分。16:9 と同じクオリティで、9:16 でも完全に機能する必要があります。

---

2. アスペクト比対応の課題：なぜ単純ではないのか

一見すると、アスペクト比の対応は簡単に思えます。

「16:9 のテンプレートをそのまま 9:16 に縮小すればいいのでは」

しかし、実装してみるとすぐに問題が顕在化します。

問題1：要素の配置位置が破綻する

16:9 では画面右側に配置していたテキストが、9:16 では画面外に突き出てしまう。

問題2：テキストサイズが読めなくなる

9:16 は幅が狭いため、16:9 と同じサイズのテキストでは、スペース不足で読みづらくなる。

問題3：デザインの意図が失われる

16:9 ではバランスの取れたデザインも、9:16 では不自然に見える場合がある。

つまり、単なる「スケーリング」では対応できず、アスペクト比に応じた「デザイン再配置」が必須 なのです。

---

3. アスペクト比の自動判定

テンプレートが、使用されるプロジェクトのアスペクト比を自動判定する必要があります。

Background ノードから、プロジェクトの幅・高さ情報を取得します。前話で説明した方法と同じです：

` Width = Background1.Output.ImageFiltering.Width Height = Background1.Output.ImageFiltering.Height `

このとき、以下の calculation ノード（例：AspectRatioCheck）を作成します：

` AspectRatio = Width / Height IsPortrait = AspectRatio < 1.0 IsLandscape = AspectRatio >= 1.0 `

これにより：

  • 16:9 (1920×1080) → AspectRatio = 1.777... → IsLandscape = true
  • 9:16 (1080×1920) → AspectRatio = 0.562... → IsPortrait = true
  • 1:1 (1080×1080) → AspectRatio = 1.0 → IsLandscape = true

アスペクト比の判定ができたら、この情報を各ノードで参照して、条件付きで配置を切り替えます。

---

4. Transform による条件付き配置

最も効果的な方法は、Transform ノードのパラメータを Expression で分岐 させることです。

例えば、「タイマーテキスト」という要素を考えます。

16:9 では 画面右側中央 に配置したいが、9:16 では 画面上部中央 に配置したい場合：

ステップ1：条件に応じた X 座標を計算

` LandscapeX = Width * 0.75 PortraitX = Width / 2

FinalX = IsPortrait ? PortraitX : LandscapeX `

16:9 の場合、X = Width の 75%（右側） 9:16 の場合、X = Width の 50%（中央）

ステップ2：条件に応じた Y 座標を計算

` LandscapeY = Height / 2 PortraitY = Height * 0.25

FinalY = IsPortrait ? PortraitY : LandscapeY `

16:9 の場合、Y = Height の 50%（中央） 9:16 の場合、Y = Height の 25%（上部）

ステップ3：Transform ノードに適用

Transform ノードの Center X・Center Y に、上記の式を設定します：

` Transform1.Center.X = FinalX Transform1.Center.Y = FinalY `

この方法により、同一テンプレートが、16:9 では元のデザインを保持しながら、9:16 では自動的に配置位置を変更します。

(※複数の Transform ノードを組み合わせる場合、計算順序に注意が必要です。親ノードの変更が子ノードに影響することもあります)

---

5. テキストサイズのアスペクト比対応

アスペクト比が変わると、テキストサイズも適切に調整する必要があります。

単に「9:16 では文字を小さくする」のではなく、画面幅に対する相対サイズを保つ という設計がベストです。

方法：短辺を基準にサイズを計算

` ShortSide = math.min(Width, Height) BaseSize = 72

FinalSize = BaseSize * (ShortSide / 1080) `

この方法では：

  • 16:9 FHD (1920×1080) → ShortSide = 1080 → FinalSize = 72
  • 9:16 FHD (1080×1920) → ShortSide = 1080 → FinalSize = 72
  • 16:9 4K (3840×2160) → ShortSide = 2160 → FinalSize = 144

つまり、アスペクト比が何であれ、短辺が同じ場合は同じサイズになる という統一的な設計です。

ただし、9:16 で画面幅が狭い場合、テキストボックスの幅に制限が出てきます。その場合は、条件分岐で対応します：

` MaxWidth_Landscape = Width * 0.5 MaxWidth_Portrait = Width * 0.8

MaxWidth = IsPortrait ? MaxWidth_Portrait : MaxWidth_Landscape `

9:16 では幅広いテキストボックス、16:9 では幅狭いテキストボックス、という具合に調整できます。

---

6. 実装例：カータイマーの 16:9 ／ 9:16 対応

私が実際に制作した「カータイマー」では、以下の方法で両アスペクト比対応を実現しています。

16:9 での配置：

  • メインタイマー表示：画面中央
  • 車のイラスト：画面左側
  • 補足テキスト：画面下部

9:16 での配置：

  • メインタイマー表示：画面上部中央
  • 車のイラスト：画面中央
  • 補足テキスト：画面下部

同一テンプレートの中に、以下のノード構成を配置：

1. Background ノード - 解像度・アスペクト比の真実のソース 2. AspectRatioCheck ノード - IsPortrait / IsLandscape を計算 3. CarIllustration ノード - Transform で位置を条件分岐 4. TimerText ノード - 位置・サイズ両方を条件分岐 5. SupplementaryText ノード - アスペクト比に応じて表示/非表示を分岐

` Opacity = IsPortrait ? 1.0 : 0.0 `

この記述により、9:16 の場合のみ表示される要素も作成できます。

---

7. テスト・検証時の注意点

16:9 と 9:16 の両対応を実装した後、検証は特に重要です。

テスト環境の準備：

1. 16:9 FHD (1920×1080) プロジェクトで確認 2. 16:9 4K (3840×2160) プロジェクトで確認 3. 9:16 FHD (1080×1920) プロジェクトで確認 4. 9:16 4K (2160×3840) プロジェクトで確認

最低でも、この4パターンでテストすることをお勧めします。

確認項目：

  • すべての要素が正しい位置に配置されているか
  • テキストサイズは読みやすいか
  • 画像・グラフィックの縦横比は保持されているか
  • アニメーション（スケール変化など）は意図通りか

ここで問題を見つけた場合、以下のいずれかが原因です：

  • AspectRatio の計算が間違っている
  • Transform の参照値が誤っている
  • 条件分岐（IsPortrait / IsLandscape）の判定が逆になっている

Expression のデバッグは、各ノードの出力を確認しながら行うのが効率的です。

---

8. ユーザー体験を考慮した設計

アスペクト比対応を実装する際、忘れてはいけないのが ユーザーがテンプレートを実際に使う過程 です。

理想的には、ユーザーは以下の手順で使用します：

1. テンプレートをダウンロード 2. 自分の解像度・アスペクト比のプロジェクトにドラッグ&ドロップ 3. すぐに、完璧に配置されている状態で表示される

つまり、何の手動調整もなしに、自動対応される という体験が理想です。

そのためには、Expression による自動判定・自動配置が、完璧に機能する必要があります。ユーザーが「パラメータを手動で変更する」という操作を強要するテンプレートは、販売後のサポート負荷が増大します。

---

終わりに

16:9 と 9:16 の両対応は、一見すると複雑に見えます。しかし、設計思想が明確なら、実装は体系的に進められます。

重要なのは：

  • アスペクト比を自動判定する
  • 判定結果に基づいて、すべての要素を条件付きで配置する
  • 複数環境で十分なテストを行う

この3つを徹底することで、「どのプラットフォームでも、完璧に機能するテンプレート」が実現されます。

結果として、販売テンプレートの価値が大幅に向上し、ユーザーの満足度も高まります。最初は手間がかかる作業かもしれませんが、長期的には確実に報われる投資です。

← コラム一覧へ戻る