"Rendervid のテンプレート形式とは何ですか?"

"Rendervid テンプレートは、ビデオまたは画像の構造、コンテンツ、アニメーション、および出力設定を定義する JSON ファイルです。各テンプレートには、出力設定(寸法、fps、継続時間)、動的変数の入力定義、シーンとレイヤーを含むコンポジション、およびオプションのフォントとカスタムコンポーネント設定が含まれています。"

"Rendervid でテンプレート変数はどのように機能しますか?"

"テンプレート変数は {{variableName}} 構文を使用します。テンプレートの inputs 配列で、key、type(string、number、boolean、color、url、array)、label、description、default value を定義します。レンダリング時に、これらの変数は実際の値に置き換えられ、テンプレートを再利用可能で動的にします。"

"Rendervid にはいくつのアニメーションプリセットがありますか?"

"Rendervid には、4つのカテゴリに分類された40種類以上の組み込みアニメーションプリセットが含まれています:エントランスアニメーション(fadeIn、slideIn、scaleIn、bounceIn など)、エグジットアニメーション(fadeOut、slideOut、zoomOut など)、エンファシスアニメーション(pulse、shake、bounce、swing、heartbeat など)、および30種類以上のイージング関数を使用した完全にカスタマイズ可能なキーフレームアニメーションです。"

"どのようなシーントランジションが利用できますか?"

"Rendervid は17種類のシーントランジションタイプを提供しています:cut、fade、zoom、slide、wipe、push、rotate、flip(3D)、blur、circle、glitch、dissolve、cube(3D)、swirl、diagonal-wipe、iris、crosszoom。各トランジションは、継続時間と方向パラメータで設定できます。"

"Rendervid はどのような出力形式をサポートしていますか?"

"Rendervid は、ビデオ用の MP4(H.264)、WebM(VP8/VP9)、MOV(ProRes)、GIF、および画像用の PNG、JPEG、WebP を含む複数の出力形式をサポートしています。H.265/HEVC や AV1 などの高度なコーデックもサポートされています。解像度は最大8K(7680x4320)で、フレームレートは1から120 fps までサポートされています。"

"Rendervid テンプレートでカスタムフォントを使用できますか?"

"はい、Rendervid は100種類以上の組み込み Google Fonts と、WOFF2、WOFF、TTF、OTF 形式の URL からのカスタムフォント読み込みをサポートしています。100-900のフォントウェイトを指定でき、クロスプラットフォーム互換性のためにプラットフォーム固有のフォールバックを設定できます。"

Rendervid テンプレートシステム - JSON テンプレート、変数、アニメーション & トランジション

Rendervid テンプレートシステムの完全ガイド。JSON ビデオテンプレートの作成方法、{{variable}} 構文を使った動的変数の使用、40種類以上のアニメーションプリセット、17種類のシーントランジション、30種類以上のイージング関数の設定方法を学びます。

Rendervid Video Rendering Templates Open Source

Rendervid は、宣言型の JSON ベースのテンプレートシステムを中心に構築されたプログラマティックビデオレンダリングエンジンです。タイムラインで手動でビデオを編集する代わりに、シーン、レイヤー、アニメーション、トランジション、出力設定など、ビデオのすべての側面を単一の JSON ドキュメントで定義します。このアプローチにより、テンプレートはステートレスで、バージョン管理可能、マシン生成可能になり、AI 駆動のビデオ制作、バッチレンダリングパイプライン、完全に自動化されたコンテンツワークフローへの道が開かれます。

このガイドでは、Rendervid テンプレートシステムを上から下まで完全にカバーします:ルートレベルの設定、出力設定、変数と入力システム、シーンとコンポジション、8種類すべてのレイヤータイプ、40種類以上のアニメーションプリセット、30種類以上のイージング関数、17種類のシーントランジション、視覚効果、フォント設定、出力形式について説明します。

テンプレート構造の概要

すべての Rendervid テンプレートは、明確に定義されたルートレベルフィールドのセットを持つ JSON オブジェクトです。完全なテンプレートのスケルトンは次のとおりです:

{
  "name": "my-template",
  "output": { ... },
  "inputs": [ ... ],
  "composition": {
    "scenes": [ ... ]
  },
  "fonts": { ... },
  "customComponents": { ... },
  "defaults": { ... }
}

ルートレベルフィールド

フィールド	タイプ	必須	説明
`name`	string	はい	人間が読める形式のテンプレート識別子
`output`	object	はい	ビデオまたは画像の出力設定(寸法、fps、継続時間、形式)
`inputs`	array	いいえ	テンプレート変数の動的入力定義
`composition`	object	はい	すべての視覚コンテンツを定義する `scenes` 配列を含む
`fonts`	object	いいえ	Google Fonts とカスタムフォント宣言
`customComponents`	object	いいえ	登録されたカスタムレイヤーコンポーネント
`defaults`	object	いいえ	上書きされない限り、すべてのレイヤーに適用されるデフォルト値

name フィールドは組織目的のためのものであり、レンダリングには影響しません。output と composition フィールドは、すべてのテンプレートが持つべき2つの柱です。それ以外はすべてオプションですが、強力な機能を解放します。

出力設定

output オブジェクトは、最終的にレンダリングされるファイルを制御します:その形式、寸法、フレームレート、継続時間、背景色です。

{
  "output": {
    "type": "video",
    "width": 1920,
    "height": 1080,
    "fps": 30,
    "duration": 10,
    "backgroundColor": "#000000"
  }
}

出力フィールド

フィールド	タイプ	デフォルト	説明
`type`	string	`"video"`	出力タイプ: `"video"` または `"image"`
`width`	number	`1920`	ピクセル単位の幅(8K の場合は最大7680)
`height`	number	`1080`	ピクセル単位の高さ(8K の場合は最大4320)
`fps`	number	`30`	1秒あたりのフレーム数(1-120)
`duration`	number	–	秒単位の総継続時間
`backgroundColor`	string	`"#000000"`	16進数、RGB、または名前付き色としての背景色

一般的なプリセット

人気のある形式の出力設定は次のとおりです:

1080p フル HD(YouTube、汎用):

{
  "type": "video",
  "width": 1920,
  "height": 1080,
  "fps": 30,
  "duration": 60,
  "backgroundColor": "#000000"
}

Instagram リール / TikTok(9:16 縦型):

{
  "type": "video",
  "width": 1080,
  "height": 1920,
  "fps": 30,
  "duration": 30,
  "backgroundColor": "#FFFFFF"
}

4K UHD:

{
  "type": "video",
  "width": 3840,
  "height": 2160,
  "fps": 60,
  "duration": 120,
  "backgroundColor": "#000000"
}

Open Graph / ソーシャルシェア画像:

{
  "type": "image",
  "width": 1200,
  "height": 630,
  "backgroundColor": "#1a1a2e"
}

画像出力の場合、fps と duration は無視されます – レンダラーは単一フレームをキャプチャします。

テンプレート変数 & 入力

入力と変数システムは、Rendervid テンプレートを再利用可能にするものです。テキスト、色、URL をテンプレートにハードコーディングする代わりに、inputs を定義し、テンプレート内のどこでも {{variableName}} 構文を使用してそれらを参照します。

入力の定義

入力は、トップレベルの inputs 配列で宣言されます。各入力オブジェクトは単一の変数を記述します:

{
  "inputs": [
    {
      "key": "title",
      "type": "string",
      "label": "タイトル",
      "description": "イントロシーンに表示されるメインタイトルテキスト",
      "required": true,
      "default": "Hello World"
    },
    {
      "key": "brandColor",
      "type": "color",
      "label": "ブランドカラー",
      "description": "背景とアクセントに使用されるプライマリブランドカラー",
      "required": false,
      "default": "#FF5733"
    },
    {
      "key": "showSubtitle",
      "type": "boolean",
      "label": "サブタイトルを表示",
      "description": "サブタイトルの表示を切り替える",
      "required": false,
      "default": true
    }
  ]
}

入力フィールドリファレンス

フィールド	タイプ	必須	説明
`key`	string	はい	`{{key}}` 参照で使用される一意の識別子
`type`	string	はい	データタイプ: `string`、`number`、`boolean`、`color`、`url`、`array`
`label`	string	いいえ	UI レンダリング用の人間が読める形式のラベル
`description`	string	いいえ	この入力が制御する内容の説明
`required`	boolean	いいえ	レンダリング時に入力を提供する必要があるかどうか
`default`	any	いいえ	入力が提供されない場合のフォールバック値

入力タイプ

string – 自由形式のテキスト。タイトル、説明、キャプション、または任意のテキストコンテンツに使用します。
number – 数値。継続時間、サイズ、位置、不透明度レベル、またはカウントに使用します。
boolean – True/false トグル。条件付き表示、機能フラグ、またはオン/オフスイッチに使用します。
color – 16進数(#FF5733)、RGB(rgb(255,87,51))、または名前付き形式の色値。背景、テキストカラー、アクセントに使用します。
url – 有効な URL 文字列。画像ソース、ビデオソース、リンク、フォント URL に使用します。
array – 値のリスト。画像ギャラリー、テキストリスト、スライドコンテンツ、または任意の繰り返しデータに使用します。

テンプレートでの変数の使用

入力が定義されたら、二重中括弧を使用してテンプレート内のどこでもそれらを参照します:

{
  "type": "text",
  "text": "{{title}}",
  "style": {
    "color": "{{brandColor}}",
    "fontSize": "{{titleSize}}"
  }
}

変数はレンダリング時に解決されます。Rendervid API または CLI を呼び出すときに、実際の値を渡します:

{
  "title": "Summer Sale 2026",
  "brandColor": "#E63946",
  "titleSize": 72
}

完全な入力例

複数の入力タイプが連携する完全なテンプレートは次のとおりです:

{
  "name": "product-promo",
  "output": {
    "type": "video",
    "width": 1080,
    "height": 1080,
    "fps": 30,
    "duration": 15
  },
  "inputs": [
    {
      "key": "productName",
      "type": "string",
      "label": "製品名",
      "description": "プロモーションされる製品の名前",
      "required": true,
      "default": "製品"
    },
    {
      "key": "price",
      "type": "number",
      "label": "価格",
      "description": "ビデオに表示される製品価格",
      "required": true,
      "default": 29.99
    },
    {
      "key": "productImage",
      "type": "url",
      "label": "製品画像 URL",
      "description": "製品画像への URL",
      "required": true
    },
    {
      "key": "accentColor",
      "type": "color",
      "label": "アクセントカラー",
      "description": "CTA ボタンとハイライトに使用される色",
      "required": false,
      "default": "#FF6B35"
    },
    {
      "key": "showBadge",
      "type": "boolean",
      "label": "セールバッジを表示",
      "description": "セールバッジオーバーレイを表示するかどうか",
      "required": false,
      "default": false
    },
    {
      "key": "features",
      "type": "array",
      "label": "製品機能",
      "description": "機能の箇条書きリスト",
      "required": false,
      "default": ["機能 1", "機能 2", "機能 3"]
    }
  ],
  "composition": {
    "scenes": [
      {
        "name": "hero",
        "duration": 15,
        "layers": [
          {
            "type": "image",
            "src": "{{productImage}}",
            "position": { "x": 540, "y": 400 },
            "size": { "width": 600, "height": 600 }
          },
          {
            "type": "text",
            "text": "{{productName}}",
            "style": { "fontSize": 48, "fontWeight": 700, "color": "#FFFFFF" },
            "position": { "x": 540, "y": 80 }
          },
          {
            "type": "text",
            "text": "${{price}}",
            "style": { "fontSize": 64, "fontWeight": 900, "color": "{{accentColor}}" },
            "position": { "x": 540, "y": 900 }
          }
        ]
      }
    ]
  }
}

この単一のテンプレートは、レンダリング時に入力値を変更するだけで、何千もの一意の製品ビデオを生成できます – テンプレートの変更は必要ありません。

シーン & コンポジション

composition オブジェクトは、ビデオのコンテンツが存在する場所です。これには scenes 配列が含まれており、各シーンは独自の継続時間、レイヤー、トランジションを持つビデオの個別のセグメントを表します。

{
  "composition": {
    "scenes": [
      {
        "name": "intro",
        "duration": 5,
        "transition": {
          "type": "fade",
          "duration": 1
        },
        "layers": [ ... ]
      },
      {
        "name": "main-content",
        "duration": 20,
        "transition": {
          "type": "slide",
          "duration": 0.5,
          "direction": "left"
        },
        "layers": [ ... ]
      },
      {
        "name": "outro",
        "duration": 5,
        "layers": [ ... ]
      }
    ]
  }
}

シーンフィールド

フィールド	タイプ	必須	説明
`name`	string	いいえ	シーンの識別子(読みやすさとデバッグのため)
`duration`	number	はい	秒単位のシーンの長さ
`transition`	object	いいえ	前のシーンからこのシーンに入るときのトランジション効果
`layers`	array	はい	下から上にレンダリングされるレイヤーオブジェクトの順序付き配列

シーンは順番に再生されます。ビデオの総継続時間は、すべてのシーンの継続時間の合計です(トランジションのオーバーラップを差し引いたもの)。シーン内のレイヤーは配列順にレンダリングされます – 最初のレイヤーは視覚スタックの最下部に配置され、最後のレイヤーは最上部に配置されます。

トランジションが指定されていない場合、シーンはデフォルトでハード cut を使用します。

レイヤーシステム

Rendervid は8つの異なるレイヤータイプをサポートしています。各レイヤータイプは特定の目的を果たし、共有ベース設定の上に独自のプロパティセットを受け入れます。

共有レイヤープロパティ

タイプに関係なく、すべてのレイヤーはこれらのベースプロパティをサポートします:

{
  "position": { "x": 100, "y": 100 },
  "size": { "width": 500, "height": 200 },
  "rotation": 0,
  "scale": { "x": 1, "y": 1 },
  "anchor": { "x": 0.5, "y": 0.5 },
  "opacity": 1,
  "blendMode": "normal",
  "from": 0,
  "duration": -1,
  "filters": [],
  "style": {},
  "className": ""
}

プロパティ	タイプ	デフォルト	説明
`position`	object	`{x: 0, y: 0}`	ピクセル単位の X/Y 座標
`size`	object	–	ピクセル単位の幅と高さ
`rotation`	number	`0`	度単位の回転角度
`scale`	object	`{x: 1, y: 1}`	X 軸と Y 軸のスケール乗数
`anchor`	object	`{x: 0.5, y: 0.5}`	変換のアンカーポイント(0-1 範囲、0.5 = 中央)
`opacity`	number	`1`	レイヤーの不透明度(0 = 透明、1 = 不透明)
`blendMode`	string	`"normal"`	合成用の CSS ブレンドモード
`from`	number	`0`	秒単位の開始時間(シーン開始からの相対)
`duration`	number	`-1`	秒単位のレイヤー継続時間(-1 = シーン全体の継続時間)
`filters`	array	`[]`	視覚フィルターオブジェクトの配列
`style`	object	`{}`	追加の CSS 風スタイルプロパティ
`className`	string	`""`	カスタムスタイリング用の CSS クラス名

8つのレイヤータイプ

text – フォント、サイズ、色、配置、行の高さ、文字間隔、テキストシャドウなどを完全に制御してスタイル付きテキストをレンダリングします。動的コンテンツ用の {{variable}} 構文をサポートします。
image – URL またはローカルパスから静的画像を表示します。トリミング、object-fit モード、境界線の半径、画像フィルターをサポートします。
video – シーン内にビデオクリップを埋め込みます。トリミング(開始/終了)、音量制御、再生速度、ループ、ミュートをサポートします。
shape – 幾何学的プリミティブをレンダリングします:矩形、円、楕円、線、多角形。塗りつぶし、ストローク、境界線の半径、グラデーション、シャドウをサポートします。
audio – シーンにオーディオトラックを追加します。音量、フェードイン/アウト、トリミング、ループをサポートします。オーディオレイヤーには視覚的表現がありません。
group – 子レイヤーを保持するコンテナレイヤー。グループを使用すると、複数のレイヤーに一度に変換、アニメーション、効果を適用できます。
lottie – Lottie/Bodymovin JSON アニメーションをレンダリングします。再生速度、ループ、特定のフレーム範囲を再生するためのセグメント制御をサポートします。
custom – customComponents フィールドで定義された登録済みカスタムコンポーネントをロードします。再利用可能でパラメータ化されたレイヤーテンプレートに使用します。

各レイヤータイプの詳細な設定、利用可能なすべてのプロパティ、コード例については、Rendervid コンポーネントリファレンスを参照してください。

アニメーションシステム

Rendervid には、4つのカテゴリに分類された40種類以上の組み込みアニメーションプリセットが含まれています:entrance、exit、emphasis、keyframe。アニメーションは任意のレイヤーにアタッチされ、そのレイヤーがどのように表示、消失、または動作するかを制御します。

アニメーション設定

{
  "type": "text",
  "text": "アニメーションタイトル",
  "animations": [
    {
      "type": "entrance",
      "effect": "fadeInUp",
      "duration": 30,
      "delay": 10,
      "easing": "easeOutCubic",
      "loop": 0,
      "alternate": false
    }
  ]
}

アニメーションフィールド

フィールド	タイプ	デフォルト	説明
`type`	string	–	アニメーションカテゴリ: `entrance`、`exit`、`emphasis`、`keyframe`
`effect`	string	–	プリセット名(例: `fadeInUp`、`pulse`、`bounceOut`)
`duration`	number	`30`	フレーム単位の継続時間
`delay`	number	`0`	アニメーション開始前の遅延(フレーム単位)
`easing`	string	`"ease"`	イージング関数名
`loop`	number	`0`	ループ回数(0 = ループなし、-1 = 無限)
`alternate`	boolean	`false`	交互のループで方向を反転

エントランスアニメーション(20プリセット)

エントランスアニメーションは、レイヤーが画面に表示される方法を制御します。レイヤーの開始時間に達すると一度実行されます。

プリセット	説明
`fadeIn`	0から1への単純な不透明度フェード
`fadeInUp`	上方向にスライドしながらフェードイン
`fadeInDown`	下方向にスライドしながらフェードイン
`fadeInLeft`	左からスライドしながらフェードイン
`fadeInRight`	右からスライドしながらフェードイン
`slideInUp`	フレームの下からスライドイン
`slideInDown`	フレームの上からスライドイン
`slideInLeft`	左端からスライドイン
`slideInRight`	右端からスライドイン
`scaleIn`	0からフルサイズにスケールアップ
`zoomIn`	わずかなオーバーシュートで小さいスケールからズームイン
`rotateIn`	オフセット角度から位置に回転
`bounceIn`	弾性オーバーシュートで位置にバウンス
`flipInX`	X 軸での3D フリップ(水平フリップ)
`flipInY`	Y 軸での3D フリップ(垂直フリップ)
`typewriter`	文字が一度に1つずつ表示される(テキストレイヤー)
`revealLeft`	左からスライドするマスク表示
`revealRight`	右からスライドするマスク表示
`revealUp`	上方向にスライドするマスク表示
`revealDown`	下方向にスライドするマスク表示

エグジットアニメーション(9プリセット)

エグジットアニメーションは、レイヤーが消える方法を制御します。レイヤーの継続時間の最後に実行されます。

プリセット	説明
`fadeOut`	1から0への単純な不透明度フェード
`slideOutUp`	フレームの上部を通ってスライドアウト
`slideOutDown`	フレームの下部を通ってスライドアウト
`scaleOut`	フルサイズから0にスケールダウン
`zoomOut`	小さいスケールにズームアウトしてフェード
`rotateOut`	オフセット角度に位置から回転
`bounceOut`	消える前に弾性オーバーシュートで外側にバウンス
`flipOutX`	X 軸での3D フリップアウト
`flipOutY`	Y 軸での3D フリップアウト

エンファシスアニメーション(10プリセット)

エンファシスアニメーションは、レイヤーが表示されている間に注意を引きます。ループでうまく機能します。

プリセット	説明
`pulse`	リズミカルなスケールパルス(成長と縮小)
`shake`	急速な水平シェイク
`bounce`	垂直バウンスモーション
`swing`	振り子のようなスイング回転
`wobble`	回転と平行移動を組み合わせた軸外ウォブル
`flash`	急速な不透明度フラッシュ
`rubberBand`	弾性ストレッチとスナップ効果
`heartbeat`	ダブルパルス心拍リズム
`float`	穏やかな上下浮遊モーション
`spin`	連続360度回転

キーフレームアニメーション

完全な創造的コントロールのために、キーフレームアニメーションを使用すると、カスタムフレームごとのプロパティ変更を定義できます:

{
  "type": "keyframe",
  "keyframes": [
    { "frame": 0, "opacity": 0, "x": -100 },
    { "frame": 15, "opacity": 1, "x": 0 },
    { "frame": 30, "opacity": 1, "x": 0 },
    { "frame": 45, "opacity": 0, "x": 100 }
  ],
  "easing": "easeInOutCubic"
}

キーフレームアニメーションは、任意の数値プロパティをアニメートできます:opacity、x、y、rotation、scaleX、scaleY など。各キーフレームは、フレーム番号とそのフレームでのプロパティ値を指定します。レンダラーは、指定されたイージング関数を使用してキーフレーム間を補間します。

アニメーションの組み合わせ

単一のレイヤーに複数のアニメーションを持つことができます。たとえば、エントランスアニメーションの後にエンファシスループ、その後エグジットアニメーション:

{
  "animations": [
    {
      "type": "entrance",
      "effect": "fadeInUp",
      "duration": 20,
      "easing": "easeOutCubic"
    },
    {
      "type": "emphasis",
      "effect": "pulse",
      "duration": 30,
      "delay": 20,
      "loop": -1
    },
    {
      "type": "exit",
      "effect": "fadeOut",
      "duration": 15,
      "easing": "easeInCubic"
    }
  ]
}

イージング関数

イージング関数は、アニメーション中の変化率を制御し、モーションがリニア、スムーズ、バウンシー、または弾性的に感じるかどうかを決定します。Rendervid には30種類以上の組み込みイージング関数が含まれています。

基本イージング

関数	説明
`linear`	開始から終了まで一定速度、加速なし
`ease`	穏やかな加速と減速を伴うデフォルトの CSS 風イージング
`easeIn`	ゆっくり開始し、終わりに向かって加速
`easeOut`	速く開始し、終わりに向かって減速
`easeInOut`	前半で加速し、後半で減速

二次イージング

関数	説明
`easeInQuad`	二次加速(t^2)
`easeOutQuad`	二次減速
`easeInOutQuad`	二次加速後に減速

三次イージング

関数	説明
`easeInCubic`	三次加速(t^3) – 二次よりも顕著
`easeOutCubic`	三次減速 – スムーズで自然な感じの停止
`easeInOutCubic`	三次イーズインとアウト – 最も一般的に使用されるイージング

四次イージング

関数	説明
`easeInQuart`	四次加速(t^4)
`easeOutQuart`	四次減速
`easeInOutQuart`	四次イーズインとアウト

五次イージング

関数	説明
`easeInQuint`	五次加速(t^5) – 非常に鋭い開始
`easeOutQuint`	五次減速 – 非常に鋭い停止
`easeInOutQuint`	五次イーズインとアウト

正弦波イージング

関数	説明
`easeInSine`	正弦波ベースの加速 – 最も穏やかなイージングカーブ
`easeOutSine`	正弦波ベースの減速
`easeInOutSine`	正弦波ベースのイーズインとアウト

指数イージング

関数	説明
`easeInExpo`	指数加速 – ほぼ平坦から急激
`easeOutExpo`	指数減速 – 急激からほぼ平坦
`easeInOutExpo`	指数イーズインとアウト

円形イージング

関数	説明
`easeInCirc`	円形加速カーブ
`easeOutCirc`	円形減速カーブ
`easeInOutCirc`	円形イーズインとアウト

バックイージング

関数	説明
`easeInBack`	前方に加速する前にわずかに後退(予期)
`easeOutBack`	ターゲットをオーバーシュートしてから戻る(オーバーシュート)
`easeInOutBack`	エントリーで予期、エグジットでオーバーシュート

エラスティックイージング

関数	説明
`easeInElastic`	加速時の弾性ウォブル – スプリングのような巻き上げ
`easeOutElastic`	減速時の弾性ウォブル – スプリングのようなスナップ
`easeInOutElastic`	両端でエラスティック

バウンスイージング

関数	説明
`easeInBounce`	エントリーでバウンス効果 – 逆に落とされたボールのように
`easeOutBounce`	エグジットでバウンス効果 – 地面に当たるボールのように
`easeInOutBounce`	両端でバウンス

適切なイージングの選択

UI 要素とテキスト: 自然な感じのエントランスには easeOutCubic または easeOutQuart
注目を集めるモーション: 遊び心のあるオーバーシュートには easeOutElastic または easeOutBack
スムーズなループ: 穏やかで連続的なモーションには easeInOutSine
ドラマチックな表示: ビルドには easeInExpo、スナップな停止には easeOutExpo
物理シミュレーション: 重力のような効果には easeOutBounce

シーントランジション

トランジションは、あるシーンから次のシーンへの流れを制御します。Rendervid は、単純なカットから映画的な3D 効果まで、17種類のトランジションタイプを提供します。

トランジション設定

{
  "name": "scene-two",
  "duration": 10,
  "transition": {
    "type": "fade",
    "duration": 1,
    "direction": "left"
  },
  "layers": [ ... ]
}

transition オブジェクトは、入ってくるシーン(トランジション先のシーン)に配置されます。direction プロパティは、slide、wipe、push などの方向性のあるトランジションにのみ適用されます。

すべての17種類のトランジションタイプ

トランジション	説明
`cut`	視覚効果なしの瞬時切り替え(デフォルト)
`fade`	シーン間のクロスフェード – 出ていくシーンがフェードアウトし、入ってくるシーンがフェードイン
`zoom`	出ていくシーンにズームインし、入ってくるシーンが表示される
`slide`	入ってくるシーンが設定可能な方向(左、右、上、下)から出ていくシーンの上にスライド
`wipe`	ハードエッジワイプが入ってくるシーンを表示し、指定された方向にフレームを横切って移動
`push`	入ってくるシーンが指定された方向に出ていくシーンを画面外に押し出す
`rotate`	出ていくシーンが回転して離れ、入ってくるシーンが回転して入る
`flip`	3D フリップトランジション – フレームがカードのようにフリップして次のシーンを表示
`blur`	出ていくシーンがぼやけてアウトし、入ってくるシーンがフォーカスにシャープ化
`circle`	円形マスクが中央(または指定されたポイント)から拡大して次のシーンを表示
`glitch`	色収差と変位を伴うデジタルグリッチ歪み効果
`dissolve`	個々のピクセルがシーン間でランダムに遷移するピクセルレベルのディゾルブ
`cube`	3D キューブ回転 – シーンは回転するキューブの隣接する面にある
`swirl`	出ていくシーンを入ってくるシーンに渦巻く螺旋歪み
`diagonal-wipe`	一方の角から反対側に移動する対角線のハードエッジワイプ
`iris`	カメラの絞りのように開閉する円形アイリス
`crosszoom`	両方のシーンが同時にズーム – 出ていくシーンはズームイン、入ってくるシーンはズームアウト

トランジション例

長いクロスフェードを伴う映画的なフェード:

{
  "transition": {
    "type": "fade",
    "duration": 2
  }
}

右からスライド(連続コンテンツに一般的):

{
  "transition": {
    "type": "slide",
    "duration": 0.5,
    "direction": "right"
  }
}

3D キューブ回転(ダイナミックでモダンな感じ):

{
  "transition": {
    "type": "cube",
    "duration": 1
  }
}

グリッチ効果(エネルギッシュでテック志向):

{
  "transition": {
    "type": "glitch",
    "duration": 0.3
  }
}

視覚効果

Rendervid レイヤーは、フィルター、ブレンドモード、シャドウ、変換を通じてさまざまな視覚効果をサポートします。

フィルター

フィルターは、任意のレイヤーの filters 配列を介して適用されます。各フィルターは、type と value を持つオブジェクトです:

{
  "filters": [
    { "type": "blur", "value": 5 },
    { "type": "brightness", "value": 1.2 },
    { "type": "contrast", "value": 1.1 },
    { "type": "grayscale", "value": 0.5 },
    { "type": "saturate", "value": 1.5 }
  ]
}

フィルター	値範囲	説明
`blur`	0+(ピクセル)	ガウスぼかし – 値が大きいほどぼかしが強くなる
`brightness`	0+(乗数)	0 = 黒、1 = 通常、2 = 2倍の明るさ
`contrast`	0+(乗数)	0 = グレー、1 = 通常、2 = 2倍のコントラスト
`grayscale`	0-1	0 = フルカラー、1 = 完全に彩度を下げる
`hue-rotate`	0-360(度)	カラーホイールの周りで色を回転
`invert`	0-1	0 = 通常、1 = 完全に反転した色
`saturate`	0+(乗数)	0 = 彩度を下げる、1 = 通常、2 = 2倍の彩度
`sepia`	0-1	0 = 通常、1 = フルセピアトーン

ブレンドモード

blendMode プロパティは、レイヤーがその下のレイヤーとどのように合成されるかを制御します:

{
  "type": "shape",
  "blendMode": "multiply",
  "opacity": 0.8
}

サポートされているブレンドモード: normal、multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity。

シャドウ

テキストとシェイプレイヤーは、style プロパティを通じてシャドウ効果をサポートします:

{
  "style": {
    "shadow": {
      "color": "rgba(0, 0, 0, 0.5)",
      "offsetX": 4,
      "offsetY": 4,
      "blur": 10
    }
  }
}

効果の組み合わせ

フィルター、ブレンドモード、不透明度、シャドウはすべて、単一のレイヤーで組み合わせて洗練された視覚処理を行うことができます:

{
  "type": "image",
  "src": "{{backgroundImage}}",
  "opacity": 0.7,
  "blendMode": "overlay",
  "filters": [
    { "type": "blur", "value": 3 },
    { "type": "brightness", "value": 0.8 }
  ],
  "style": {
    "shadow": {
      "color": "rgba(0, 0, 0, 0.3)",
      "offsetX": 0,
      "offsetY": 10,
      "blur": 20
    }
  }
}

フォント設定

Rendervid は、Google Fonts(100種類以上のファミリーが組み込まれています)と外部 URL から読み込まれるカスタムフォントの両方をサポートしています。

Google Fonts

fonts.google 配列で Google Fonts を宣言します:

{
  "fonts": {
    "google": [
      { "family": "Roboto", "weights": [400, 700] },
      { "family": "Open Sans", "weights": [300, 400, 600, 700] },
      { "family": "Montserrat", "weights": [400, 500, 700, 900] },
      { "family": "Playfair Display", "weights": [400, 700] }
    ]
  }
}

各フォントオブジェクトには次のものが必要です:

フィールド	タイプ	説明
`family`	string	Google Font ファミリー名(正確な一致が必要)
`weights`	array	ロードする数値ウェイトの配列(100-900)

一般的なフォントウェイト: 100(Thin)、200(Extra Light)、300(Light)、400(Regular)、500(Medium)、600(Semi Bold)、700(Bold)、800(Extra Bold)、900(Black)。

カスタムフォント

fonts.custom 配列を使用して外部 URL からフォントをロードします:

{
  "fonts": {
    "custom": [
      {
        "family": "MyBrandFont",
        "src": "https://example.com/fonts/brand-font.woff2",
        "weight": 400,
        "style": "normal"
      },
      {
        "family": "MyBrandFont",
        "src": "https://example.com/fonts/brand-font-bold.woff2",
        "weight": 700,
        "style": "normal"
      }
    ]
  }
}

サポートされているフォント形式: WOFF2(最小ファイルサイズに推奨)、WOFF、TTF、OTF。

レイヤーでのフォントの使用

テキストレイヤースタイルでファミリー名で宣言されたフォントを参照します:

{
  "type": "text",
  "text": "{{headline}}",
  "style": {
    "fontFamily": "Montserrat",
    "fontWeight": 700,
    "fontSize": 64,
    "color": "#FFFFFF"
  }
}

Rendervid には、異なる環境間で一貫したレンダリングを保証するプラットフォーム固有のフォントフォールバックチェーンが含まれています。指定されたフォントが利用できない場合、レンダラーは同じ分類(serif、sans-serif、monospace)に一致するシステムフォントにフォールバックします。

出力形式

Rendervid は、ビデオと画像レンダリングの両方のための幅広い出力形式とコーデックをサポートしています。

ビデオ形式

形式	コーデック	ファイル拡張子	最適な用途
MP4	H.264	`.mp4`	最大互換性 – ウェブ、モバイル、ソーシャルメディア
WebM	VP8 / VP9	`.webm`	より小さいファイルサイズでのウェブ埋め込み
MOV	ProRes	`.mov`	プロフェッショナル編集ワークフロー、ロスレス品質
GIF	–	`.gif`	短いアニメーション、ソーシャル共有、メール
MP4	H.265 / HEVC	`.mp4`	新しいデバイス、同じ品質で H.264 より50%小さいファイル
WebM	AV1	`.webm`	次世代コーデック、最高の圧縮効率

画像形式

形式	ファイル拡張子	最適な用途
PNG	`.png`	ロスレス品質、透明度サポート
JPEG	`.jpg`	写真、より小さいファイルサイズ
WebP	`.webp`	モダンウェブ、品質とサイズの最適なバランス

品質プリセット

プリセット	説明
`draft`	品質を下げた高速レンダリング – プレビューに最適
`standard`	バランスの取れた品質とファイルサイズ – ほとんどのユースケースに適している
`high`	より高いビットレートと品質 – 最終成果物用
`lossless`	圧縮アーティファクトのない最高品質

解像度サポート

Rendervid は、小さなサムネイルから8K までの解像度をサポートしています:

解像度	寸法	一般的な用途
SD	640 x 480	サムネイル、プレビュー
HD	1280 x 720	ウェブビデオ、メール
Full HD	1920 x 1080	YouTube、プレゼンテーション
2K	2560 x 1440	高品質ディスプレイ
4K UHD	3840 x 2160	プロフェッショナル、放送
8K	7680 x 4320	最大解像度、将来性

1 fps(スライドショー)から 120 fps(スローモーション、ゲームコンテンツ)までのフレームレートがサポートされています。一般的な選択は、24 fps(映画的)、30 fps(ウェブ/ソーシャル)、60 fps(スムーズなモーション)です。

完全な例

これは、テンプレートシステムの主要機能が連携して動作することを示す完全な Rendervid テンプレートです:動的入力、トランジション付きの複数シーン、レイヤー化されたコンポジション、イージング付きアニメーション、フォント、視覚効果。

{
  "name": "tech-product-launch",
  "output": {
    "type": "video",
    "width": 1920,
    "height": 1080,
    "fps": 30,
    "duration": 20,
    "backgroundColor": "#0A0A0A"
  },
  "inputs": [
    {
      "key": "productName",
      "type": "string",
      "label": "製品名",
      "required": true,
      "default": "ProductX"
    },
    {
      "key": "tagline",
      "type": "string",
      "label": "タグライン",
      "required": true,
      "default": "未来はここにあります。"
    },
    {
      "key": "heroImage",
      "type": "url",
      "label": "ヒーロー画像",
      "required": true
    },
    {
      "key": "primaryColor",
      "type": "color",
      "label": "プライマリカラー",
      "default": "#6C63FF"
    },
    {
      "key": "ctaText",
      "type": "string",
      "label": "行動喚起",
      "default": "詳細を見る"
    }
  ],
  "fonts": {
    "google": [
      { "family": "Inter", "weights": [400, 600, 800] },
      { "family": "JetBrains Mono", "weights": [400] }
    ]
  },
  "composition": {
    "scenes": [
      {
        "name": "intro",
        "duration": 6,
        "layers": [
          {
            "type": "shape",
            "shape": "rectangle",
            "position": { "x": 960, "y": 540 },
            "size": { "width": 1920, "height": 1080 },
            "style": {
              "fill": "{{primaryColor}}",
              "opacity": 0.1
            }
          },
          {
            "type": "text",
            "text": "{{productName}}",
            "position": { "x": 960, "y": 400 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 800,
              "fontSize": 96,
              "color": "#FFFFFF",
              "textAlign": "center"
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "fadeInUp",
                "duration": 30,
                "delay": 15,
                "easing": "easeOutCubic"
              }
            ]
          },
          {
            "type": "text",
            "text": "{{tagline}}",
            "position": { "x": 960, "y": 520 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 400,
              "fontSize": 36,
              "color": "{{primaryColor}}",
              "textAlign": "center",
              "letterSpacing": 4
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "fadeIn",
                "duration": 25,
                "delay": 40,
                "easing": "easeOutSine"
              }
            ]
          },
          {
            "type": "shape",
            "shape": "rectangle",
            "position": { "x": 960, "y": 600 },
            "size": { "width": 80, "height": 3 },
            "style": {
              "fill": "{{primaryColor}}"
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "scaleIn",
                "duration": 20,
                "delay": 60,
                "easing": "easeOutQuart"
              }
            ]
          }
        ]
      },
      {
        "name": "product-showcase",
        "duration": 8,
        "transition": {
          "type": "slide",
          "duration": 0.8,
          "direction": "left"
        },
        "layers": [
          {
            "type": "image",
            "src": "{{heroImage}}",
            "position": { "x": 1200, "y": 540 },
            "size": { "width": 800, "height": 800 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "filters": [
              { "type": "brightness", "value": 1.1 },
              { "type": "contrast", "value": 1.05 }
            ],
            "animations": [
              {
                "type": "entrance",
                "effect": "zoomIn",
                "duration": 40,
                "easing": "easeOutBack"
              },
              {
                "type": "emphasis",
                "effect": "float",
                "duration": 120,
                "delay": 40,
                "loop": -1,
                "alternate": true
              }
            ]
          },
          {
            "type": "text",
            "text": "紹介します",
            "position": { "x": 400, "y": 350 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "JetBrains Mono",
              "fontSize": 18,
              "color": "{{primaryColor}}",
              "textTransform": "uppercase",
              "letterSpacing": 6
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "typewriter",
                "duration": 30,
                "delay": 10,
                "easing": "linear"
              }
            ]
          },
          {
            "type": "text",
            "text": "{{productName}}",
            "position": { "x": 400, "y": 430 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 800,
              "fontSize": 72,
              "color": "#FFFFFF"
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "revealLeft",
                "duration": 25,
                "delay": 20,
                "easing": "easeOutQuart"
              }
            ]
          },
          {
            "type": "text",
            "text": "{{tagline}}",
            "position": { "x": 400, "y": 520 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 400,
              "fontSize": 24,
              "color": "#CCCCCC",
              "lineHeight": 1.6
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "fadeInUp",
                "duration": 20,
                "delay": 40,
                "easing": "easeOutCubic"
              }
            ]
          }
        ]
      },
      {
        "name": "cta",
        "duration": 6,
        "transition": {
          "type": "fade",
          "duration": 1.2
        },
        "layers": [
          {
            "type": "shape",
            "shape": "rectangle",
            "position": { "x": 960, "y": 540 },
            "size": { "width": 1920, "height": 1080 },
            "style": {
              "fill": "{{primaryColor}}",
              "opacity": 0.15
            }
          },
          {
            "type": "text",
            "text": "{{productName}}",
            "position": { "x": 960, "y": 380 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 800,
              "fontSize": 80,
              "color": "#FFFFFF",
              "textAlign": "center"
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "bounceIn",
                "duration": 35,
                "easing": "easeOutElastic"
              }
            ]
          },
          {
            "type": "shape",
            "shape": "rectangle",
            "position": { "x": 960, "y": 550 },
            "size": { "width": 280, "height": 60 },
            "style": {
              "fill": "{{primaryColor}}",
              "borderRadius": 30
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "scaleIn",
                "duration": 25,
                "delay": 30,
                "easing": "easeOutBack"
              },
              {
                "type": "emphasis",
                "effect": "pulse",
                "duration": 60,
                "delay": 60,
                "loop": -1,
                "alternate": true
              }
            ]
          },
          {
            "type": "text",
            "text": "{{ctaText}}",
            "position": { "x": 960, "y": 550 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 600,
              "fontSize": 22,
              "color": "#FFFFFF",
              "textAlign": "center"
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "fadeIn",
                "duration": 20,
                "delay": 40,
                "easing": "easeOutSine"
              }
            ]
          }
        ]
      }
    ]
  }
}

このテンプレートは、3つのシーンで20秒の製品発売ビデオを作成します:段階的なテキストアニメーション付きのタイポグラフィイントロ、浮遊画像とタイプライター効果を持つ製品ショーケース、パルスボタン付きのクロージング行動喚起シーン。すべてのテキスト、色、画像はテンプレート変数によって駆動され、完全に再利用可能です。

次のステップ

レイヤーコンポーネントリファレンス – 完全なプロパティドキュメントと例を含む8つのレイヤータイプそれぞれの詳細
AI 統合 – LLM を使用したテンプレート生成とコンテンツ認識レンダリングを含む、AI を使用して Rendervid テンプレートを生成および操作する方法を学ぶ
デプロイメントガイド – 本番環境用に Rendervid をセットアップ:サーバーサイドレンダリング、クラウドデプロイメント、バッチ処理、API 統合

よくある質問

Rendervid のテンプレート形式とは何ですか?: Rendervid テンプレートは、ビデオまたは画像の構造、コンテンツ、アニメーション、および出力設定を定義する JSON ファイルです。各テンプレートには、出力設定(寸法、fps、継続時間)、動的変数の入力定義、シーンとレイヤーを含むコンポジション、およびオプションのフォントとカスタムコンポーネント設定が含まれています。
Rendervid でテンプレート変数はどのように機能しますか?: テンプレート変数は {{variableName}} 構文を使用します。テンプレートの inputs 配列で、key、type(string、number、boolean、color、url、array)、label、description、default value を定義します。レンダリング時に、これらの変数は実際の値に置き換えられ、テンプレートを再利用可能で動的にします。
Rendervid にはいくつのアニメーションプリセットがありますか?: Rendervid には、4つのカテゴリに分類された40種類以上の組み込みアニメーションプリセットが含まれています:エントランスアニメーション(fadeIn、slideIn、scaleIn、bounceIn など)、エグジットアニメーション(fadeOut、slideOut、zoomOut など)、エンファシスアニメーション(pulse、shake、bounce、swing、heartbeat など)、および30種類以上のイージング関数を使用した完全にカスタマイズ可能なキーフレームアニメーションです。
どのようなシーントランジションが利用できますか?: Rendervid は17種類のシーントランジションタイプを提供しています:cut、fade、zoom、slide、wipe、push、rotate、flip(3D)、blur、circle、glitch、dissolve、cube(3D)、swirl、diagonal-wipe、iris、crosszoom。各トランジションは、継続時間と方向パラメータで設定できます。
Rendervid はどのような出力形式をサポートしていますか?: Rendervid は、ビデオ用の MP4(H.264)、WebM(VP8/VP9)、MOV(ProRes)、GIF、および画像用の PNG、JPEG、WebP を含む複数の出力形式をサポートしています。H.265/HEVC や AV1 などの高度なコーデックもサポートされています。解像度は最大8K(7680x4320)で、フレームレートは1から120 fps までサポートされています。
Rendervid テンプレートでカスタムフォントを使用できますか?: はい、Rendervid は100種類以上の組み込み Google Fonts と、WOFF2、WOFF、TTF、OTF 形式の URL からのカスタムフォント読み込みをサポートしています。100-900のフォントウェイトを指定でき、クロスプラットフォーム互換性のためにプラットフォーム固有のフォールバックを設定できます。

あなた専用のAIチームを構築させてください

私たちは、あなたのような企業がスマートチャットボット、MCPサーバー、AIツール、またはその他の種類のAI自動化を開発し、組織内の反復的なタスクで人間を置き換えるお手伝いをします。

デモを予約する今すぐ試す

詳しく見る

Rendervid コンポーネント - レイヤータイプ、React コンポーネント、ビジュアルエディター

Rendervid の全コンポーネントを探索：8つの組み込みレイヤータイプ（テキスト、画像、動画、シェイプ、オーディオ、グループ、Lottie、カスタム）、構築済み React コンポーネント、ビジュアルテンプレートエディター、動画プレイヤー。完全な React サポートでカスタムコンポーネントを作成。...