R RenderComp
EN 購入する
remotion SNS instagram youtubeショート 動画制作 テンプレート

Remotion SNS動画テンプレート — Instagram・YouTube Shorts・TikTok対応

Read in English →

Remotion SNS動画テンプレート — Instagram・YouTube Shorts・TikTok対応

動画コンテンツの制作で「縦型・横型・正方形」を別々に作り直している担当者は多い。1本のブランド動画をInstagram Reels用、YouTube Shorts用、TikTok用に個別エクスポートする作業は、それだけで半日を消費することがある。

RemotionはReactベースの動画制作フレームワークだ。動画がTypeScriptのコンポーネントとして記述されているため、サイズ変更・リエクスポートをNode.jsスクリプトで自動化できる。この記事では、各SNSプラットフォームに合わせたRemotionの<Composition>設定、セーフゾーンの考え方、そして一括エクスポートの実装パターンを解説する。

なぜ「1本の動画」では対応できないのか

SNS動画の制作で最初につまずくのがアスペクト比とセーフゾーンの問題だ。2026年時点の主要プラットフォームの仕様を整理すると次のようになる。

プラットフォーム推奨解像度アスペクト比fps最大尺
Instagram Reels1080×19209:16303分
YouTube Shorts1080×19209:16303分
TikTok1080×19209:163060分（アルゴリズム優遇は60秒以内）
LinkedIn1920×108016:93010分
X（旧Twitter）1280×72016:9302分20秒

解像度だけ見れば縦型3プラットフォームはすべて1080×1920で共通だ。しかし問題はUIオーバーレイにある。いいね・コメント・シェアのアイコン列、キャプション表示エリア、音楽クレジットバーなどがプラットフォームごとに異なる位置に描画される。つまり「画素数は同じでも安全に文字やロゴを置けるエリア」が違う。

従来の動画編集ツールではこの違いをファイルを分けることで対処してきた。Remotionならコンポーネントのプロパティを変えるだけで済む。

Remotionのコンポジション設定

Remotionで動画の「仕様」を定義する単位が<Composition>だ。主なプロパティは以下の4つ。

<Composition
  id="ReelsTemplate"
  component={SocialTemplate}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={450}
  defaultProps={{ headline: "見出しテキスト" }}
/>
  • width / height — ピクセル単位の出力解像度。Remotionはここで指定した解像度をそのまま使う。
  • fps — 1秒あたりのフレーム数。SNS向けは30が安全。
  • durationInFrames — フレーム数で指定。30fpsで15秒なら450。
  • defaultProps — コンポーネントに渡すデフォルト値。renderMedia実行時にinputPropsで上書きできる。

またcalculateMetadataを使うと、width・height・fps・durationInFramesをinputPropsから動的に計算できる。これを活用することで、プラットフォームごとに異なるコンポジションを同一コンポーネントから生成する仕組みが作れる。

Instagram Reels：1080×1920、30fps

Instagram Reelsのキャンバスは1080×1920が推奨だ。プラットフォーム側で再エンコードが行われるが、ネイティブ解像度で入稿すると画質低下を最小限に抑えられる。

2026年時点のセーフゾーン（Instagram Reels）

  • 上部100px — ステータスバーと干渉する
  • 下部250px — 音楽クレジットバー・キャプション・インタラクションボタン（2025年末に下部のデッドゾーンが拡張された）
  • 右端150px — いいね/コメント/シェアのアイコン列

結果として「安全に文字やロゴを置けるエリア」は中央に寄った900×700pxの領域になる。

Remotionでセーフゾーンを実装する基本パターン:

const REELS_SAFE = {
  top: 120,
  bottom: 270,
  left: 60,
  right: 220, // アイコン列を考慮して右は広め
} as const;

export const TextLayer: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <div
      style={{
        position: "absolute",
        top: REELS_SAFE.top,
        bottom: REELS_SAFE.bottom,
        left: REELS_SAFE.left,
        right: REELS_SAFE.right,
        opacity,
      }}
    >
      {text}
    </div>
  );
};

useCurrentFrame()でフレーム番号を取得し、interpolate()でフェードインのタイミングを制御している。extrapolateRight: "clamp"を指定すると、アニメーション区間が終わった後も値が上限に固定され、想定外の挙動を防げる。

YouTube Shorts：UIの配置がReelsと異なる

YouTube Shortsも1080×1920を使うが、UIオーバーレイの配置がInstagramと異なる。

2026年時点のセーフゾーン（YouTube Shorts）

  • 上部150px — プログレスバーとシステムUI
  • 下部300px — チャンネル名・タイトル・説明文・購読ボタン（2025年末にサブスクライブボタンが30%拡大された）
  • 左端100px — 左下コーナーは特に危険
  • 右端130px — アクションボタン列

Instagram Reelsと比較すると下部のデッドゾーンが若干大きく、特に左下コーナーを避ける必要がある。一方、Reelsにある音楽クレジットバーが存在しないため、右下コーナーは比較的クリーンだ。

YouTube Shortsではエンドカードの考慮も必要になる場面がある。3分近い尺のShortsを作る場合、最後の20秒に当たる最終600フレーム（30fps時）で右下に300×300pxのエンドカードゾーンが表示される仕様になっている。このエリアに重要なコンテンツを配置しないよう、Remotionコンポーネント内で条件分岐を入れておくと安全だ。

TikTok：最もセーフゾーンが狭いプラットフォーム

TikTokは三プラットフォームの中でUIオーバーレイが最も多い。2026年1月のアップデートで「プレイリストに追加」ボタンが右下に追加され、右側のデッドゾーンがさらに20px拡大された。

2026年時点のセーフゾーン（TikTok）

  • 上部150px — ステータスバーと検索バー
  • 下部400px — 説明文・ハッシュタグ・音楽ウェーブフォーム・アクションロウ
  • 右端170px — アクション列（いいね・コメント・シェア・プレイリスト）

実質的な安全領域は横760px×縦1370pxで、キャンバス中央よりやや上寄りに配置する形になる。

TikTokで特に注意が必要なのが自動キャプションの問題だ。TikTokのキャプションはビデオフレームの内側に描画される（Instagramのように外側に追加されない）。そのため、Remotionコンポーネントで表示するテキストは下部420px以上の位置に収めないと、TikTokの自動キャプションと重なるリスクがある。

横型16:9：LinkedInとX向け

縦型動画が主流の中でも、LinkedInとXでは1920×1080の横型動画がB2Bコンテンツや解説系コンテンツで依然として有効だ。

<Composition
  id="LinkedInVideo"
  component={HorizontalTemplate}
  width={1920}
  height={1080}
  fps={30}
  durationInFrames={1800} // 60秒
  defaultProps={{
    platform: "linkedin",
    headline: "導入事例：コスト40%削減を実現",
  }}
/>

Xの場合は1280×720（16:9）でもアップロード上限（512MB）を考慮すると適切なケースがある。LinkedInはアップロード上限が5GBのため、フル1920×1080を優先する。

1080×1080（1:1）の正方形フォーマットは、縦型からのクロップや横型からのピラーボックスが不要なため、プラットフォームをまたいで汎用的に使える「最小公倍数的フォーマット」として有効だ。

一括エクスポートの自動化

Remotionの強みは、プラットフォームごとの書き出しをスクリプトで自動化できる点だ。bundle()でプロジェクトをビルドし、selectComposition()でコンポジションを解決し、renderMedia()でMP4を出力するという流れをループで回すだけで全フォーマット分の動画ファイルが生成できる。

// scripts/render-all-formats.ts
import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
import path from "path";

const formats = [
  { id: "InstagramReels", output: "out/reels.mp4" },
  { id: "YouTubeShorts",  output: "out/shorts.mp4" },
  { id: "TikTokTemplate", output: "out/tiktok.mp4" },
  { id: "LinkedInVideo",  output: "out/linkedin.mp4" },
];

const inputProps = {
  headline: "サマーキャンペーン開催中",
  ctaText: "詳細はこちら",
};

async function main() {
  const bundleLocation = await bundle({
    entryPoint: path.resolve("./src/index.ts"),
    webpackOverride: (config) => config,
  });

  for (const fmt of formats) {
    const composition = await selectComposition({
      serveUrl: bundleLocation,
      id: fmt.id,
      inputProps,
    });

    await renderMedia({
      composition,
      serveUrl: bundleLocation,
      codec: "h264",
      outputLocation: fmt.output,
      inputProps,
    });

    console.log(`完了: ${fmt.output}`);
  }
}

main().catch(console.error);

npx ts-node scripts/render-all-formats.tsを実行するだけで4本のMP4が出力される。bundle()は一度呼び出せばその結果（serveUrl）を全てのrenderMedia()呼び出しで再利用できるため、ビルドコストは1回で済む。

このスクリプトをGitHub ActionsなどのCI/CDパイプラインに組み込めば、コピーや画像素材の変更をプッシュするたびに全フォーマットの動画が自動生成される仕組みが作れる。

RenderCompのSNS動画テンプレートパック

ゼロからここまでの実装を整えるには相応の時間がかかる。RenderCompのSNS動画テンプレートパックは、サイズ設定・セーフゾーン・一括エクスポートスクリプトをすぐ使える状態で提供している。

パックに含まれるもの:

  • 2026年仕様のセーフゾーンを適用済みの4コンポジション（Instagram Reels・YouTube Shorts・TikTok・LinkedIn横型）
  • 4フォーマット一括書き出し用のrender-all-formats.tsスクリプト
  • Remotion Studio上でセーフゾーン境界を可視化するSafeZoneOverlayコンポーネント（レンダリング時は出力に含まれない）
  • spring()とinterpolate()を使ったテキストアニメーション・ロウサード・CTAボタンの実装
  • 全セーフゾーン定数を一元管理するplatforms.config.ts

ブランドカラー・フォント・ロゴの設定はbrand.config.tsの1ファイルに集約されており、変更すると4コンポジションすべてに反映される。ソースコードは完全にあなたのものとして所有できる。外部サービスへの依存はない。

よくある質問

Q: 4フォーマット分のコンポーネントをそれぞれ別ファイルに書く必要がありますか？ 必要ない。useVideoConfig()でアクティブなwidthとheightを取得し、その値に応じてセーフゾーン定数やレイアウトを切り替えることで、1つのコンポーネントで複数フォーマットに対応できる。Root.tsxに複数の<Composition>を登録し、それぞれが同じコンポーネントを参照する構成が推奨パターンだ。

Q: 30fpsと60fpsどちらを選べばよいですか？ SNS向けには30fpsが安全な選択だ。TikTokとInstagramはどちらも30fpsにトランスコードして表示する。YouTube Shortsは60fps表示に対応しているが、一般的なSNSコンテンツでは体感差は小さく、ファイルサイズとレンダリング時間の増加の方が問題になりやすい。

Q: Remotion Studioでセーフゾーンを確認する方法は？ RenderCompテンプレートに含まれるSafeZoneOverlayコンポーネントをルートに配置するとStudio上でセーフゾーン境界を可視化できる。SHOW_SAFE_ZONES環境変数をfalseにしてレンダリングすると出力から除外される。

Q: 文字列や画像を毎回コードを変えずに差し替えたい。 inputPropsを使う。renderMedia()にinputPropsを渡すとReactコンポーネントがdefaultPropsとマージされた形でそれを受け取る。スプレッドシートのデータを読み込んでループを回せば、20行のコピーデータから80本のMP4（4フォーマット×20行）を一括生成するパイプラインも作れる。

Q: 書き出し時のコーデックは何を指定すればよいですか？ h264（Remotionのデフォルト）がInstagram・TikTok・YouTube・LinkedIn・X/Twitterすべてで受け入れられる。互換性を最大化するにはrenderMedia()の引数にpixelFormat: "yuv420p"を追加するとよい。一部プラットフォームはこれ以外のピクセルフォーマットを拒否することがある。

Q: プラットフォームのUI仕様が変わったら対応はどうなりますか？ RenderCompテンプレートではすべてのセーフゾーン定数がplatforms.config.tsに集約されており、各定数にはソースへの参照コメントがある。プラットフォームのUIが変わった場合、1ファイルの定数を更新するだけで全コンポジションに反映される。

まとめ

Remotion SNS動画テンプレートで解決できることを整理すると:

  1. Composition設定で各プラットフォームのサイズ・fps・尺を一元管理できる
  2. セーフゾーン定数をコンポーネントに組み込むことでUIオーバーレイとの衝突を防げる
  3. 一括エクスポートスクリプトで4フォーマット分の書き出しを1コマンドで自動化できる

SNS向け動画制作のたびに同じ作業を繰り返すコストを削減したい場合、RenderCompのテンプレートパックはすぐに使える出発点になる。

rendercomp.com でSNS動画テンプレートパックをはじめ、各種Remotionテンプレートを確認できる。フルソースコード・ドキュメント・レンダリングスクリプトがセットになっており、既存のRemotionプロジェクトへの組み込みにも、スタンドアロンのスターターとしての利用にも対応している。

販売中

1,000以上のRemotionテンプレートを一括入手

買い切り（一括払い）・サブスクなし・生涯アップデート無料。TypeScript製。

料金プランを見る →